author: Krasimir Tsonev

Hi there, I'm . Senior front-end engineer with over 13 years of experience. I write, speak and occasionally code stuff. Follow me on Twitter, GitHub, Facebook or LinkedIn

function

Tween Manager Class in AS3

TweenManager is ActionScript3 class that helps you to animate your objects in flash. You don't need to create timeline type animations, because you can control every property of the object. Also it helps you to create a sequence by different animations/events. In the examples below I'll show you how to use the manager to solve different problems during your daily flash work.

...read more

Customize ComboBox in Flash (AS3)

In my work as a flash developer very often I receive from the client just one photoshop file with the design of the application/site that has to be coded. In the last project the designer made the ComboBox in the style of the site. So I couldn't use the default look of the Flash's drop down component.

...read more

Delegation in AS3

I just can't code without delegation. I'm using it every day and wanted to share this method with you.

...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 protect your SWF file

Is there any way to protect your flash work? To be honest the answer is NO. As you probably know everything that is uploaded on a web server and is accessible from a web browser is downloaded to the users' computers and could be found in the temporary directories. Once someone gets your swf file he could use one of the dozen decompilers to reproduce the .fla and .as files. Anyway, there are still some ways to make stealing difficult.

...read more

Deep linking in flash with AS3

Many people will say that Flash is not SEO friendly. Actually that's not 100% true. Flash is just a tool that shows your data. Exactly the same as the HTML. In this article I'll show you how to use ActionScript3 and JavaScript together to make your flash sites SEO friendly and provide a different URL for each of your pages.

...read more

PHP: export data to XLS file

Sometimes it is necessary to present your data in format which is popular and easy to work with. In most cases the CSV format will fit perfectly you and your clients, but sometimes you have to export the information in XLS file. These several functions will help you to do that.

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

Scaling rounded corners in Flash

I'm absolutely sure that you've already met this problem. You know, these nice rounded buttons that are provided by the designer. They are really cool, but sometimes the label of the button is so long that you have to resize/scale the image. ActionScript3 provides simple way to solve this issue.

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

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

Creating mp3 player with RobotLegs (basics tutorial)

Have you ever wondered how to optimize your ActionScript applications? Have you searched for a nice framework that will save you a lot of time and will organize your structure? If yes then RobotLegs is for you. In this article I'll show you how to use it to create a simple mp3 player which loads a configuration xml file, parse it and play mp3 files.

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

OOP in JavaScript (part 2)

I already wrote an article on this topic (Object Oriented Programming in JavaScript (Extending / Inherit classes)), but last few days I realized that there are some things that I didn't explain.

...read more

5 useful ActionScript 3 tips

Sometimes, when you work on some project, you find something that is small, but very interesting and useful. Usually I'm adding such kind of things in classes that I like to call helpers. The following tips are part of my helpers.

...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: Creating Facebook Application

Facebook became one of the most popular social platforms these days. I just finished a flash based game that uses their API and decided to share my experience.

...read more

AS3: Tracing in Flash/Flex

Inspired by the article of Dru Kepple I decided to share my experience in Debugging processes in flash/flex enviroment.

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

MySQL vs JSON file data storing

I'm not exactly a performance perfectionist, but currently I'm working on a tool which will be used in a large system. It will deliver texts to a multi-language environment and there will be several sites/apps which will performe big amount of request to it. It is the right moment for me to choose how to speed up my code and the work of the tool overall.

...read more

Testing with headless browser (Zombie.js + Jasmine)

I was planning to post this article a few weeks ago, but today I finally finished the examples and I can't wait to share it. We all know that the testing is a big part of our daily tasks and we should use every existing tool to make our lives easier. I really like test driven development and once I found the concept of the headless browsing I started to think that we can automate every single aspect of the testing. In this post I'll show you how to use Nodejs to test a simple php site.

...read more

Douglas Crockford’s Function Challenges

Douglas Crockford’s Function Challenges. Test your knowledge of function scope and and learn to compose functions that can be called multiple times through function returns.

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

Git under windows (console mode)

I'm a Windows user. I also have a virtual machine with Ubuntu installed and coding there from time to time. I use Git a lot and in general I prefer console mode over the GUI. Under Unix everything works just great, but Windows's command prompt requires more efforts from our side. However I found some helpful tips, which could make your life easier.

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

Chrome extension: debugging dev tools tab or how to make console.log

It's really interesting to work on an extension for Chrome. However, sometimes it's a little bit difficult to debug. Especially when you work on a dev tools add-on (i.e. a new tab).

...read more

Extending Jasmine (BDD framework for testing)

