I did roughly 50 talks over the years, and for almost all of them, I used Reveal.js. I like it because it's HTML-based. I have complete control of everything and can easily publish the slides online. However, one thing bugs me every single time - the size of my content. I want to use all the available space. This becomes very important when I'm showing code to people. That's why I wrote SimPre. It's a 10KB HTML presentation framework that properly scales and positions my content.

If you are building some sort of an app, Babel is probably part of your build system. It is that thing which converts our fancy code to valid, working in a browser, JavaScript. Just recently at work I had to design a solution that swaps a class based on the environment. Or in another words, we have logic that should not reach our users. The file should be available locally and on our staging environment but not in production. A tiny Babel plugin was the cheapest solution for me so I decided to share the result.

I did transfer MP3 files from my mac to my iPhone three times and every time I'm forgetting how it actually works. So I decided to document the process into a blog post.

JavaScript is your behavior layer; the way to add interactivity to your sites, to provide a slick and delightful user experience, to make everything fast and easy and clean. But at some point everything changed: the tail started to wag the dog instead and development became JavaScript-first.

We all know that one of the most challenging task in software development is state management. This is especially true for the JavaScript world. There are thousands of articles on this topic and so I decided to write another one 😁. I wanted to share my current thoughts on the different state types. I found that answering "What lives where?" question is far more important than the actual state management. Which more or less is an implementation detail.

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

I ❤️ markdown. I like its simplicity and minimalistic API which is good enough to cover most of needed HTML markup. At least for textual content. At work we have a small node based microservice that delivers data from Contentful in exactly markdown format. It's all working well but we started having cases where part of the text is in Contentful and the other part is in that microservice. For example when we have a button with a catchy design. We want to content manage the label of the button but the actual markup to be on our side.

These days I had an interesting problem to solve. At work, on our staging environment, we have basic authorization. It works really well but for some older versions of Chrome we experienced a weird issue. The browser did not pass the authorization header. The app runs fine but as soon as it does a fetch request to a local endpoint the request fails with 401 not-authorized error. In the modern browsers that's not happening because the browser kinda knows that we came here with basic auth and automatically includes authorization: basic ... header.

В тези смутни времена се чуваме online с Радо Станков за да си поговорим за remote working. Не че по принцип не се чуваме така, но сега е малко по-различно. В този 24-ти епизод споделяме нашия опит в работа от разстояние. Приятно слушане.

These days working from home is a norm. We all know why. This f.cking virus is all over the globe. I bet there are tons of articles on how to work remotely efficiently but I wanted to give my two cents.

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.

2020 for me started with the release of several OS projects. Two of them reached 100 stars in a week and I was thinking that would be nice sharing my workflow. Not like it is working every time, absolutely not, but leads to some good results.

I just spent ~2 hours on this and I had to blog about it. I bet I will come back to the same problem and it will be nice to have a quick solution at hand. And the problem that I'm talking about is the non working Go to definition or Go to implementation feature of VSCode. Or in other words the JavaScript IntelliSense was not working for me. Of course it was annoying because I had to navigate to files manually via the folder tree on the left or typing the name of the file in the Cmd+Shift+P popup.

Yesterday was one of those days. I stumbled a task and wanted to find the right tool for it. That same task is on my way at least twice a week and I always refuse to optimize it. Because it was a weekend I decided to spend some time and research a proper tool for the job. Well, I find nothing that suites my need. I time-boxed a hour and said F.ck it!. I will code it myself. That's how Hopa was born - a zero config CLI that runs JavaScript and TypeScript. Transpiles, bundles, watches and executes code.

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.

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.

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.

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.

I just finished reading My Decade in Review by Dan Abramov and as part of his article he mentions this talk by Bret Victor. I think it's amazing and want to keep a reference to it somewhere. What a better place than this 12 years old blog.

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.

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.

I had an interesting bug in my React application. It happened that the problem was in the fact that I was using forEach instead of for.

The bug that I was encounter was

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.

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.

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.

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.

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.

Първия епизод за 2018 е с Мариан и Павел. Поговорихме си за Sashido.io, инфраструктури, наемане на хора и още нещо :)

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.

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.

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.

