Posts on Minko Gechev's blog

skillgrade

Sat, 14 Mar 2026 00:00:00 +0000

skillgrade

A few weeks ago I wrote about Skill Eval, a framework for testing AI agent skills. The idea resonated — skills are becoming a critical part of how teams work with agents, and without a way to measure whether they work, you’re guessing.

The problem was that Skill Eval required too much setup. You had to clone a repo, understand a specific directory structure, write TypeScript config, and wire everything together before you could run your first eval. The barrier to entry was high for something that should be simple.

Unit Tests for AI Agent Skills

Thu, 26 Feb 2026 00:00:00 +0000

⭐ Find Skill Eval on GitHub

Unit Tests for AI Agent Skills

I’ve been working with AI coding agents daily - Antigravity, Gemini CLI, Claude Code, and others. One pattern I keep seeing is teams building skills for these agents: procedural instructions that teach the model how to use internal tools, follow specific workflows, or comply with team conventions.

The problem? There’s no way to know if they actually work. You write a text file, hand it to an agent, and hope for the best. When you tweak the instructions, you have no signal telling you whether that change made things better or worse. You’re flying blind.

You Should Care About AI

Fri, 07 Nov 2025 00:00:00 +0000

In conversations with developers lately I’ve been noticing a lot of discomfort when bringing AI. Talking to people and doing self-reflection I think there are a couple of reasons for this:

Overinflation. AI is certainly over hyped by some. People have business interests in raising money or increasing the valuation of their companies and they tend to exaggerated the capabilities of agents and language models. This makes it feel like we’re in yet another hype cycle that will pass, so why waste energy?
Fear. Developers see how AI automates some of the tasks they do. Combining this with the overinflation often leads to fear that software engineers will become obsolete. We already see how new grads are struggling to find jobs.

Overinflation

I’ve been using AI daily in my work over the past couple of years. I’ve been using it for coding, scaffolding documents, understanding stack traces, and so much more. It’s certainly not perfect and it is certainly over hyped by some. At the same time, there are thousands of use cases that are real and can improve your productivity.

Generative Development

Mon, 20 Oct 2025 00:00:00 +0000

Historically in my blog I’ve been posting 10-20 page deep-dive explorations in type theory, deep neural networks, predictive prefetching, etc. Recently, I’ve been thinking of taking a new approach with short snippets based on my current thinking about a particular topic.

Today, I’ll share high-level takes on developer workflows and how they can impact the tools we use.

LLMs enable velocity

We can certainly speed up our developer velocity using GenAI. Lately, I’ve been consistently using Gemini CLI and Cursor. Currently, I feel resistance when I have to write a piece of trivial logic, like create a login form or a chat interface from scratch. Agentic tools have enabled me to quickly iterate and test hypothesis. In this phase of the development process I rarely need to look at source code, unless something went terribly wrong. My focus in such early stages of exploration is on the output of whatever I’m building. Whether I’m developing an agent, web UI, or a compiler, I’d create multiple prototypes using agentic tools and entirely focus on the output the prototypes without looking at the implementation. Based on the outputs, I decide which prototype I’d like to move forward with.

LLM-first Web Framework

Sat, 19 Apr 2025 00:00:00 +0000

The opinions stated here are my own, not necessarily those of my employer.

Over the past few weeks I’ve been thinking about how we can make a framework easier for AI. In particular I’ve been only focused on building user interface. When we add a backend, database, and communication protocol across the backend and the frontend, we get another set of problems that could be a good fit for another post and exploration.

Reactive framework in ~200 lines of JavaScript

Thu, 09 Jan 2025 00:00:00 +0000

One of my current projects is converging Angular and Wiz into the same framework. This is a complex projects that involves a lot of work and many people. It also got me thinking about different client-side rendering models. In this blog post I’ll show a very simple library that enables you to develop components with fine-grained reactivity. To make it easier to talk about this library, I called it “revolt.”

You can find the implementation in my repo on GitHub.

Managing Angular

Sun, 25 Aug 2024 00:00:00 +0000

Over the past couple of years, I’ve been the product lead for Angular. In this article, I’d like to share how we’ve been managing the framework. Keep in mind this content lives on my personal blog for a reason - it represents my point of view and doesn’t share a complete picture of all the processes within the team, such as people management, program management, etc. Also, that’s the second time I’m writing this article. The first time, I wanted to be as descriptive as possible and stopped writing at about thirty pages, after which I deleted the content and decided to start over. Today, I’ll keep it short with the caveat that I’ll skip some important details and keep it on a high level.

Are LLMs going to replace us?

Tue, 28 May 2024 00:00:00 +0000

Over the past few years, I have published most of my posts on blog.angular.dev and my blog has received little attention. Today, I decided to share something that has been on the mind lately. It’s inspired by a mixture of one of the most memorable moments from my university classes and the recent boom of AI. Through the lens of the theory of computation I’ll attempt to answer the question, “Are we going to be replaced by AI?”

Prefetching Heuristics

Sun, 07 Feb 2021 00:00:00 +0000

In this post, we’re going to focus on web performance. In particular, we’ll be discussing optimizing user experiences preemptively. When it comes down to speeding future actions up in Web UI development, we usually apply prefetching. With prefetching, we download and cache resources relying on assumptions for the user’s behavior. This way, we proactively perform a slow operation that the user would eventually have to execute while interacting with the app.

Design Patterns in Open Source Projects - Part II

Sun, 24 Jan 2021 00:00:00 +0000

This blog post introduces another design pattern into the context of ngrev. If you’re not yet familiar with the project, I’d strongly recommend taking 2 minutes to the introduction and “Project Overview” sections in the first part of the series.

If you did not take the time, ngrev is an Electron app that visualizes the structure of an Angular app, showing the relationships between components, modules, and providers. The UI retrieves the data for each view using an instance of a state object. You can read more about the state pattern and its application in ngrev here.

Design Patterns in Open Source Projects - Part I

Mon, 18 Jan 2021 00:00:00 +0000

I see two common frustrations around design patterns:

It’s easy to memorize patterns but hard to figure out where and how to use them
OOP is lame, and design patterns suck

If the second bullet point resonates with you, this blog post is probably not a good use of your time.

Now let’s focus on the first point. It’s not easy to understand design patterns just by reading the gang of four book or dummy examples on Wikipedia. That’s why I want to share a couple of real-world applications in open source projects that you can see and run yourself.

What I learned doing 125 public talks - Part I

Thu, 26 Nov 2020 00:00:00 +0000

Over the past 7 years, I gave over 125+ talks for 20 countries in front of over 50,000+ people. By any means, this doesn’t make me an expert in public speaking, but I had the opportunity to learn a few things that I’d love to share.

I’ll spread the content between a couple of different posts covering everything from planning, preparing the talk, rehearsals, and presentation at the event. I’d not discuss research, but this phase will naturally produce artifacts for the planning process.

Dynamic imports solve all the problems, right?

Sat, 11 May 2019 00:00:00 +0000

Since Angular version 8, we support dynamic imports in loadChildren in the route declaration. In this article, I want to give more information about why dynamic imports could be tricky to handle from tooling perspective and why you should be careful with them.

As engineers, we often have the perception that dynamic == good. With statically typed languages, such as TypeScript, this has shifted over the years. Because of compile-time checking, more folks started appreciating what tooling can give us if we provide statically analyzable information at build time.

5 Angular CLI Features You Didn't Know About

Wed, 06 Feb 2019 00:00:00 +0000

I’ve been using Angular for years, not only the framework itself but the entire development platform, including the CLI. Since I joined the Angular team and started digging into the source code, however, I started noticing features in the CLI that I’ve never used before. In this blog post I want to share some of them, which will make your work life easier and more productive!

Conditional Polyfill Serving

In the development of Angular we’re using TypeScript with a lot of modern JavaScript features. Not all of them are supported by the users’ browsers so that’s why as part of the production build we ship a file called polyfills.js, which provides features such as Map, Set, zones.js, etc.

Angular quicklink Preloading Strategy

Mon, 24 Dec 2018 00:00:00 +0000

A few months ago I posted an article about Guess.js. Guess.js is a powerful library for predictive prefetching of JavaScript based on analytics data for a website. The library consumes reports from an analytics source (by default Google Analytics) and builds a basic machine learning model. When a user visits the site, based on the model Guess.js prefetches resources which are likely to be needed next. Thanks to the data-driven approach, Guess.js offers many benefits - reduces over fetching, does not perform aggressive prefetching on slow networks, etc.

Introducing Bazel Schematics for Angular CLI

Mon, 17 Dec 2018 00:00:00 +0000

In this blog post, we want to share our new schematics for Angular CLI which provide Bazel build support. You can find the implementation by Keen Liau on GitHub. With the @angular/bazel package, we want to let developers use Angular CLI with Bazel as a build tool.