Don't get me wrong, Jasmine is a wonderful framework. I'm using it for testing JavaScript in both places - front-end (in browser) and back-end (Nodejs). However, the client side has some disadvantages, which I just fixed. I hope that someday these changes will be moved to the official version (or at least I'll make a pull request very soon).

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

A bad side effect of the aspect oriented programming

I just read this very interesting article published on know.cujojs.com. It's about aspect oriented programming. At the beginning I thought "Oh, that's kinda cool", but when I start thinking about how I'll use it in practice I notice something bad. The blog post itself is well written and informative, but doesn't include any cons of the used technique.

...read more

Send message from web page to chrome extension\'s background script

I just answer on that question in StackOverflow. I think that this is a common quetion so it worths writing about it.

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

Auxilio Chrome extension or how I boost my productivity

I'll be honest and I'll say that I'm a bit lazy sometimes. I'm one of those developers which don't like to repeat same actions again and again. There are dozen of things which I have to do while working on a project. Very often I'm covering the development of several applications and have to switch between them. It's really annoying process. I hate to have many opened tabs in my browser, many consoles or several code editors. I always try to improve my productivity by automating tasks. I think that even switching between opened applications takes too much time.

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

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

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

Look ma, JavaScript only Off-Canvas menu

The off-canvas menu is pretty popular nowadays. You know, the little button in the right upper corner which opens the navigation with a slide-in effect. That's what we are going to build in this article. The interesting things is that we are not going to use CSS neither HTML, only JavaScript.

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

Node.js application made with Express and AbsurdJS

Node.js is one of those new technologies, which are attracting more and more developers every day. Mainly, because it's JavaScript driven, a lot of people are interested working with it. In this tutorial, I'll show you how to use AbsurdJS together with Express. Express is one of the popular Node.js frameworks. However, the other instrument is really fresh one and I hope that you will find it useful.

...read more

Usersnap - the holy grail of bug reporting

The bug reporting is something very important for us. As developers, we produce code that should work everywhere. Not only on our machines. No matter how many times we test our application it often happens that it does not work properly for the client. We all know how helpful is an email with text “It does not work. Fix it ASAP!”. Usersnap is amazing tool that removes the gap between you (the developer) and the non-techy guy from the other side.

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

ToDoMVC with AbsurdJS

You've probably heard about ToDoMVC project. It's same ToDo application made with different frameworks. It's interesting how the same problem is solved by different programmers following different concepts. This article is about making the ToDoMVC application with AbsurdJS.

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

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

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

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

Debugging with Node

Node has a wonderful debugger. As a front-end developer I’m mainly using Chrome’s tools but sometimes I run things in Node environment and this native feature comes handy. In this article we’ll see how to debug in the terminal using Node’s debugger.

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

The bare minimum to work with React

The setup here is available at GitHub here.

Half an year ago I published A modern React starter pack based on webpack. The starter provides the basic tooling around React. However, I noticed that very often I need even less stuff than that. That’s usually when I want to hack something quickly. In this blog post we’ll see what’s the bare minimum to work with React.

...read more

Children in JSX

(This article is part of React in patterns series.)

React is highly composable. And the API that enables that is props.children. It gives us the power to create a placeholder that is later filled with content from the outside.

...read more

The powerful higher-order component pattern

There are lots of things which I like in React. Mostly the fact that it teaches interesting patterns. One of my favorites ones is higher-order component. In this article we’ll do a couple of experiments and will see how powerful this approach could be.

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

Meet the JavaScript pattern of the year or how to handle async like a boss

Sometimes when you learn something new you get really excited. Excited to that level so you want to teach it to someone. That is the case with the concept which I found a couple of months ago. It is an implementation of the command pattern using generators. Or the well known saga used in the redux-saga library. In this article we will see how the idea makes our asynchronous code simpler and easy to read. We will also implement it ourself using generators.

...read more

Markup as function

If you are writing React applications you probably know about higher order components or render props (which by the way I think is kind of a form of higher order component pattern). In both cases we have a component that encapsulates logic and passes props down to children. Recently at work we came to the idea that we may push this further and represent some functionalities which are out of React in the same fashion - with a single tag in our components tree.

...read more

My take on Redux architecture

Redux is a library that acts as a state container and helps managing your application data flow. It was introduced back in 2015 at ReactEurope conference (video) by Dan Abramov. It is similar to Flux architecture and has a lot in common with it. In this section we will create a small counter app using Redux alongside React.

...read more

Implementing an async queue in 23 lines of code

Recently we had an interesting task at work. The user makes a selection of items and clicks a button. Then for every selected item we have to make a request to our API. The thing is that the user may click as many items as he/she wants. In order to speed up the process we decided to handle four requests in parallel and once some of them is finished we pull the next one. If you ask why exactly four requests in parallel read this paper.

...read more

React and separation of concerns

Years ago when Facebook announced their JSX syntax we had a wave of comments how this was against some of the well established good practices. The main point of most people was that it violates the separation of concerns. They said that React and its JSX are mixing HTML, CSS and JavaScript which were suppose to be separated.

In this article we will see how React and its ecosystem has quite good separation of concerns. We will prove that markup, styles and logic may live in the same JavaScript land and still be separated.

...read more

React hooks: changing the mindset

If you use React you probably know about the so called hooks. They were officially announced at this year's ReactConf by Sophie Alpert and Dan Abramov. Their presentation could be seen here. I, same as many others got intrigued by this new feature. A little bit confused by if I like them or not but kind of excited. This article pretty much sums up my thinkings around React hooks and aims to give a balanced opinion.

...read more

Build your own interactive JavaScript playground

Recently I spent some time working on my own JavaScript playground called Demoit. Something like CodeSandbox, JSBin or Codepen. I already blogged about why I did it but decided to write down some implementation details. Everything happens at runtime in the browser so it is pretty interesting project.

...read more

Jolly Roger - a 2KB micro-framework based on React hooks API

The hooks API is a wonderful idea. There are some slick patterns involved that push the React development to a more functional approach. I'm interested in trying that new API and decided to use it for my latest project. However, after a couple of days, it looked like I can't build my app only with hooks. I needed something else. And that's mainly because each hook works on a local component level. I can't really transfer state or exchange reducers between the components. That's why I created Jolly Roger. It has similar helpers but works on a global app level.

...read more

Rethinking the Redux API

I really like Redux. I Love its ideas. The reducers for example - small pure functions that apply changes without side effects are nice way to model the mutations in the state. Redux also teaches us to use the one-direction data flow which makes our apps more predictable and stable. These two things fits well for what we are doing on the front-end - building user interfaces.

Of course there is nothing perfect and Redux as every other library has its own problems. In this article I want to explore some ideas for new APIs that will help solving the problems that I encounter. I’ll be happy to see your comments below.

...read more

Reactive view - the concept

Something bugs me last couple of years. I'm using React for some time now and there is always this doubt if I'm placing the business logic on the right place. I'm trying to be pragmatic, to follow best practices and listen what the community is saying. However, I still feel that something is not ok. This blog post presents the idea of the reactive view. That is nothing new per se but I came up with this term because it fits well in my idea.

...read more

Part 1: We need channels! A gentle introduction to communicating sequential processes.

CSP is a formal language for describing patterns of interaction in concurrent systems. It's used in Go, Crystal, Clojure's core.async and a couple of other places. The idea in its core is nothing so complicated but it offers some interesting capabilities. Surprisingly enough it is not really popular in JavaScript. Recently I'm exploring this pattern and here are my findings.

...read more

Part 2: Riew - reactive view basics

Riew is a library based on communicating sequential processes (CSP). It is made to help with communication and synchronization between your view and business logic. It's distributed as a npm package, it has 0 dependencies and adds ~8KBs (gzip) to your application on production.

...read more

Part 3: Riew - reactive view in patterns

In this article we will see some use cases of Riew. Those are patterns which I found repeating while using the library. There are other blog posts part of the same series and I will suggest checking at least this one so you get a basic understanding before jumping into the code snippets below.

...read more

Pairify - how to match balanced string pairs

I'm now actively working on a VSCode extension. I started it as a theme but then decided to add some more features. Like for example a tin line on the left side of the editor marking the current function scope. In order to do that I had to analyze the current file's code and find the lines that are included in that scope. The obvious approach will be to translate the code to AST and then traverse the tree finding the information that I need. This however will require the usage of a language server which now I don't want to deal with. So I decided to explore a brute force approach. Looping over the string characters and finding balanced matches. I quickly wrapped it into a library. I called it Pairify. It consumes text and returns an array of pairs. This blog post will show you how it works.

...read more

Recreating Facebook's Recoil library

This weekend I decided to play with the new kid on the block - Facebook's Recoil library for managing state. I did the trivial counter example to see how it works. It's pretty simple idea so I wondered how much it takes to replicate its features. I found the exact answer - 70 lines of code. Obviously, my implementation didn't cover everything but it was fun so I decided to share my findings.

(A side note: I did not look at the code of Recoil. I didn't want to be bias on how to write my version.)

...read more