I was doing a podcast episode with Kent C. Dodds when he mentioned README-driven development. And so I decided to try it out with a new library which I just started. Here’s what I found.

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.

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

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.

If you are front-end developer dealing with single page applications you probably know that JavaScript ecosystem is not perfect at all. A few things may go wrong and break your build. In this article I’ll go through those features. Features which are, by my humble opinion, problematic.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

That's right. I'm not using the terminal anymore. Instead of that I'm using Chrome. Yes, the Google's browser. There is an extension called Yez! that connects to a Node.js module via web socket. It executes the shell commands and returns the result. And even works under Windows.

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.

There are only two weeks left before the international front-end conference in Linz - Codefront.io. It's organized by the guys from WebBox and it's scheduled for 10th of May. You still have a chance to buy a ticket and listen interesting talks about our lovely Web.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

I just answered on that question at StackOverflow. That's actually asked a lot last few months.

Luckily, I have time to watch screencasts from various conferences. Last few weeks I'm watching videos from Fronteers2012. They are all great and it worths checking out. However, there is something which I found really interesting. It's about animating pseudo elements.

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.

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.

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

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.

I really like SASS and I use it a lot in my daily job. There are tons of useful features. However there are some things which I want to do, but I can't. There are limitation in the syntax and missing functionalities. Sharing what I found, I want to know if you meet those limitation and how you get around them.

In my company, we have a lot of WordPress sites. Some of them require contact form with captcha field. The short way for solving such task is to use a plugin. However, as you may guess, the add-ons are available for everyone, which means that they could be easily explored and probably hacked. That's why I suggested a simple, custom script, which is developed by us.

I just started using SASS and I love it. A bunch of cool features, which will help me to improve my CSS coding. @content directive is one of them.

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.

Last months I'm actively working on an extension for my favorite browser - Google Chrome. Here are few videos showing some of its functionalities.

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.

I created a simple JavaScript library for running functions in a sequence. The story behind this is published here. Today I made few interesting changes which deserve a new blog post.

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.

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

Last month I'm working on my own extension for Chrome. It adds two things - a much simpler new tab page and fully working interactive console. The command prompt is actually added in the DevTools panel.

Again, a very nice surprise by Adobe. I have a flex application which makes cross-domain requests to another server holding REST API. There is a crossdomain.xml file, but the request still doesn't work.

I found ExpressionEngine framework very good. It brings the flexibility which I need and still has a good amount of features. However, as many other similar tools, the deployment could be a little bit difficult.

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

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.

The replace method in JavaScript is pretty much the same as in the other languages. Replace part/s of a string with something else. However, there are some tricky moments and I wanted to write this article, because I met this problem several times in the past. Actually, very often I use my blog as a documentation for myself and this is one of those cases. Probably I'll be in the same situation after week or so and I'll just check here for the proper solution.

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.

I really don't like FlashBuilder. Mainly because I'm losing a lot of time just to setup the project. Usually when I receive the files I need around 10 hours just to compile successfully. The reasons for those problems are different Flex SDK, different directories' tree, wrong paths, missing libraries or fonts. Today I encounter a brand new type of problem.

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.

Presentation's slides. All my talks at VarnaLab are available here.

I'm going to start a new project with ExpressionEngine. So, I made a short review of the framework's capabilities. The article is available at my account in tech.pro.

Everyday I'm reading or watching something which I find helpful. Normally I bookmark those things, but at the end I have dozen of folders and subfolders which I never check. So, I decided to make such blog post where I'll share valuable things in the net.

As you may know I just updated my web site. There are five columns which nicely slide up and down on a lower resolution. In other words, accordion-like navigation. Initially I made this effect with JavaScript. But there was a bug and I decided to use pure CSS. I wanted to define everything in CSS classes which to add or remove. The idea wasn't bad except the fact that every column contains dynamic content and I wasn't able to set the exact height when the column is slided down.

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.

A bunch of cool stuff ;-)

Some of the cool and helpful things which I found in the net.

Slow JavaScript code on your pages? Chrome provides both a sampling, and a structural profiler to help you track down, isolate, and fix the underlying problem. Tune in to learn how to use both profilers, and how to improve your own workflow to build better, faster browser applications! We'll talk about chrome://tracing, the built-in JS profiler in DevTools, and much more.