What’s Bazel?

Google open sourced the software responsible for building most of our projects under the name Bazel. Bazel is a powerful tool which can keep track of the dependencies between different packages and build targets.

Building TypeScript Projects with Bazel

Mon, 19 Nov 2018 00:00:00 +0000

In this blog post, we’ll make a brief introduction to what Bazel is and how we can build our TypeScript projects with it. If you’re already familiar with the problems that Bazel solves, feel free to skip to the section “Building TypeScript with Bazel.” You can find the example from this blog post in my GitHub account.

Inside Google’s CI

Google manages a massive amount of source code. There are dependencies between the individual projects, for example, the user interface of Google Cloud depends on Angular & Angular Material, Angular Material depends on Angular, which depends on TypeScript.

Joining Google

Fri, 02 Nov 2018 00:00:00 +0000

The past five years I’ve been heavily involved in the startup space, both, here in the Silicon Valley and Bulgaria. My focus was EdTech, working on different educational products, starting with an app for kids, to a platform for online education, marketing, and sales demos which provides access to a virtual environment in the browser. In the second company called Rhyme, which is particularly exciting and technically challenging, I had the opportunity to join as a co-founder.

Playing Mortal Kombat with TensorFlow.js. Transfer learning and data augmentation

Sat, 20 Oct 2018 00:00:00 +0000

While experimenting with enhancements of the prediction model of Guess.js, I started looking at deep learning. I’ve focused mainly on recurrent neural networks (RNNs), specifically LSTM because of their “unreasonable effectiveness” in the domain of Guess.js. In the same time, I started playing with convolutional neural networks (CNNs), which although less traditionally, are also often used for time series. CNNs are usually used for image classification, recognition, and detection.

Controlling MK.js with TensorFlow.js

You can find the source code for this article and MK.js in my GitHub account. I haven't shared the dataset that I used for training but feel free to collect your own and train the model as described below! Also, to get an idea of how everything works together, feel free to play around with the widgets below.

After playing around with CNNs, I remembered an experiment I did a few years ago, when the browser vendors introduced the getUserMedia API. In this experiment, I used the user’s camera as a controller for playing a small JavaScript clone of Mortal Kombat 3. You can find the game at my GitHub account. As part of the experiment, I implemented a basic posture detection algorithm which classifies an image into the following classes:

Fast, extensible, configurable, and beautiful linter for Go

Mon, 28 May 2018 00:00:00 +0000

About a year ago I decided to polish my Go skills. Although the language is pretty small compared to most others that I use on a daily basis, it still has some useful syntax constructs that I didn’t use enough. What a better way to brush up your skills in a programming language other than building tools with it…for analyzing programs written in it?

You can find revive on GitHub at github.com/mgechev/revive.

Introducing Revive

When I started using Go, a few years ago, I noticed how opinionated the ecosystem was. First, the syntax of the language is very minimalistic. Such property reduces the expressiveness but also makes the code much easier to read, compared to languages such as Perl and Ruby.

Introducing Guess.js - a toolkit for enabling data-driven user-experiences on the Web

Wed, 09 May 2018 00:00:00 +0000

About two months ago I published my initial research^[1] on data-driven bundling. A few weeks after that, I had the opportunity to present my work on RenderConf in Oxford, UK in my talk “Teach Your Bundler Users’ Habits”^[2].

The original goal of the article was to show how data can help in improving the user-perceived page load performance by using predictive analytics^[3]. The artifacts from the article were executable node modules which can be used for predictive pre-fetching & data-driven clustering of JavaScript chunks.

Machine Learning-Driven Bundling. The Future of JavaScript Tooling.

Sun, 18 Mar 2018 00:00:00 +0000

In this article, I’ll introduce the early implementation of a few tools which based on techniques from the machine learning allow us to perform data-driven chunk clustering and pre-fetching for single-page applications. The purpose is to provide a zero-configuration mechanism which based on data from Google Analytics for the users’ behavior performs the most optimal build. We’re also going to introduce a webpack plugin which works with Angular CLI and Create React App.

JavaScript Decorators for Declarative and Readable Code

Mon, 29 Jan 2018 00:00:00 +0000

Decorators in JavaScript are now in stage 2. They allow us to alter the definition of a class, method, or a property. There are already a few neat libraries which provide decorators and make our life easier by allowing us to write more declarative code with better performance characteristics.

In this blog post I’ll share a few decorators which I’m using on a daily basis. We’ll take a look at:

How to write more efficient React components with @autobind
How to cache results of computations using @memo
Improving separation of concerns and cohesion with aspect.js’s @beforeMethod and @afterMethod
Developing more decoupled code using Angular’s dependency injection with injection-js

Autobind

Autobind is a decorator which allows given method to be automatically bound to a class instance. For example:

3 Tricks For Using Redux and Immutable.js with TypeScript

Thu, 18 Jan 2018 00:00:00 +0000

In this post, I’ll show you a few tricks which can make your life using Immutable.js and Redux with TypeScript easier. All the practices are inspired by my recent work on the project Rhyme.com.

Immutable Statically Typed Records

Let’s start with the definition of our store. For the purpose I prefer to use Immutable records because of two main reasons:

Immutable stores make the mutation more explicit and well organized.
Records allow convenient property access.

Now let’s suppose we have the domain object VirtualMachine. We can define a well-typed record using the following definition:

Follow Your Dream Career with Open Source. Personal Story.

Thu, 28 Dec 2017 00:00:00 +0000

This time I’ll violate my principle to write only about purely technical topics on my blog. In the next a couple of paragraphs, I’ll talk about open source software development from a personal perspective. Here are some of the ideas that you can find below:

Explanation what open source software is.
The bright sides and dark corners of contributing to open source software projects.
Some of the great opportunities that the development of open source software can provide to us, as individuals and professionals.
How we can grow as software developers by contributing back to the community.
What’s the impact of the open source projects on a global level?

To support my statements, for each section I’ll give concrete examples from my own career.

Redux Anti-Patterns - Part 1. State Management.

Thu, 07 Dec 2017 00:00:00 +0000

For the past year I’ve been working on a project which uses React with TypeScript and Redux. In a few blog posts I’m planning to share lessons learned while combining these technologies. In this article I’ll share a few anti-patterns related to state management that I noticed in our development process. In the second article I’ll focus on testability.

All of the anti-patterns below have the following structure:

Introduction
Problem definition
Sample solutions with discussion of their pros and cons

State Duplication

Sometimes we have instances of the same business entity used in different contexts. In such cases, instead of keeping the instances under the same store property we treat them differently.

Faster Angular Applications - Understanding Differs. Developing a Custom IterableDiffer

Fri, 17 Nov 2017 00:00:00 +0000

In this article we’ll take a look at another Angular abstraction - the differs and more specifically the IterableDiffer; we’ll explain what the differs are and how the framework uses them internally. After that, we’ll take a look at how NgForOf works and design a custom data structure optimized for the directive. Finally, we’ll develop a custom differ which will speed up the change detection mechanism of Angular when working with large collections.

Faster Angular Applications - Part 2. Pure Pipes, Pure Functions and Memoization

Sun, 12 Nov 2017 00:00:00 +0000

In this post, we’ll focus on techniques from functional programming we can apply to improve the performance of our applications, more specifically pure pipes, memoization, and referential transparency. If you haven’t read the first part of the “Faster Angular Applications” series, I’d recommend you to take a look at it or at least get familiar with the structure of the business application that we’re optimizing.

The code for this blog post is available at my GitHub account:

Faster Angular Applications - Part 1. On Push Change Detection and Immutability

Sat, 11 Nov 2017 00:00:00 +0000

On AngularConnect 2017 in London, I gave a talk called “Purely Fast.” In the presentation, I showed how step by step we can improve the performance of a business application. In the example, I incorporated as many performance issues as possible which I faced over the past a couple of years developing enterprise Angular and AngularJS applications. After the presentation, I got great feedback for the content, so I decided to write a series of blog posts which aim to explain the content from “Purely Fast” in details.

Understanding Dynamic Scoping and TemplateRef

Sun, 01 Oct 2017 00:00:00 +0000

This post will be dedicated to template references in Angular and dynamic scoping. Although the main focus of the article will be understanding TemplateRef we will also touch semantics of programming languages by introducing the concept of scope of name binding.

The code samples for this article can be found in my GitHub account.

Introducing Template References

In order to understand TemplateRef lets take a look at the NgForOf directive. Suppose we have a list of puppies and we want to iterate over it in the PuppyListComponent. The Puppy interface will look like this:

Implementing a Simple Compiler on 25 Lines of JavaScript

Sat, 16 Sep 2017 00:00:00 +0000

