js

Debugging RxJS code

This are undocumented internal details of RxJS and it can break anytime. It probably would have changed by the time you’re reading this blog post. But still, there can be something similar. Add a breakpoint on the line where it throws the error message On the call stack, go up a little until you can find the observable instance inspect it (usually it’ll be the this variable) check the _destination field and you may find the operator which is added after the faling operator (if there are any) if you inspect the destination operator, you may find callback functions you gave to that operator => your app code!
Read more

Debugging duplicate click events

While trying to debug this issue, we found out a couple of interesting things about how Angular manages event handlers. The double click event bug can be recreated easily with the following example app. The important parts are: The “click” Output of the button component: <button (click)="clicked($event)"> <ng-content></ng-content> </button> export class TestButtonComponent implements OnInit { @Output() click: EventEmitter<MouseEvent>; clicked(e: MouseEvent) { console.log('TestButtonComponent: clicked!'); this.click.emit(e) } ... } and the code which listens to the event:
Read more

FabricJS performance hack

The frame rate can be improved by only rendering inside a rAF callback. let isRendering = false; let isAnimating = false; const render = canvas.renderAll.bind(canvas); const stop = () => isAnimating = false; const play = () => { isAnimating = true; canvas.renderAll(); }; canvas.renderAll = () => { if (!isRendering) { isRendering = true; requestAnimationFrame(() => { render(); isRendering = false; if (isAnimating) { canvas.renderAll(); } }); } }; I started working with FabricJS this week so there’s a big chance things might break.
Read more

Getting the class in static methods

This is useful when writing static methods which can be inherited by other classes. Here’s an example: class Parent { static x() { return 10 } static y() { return 2 } static xy() { // return x * y ? } } class Child extends Person { static x() { return 100 } } console.log(Person.xy(), Child.xy()) The solution was so simple I feel bad it took me some time to figure it out.
Read more

Running async tasks sequentially

Let’s check this badly written example first. The sequence below will run each step asynchronously. // y = 2 * (x² + 5) const s1 = [ x => Promise.resolve(x * x), x => Promise.resolve(x + 5), x => Promise.resolve(x * 2), ] function runSequence(sequence, data) { return sequence.reduce((previous, task) => { return Promise.resolve(previous).then(task) }, data) } await runSequence(s1, 5) In this example, we want the result of the previous stage to get passed on as input to the following stage.
Read more

Rant: JavaScript import syntax

The import syntax on javascript looks damn ugly when many items from a module. Take this example piece of code form a typical GraphQL code: import { GraphQLObjectType, GraphQLString, GraphQLNonNull, GraphQLFloat, GraphQLList, GraphQLBoolean, } from 'graphql' The most important part of the statement, the module gets overshadowed by the list of items we’re importing from it. The module name would stand out more if we write it like this (warning: fake code ahead).
Read more

Transpiled JS on Github?

If you’re maintaining a javascript project on Github there’s a good chance you’re using a transpiler. Most developers don’t publish transpiled code to Github because it makes your pull requests look messed up and it’s difficult to keep source and transpiled code in sync. Why would anyone publish transpiled code anyways? For node modules, if transpiled code is available on Github, the module can be installed directly from Github. This can be useful for people who can’t use npmjs for some reasons.
Read more

Masking GraphQL Errors

The way graphql-js and express-graphql handle errors is has some issues. Consider this example server which has a bug in a resolve function. When the query “{ users }” is executed, the server will respond with the error message “User.find is not a function”. There are several problems with this behavior: [ 1 ] Error stacktraces are hidden When developing the application or when running it in production error stack traces are extremely useful to pinpoint issues.
Read more

Errors vs. Bugs

One of the most important things I learned during past few months at MeteorHacks is the difference between errors and bugs and how they should be handled. I also found this awesome article on Joyent website which talks about error handling in node. Errors can stop your program from working but the program can’t fix it (s.a. losing network connection). The program should be prepared to handle these events or you’re going to say “It works on my computer” a lot.
Read more

Isolated Testing

Just thought of sharing something about writing tests with JavaScript. Usually, it’s best to keep tests simple and test just one thing per test (the thing is most of the time just a function). If we use functions we’re about to test the way we use them in real programs, tests can get very lengthy and complicated easily. Usually we’ll have to write more boilerplate code than real test code. And even worse, tests may fail for the wrong reason.
Read more

Empty Function Shorthand

JavaScript is an interesting language and so far my favorite. Maybe it’s just me but I find stuff some people complain about javascript such as automatic semicolon insertion, the way javascript scoping works and function/variable hoisting to be some of its best features. Sometimes javascript functions may require Function arguments or callbacks when you don’t want to. This can happen often when you’re writing mock components for tests. I used to do this by
Read more

Aggregation for Firebase

Assume we need to create a realtime dashboard to show some summary values. Usually, with Firebase, we’ll have to get all data to the client and process them there. But this can only work for small data sets. If we have a few megabytes of data or more, this approach can get really slow. And we must aggregate values on each and every client application (web, mobile, etc). For this tutorial, both raw data and aggregated values will be stored in Firebase.
Read more

Elastic Iframes

Sometimes it become necessary to use iframes when building some web applications. Often we have them hidden but sometimes iframes can be useful visible too. For Node Knockout 2013, I was working with Meteorhacks on Open Comment Box. It’s like a self-hosted Disqus alternative. We kept the comments view inside an iframe to make sure it doesn’t clash with main website styles and for security reasons. The comment system is real-time.
Read more