If you are wonder what exactly "Retina display" means I'll suggest to check this great article in SmashingMagazine. I searched a lot for a simple explanation and that's the best one.

I'm working on a very simple tool which compiles some stuff. The big problem is that if I write something wrong I can't catch the exception from the compiler and the nodejs's process exists. Then I have to go back to the console and run the app again. That's of course not acceptable. Thankfully there is a workaround.

As you may know, Apple doesn't allow creation of iOS applications just like that. Especially under Windows. It's somehow a complex process, which requires several steps in a specific order. However it is still possible and you can do that without Mac.

A screencast of the discussion at VarnaLab on subject "Web assets - tips for better organization and performance". The slides are available here.

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.

AE Ventures (part of Alkuvoima East Group) is developing a game engine called Activation Engine for real life gaming, where gaming missions become part of everyday activities. These games can be created by anyone and are geared towards learning and casual entertainment.

A screen capture of the discussion about PHP at VarnaLab.

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.

A screen capture of the discussion about Photoshop at VarnaLab.

Agile or Agile Development – we hear these words more often these days. But do we really know what it is all about? How can it help us become more effective, while having lots of fun developing software? How can we use it to communicate with business people and make this communication easy and constructive for both sides?http://net.tutsplus.com/articles/general/the-principles-of-agile-development/

Maybe one of the best explanations of the prototype in the context of JavaScript language.http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/

_The evil that CSS do:- Browsers block rendering until all CSS arrives. With the worst possible experience: white page.- Browsers download CSS they don't need, e.g. print, tv, device-ratio... And most browsers block rendering because of these too- Sometimes CSS blocks the other downloads too (not just block rendering, but block images and scripts that follow) - when followed by an inline SCRIPT or when it's a CSS in conditional comment for IE_Read the full artcile by Stoyan Stefanov here.

_Programming and the Profession of Programming are quite different things. Programming is being able to efficiently tell a computer exactly what to do in a repeatable manner. The profession of programming is being able to efficiently convert business requirements into bugs._Read the full article here.

By my opinion one of the biggest problems in programming are dependencies. If you want to have a good well written application you should avoid dependencies between your modules/classes. There is a design pattern which could help and it's called Dependency Injection (DI). It allows you to inject objects into a class, instead of creating them there.

As an interpreted language, JavaScript is filled with hidden performance issues that conspire to slow down your code and ruin the user experience. Learn exactly what is fast, what is slow, and what you can do to squeeze that last bit of performance out of your JavaScript code.

A layer-by-layer deconstruction of "Flowing Meditation," part of REBIRTH of GAEA, an epic visual tapestry delicately interweaving reflections on the environment and spirituality through the rich imagery of Greek Mythology.

In this article, Keith Peters discusses object creation in JavaScript using prototypal inheritance as an alternative to the new operator. Check out here.

The PEAR Coding Standards apply to code that is part of the official PEAR distribution. Coding standards often abbreviated as CS among developers and they aim to keep code consistent to be easily readable and maintainable by most of PEAR folks.http://pear.php.net/manual/en/standards.php

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.

The Dependency Inversion Principle relates to the stability and reusability of higher-level components within an application. The principle states:_A. High-level modules should not depend on low-level modules. Both should depend on abstractions.B. Abstractions should not depend upon details. Details should depend upon abstractions._Read more here.

In my opinion that principle is really important and stays in the fundamentals of software design._In the context of the Single Responsibility Principle (SRP) we define a responsibility to be "a reason for change." If you can think of more than one motive for changing a class, then that class has more than one responsibility. This is sometimes hard to see._Read more about this principle here.

That's a great article by Robert C. Martin. It's one of those articles that really may change something in your programming. The principle is called Open-Closed and it says:_SOFTWARE ENTITIES (CLASSES, MODULES, FUNCTIONS, ETC.) SHOULD BE OPEN FOR EXTENSION, BUT CLOSED FOR MODIFICATION._More about that here.

Just a great article. Period! http://anarchycreek.com/2009/05/26/how-tdd-and-pairing-increase-production/

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.

Adobe is in the midst of a fundamental transformation. We are transforming from software in boxes to solutions in the cloud, and to a world of touch interfaces on devices, and social connections everywhere. This is a time of both innovation and change for Adobe and for the Adobe community ...Read the full article here.

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.