I already wrote a couple of essays related to the development of programming languages that I was extremely excited about! For instance, in “Static Code Analysis of Angular 2 and TypeScript Projects"^[1] I explored the basics of the front end of the compilers, explaining the phases of lexical analysis, syntax analysis and abstract-syntax trees.

Recently I published “Developing Statically Typed Programming Language"^[2]. This post shown a simple, statically typed, functional programming language inspired by lambda calculus. There I outsourced the front end part of the compiler development to a parser generator and focused on the back end in the faces of a module for type checking and one for code generation.

Developing Statically Typed Programming Language

Sat, 05 Aug 2017 00:00:00 +0000

In this blog post we’ll go through a sample implementation of a type checker, interpreter and a transpiler for a basic purely functional programming language, which is based on the lambda calculus. We will do a “full-stack” programming language development by going through formal definition of the language’s syntax, semantics and type system. After that we’ll demonstrate how we can “translate” these definitions to JavaScript.

Although the article doesn’t require any mathematical background, it’ll be useful to have high-level understanding of how compilers work. The article is inspired by the book “Types and Programming Languages”.

WebVR for a Gamified IDE

Sun, 25 Jun 2017 00:00:00 +0000

In the first part of this blog post I discuss the idea of using virtual reality for gamification of manual tasks in the software development process. I introduce a demo project which allows source code visualization and manipulation in a generated Minecraft-like virtual reality. My initial presentation of the demo project was on ngconf 2017, and the project’s extension I presented on AngularUP 2017 during my talks “Mad Science with the Angular Compiler”.

7 Angular Tools That You Should Consider

Sun, 23 Apr 2017 00:00:00 +0000

In this article we’re going to quickly explore 7 Angular development tools which can make our everyday life easier. The purpose of the list is to not be opinionated architecture wise. This means that we’re not going to discuss tooling which has impact over our choice of application state management, data layer, etc. For instance, although packages like ngrx/store devtools, universal, and others are amazing once we’ve chosen a specific architectural approach, we’re going to keep them out of this article because they assume we’re using a specific way of state management or application rendering.

Announcing ngrev - Reverse Engineering Tool for Angular

Sun, 09 Apr 2017 00:00:00 +0000

Have you ever been hired to work on a huge legacy Angular project with thousands of NgModules, components, directives, pipes and services? Neither do I. Angular (2 and above) is still relatively new framework and there are not many enormous projects out there. On the other hand, Angular is powerful and in combination with TypeScript we can build big, enterprise applications.

Exploring an Application

It’s hard to start digging into a large codebase without being aware of the overall structure of the project. We can very easily get trapped and start digging into details without first getting familiar with the core abstractions of the application.

Implementing Angular's Dependency Injection in React. Understanding Element Injectors.

Mon, 30 Jan 2017 00:00:00 +0000

Recently I’ve been blogging mostly about Angular and it’s not by accident! Angular is an amazing framework, bringing a lot of innovation to the front-end technologies, with a great community behind it. In the same time, the projects that I’m working on have various of different requirements and sometimes I need to consider different options.

Another great technology that I’ve used in the past is React. I don’t want to compare it with Angular; I’m sure there are variety of cases when one of them fits better compared to the other and visa versa. I respect the philosophy of both Angular and React, and I love seeing how they move Web forward!

Distributing an Angular Library - The Brief Guide

Sat, 21 Jan 2017 00:00:00 +0000

In this post I’ll quickly explain the minimum you need to know in order to publish an Angular component to npm. By the end of the post you’ll know how your module can:

Be platform independent (i.e. run in Web Workers, Universal).
Should be bundled and distributed.
Work with the Angular’s Ahead-of-Time compiler.
Play well with TypeScript by allowing autocompletion and compile-time type checking.

If you’re only interested in a quick checklist of things you need to consider for distributing your Angular library, go directly to the “Distributing an Angular Library - Checklist” section.

Angular in Production

Tue, 17 Jan 2017 00:00:00 +0000

In this informal essay I’ll go through a case study of my experience in using Angular (2 and above) in production.

Last April, together with a small team, we started working on an educational application; the second version of a product that I developed about 3 years ago using Angular 1.

The product targets young kids and their parents. It’s purpose is to motivate kids to learn maths by earning rewards. The application had an iOS version with hundreds of thousands of users and we wanted to provide similar experience in the browser. We bet on mobile-first approach, since we were targeting kids playing on their tablets and phones.

Ahead-of-Time Compilation in Angular

Sun, 14 Aug 2016 00:00:00 +0000

Recently I added Ahead-of-Time (AoT) compilation support to angular-seed and got a lot of questions about the new feature. In order to answer most of them, we will start from the beginning by explaining the following topics:

Why we need compilation in Angular?
What needs to be compiled?
How it gets compiled?
When the compilation takes place? Just-in-Time (JiT) vs Ahead-of-Time (AoT).
What we get from AoT?
How the AoT compilation works?
Do we loose anything from using AoT vs JiT?

Why we need compilation in Angular?

The short answer of this question is - We need compilation for achieving higher level of efficiency of our Angular applications. By efficiency I mostly mean performance improvements but also energy and sometimes bandwidth consumption.

2.5X Smaller Angular 2 Applications with Google Closure Compiler

Thu, 21 Jul 2016 00:00:00 +0000

In the post “Building an Angular 2 Application for Production” we explored how we can decrease the bundle size of a “Hello world!” application to from about 1.6M (non-minified & uncompressed) to 49K! We did this by using the following techniques:

Angular offline template compiler for generating tree-shakable code.
Tree-shaking of ES2015 modules with rollup.
Bundling of the application.
Minification with uglifyjs.
Compression with gzip.

Although we achieved impressive results we can do even better! In this post I’ll show some of the work done by Alex Eagle and Jeff Cross from the Angular core team.

Using Stripe with Angular (Deprecated)

Tue, 05 Jul 2016 00:00:00 +0000

The content in this post uses deprecated APIs

To learn about the latest version of the Stripe APIs check out their documentation page.

Stripe offer a set of APIs which allow businesses and individuals to easily accept and manage payments online. In a typical scenario you want your users to pay for a service that you’re offering using Stripe as a mediator.

Building an Angular Application for Production

Sun, 26 Jun 2016 00:00:00 +0000

Progressive Web Applications help us build native-like web apps, thanks to amazing tools such as Service Workers, IndexDB, App Shell etc. Once the browser downloads all the static assets required by our app, the active Service Worker can cache them locally.

This way the user may experience slowdown during the initial page load, but each next time she opens the application her experience will be instant!

In order to help developers take advantage of the technologies behind the PWA as easy as possible, the Angular team is working on the Angular mobile-toolkit. However, a big concern for developing high-performance Angular apps is the framework size itself. For instance, a simple non-optimized “Hello world!” Angular application, bundled with browserify is 1.4MB! This is suicidal when your users are supposed to download it via an unreliable 3G connection.

Implementing the Missing "resolve" Feature of the Angular 2 Router

Sat, 21 May 2016 00:00:00 +0000

For the last a couple of months I’m working on an Angular 2 based PWA. The more complex the application gets, the more I appreciate that our choice was Angular! For routing we’re using the initial Angular 2 router that is now deprecated. For sure we will migrate to the newest one once it gets stable but until then we have some problems to solve.

One of the features that I miss most in both the new and the newest Angular 2 routes is the resolve functionality which the AngularJS 1.x router and the ui-router offer. In short, this functionality allows your application to load data on navigation events and render the routing component once the data has been successfully downloaded.

Scalable Single-Page Application Architecture

Sun, 10 Apr 2016 00:00:00 +0000

In order to have better understanding of the following blog post you should be familiar with the fundamentals of the object-oriented and functional programming. I also strongly encourage you to explore the redux pattern.

A couple of months ago I started working on the first version of a Silicon Valley-based startup. The project is a single-page application with quite dynamic business requirements. As in most modern single-page applications we have a fat client which encapsulates decent amount of business logic and state.

Managing ambient type definitions and dealing with the "Duplicate identifier" TypeScript error

Mon, 28 Mar 2016 00:00:00 +0000

Maintaining the angular-seed, I found out that the most common problem for developers using the project is:

 Duplicate identifier 'export='. (2300)

compilation error.

In this quick tutorial I’ll show what does this error mean and how you can fix it. In order to get better understanding of the problem we’ll discuss the differences between TypeScript and JavaScript, as well as ambient type definitions and @types.

Intro

Before getting any further we need to tell a few words about the ambient type definitions of TypeScript.

Static Code Analysis of Angular 2 and TypeScript Projects

Mon, 29 Feb 2016 00:00:00 +0000

So far, most of the blog posts I’ve written are tutorials; they explain how we can use given technologies, architectures, algorithm etc. For instance:

