author: Krasimir Tsonev

Hi there, I'm . Senior front-end engineer with over 13 years of experience. I write, speak and occasionally code stuff.

var

Remove tags from a string in AS3

A couple of months ago I integrated a nice WYSIWYG editor written in Flex in my CMS. It worked fine, till yesterday I needed to add more features like text formatting and font color changing. As you know the Flex RichTextEditor component adds some additional tags that I definitely don't want to send to the database. So I wrote a simple function to remove these tags.

...read more

Trace JSON object in AS3

I'm absolutely sure that all of you are working with JSON objects. It's pretty helpful to be able to print them and find out what exactly they contain. I wrote a simple function that makes this possible.

...read more

Create your own tween manager class in AS3

There are some features in Flash that we can't work without. Tween classes are among the most used ones. They give you ability to animate objects without using the timeline, to change the animation fast and easy. The idea of these classes is very simple. That's why I think that it is a good idea to have your own tween manager that you can modify to fit into your needs.

...read more

Duplicate loaded images in AS3

During the creation of the latest changes in my portfolio site, I needed to duplicate a loaded image that has to be placed as a material in papervison3d's cube. We don't have duplicateMovieClip in AS3, so we have to use another technique.

...read more

How to create realistic Earth globe in Flash (AS3, Papervision3D)

Papervision3D is a perfect tool for the purpose. As you will see such a task needs only few lines of code. To make the example a little bit more interesting we will add additional code to control the rotation of the globe by the mouse.

...read more

Cloning JSON object in JavaScript

Simple and easy solution.

...read more

checkPolicyFile flag was not set

Sometimes the uploading of crossdomain.xml file is not enough to get the things working.

...read more

Javascript: autocomplete country script

We are all filling registration forms. It's really nice when the page helps us to do that faster. The script, that I'm going to show you, is designed to be used for a country field.

...read more

Object Oriented Programming in JavaScript (Extending / Inherit classes)

As you probably know JavaScript is not exactly OOP based language. Of course there are some ways to handle with this and you can still create classes and inherit them. It is much much better to use classes. Your application will be well structured and split to modules.

...read more

Delegation in JavaScript

I think that the delegation is an important part of every programming language. It is also possible in JavaScript.

...read more

GoogleMaps API v3: convert LatLng object to actual pixels

It is not so easy as it looks like. You should get the map object's projection and the map's zoom to be able to calculate it.

...read more

JavaScript: managing events (dispatch, listen)

As a huge fen of the flash platform, I always like to work with events. The events system in ActionScript3 is really helpful when we are building a big application with many modules and we want to keep them independent. JavaScript hasn't native support of events, but we can still use them.

...read more

AS3: Using custom metadata in flex (part 2)

Because of the huge interest in AS3: Using Custom Metadata in Flex (part 1) I decided to dig a little bit deeper in this topic. You already know how to get information about your custom metadata, so in this article I'll show you how to use it.

...read more

Creating simple WYSIWYG editor with AS3 (Flex)

There are dozen of JavaScript WYSIWYG editors available, but most of them are too complicated and a little bit buggy. From time to time I'm using my own tool to provide such kind of functionality. It accepts and exports valid html. I decided to share it with you and explain how I built it.

...read more

AS3: converting XML to JSON object

I'm absolutely sure that you are using external data in your flash/flex applications. It is a good practice to transfer information in XML format. Most of the projects that I'm working on also use XML and in most of them I have a class that converts the data to JSON object. The problem with this workflow is that the parser's logic is always different because the XML is different. These days I wrote a class that solved this problem and directly converted every given XML file to a JSON object.

...read more

AS3: dynamic text field to curve (TextField on an arcing path)

[2]Most of the articles here are tightly connected to my daily work. As you probably know from one of my latest posts (runtime font loading/embedding) I worked a lot with texts these days. There was a request for producing curved text from a dynamic field. Of course it wasn't so easy to create such a feature. I wrote a simple class that did the job and I decided to share it.

...read more

GoogleMaps JS API: address to coordinates transformation

When we are talking about maps, Google is an absolute leader. Their GoogleMaps tool is free, well documented and works really good. What I didn't find directly in the documentation is how to get the exact location based on plain text. I.e. to convert an address to google.maps.LatLng object. That's why I wrote a simple function that did this job.

...read more

AS3: DataGrid with custom ItemRenderers

One of the big advantages of Flex framework is that you can use a lot of ready components. The DataGrid is really helpful. Especially when you want to list big amount of data and provide ability to edit the information directly in the grid. These days I finished a test task which uses DataGrid and decided to share my experience.

...read more

Filtering data with jQuery