_Search marketing consultant Mark Buckingham destroys his 10 favourite search engine optimisation myths and asks leading experts such as Google's Matt Cutts and Search Engine Land's Matt McGee for their opinion._Check out here.

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

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.

@Stray and @Joel Hooks finished their book for RobotLegs. Definitely it is something that you should read. More information here.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

I'm sure that you've already used metadata tags in your flex applications. There are several reserved keywords like [Bindable], [Embed], [Event] and so on (the full list is available here). The function of the metadata tags is to provide additional information to the flex compiler. For example information about embeding assets, dispatching events. This article doesn't explain how to use the default flex tags (you can learn that from here). It shows you how to create your own metadata tags and how to use them.

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

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.

I know that you've met this problem. You have a lot of bitmaps in your library and you have to edit all of them one by one. There are several solutions of this problem. One of them is to use JSFL. There is another one - an extension for Flash provided by ArsThanea. Check it out here.

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.

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.

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.

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.

Sometimes we need to catch the closing of our AIR application to make some things like storing the window's position and size. We can do that in our code.

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.

Simple and easy solution.

Special thanks to Tim Martinez for his review in HumberInteractive.com.Tim Martinez:"The site I chose is the portfolio site of Web Designer and Developer, Krasimir Tsonev.When you hit the site, right off the bat you’re presented with a simple pre-loader and then up comes the navigation. I like the navigation because it starts off centred and one column. I like that the focus is on the navigation and it’s just so clean. The menu has a large font and is easy to read, plus you get a cool rollover. Now when you click on something in the navigation, it gives you what you want right away. When you click on “Work”, then the navigation shifts over and you get a two-column thing going on. The second column then has the submenu items under Work and you get sweet rollovers again. The site’s functionality is very simple. The site’s layout is just so simple. I like it.

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.

_"Yesterday saw Apple announce removal of the infamous restrictions on 3rd party development tools for iOS devices. Twitter lit up, the blogosphere jumped into gear and speculation began in earnest. So what’s this all about and what does it mean for Flash?"_The full article on active.tutsplus.com here.

Did you ever wonder how to create a pixel perfect animation in Papervision3d? I designed my portfolio site in Photoshop, but when I tried to integrate the 3D effects I spent a lot of time in changing the zoom and focus length to match the exact dimensions. And even then they were not perfect.

As you probably know there is no simple way to distort a MovieClip in Flash. The solution that I've found uses AS3. Special thanks to Thomas Pfeiffer and Ruben Swieringa. They share their experience with this problem.

Yesterday I received host name, user name and password for a MySQL server. I needed to export the data from it. I didn't have access to PHPMyAdmin, I tried to connect to the server by mysql.exe on my PC, but it didn't work. And then I found really good solution - PHPMyAdmin in only one php file. I launched it from my localhost and it works. So if you need to export data or just see it, use Adminer. I also uploaded the file on my server, you can download it from here.

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.

Google offers a lot of free tools for us. One of them is really useful and easy to work with - GoogleMaps API. In this article I will show you how to import a map in Flash and place an icon in a specific place.

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.

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

Papervision3d is probably the most popular 3D flash engine. There are dozen of applications/sites that use it. These days I also decided to create a 3D effect in my portfolio site. Everything works fine, but I needed a tooltip for each of the 3D objects on my scene. To be able to animate everything I needed 2D coordinates of all my 3D elements.

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.

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.

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.

The solution was so easy: stage.stageFocusRect = false;Thanks to Rockabit for the post here.

Finally I finished some bugs of my own project management system and I think it's ready for use. SVET is one of my biggest projects and it's a web based project management system, that helps you to organize your work. Basically it's an online notebook which you can use to store the information for your projects. It enables you to track your working time and communicate with your team and clients. You can also make detailed reports of what you've done for a specific period of time. Please check out here.

Filmefex Studio is a special effects facility, where they design and create effects for the motion picture industry. Check out here

"Look under the hood of Google Chrome in this comics interpretationof key engineering decisions, by Scott McCloud."

1. Moving background layer - sometimes you want to move the background layer. But by default it's locked. So just click twice on the layer and choose "OK" in the popup message. The layer will be transformed to normal layer.