thanish.me

Previously I wrote about how I attempted to host my (Ghost) blog on a DigitalOcean droplet. The plan was to use nginx as the reverse proxy and Let’s Encrypt for SSL. Unfortunately I had some issues running both Ghost and nginx in docker containers. As a temporary patch, I decided to use Cloudflare to resolve SSL. Just like before, I’m writing this post offline while setting up the server to make sure I don’t miss anything.

Here’s a basic diagram explaining how I’m planning to set it up. Both nginx and Ghost will be running inside Docker containers to keep the distro clean. Fig 1. diagram explaining the layout I’m using a DigitalOcean droplet ( referall link ) to host this blog. Just a standard droplet with the latest Ubuntu LTS 18.04 with backups enabled. Also added a network level firewall through the dashboard to only allow traffic through ports 22, 80 and 443.

Sometimes, we get to solve programming questions on site during software engineering interviews. This is one of the questions I used to ask from those who have applied for software engineering positions at Creately. A number of train engines are moving towards a common destination on the same track. Each train’s maximum speed and distance from the destination is given as an array. const trains = [ { id: 't1', distance: 1200, maxSpeed: 10 }, // .

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!

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:

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.

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.

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.

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

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.

For an example, if we set the GOPATH environment variable to /tmp/go1:/tmp/go2:/tmp/go3 all three of them will act as GOPATHs. GOPATH=/tmp/go1:/tmp/go2:/tmp/go3 But this raises a few questions. How will this affect “go get”? To test this out, simply set the GOPATH, and try go getting a simple repository. You may run these commands if you like. GOPATH=/tmp/go1:/tmp/go2:/tmp/go3 go get github.com/deis/helloworld find /tmp/ | grep helloworld | head -1 It will be clear that packages downloaded using the go get command will end up in /tmp/go1 or the first directory in the set of GOPATHs

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.

Github is without doubt one of the best things ever happened to open source software development. I, like many other FOSS developers, always use Github to host my projects. And like most of them I thought all of my public projects are by default open source. What we must understand here is that when we post our work online, it’s automatically protected by copyright laws unless we specify otherwise. This rule also applies to all Github repositories, both private and public.

All go packages except packages from the standard library are placed inside the $GOPATH. A package consists of a set of go files in a directory. All go files should have “package mypackage” line before other code. There can be only one package per directory. Although it’s not required It’s expected that the directory name and the package name to be equal. By default Go provides a very large standard library.

This tutorial consists of a number of example go programs demonstrating each feature. It is recommended to try some of them on the Go playground or on your local machine. Constants are declared using the const keyword. They can be declared with a data type but it’s not common. The “Hello World” string can be stored in a constant and printed. package main func main() { const hello = "Hello World" println(hello) } Variables Variables can be declared using the var keyword.

The go playground is where go code can be run easily and fast therefore it makes an efficient place to try new go code. This also makes the playground useful when learning how to program with Go. The Go playground with a very familiar go program The Go Playground is a web service that runs on golang.org’s servers. The service receives a Go program, compiles, links, and runs the program inside a sandbox, then returns the output.

TLDR - Operations count (b.N) can be set inside the function. Go benchmarks can be extremely useful when attempting to write performance critical applications. Both cpu and memory benchmarks can be written for Go programs. func BenchmarkHello(b *testing.B) { for i := 0; i < b.N; i++ { fmt.Sprintf("hello") } } In the above example, the fmt.Sprintf function is run b.N times in order to get a good measurement. The b.

I’m developing Node apps for years and started working with Go last month. So far, I like it as much as I like Node. So I hope to blog some quick tips about Go (aka Golang) for Node developers starting with the $GOPATH. I’ll start with some boring stuff and quickly move on to something useful. If you haven’t tried go yet, this is a good page to start. The $GOPATH It’s sort of like one path to rule them all solution.

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.

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.

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

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.

In this tutorial, I’ll try to walk you through building a simple realtime wall (like a guestbook) where anyone can post messages. And let’s try to do this without using any magic. Install Meteor and Atmosphere Installing Meteor Installing Atmosphere Create new project Just go to the directory you want to create the app and create a new meteor project using following command. meteor create the-wall Feel free to run the meteor app although we haven’t even started coding it yet.

Starting hacking on a project with Meteor is lots of fun. But things can become a mess very easily. Meteor does not have too much restrictions on how to organize our project files but it’ll be useful to know some of its ways. “packages” directory This is where all meteor and atmosphere packages are stored. And it’s a good place to store your own packages. If your projects contain any parts which does not change often and mostly independent from the rest of your project, you can create a package for that.

When I first started using Github, just like many others I simply went ahead and forked each and every repository I liked on Github. But this makes no sense at all. Fork because the site says “Fork me on Github” When they say that they are actually asking you to contribute to their project with code, tests, docs or other stuff at Github. Simply forking the repo and leaving it like that is no use to them.

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.

Elementary OS is one of the most beautiful operating systems I’ve ever used. Usually I mod my OS extremely but for the first time, I left most of the OS defaults as is. The operating system UI is really minimal and if you use wingpanel-slim with auto-hide you can save even more screen space. But when I enabled it in elementary tweaks, it worked after a few tries but never worked on system boot.

It’s really easy to create a new empty git branch with no parents (AKA orphan branches). First create an orphan branch with this command. git checkout --orphan newbranch Now you can remove any files in the directory and finally push it to a Github repository. git rm -rf * git push origin newbranch If you create branch in Github it’ll create the branch from master (which is what you’re going to do most of the time).