We are working with data every day and there is a part of our applications, which is responsible for presenting the information to the user. Sometimes we need to show a lot of records and then we are using pagination or additional server requests to filter the data. A little JavaScript code could change the things a lot - fast data filtering and better user experience.

...read more

Testing Facebook application

I had a lot of work these days and didn't have time to blog here, but I think that the tips in this article are very useful. The number of Facebook applications is increasing every day. We all know that the testing (debugging) of our code is really important. That's why I decided to share my experience in this area.

...read more

Real time game with NodeJS and Socket.io

NodeJS gives me the ability to write back-end code in one of my favorite languages - JavaScript. It's the perfect technology for real time applications. In this tutorial I'll show you how to build a web chat with Socket.io.

...read more

Convert HTML string to DOM element

Checkout Revealing the magic: How to properly convert HTML string to a DOM element article.

I'm working on a chrome extension which accepts user text, work with it and output the result in a div. I used jQuery in the beginning, for several tasks, but later I decided to remove it and deal with pure javascript/DOM manipulations. The output div was filled by using innerHTML property and everything was ok. But, at some point, I sent few buttons to the user and he has to interact with them. However, once I update the div's content the event listeners are detached and the buttons became non-functional.

...read more

A strange IOErrorEvent.IO_ERROR event dispatched

Really simple GET request from a flex based application. However it fails if GET parameters are passed.

...read more

Simple command line parser in JavaScript

There should be some super cool RegEx, which I can use. However after short research I wasn't able to find it. So, I created a simple function which does the job.

...read more

Insert css or javascript dynamically

That's a super simple function for adding new css or javascript files in the current document. I didn't test it in all the browsers, because I'm using it in the chrome extension and I need only Chrome supported.

...read more

JavaScript: sequencing function calls

While I'm working on Auxilio I end up in a sitatuation where I have to call few javascript functions in a sequence. It's an interesting how this could be solved and I'll be happy if you share your opinion for such problem.

...read more

JavaScript is cool

I'm writing a lot of JavaScript these days. Sometimes it's really crazy what you can do with that language. I have bunch of tools in my arsenal and I wanted to document them somehow. Writing an article is a good option. By tools I mean patterns, piece of logic or just syntax shortcuts. However, this article is not exactly about design patterns, but it uses some of them. It's just about few ideas, which I came into during my daily scripting.

...read more

Introduction to animations in HTML

Last few years designers use a lot of animations directly in the HTML. That's of course kinda cool, because you don't need a plugin in order to see their work. There are several ways to make animations in HTML. It's an interesting subject and I decided to make a short research and summarize the information.

...read more

Managing events in JavaScript

I just noticed that the most popular repository in my GitHub account is EventBus. There is already an article about it, but it's a little bit outdated. I needed to clarify few things, so here is a new one.

...read more

Managing events in JavaScript

I just noticed that the most popular repository in my GitHub account is EventBus. There is already an article about it, but it's a little bit outdated. I needed to clarify few things, so here is a new one.

...read more

JavaScript: creating class based on object

I'm very happy visiting Stackoverflow more often then Facebook these days. Today I landed on this question. I'm not sure that I understand the real context of the situation, but I found something helpful, which may be useful for you. What if we have an object and want to use it as a base for JavaScript class (i.e. function). The idea is to create instances and basically extend the original object.

...read more

JavaScript challenge: queue implementation

I'm currently working on an animation-heavy web application. There are long chains of CSS transitions/animations, which I have to do. I wrote this little library, because I needed something lightweight with minimalistic API. I think that it deserves its own repository and I created one.

...read more

JavaScript: dependency free extend method

While I worked on AbsurdJS I needed a function which accepts numerous objects and combines their properties. I.e. something like the _.extend method of UnderscoreJS. What I did is actually to use one more dependency just because of such method. John-David Dalton nicely pointed out my mistake and added a simple function which solved the problem. I change it a bit and now it acts as UnderscoreJS's version.

...read more

An alternative JavaScript for loop syntax

As javascript developers we all have to write a lot of for loops. Before a couple of months I saw an alternative syntax, which I really liked. It saves some time and it looks much nicer. However, one of my colleagues reported that this fancy syntax is not working as it should.

...read more

AbsurdJS fundamentals

AbsurdJS became one of my favorite projects. I spent a good amount of time developing it and it's getting more and more interesting. I also received some positive feedback, so I think it is time to write a bit more about the module and explain how it actually works and what exactly is made for.

...read more

JavaScript template engine in just 20 lines

I'm still working on my JavaScript based preprocessor - AbsurdJS. It started as a CSS preprocessor, but later it was expanded to CSS/HTML preprocessor. Shortly, it allows JavaScript to CSS/HTML conversion. Of course, because it generates HTML it was normal to act as a template engine. I.e. somehow to fill the markup with data.