The code for the current research could be found here and here.

The current post is about an exciting project I am working on in my spare time. A few days ago I explained my motivation behind the “Community-drive Style Guide” for Angular 2 that we’re working on. I also mentioned that I am planning to build a configurable static-code analyzer, which makes sure given project follows best practices and contains “correct” Angular 2 code. I called this project ng2lint.

Enforcing Best Practices with Static Code Analysis of Angular 2 Projects

Thu, 18 Feb 2016 00:00:00 +0000

About two weeks ago I published the initial draft of a Community-driven Angular 2 Style Guide. It was based on:

Patterns I noticed in the Angular 2 source code while contributing to the framework.
Suggestions by Miško Hevery during his technical review of my book “Switching to Angular 2”.
My own development experience with Angular 2.
AngularJS 1.x common practices which could be applied to Angular 2 applications keeping the transition process smoother.

ViewChildren and ContentChildren in Angular

Sat, 23 Jan 2016 00:00:00 +0000

In this article I’m going to explain the difference between the concepts of view children and content children in Angular. We will take a look at how we can pass access these two different kinds of children from their parent component. Along the content we are also going to mention what the difference between the properties providers and viewProviders of the @Component decorator is.

You can find the source code of the current article at my GitHub account. So lets our journey begin!

Dynamically Configuring the Angular's Router

Wed, 30 Dec 2015 00:00:00 +0000

Warning: This version of the Angular 2 router is now deprecated! This means that soon the used below APIs will no longer be available.

A couple of months ago I wrote “Lazy Loading of Route Components in Angular 2”, where I explained how we can take advantage of the AsyncRoutes and the virtual proxy pattern in Angular 2.

This way we can incrementally load the entire application by only requesting the resources required for the individual views. As result we will decrease the initial load time, which will dramatically improve the user’s experience.

Angular 2 Hot Loader

Mon, 26 Oct 2015 00:00:00 +0000

A couple of months ago I watched a few talks from ReactEurope. I was truly impressed by a few of them and especially by the one by Dan Abramov on redux and his hot loader. The tool he shown helps you do something similar to live-reload with one big difference. When you change the code of any of the components in your react application, the new version of the component is send to the application itself where all its instances are patched so the changes you did to be visible. This way the new, changed implementation of the component is rendered on the screen with all the attached functionality to it. In contrast to live-reload, your application does not need to be refreshed when you make a change in your code. This way the current state of the application (selected page/view, fields of your models/store) can be preserved across updates. Although this looks amazingly awesome, the idea and the implementation behind the hot loading is quite clear, especially after Dan’s talk. We will take a look at the basic idea in the implementation below.

Lazy Loading of Route Components in Angular 2

Wed, 30 Sep 2015 00:00:00 +0000

Warning: This version of the Angular 2 router is now deprecated! This means that soon the used below APIs will no longer be available.

For the examples in the content below I’ve used the angular2-seed project. The code for the article could be found at my GitHub account.

This blog post is mostly about performance and more accurately - lazy loading. Before we get started lets make a quick recap of what problem we’re about to solve.

Aspect-Oriented Programming in JavaScript

Wed, 29 Jul 2015 00:00:00 +0000

Note: The following blog post is based on the library aspect.js, which can be found here.

The object-oriented programming paradigm is powerful. We design an OO system by decomposition of the problem domain, following guiding principles concerning the decomposition and the communication between the different modules. The process is structured; it involves logical thinking, understanding of the domain and eventual predictions for the future evolution of the system. Often we’re trying to keep our code DRY (not always), highly coherent and loosely coupled. However, in some cases this is just impossible. There are some code snippets we’re just blindly copying and pasting all around our code base.

Flux in Depth. Store and Network Communication.

Sat, 18 Jul 2015 00:00:00 +0000

This is the second, and probably be the last, blog post of the series “Flux in Depth”. In the first post we did a quick overview of flux, took a look at the stateless, pure components, immutable data structures and component communication. This time, we’re going to introduce the store and how we can communicate with services through the network via HTTP, WebSocket or WebRTC. Since the flux architecture doesn’t define a way of communication with external services, here you can find my way of dealing with network communication. If you have any suggestions or opinions, do not hesitate to leave a comment.

Using JSX with TypeScript

Sun, 05 Jul 2015 00:00:00 +0000

JavaScript is a weird language although, we love it the way it is. However, I’ve had quite a painful experience working on big JavaScript projects. It was painful in the same way it gets painful working on huge Ruby, Python, PHP projects.

Once you have code base above 10-15k lines of code and you decide to do some refactoring…well it gets messy. Although grep and sed are powerful tools for text manipulation, when you start replacing code with them, you’re missing the semantics (or the context) of the snippets you substitute.

Flux in Depth. Overview and Components.

Fri, 15 May 2015 00:00:00 +0000

This is the first blog post of the series “Flux in Depth”. Is this “yet the another flux tutorial”? What I have seen so far, while researching flux, were mostly “how-to” tutorials (usually with todo applications), which describe the main components of given flux application and the data flow between them. This is definitely useful for getting a high-level overview of how everything works but in reality there are plenty of other things, which should be taken under consideration. In this series of posts I will try to wire theory with practice and state my own solutions of problem I face on daily basis. Since these solutions might not be perfect, I’d really appreciate giving your opinion in the comments section below.

Even Faster AngularJS Data Structures

Mon, 20 Apr 2015 00:00:00 +0000

This is the last post of the series “Boost the Performance of an AngularJS Application Using Immutable Data”. I strongly recommend you to take a look at the previous two parts before continue reading this content. You can find them at:

Introduction

Before about a month ago, I decided to experiment using immutable data structures in an AngularJS application. The goal behind my decision was quite simple - optimization of the $digest loop. How immutability could help? Immutable data cannot change after being created. The execution of each operation, which changes the immutable collection (add, delete, set) will create of a new data structure but will leave the initial data unchanged. This way we know that a watched expression, which evaluation results a collection, have changed if and only if its current reference differs from the previous one. This speeds up the change detection of the expression from O(n) to O(1), i.e. instead of watching collection with $watchCollection(expr, fn), we can afford $watch(expr, fn, false), instead.

Boost the Performance of an AngularJS Application Using Immutable Data - Part 2

Sat, 11 Apr 2015 00:00:00 +0000

A few weeks ago I posted the article “Boost the Performance of an AngularJS Application Using Immutable Data”. It shows how to speedup your AngularJS application when having a lot of bindings to big data collections. The idea behind the optimization is quite simple - create a new collection when the data changes. This way you can reduce the watchers execution from O(n) to O(1).

In the post I did simple profiling using the built-in Date but it didn’t give enough information in exactly which cases it is more suitable to use immutable data and when you should bet on the standard collections. It also didn’t include any information about the garbage collection, although we know that using immutable collections will eventually lead to highly intensive memory management. All the code for the benchmarks and the charts generation is available in my GitHub account.

Angular2 - First Impressions

Mon, 06 Apr 2015 00:00:00 +0000

On 18th of September 2014 was pushed the initial commit of version 2.0 of the AngularJS framework. A few weeks ago the core team at Google, published AngularJS’ 2.0 website and gave a couple of talks on ng-conf about their new router, change detection, templating, etc. I’m passionate about AngularJS since its early versions so I decided give it a try using the quick start. In the meantime I and also created an angular2-seed project for my test, dummy projects. In order to have a better understanding of what is going on (and handle the lack of documentation) I dug inside their source code. I had great time doing this, what I saw was one of the most well written and smartest pieces of software I’ve ever read. Soon I’m planning to expand my paper “AngularJS in Patterns” with design patterns used inside Angular2.

Build Your own Simplified AngularJS in 200 Lines of JavaScript

Mon, 09 Mar 2015 00:00:00 +0000

My practice proved that there are two good/easy ways to learn a new technology:

Re-implement it by your own
See how the concepts you already know fit in it

In some cases the first approach is too big overhead. For instance, if you want to understand how the kernel works it is far too complex and slow to re-implement it. It might work to implement a light version of it (a model), which abstracts components that are not interesting for your learning purposes.

Persistent State of ReactJS Component

Thu, 05 Mar 2015 00:00:00 +0000

ReactJS is a framework, by facebook, which adds some well known concepts into the UI development. Each UI could be represented as a state machine but when the state of this state machine could be changed from a lot of places everything gets quite messy, complex and buggy. Given view may be rendered differently with the same model passed as parameter if it depends on some global data. A properly implemented ReactJS component, will be rendered the same way when the same “input parameters” are passed to it. This is based on the well known idea of the pure functions (to be more precise the idea is similar but not the same, because each component may have its own state, which can change).

Boost the Performance of an AngularJS Application Using Immutable Data