...read more

7 lines JavaScript library for calling asynchronous functions

I was surprised by the good feedback for JavaScript template engine in just 20 lines and decided to blog for another small utility function which I'm using often. While we are talking about JavaScript in the browser, most of the operations are asynchronous. We are dealing with callbacks all the time and sometimes we end up with awesome callback hell.

...read more

Dependency injection in JavaScript

I like the quote that the programming is all about managing complexity. Maybe you've heard that the computer world is a giant construction of abstractions. We simply wrap things and produce new tools over and over again. Just think for a minute. The languages which you use have build-in functionalities and they are probably abstracted functions of other low level operations. It's the same with JavaScript.

...read more

Revealing the magic: How to properly convert HTML string to a DOM element

This seems like a trivial task. However, it is not. There are few popular solutions, but they have a big problem and if you use them a lot you will spot the issue.

...read more

A modern JavaScript router in 100 lines

(The router here is now placed in its own project - Navigo. There is also another article Deep dive into client-side routing which you may find interesting)

https://github.com/krasimir/absurd

Nowadays the popular single page applications are everywhere. Having such application means that you need a solid routing mechanism. Frameworks like Emberjs are truly build on top of a Router class. I'm still not sure that this is a concept which I like, but I'm absolutely sure that AbsurdJS should have a build-in Router. And, as with everything in this little library, it should be small, simple class. Let's see how such a module may look like.

...read more

Cross-browser handling of Ajax requests

This blog post is part of series about AbsurdJS. I'll continue filling the library with small and self organized black boxes. In the last article we talked about creating a JavaScript router. This time we will go through the process of making Ajax requests.

...read more

Mastering the DOM access

If you build web applications you probably communicate with the DOM a lot. Accessing and manipulating DOM elements is the thing which we do almost every day. Very often we collect information from different controls, we need to set values, change the content of div or span tags. Of course there are million libraries which handle these actions. The most popular jQuery, is de factor a standard. However, sometimes you need something smaller. In this article we will build our own class for managing DOM elements.

...read more

Using media queries in JavaScript (AbsurdJS edition)

If you believe in responsive design you probably use a lot of media queries. That's a CSS feature which gives us the power to add something like if statements. We are able to apply rules only if the current page meets certain conditions. In this article I'll show you how I use media queries in JavaScript.

...read more

JavaScript: bind function

The this keyword is always important in JavaScript. I'll admit that it took me some time to actually understand how it works. You know, sometimes JavaScript is all about the scope. Where you are and what you have an access to. This article is about the bind function. Something which I use very often.

...read more

Node.js: managing child processes

These days I spent some time working on Yez!. Chrome extension whose main role is to replace the annoying switching between the terminal and the browser. It uses Node.js module to run shell commands. So, I had to deal with child processes, and I decided to document my experience.

...read more

Developing Node.js applications with Google Chrome

Google Chrome is my favorite browser. I'm spending a big part of my working hours there, so it makes sense to use it for everything. Last week I posted "Sorry, Chrome killed the terminal". The article was about Yez!, an extension that brings terminal-liked functionalities to the browser. Today, I'll show you how I use Chrome in my Node.js development workflow.

...read more

Feeding the beast at 60fps

The browsers nowadays are smart. They optimize everything and help us to produce better applications. They process our code as fast as possible and even on mobile devices deliver a pleasant experience. However, at the same time, it is possible to write buggy code and make the browser freezing. We are not talking about slowing down the rendering. We are talking about no rendering at all. There are cases where we want so much from the browser that it just can’t handle it.

...read more

Node.js Blueprints book - second chapter's clarification

Before a couple of months my first book Node.js Blueprints was published by Packt. There are a couple of reviews in Amazon about chapter two. It’s about Express. One of the most popular frameworks in the Node.js ecosystem. The book mentions version 3.0 but the truth is that the code samples are for version 4.0. I feel that I still have to point out the differences and mark these parts of the chapter that are not valid for the newest version of the library.

...read more

Win Free Copies of my new book – Node.js Blueprints

Readers would be pleased to know that I have teamed up with Packt Publishing to organize a Giveaway of a new book written by me - Node.js Blueprints. And three lucky winners stand a chance to win 3 e-copies of this book. Keep reading to find out how you can be one of the Lucky Winners.

...read more

Unit test your client-side JavaScript

I don’t think that we have to discuss the importance of having tests. That’s not something that we add to the project in addition. That’s something that the project is based on. And because testing is so important we have bunch of tools in our disposal. We all know (I hope) how to test our back-end code. However, once we move to the front-end is a bit different. At the moment we are working on a big single page application and testing is one of our main focuses. In this article you will see how to unit test our client-side JavaScript.

...read more

Using Local Storage as a communication channel

So it's been a few months since I published something here. It’s not because I’m lazy (that’s true though) but because I was working on my second book. Now the book is almost finished and I’ll start actively blogging again. In this article we’ll see how to use the local storage of the browser as a communication channel.

...read more

Hacking Browserify

You’ve probably heard of Browserify. It’s a nice npm module for bundling your JavaScript for a client-side usage. It lets you use similar to Node.js modular system but for the code running in the browser. I had few issues testing modules in an app that uses Browserify. So I had to learn how it works and probably hack it in order to solve my problem.

...read more

Rethinking JavaScript readability

You probably know the famous quote that the code should be written for humans to understand and accidentally for computers to execute. Writing code that compiles is easy. Writing readable code is completely different thing. Working in a team is like sharing the kitchen with your roommates. You all should care for the dishes and keep clean. And it is not only because of the others but because of you. You don’t want your dinner in a mixed place and dirty dishes right.

...read more

How require/import may decrease your testability

When CommonJS was announced we all thought “Finally something that will organize our code”. However, there are some cons that we should be aware of. It’s not only unicorns and rainbows. In this article we will see how a simple require line makes our code difficult to test.

...read more

CSSSteal - Chrome extension that extracts CSS

We had to update some of our old pages adding new elements. This means mixing old and new code. Placing HTML markup and JavaScript in legacy pages is not that difficult. Yes, it brings some issues but they are easily solvable. However, the CSS is a whole new story. That’s why I did CSSSteal. It helps me extract the needed styles.

...read more

A modern React starter pack based on webpack

Checkout React webpack starter in GitHub.

You know how crazy is the JavaScript world nowadays. There are new frameworks, libraries and tools coming every day. Frequently I’m exploring some of these goodies. I got a week long holiday. I promised to myself that I’ll not code, read or watch about code. Well, it’s stronger than me. React werbpack starter is the result of my no-programming week.

...read more

Enforce standards while submitting a pull request

GitHub’s pull requests are an important part of my/our development process. That’s why I was thinking about creating a template that will enforce the standards.

...read more

A story about currying

I hope you know about currying. If not then please read this book. It’s basically a process of calling a function with less parameters than it expects. Ok, not exactly calling the function but prepare another function that will run the original one. Some people call the returned function higher-order factory function. Really powerful concept.

...read more

Dissection of Flux architecture or how to write your own

The Flux implementation discussed in this article is available here github.com/krasimir/fluxiny. Feel free to use it in a browser directly or as a npm dependency.

I’m obsessed by making my code simpler. I didn’t say smaller because having less code doesn’t mean that is simple and easy to work with. I believe that big part of the problems in the software industry come from the unnecessary complexity. Complexity which is a result of our own abstractions. You know, we (the programmers) like to abstract. We like placing things in black boxes and hope that these boxes work together.

...read more

Start your own JavaScript library using webpack and ES6

Two months ago I published a starter pack for React based on webpack. Today I found out that I need almost the same thing but without the React bit. This simplifies the setup but there are still some tricky parts. So, I made a brand new repository webpack-library-starter and placed all the stuff that we need for creating a JavaScript library.

...read more

Deep dive into client-side routing

(This blog post is inspired by A modern JavaScript router in 100 lines and heavily related to Navigo router project)

If you build single page applications you probably know that one of the must-have parts is the router. The bit that knows how to tweak the content of the address bar and notifies the rest of the system for URL changes. In this article we will discuss the various aspects of the routing in the browser.

...read more

The return statement is not the end (but it should be)

Well, I kind of lied in the title of this article. Of course that it is the end of the function. Once we call return everything else after that is simply not executed. Ops … I did it again, I kind of lied again.

...read more

Meet sequence expression

You have no idea how fun is to transpiler JavaScript. I’m digging into that last few weeks and there is a step where I have to transform an AST into valid code. There is one tree node which I really like - sequence expression.

...read more

Constructive destructuring

Destructuring is one of my favorite ES6(ES2015) features. It just shortens my code and helps me be more explicit with my statements. Let’s see it in action.

...read more

Lazy-load your images with Coloor

Last week I landed on an article by Manuel Wieser called Dominant Colors for Lazy-Loading Images and I found the topic really interesting. It’s about lazy-loading of images. Something that Medium is using.

...read more

Post-transpilation or what is the real face of your code

If you write JavaScript today you probably use some sort of a transpilation tool. A tool that reads your hipster code and convert it to code that works in the browser. In this article we are going to see what is actually send to the browser and how exactly libraries like Babel polyfill some of the ES6 features.

...read more