Mon, 02 Mar 2015 00:00:00 +0000

I have affinity to functional programming since my first year in college. During my initial contact with a purely functional programming language (Haskell in my case) I didn’t really understand all the advantages it provides, everything was reduced to just writing a cool recursive functions and solving algorithmic problems.

Later, when my code was used in production, I started appreciating things like high-order functions, closures, currying, etc. I even wrote a blog post on topic “Functional programming with JavaScript”.

Processing Binary Protocols with Client-Side JavaScript

Fri, 06 Feb 2015 00:00:00 +0000

Last couple of weeks I’m trying to build high-performance consumption of binary protocol through the browser. The protocol is running over TCP. In the perfect world I’d be talking with the remote TCP server, through TCP sockets, connecting directly from the client-side JavaScript and consuming the received binary data.

Because of limitations of the client-side API, JavaScript doesn’t has access to plain TCP sockets, there’s no full happiness. The second best option would be to use intermediate proxy, which:

Stream your Desktop to HTML5 Video Element

Wed, 31 Dec 2014 00:00:00 +0000

In this blog post I’ll share how you can stream your desktop to HTML5 video element.

All you need is VLC video player and web browser, which supports HTML5.

How to…

Open VLC and select “Open Capture Device”:

As next step chose “Capture” and from the drop down below select “Screen”. Adjust the frame rate and mark the checkbox “Streaming/Saving:”

Click settings and select that you want to “Stream” the video (from the radio buttons), after that for stream type select “HTTP” and for “Encapsulation Method” “OGG”. Fill the address to be: “127.0.0.1” and from the “Transcoding options” chose “Video” and select “theo”. Select appropriate bitrate and scale:

Multi-User Video Conference with WebRTC

Fri, 26 Dec 2014 00:00:00 +0000

This is a tutorial for how to implement a multi-user video conference with WebRTC, AngularJS and Yeoman. It also includes a detailed explanation of how WebRTC works, how the peer to peer connections are being established and how the ICE (Interactive-Connectivity Establishment) framework is used for NAT traversal.

You can find deployed version of the project, we’re going to take a look at in this tutorial, at Heroku, the source code can be found at GitHub.

Asynchronous calls with ES6 generators

Sun, 21 Dec 2014 00:00:00 +0000

ES6 generators have landed in Chrome 39 Beta on 9th of October and are already available in the stable version. This means that brand new development practices are already applicable, although for supporting older browsers you might need to fallback to the traceroute compiler.

A cool module, which TJ developed, called co, is available for quite a while (his initial commit in the co repository was on 6th of June 2013).

A few months ago Jake Archibald wrote an article about the awesomeness of the async functions in ES7 and how we can “emulate” them using ES6’s generators, using his spawn function, which has subset of the features of co.

Binary Tree iterator with ES6 generators

Fri, 12 Sep 2014 19:07:34 +0000

ES6 specification is being clarified every passed day! One of the key features of the new version of the language are the generators. Generators (a.k.a. semicoroutines) will play quite important role after they are being officially released. They could be used to simplify the asynchronous control flow of any JavaScript program (look at co). Another important role is using them for creating iterators.

In this blog post we are going to take a look at how could be implemented iterator of binary search tree using the ES6 generators.

WebRTC chat with React.js

Wed, 03 Sep 2014 00:00:00 +0000

In this blog post I’m going to share how could be build WebRTC chat with React.js. Before we continue lets describe briefly what React.js and WebRTC are.

The application from this tutorial is available at GitHub.

React.js

React.js is reactive JavaScript framework, which helps you to build user interface. Facebook states that we can think of React as the “V” in MVC. React’s main aspect is the state. When the state of the application changes this automatically propagates through the application’s components. A React component is a self-contained module, which is composed by one or more other components. Usually the component depends on state, which is being provided by a parent component. May be the explanation seems quite abstract now, but during the tutorial the picture will get much more clear.

AngularJS in Patterns (Part 3)

Sat, 05 Jul 2014 00:00:00 +0000

This publication aims to provide a more theoretical overview of some of the AngularJS components in order to show you how the things you are already familiar with (like different Object-Oriented Design Patterns) fit in the picture.

Link to the first part of the series. Link to the second part of the series.

This is the last blog post of the series “AngularJS in Patterns”. You can find the original GitHub repository, which contains all the information at github.com/mgechev/angularjs-in-patterns. If you want to be aware of my up-coming work, you can follow me at github.com/mgechev.

AngularJS in Patterns (Part 2). Services.

Sun, 08 Jun 2014 00:00:00 +0000

This publication aims to provide a more theoretical overview of some of the AngularJS components in order to show you how the things you are already familiar with (like different Object-Oriented Design Patterns) fit in the picture.

Link to the first part of the series.

This blog post continues the series “AngularJS in Patterns”. You can find the original GitHub repository, which contains all the information at github.com/mgechev/angularjs-in-patterns. If you like my work you can follow me at github.com/mgechev.

Using GitHub Pages with Jekyll!

Wed, 28 May 2014 16:36:34 +0000

I’m switching to GitHub pages with Jekyll. There are several reasons behind my decision:

Faster! - static HTML is much faster than my old WordPress blog.
Lighter - Jekyll is much more minimalistic than WordPress, it has all I need and in the same time it is not too much.
I can use VIM! - I can use my favorite text editor in order to:

configure my blog
write blog posts

Reliable hosting - last a couple of yeas I pay for hosting, which is not reliable enough. Last day my blog was offline for a couple of hours because it “exceed the computational resources of my shared hosting”, wtf?! Can a wordpress blog do that? Anyway, GitHub pages are going to be the next home of my blog.

AngularJS in Patterns (Part 1). Overview of AngularJS

Thu, 08 May 2014 00:00:00 +0000

In this series of blog posts I’m going to cover the paper I’m writing at GitHub.

It aims to provide a bit more theoretical overview of some of the AngularJS components in order to show you how the things you are already familiar with (like different Object-Oriented Design Patterns) fit in the picture.

Part one includes only a high level overview of AngularJS, enjoy it.

AngularJS overview

AngularJS is JavaScript framework developed by Google. It intends to provide a solid base for the development of CRUD Single-Page Applications (SPA). SPA is a web application, which once loaded, does not require a full page reload when the user performs any actions with it. This means that all application resources (data, templates, scripts, styles) should be loaded with the initial request or better – the information and resources should be loaded on demand. Since most of the CRUD applications have common characteristics and requirements, AngularJS intends to provide the optimal set of them out-of-the-box. A few important features of AngularJS are:

Singleton in JavaScript

Wed, 16 Apr 2014 00:00:00 +0000

Wikipedia describes the singleton design pattern as:

The singleton pattern is a design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. The concept is sometimes generalized to systems that operate more efficiently when only one object exists, or that restrict the instantiation to a certain number of objects. The term comes from the mathematical concept of a singleton.

Express over HTTPS

Wed, 19 Feb 2014 00:00:00 +0000

Sometimes you want to test your application in environment closer to the real world. In such cases you might need to run it over TLS.

Here are two simple steps, which can be used to achieve this result:

Generate self-signed certificate

If you don’t already have certificate you need to generate one:

  $ openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365

You will be asked a couple of questions…

What I get from the JavaScript MV* frameworks

Wed, 12 Feb 2014 00:00:00 +0000

Why should I use JavaScript MVC, MVVM, MVP or simply MVW(hatever works for you)?

When I talk with people, who are beginners/intermediate in JavaScript I’m often asked this question. They are usually people who, until now, have used JavaScript only for making their website “fancier” – adding client-side form validation, creating carousel, checking whether a user already exists with simple Ajax request. When you start building something bigger (+10k lines of JavaScript) I truly believe that there are a few benefits from using such micro-architectural frameworks.

Remote Desktop Client with AngularJS and Yeoman

Sat, 08 Feb 2014 00:00:00 +0000

In this blog post I’m going to show you how to build a VNC client using AngularJS and Yeoman. The source code used in the post is available at my GitHub. Click here to see the final result.

It seems I have affinity to the remote desktop protocols, because this is my third project at GitHub, which implements one (VNC client on 200 lines of JavaScript, VNC client for Chrome DevTools and VNC client with AngularJS).

The magic of $resource (or simply a client-side Active Record)

Wed, 05 Feb 2014 00:00:00 +0000

At first sight AngularJS seems like a magical framework, which does some weird but awesome things like dependency injection, data binding only by setting a single property to the magical object named $scope and many other things.

If you look at the source code of Angular you’ll see a lot of smart and simple solutions for these magical problems. In this blog post I’ll describe the magic which stays behind $resource. I decided to write this blog post because of my recent experience in StackOverflow. One of the most misunderstood components of AngularJS was exactly the $resource service. $resource is two levels of abstraction above the XMLHttpRequest object (ok, may be three if we count $httpBackend). I’ve illustrated the usage of $resource through example which can be found at GitHub.

AngularJS Inheritance Patterns

Wed, 18 Dec 2013 00:00:00 +0000

Since AngularJS does not provide any built-in features for using inheritance, in this blog post I’ll describe how the general JavaScript inheritance patterns can be applied to AngularJS components.

Controllers inheritance

First, lets talk about controllers. Actually it is very unlikely to inherit from parent controller (except when you’re using the controller as syntax, see below). This is the case because by implementation the scope in the child controller will inherit prototypically from its parent scope. So when you need to reuse functionality from the parent controller, all you need to do is add the required methods to the parent scope. By doing this the child controller will have access to all these methods through the prototype of its scope i.e.:

AngularAOP v0.1.0

Wed, 04 Dec 2013 00:00:00 +0000

In this blog post I’ll introduce you the new way of annotating services included in AngularAOP v0.1.0.

First, why we need a new way for annotation? In v0.0.1 the annotations were made in services’ bodies. It was something like this:

myApp.factory('AwesomeService', function (execute, d1, d2,...,dn) {
  var api = /* definition of our service api */
  return execute(Logger).onThrowOf(execute(Authorization).before(api, {
    methodPattern: /Special|getArticleById/,
    argsPatterns: [/^user$/, /^[Ii]d(_num)?$/]
  }));
});

This way of annotating services led to coupling between the services and the API of the AngularAOP’s aspect factory service called execute. By this coupling we weren’t able to reuse our services in new projects which don’t use AngularAOP.

Advanced JavaScript at Sofia University

Thu, 24 Oct 2013 00:00:00 +0000

In this blog post I’ll tell few words about the course Advanced JavaScript which Georgi Penkov, Evgeni Kunev and me are leading this semester in Sofia University.

I was included as a lecturer in it after my project for Practical Programming with Perl (plainvm) which is created by Georgi Penkov. The idea behind the course is not to concentrate on the syntax of JavaScript but to introduce to the students different modern technologies. It is not concentrated only on the front-end development but there are also few planned lectures about Node.js. My role in this course is more as frontender than as Node.js ninja so I can tell few words about the front-end topics I plan to cover. The program for the course is a bit dynamical. Since we planned it a lot of things in the JavaScript world changed. The JavaScript landscape changes very fast so we should be able to response to these changes as quickly as possible.

AngularJS style guide

Sun, 06 Oct 2013 00:00:00 +0000

Today I created a GitHub repository which contains a set of good practices and style guides for AngularJS application development.

Its main goal is to be community-driven and to concentrate all the best practices for AngularJS development in one place.

I’ve collected these guidelines mostly from my own experience and the source code of AngularJS. I guess there are missing things thats why I’ll try to fill the gaps in future. Also, if you find something which can be improved or included feel free to contribute.

Lazy prefetching of AngularJS partials

Tue, 01 Oct 2013 00:00:00 +0000

This blog post is concentrated about web performance. I’ll skip the well known stuff about combining images into sprites, inlining images, DNS pre-fetching, combining and minifying script files, gzipping and so on. There are plenty of articles and tools which will help you about these things. There are also excellent researches on these topics, few of the best I’ve read are these by Mobify, Web Performance Daybook Volume, High Performance Web Sites and Critical rendering path – Crash course on web performance and many others. I hope HTTP 2.0 will eliminate few of the dirty hacks we all make…
I’ll focus on the performance in the Single-Page Applications and especially template prefetching strategy we use in the web application of Brownie Points. I’ll give code samples with AngularJS but these methods can be also applied with Ember.js, Backbone.js (with little more pain) and other MV* frameworks, I guess.
To find the best approach for your app you should understand it very well and know all the relations between the different pages. One way to do this is by visualising all the relations using UML state machine diagram. It will show you how your pages are connected, triggering of which event will lead to page change (events), based on which conditions the pages will change (guards) and what is done during the transition (actions).
For illustrating the way this partials pre-fetching strategy works, I’ll use example with a web application which is web interface for revision control system.
So, we have the following pages:

VNC client on 200 lines of JavaScript

Fri, 30 Aug 2013 00:00:00 +0000

In this quick blog post I’ll show you how to create a simple VNC client in about 200 lines of JavaScript. For our goal we’re going to use only HTML5 and JavaScript (client and server side). The end result will be something like this:

So, let’s begin!

Our application will have very simple architecture – a proxy server written in Node.js and a client in HTML5 and JavaScript. The Node.js server will stay between the browser and the VNC server. We need it because the client-side JavaScript does not supports TCP sockets so we can’t connect directly to the VNC server. The HTML5 client will have a canvas on which we will draw the frames we receive from the server. For VNC server you can use the free version of RealVNC.

Aspect-Oriented Programming with AngularJS

Wed, 07 Aug 2013 00:00:00 +0000

In the following blog post I’ll write few words about what is Aspect-Oriented Programming, why I think it will be useful in AngularJS and I’m also going to give you a short tutorial for using a simple AOP framework I’ve developed.

First things first. What is AOP? As we all know OOP is awesome! It gives us many tools for making our development process simpler. Its core principles are Abstraction, Encapsulation, Inheritance and Polymorphism.

CSS3 flipping effect

Sat, 04 May 2013 00:00:00 +0000

As you know because of the SIMD nature of the GPU it’s extremely good for graphical calculations. Since HTML5 and CSS3 are here we have a couple of ways for efficient and smooth animations one of them are the CSS3 transitions.

Before few days I needed a CSS3 flipping effect which should works at least in IE10, Chrome 25+ and Firefox. I tried different demos which I found in the web but there were couple of issues with them. The lack of support of preserve-3d in IE10 was one major thing, issues with backface-visibility in Chrome were also a bit frustrating. It looks like Firefox was the champion in the CSS3 flipping effects because most of the demos were failing in IE10 or Chrome but working on Firefox.

Practical programming with JavaScript

Wed, 24 Apr 2013 00:00:00 +0000

Before few months I was invited by Telerik Academy to make a talk about JavaScript. Last Monday Marian Kostadinov, Radoslav Georgiev and me made a whole seminar about the topic. I’m addicted to the Object-Oriented programming so I choose to talk about that. You can find my slides at https://blog.mgechev.com/slides/javascript-patterns and a video (in Bulgarian) below in the post:

It was quite exciting for me to speak about this topic in front of about 200 people. The most amazing thing was that all of them were listening and were interested about JavaScript. I hope that it was useful seminar and all of use learned something new.

Why I should use publish/subscribe in JavaScript

Wed, 24 Apr 2013 00:00:00 +0000

This post is inspired by my answer at StackOverflow.

So why we should use publish/subscribe? Why it is useful? Is it making our work harder or it makes our application better?

And the answer…

It’s all about loose coupling and single responsibility, which goes hand to hand with MV* (MVC/MVP/MVVM) patterns in JavaScript which are very modern in the last few years.

Loose coupling is an Object-oriented principle in which each component of the system knows it’s responsibility and don’t care about the other components (or at least tries to not care about them as much as possible). Loosing coupling is a good thing because you can easily reuse the different modules. You’re not coupled with the interfaces of other modules. Using publish/subscribe you’re only coupled with the publish/subscribe interface which is not a big deal – just two methods. So if you decide to reuse a module in different project you can just copy and paste it and it’ll probably work or at least you won’t need much effort to make it work.

JavaScript, the weird parts

Fri, 22 Feb 2013 00:00:00 +0000

To say that JavaScript is becoming more and more popular is such a typical and boring way to start such an awesome post…Anyway, JavaScript is becoming more and more popular each day…There’s client-side JavaScript with awesome API, you can do whatever you wish with it – write 3D games, stream video and audio, process files…There’s also a server-side JavaScript which is also awesome (I guess awesome will be a common word for this post). JavaScript is exiting language with big expressiveness power. It is object-oriented with many functional elements. It has prototype-based inheritance but if you wish you can implement inheritance in at least three different ways, which have countless subtypes…

Functional programming with JavaScript

Mon, 21 Jan 2013 00:00:00 +0000

This article is about the functional concepts of JavaScript. Some of them are built-in the languages, others extra implemented but all of them are very common for purely functional languages like Haskell. First I want to tell what I mean with the term purely functional language. These languages are “safe”, they will not make side effect i.e. evaluating an expression won’t change something in the internal state and lead to different result of the same expression when called next time. It seems very strange and useless to “imperative” guys like me, but actually there’s a list of benefits:

plainvm

Fri, 11 Jan 2013 00:00:00 +0000

plainvm can take the virtualization into different level of usage. To prove this I’ll first ask few rhetorical questions and put their answers…Which is the programming language which everyone has interpreter for? Java? Actually no! Does iOS supports Java applets for example?! No! Everyone has a browser in his smartphone. Every browser (well may be I should exclude lynx, links…) has JavaScript interpreter. And what is the common thing between all modern devices (and actually the devices most wide spread) – the browser. Another problem is that you don’t have such a great resources onto your mobile devices to run Windows/Linux/Mac even with double boot (yeah we can argue here about Debian…probably). We can use remote desktop via VNC/RDP but we have to install extra software and we will have access to a single machine not a whole cluster (well actually we can…I agree we can switch through different sessions, we can also become crazy).

Looking for performance? Probably you should NOT use [].sort (V8)

Sat, 24 Nov 2012 00:00:00 +0000

A few days ago, I’ve created a GitHub repository. It’s main goal was to collect different algorithms with implementations in JavaScript. I started with basic ones – sorting (insertion, selection, bubble sort..). After that I implemented few “more advance” like marge, quick and heap sort. It was interesting to me how much slower my implementation will be compared to the default sort. It was so interesting because of:

JavaScript image scaling

Fri, 02 Nov 2012 00:00:00 +0000

I haven’t wrote here for a while so I decided to write about something more practical. Actually the idea for the post come from one my response in stackoverflow. The post is connected with pure client side image scaling. While you’re reading the example I hope that you’ll see how powerful is the HTML5 API and how with few lines of code you can do something which in other technologies is much more complex.
So firstly I’ll post the source code with the example in JSFiddle, after that I’m going to explain everything step by step.

ELang

Sat, 15 Sep 2012 00:00:00 +0000

And one more blog post by me! It’s going to be in brand new topic than the others. For about an year and a half I’ve got an idea which I wanted to accomplish…To create my own simple programming language. Actually it’s very useful task and quite interesting. Creating it you can get better understanding how the compilers and interpreters work and probably write better code. Unfortunately there were two problems…I didn’t have enough time for such task and…I’ve not studied formal grammars (and as I mentioned I don’t have enough time to study them…there are just so much more interesting things to read about :-P ). Last weekend I wasn’t in very good health condition. I think that I have a tradition to make different cool stuffs when I don’t feel very well :-)…Soo for two days I’ve wrote about forty Java classes which actually were ELang.

Caching CSS with localStorage

Tue, 04 Sep 2012 00:00:00 +0000

Since HTML5 became wide supported the most popular aspects I hear about were it’s canvas, WebSockets and localStorage. I’ve got very close experience with the first two of the mentioned but the localStorage was somehow unknown for me since a month. I’ve researched the topic. Actually it’s quite interesting and useful as you might guess. Using localStorage you can save different kinds of data locally into key-value pairs. The data lives on your local machine until it’s deleted (cleared). The localStorage allows you to use more storage than cookies and have no expiration interval (the expiration completely depends on the user). As you might guess again the data stored into the localStorage is saved on the hard drive. May be you know that it’s very expensive to take data from the hard drive because of the mechanical movements required for buffering the data. The localStorage size depends on the implementation. In Chrome, Firefox, Opera and Safari you can use 5 MBs. Actually it’s enough for caching all the CSS and JavaScript of your webpage (I really hope so).

Self-invoking functions in JavaScript (or Immediately Invoked Function Expressions)

Wed, 29 Aug 2012 00:00:00 +0000

There are a lot of interesting things in the syntax of JavaScript, one of which is the definition of self-executing (self-invoking) functions. Here’s how we can defined such function:

(function () {
  // body of the function
}());

The anonymous function above will be invoked right after it has been defined. The benefit of self-invoking functions is that they enable us to execute code once without cluttering the global namespace (without declaring any globals). For example, if we have a web page in which we want to attach event listeners to DOM elements and other initialization work, self-invoking functions would be the best tool for the job!

Asus N56VZ + Ubuntu 12.04 (en)

Sun, 19 Aug 2012 00:00:00 +0000

It seems that it’s common a problem to setup Ubuntu on the new Asus N56VZ so I decided to create an English version of my post.
I was struggling with three issues about two weeks. Here are they:

Multimedia buttons (Fn+F*)
Subwoofer
Ethernet adapter

I’ll start with the Subwoofer issue because it’s with the easiest fix. Adding **options snd-hda-intel model=asus-mode4 **at the end of /etc/modprobe.d/alsa-base.conf will solve the problem.

Asus N56VZ + Ubuntu 12.04

Sun, 22 Jul 2012 00:00:00 +0000

Един пост на български, защото мисля, че ще бъде по-полезен.

Доста време се тормозя с подкарването на разни feature-и на новия ми Asus N56 с Ubuntu 12.04 x86-64…Мултимедия бутоните (комбинация между Fn+F*), съббуфера, като имах известни проблеми (не особени, но все пак трябва да се отбележат) и с ethernet.

И така, нека започна от съббуфера, защото решението е най-лесно. Добавянето на options snd-hda-intel model=asus-mode4 в края на /etc/modprobe.d/alsa-base.conf, решава проблема.

Проблемът с ethernet се решава чрез драйверите compat-wireless-2012-03-12-p (от http://www.orbit-lab.org/kernel/compat-wireless/2012/03/). Инсталацията си е straight-forward:

Debian Squeeze + LXDE on Google Nexus S (or having some fun while suffering)

Sun, 08 Jul 2012 00:00:00 +0000

I’m here again, after a long pause. For a while I’ve got problems with my health and I’m nailed at home…so I’ve go a lot of free time. Last night I’ve decided to root my Google Nexus S.
I use Ubuntu

12.04 on my home machine so I put on it Oracle Java and Android SDK. I also installed few packages from the SDK (platform-tools). I created few udev rules, because my computer wasn’t able to know what to do when I plug-in my Nexus with a fastboot mode. In the next step I unlocked my Nexus (the reason for that was because my warranty is over…otherwise I would think a bit more before I go to the next step). Having the Android SDK, the unlock procedure is quite easy:

HTML5 image editor

Wed, 25 Apr 2012 00:00:00 +0000

As you see HTML5 is everywhere (of course I exclude IE…or just before version 10). Web site used for quick image composition or edition is something very useful for the “modern web person”. There are few such services. Most of them use Flash. Nothing against it but…it’s too heavy for me…unnecessarily heavy. For all that stuff you can use HTML5 canvas. I also found some HTML5 image editors but their functionality was very limited. There is a feature which is very important and you cant find it in any of them. It’s frequently used in Adobe Photoshop and that’s why I decided to implement editor with that functionality – multiple layers. With multiple layers you can do whatever you want. You can combine different images change their color balances, contrast, blur…etc. I’ve started this editor a few weeks ago and I’m almost ready with it’s base functionality (layers manipulations). It’s open source, of course. Distributed under the terms of the General Public License. As you may be noticed in my older blog posts I’m fan of jQuery. Of course my use of jQuery is limited because I’m looking for best performance. More detailed look at the editor can be made in it’s GitHub repository.

Курсови проекти – ФМИ

Sat, 31 Mar 2012 00:00:00 +0000

Тъй като съм вече студент 3-ти курс във ФМИ и курсовите проекти се натрупаха, мисля че мога да бъда полезен на “младото поколение ФМИ-исти”, като предоставя една страница с връзки към кода, който съм разработил. Това ще можете да намерите в новата секция на блога ми “FMI Projects”.
Надявам се с това да помогна на студентите или да накарам преподавателите да проявят повече въображение в бъдещите задания към студентите :-).

Carousel Gallery

Thu, 16 Feb 2012 00:00:00 +0000

And one post in English…For few days I’m developing one jQuery UI plugin. It’s picture gallery which I’ve seen in flash but not in JavaScript, that’s why I decided to fix this. The gallery is a set of rotating pictures and difference ways of handling the perspective. There’s nothing complicated in it just little analytic geometry. I haven’t used any canvases or SVG because I’ve wanted the biggest possible browser compatibility. Of course there’re are drawbacks from this. There are a lot of computations I don’t have hardware acceleration and it works slow in the old version of few browsers. Currently I’m developing webpage for the gallery. Here’s a screenshot of it:
If you’re interested in the project you can see it’s source or fork it at GitHub.

SofiaJS...

Thu, 16 Feb 2012 00:00:00 +0000

В потребителската група SofiaJS последните няколко месеца се случиха доста интересни неща, а на мен все не ми остава време, за да блогна за тях… След хубавата лекция на Асен Божилов (за Google Chrome Extensions) и дискусията, която проведохме, Асен се включи активно в организацията и покани най-известния лектор, участвал в срещите – Стоян Стефанов. От своя страна Telerik указаха подкрепа, която оценявам, със своята покана лекцията да се проведе в тяхна зала. Желаещите да чуят какво ще ни разкаже Стоян бяха твърде много за капацитета на init Lab. Лекцията се проведе чрез конферентен разговор. Дочух, че доста хора са очаквали да видят лектора не “прожектиран на стената”, това е пропуск от моя страна, явно съм пропуснал да опомена начина на провеждане, за което се извинявам, но не мислех, че е от особено значение. Всичко в крайна сметка мина доста добре. Срещата се проведе с общо около 200 човека, като силно се надявам интересът към JavaScript в България да се е повишил. Колегите от EDesign.bg предложиха да ни помогнат с микрофони, за следващия път, за което също съм благодарен. И така четвъртата среща, на Българската JavaScript потребителска група SofiaJS, бе овенчана с голяма популярност, която се надявам да се запази и занапред!

Color animation plugin for jQuery

Mon, 16 Jan 2012 00:00:00 +0000

Hi! I haven’t wrote since a long time but there’s so much code and so little time…It’s bad that the biggest part of the code is not open source but what can we do…Last few hours I developed a JavaScript plugin for color animation. Of course for few hours I cant make something with great quality so it’s a little bit unstable (I think) but it works and it’s also valid for the JSLint standards. It uses easy algorithm. I think of the RGB color representation as a three dimensional space with coordinates in the range [0, 255]. The user is sets object with specific color (doesn’t matter background, font…btw that’s still not fully tested) which is actually a point in this three dimensional space. The target is another point in the 3D space so I just move from the first to the second point. I spoke enough. Let’s look at the code:

SofiaJS

Mon, 07 Nov 2011 00:00:00 +0000

Преди няколко месеца внезапно (както май често става) започнах да мисля за програмиране (как ли така…) и най-вече за JavaScript. Забелязах как все повече програмисти се насочват към този език, как все повече започва да се използва навсякъде (дори за server-side приложения) и все пак колко слабо е развито community-то в България. Бях взимал участие в .net потребителските групи и забелязах колко интересни дискусии се получават. Също така ми направи впечатление колко е приятно да се събират хора с еднакви интереси, на които работата им доставя истинско удоволствие (както е в моя случай). Разгледах в Google за подобни JS community-та и за съжаление не открих такова в България. Свързах се с MunichJS и MontrealJS…От разменените ми няколко e-mail-a с тях забелязах, че срещите на developer-и ориентирани по-скоро към Open Source са дори по-приятни. И така реших да организирам нещо подобно и в София. Известно време (около 2 секунди) се чудих за подходящо място, на което могат да се организират срещите на една евентуална JavaScript User Group-a. Разбира се, първото място, за което се сетих беше init Lab. Попитах Влади (“човекът държащ ключовете за портала, чрез който се достигат портите на Лаба”…само какво художествено настроение ме е сполетяло) дали ще можем на определен интервал от време да организираме срещи, на които да си говорим за хубави неща (програмиране) и да правим готини workshop-ове с бира в ръка…той вероятно също се колеба около 2 секунди и ми отговори. Изключително благодарен съм му за помощта, която оказа в случая и продължава да оказва. И така не след дълго организирахме първата среща. Повече информация за нея можете да намерите тук. Всичко мина..как да се изразя…ммм супер яко! :) Всички присъстващи бяха много готини и разговорите с тях се водеха с голямо удоволствие. Вечерта продължихме в близката пицария, като си говорихме за програмиране до около 00:00 часа. Тази събота (12.11.2011) предстои втората среща на групата. Програмата за нея можете да видите тук. Освен посетителите от миналия път се надявам да видя и нови лица, с които да се запозная :).

Sound notification in web page

Tue, 01 Nov 2011 00:00:00 +0000

Few days ago I was creating a system in which it was necessary to implement a sound notification feature. Well it’s not very hard task but of course you have to be careful with the browser compatibility. At first my source was something like that:

playSound: function () {
	this.config.soundNotify.html('<embed src="' + this.config.soundFile + '.wav" hidden=true autostart=true loop=false>');
}

Actually in my Linux it was working pretty well (I tried it mainly in Chrome).
After that I decided to try it in a different environment (OS, browser…). Well I started the app in Google Chrome installed on Windows 7. It was working again :). After that…IE…and yes it wasn’t working (the browser asked me to start an add-on but this stinks…). Well IE has a tag for background sound. So I added:

f8...

Fri, 23 Sep 2011 00:00:00 +0000

Тази сутрин пуснах прословутата f8…Бях с големи очаквания (дори поствах за нея), може би заради слабата ми информираност очаквах нещо като Google I/O (има си Google…защо не потърсих предварително…). Streaming-a тръгна и очаквано видях Марк Зукърбърг. Вместо той да говори за нови технологии и с какви средства е създал нещо ново, започна да прави реклама на новите feature-и на Facebook…Дам трябваше да прочета повече преди да си настроя часовника да звъни толкова рано…
Спомена за Facebook Timeline (всъщност не спомена, а беше хвален от кого ли не). Този timeline на мен ми се видя малко плашещ…Ясно е, че facebook, знаят всичко за теб от момента на регистрацията ти, но необходимо ли е да знаят и от преди това?! Защо трябва да споделяш целия си живот с непознати…Но все пак…да кажем, че това не е толкова опасно…Въпреки, че непознат човек може да те срещне на улицата и да започне да говори неща за миналото ти, които само най-близките ти роднини са знаели и то единствено поради причината, че не си редактирал правилно private опциите на акаунта си. Може би дори по-плашеща нова функционалност е Facebook Graph. Това е един мулти граф, в който отделните възли са facebook потребителите, а ребрата между тях са общите неща между тези потребители. В случай, че свържеш някоя твоя програма, с която до момента си слушал музика, с facebook отсега нататък, не само ще слушаш музика с нея, а и тя ще докладва кога, коя песен, от къде и т.н си слушал. Това не се отнася само за музика и песни, разбира се. Facebook не биха се спряли само с това. Освен музика има същата функционалност и за филми, готвене, дори тичане в парка (а също така и още много други). Интересното е, че въпреки всички тези feature-и, с които очевидно всеки може да бъде следен, хора продължават да се регистрират във facebook всеки ден…вече над 800 000 000 потребители са в Cassandra. А между другото Марк отново не направи нищо ново :). Тази “великолепна” идея със следенето на ежедневието не го е ударила изведнъж по главата…Last.fm…

f8

Thu, 22 Sep 2011 00:00:00 +0000

Ето нещо интересно, което ще можем да следим онлайн утре сутрин:

Google+ API

Fri, 16 Sep 2011 00:00:00 +0000

Като всеки любознателен developer и аз се включих към хората, които искат да получат mail от Google при пускането на API за Google+. Вчера (15-ти септември) около 1 часа получих следния mail:

Getting Started on the Google+ API

Greetings developers,

Thank you for showing your interest in the Google+ platform on our developer interest form. We promised to let you know when we had more details to share. Well, that time has come…

Ajax without jQuery for beginners

Thu, 21 Jul 2011 00:00:00 +0000

Before years I was writing all the code by my own, without additional libraries (including jQuery). For beginner developer it’s a good strategy. When you use $.ajax it’s all that easy:

$.ajax({
  url: "any/url/for/the/request",
  type: "get",
  success: function(data){
    alert(data);
  }
});

But you can’t get the main idea.
Many developers don’t have an idea how to write this without a library. In their opinion AJAX without library a hard, near impossible task. Well the truth is that it’s not so hard…there are just some incompatibilities between the different browsers but you can deal with all of them in few lines of code. First for creating the HTTP request you have to create new XMLHttpRequest (for most browsers). Of course, in Internet Explorer you have to do something slightly different…In Internet Explorer under version 7 you have to create special kind of ActiveX Object which has different versions – MSXML2.XMLHttp.5.0, MSXML2.XMLHttp.4.0, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp, Microsoft.XMLHttp. For our goals we want to use the newest version of the XMLHttp object. Here is a function which creates object which we can use for out request:

Blogger image resize

Sun, 17 Jul 2011 00:00:00 +0000

That’s my second post here and the first one which is going to have any sense. Today a friend of mine was fighting with Google’s blog system…He was posting some data with images in it. When he was setting width and height of images in the html editor they were being resized later after he post the article. When he tried to put any CSS restriction about picture’s width the effect was – picture flattened (because blogger was setting the picture height). I looked at the source for few minutes, stopped the JavaScript because I thought that it is the problem but there was no result…So I wrote a tiny script which deals with the problem. And here is it:

Hello world!

Thu, 14 Jul 2011 00:00:00 +0000

Hey,

That’s my first blog here. I’ll try to put some interesting stuff about the Life, Universe and Everything else but mostly I think…about some technical topics.

I hope that you’re going to find interesting and useful information.

Have a nice read :).

See ya!