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.

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'm continuing to experiment with React and TypeScript. The weekend-long project this time was a Covid-19 data tracker. In this blog post I will share how I built c19stats.now.sh. I exposed the data as a public API at the same URL. I guess you, as many other people, follow the situation so you may want to glue your fingers on the keyboard and create something useful around the data. I got lots of fun playing with the diagrams.

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 started using TypeScript. I did couple of React projects and noticed a pattern in the setup. I decided to export that to a starter kit 👉 beginning. It is based on Webpack with Babel and TypeScript loader.

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.

I'm working on a project in my own git branch. At the end of my working day I want to do one thing - run Prettier so my code is nicely formatted before I submit the PR for code review. Of course I know about the VSCode Prettier extension but right now my editor is kinda broken and I don't want to mess with it. I'm still on my branch and I run Prettier from the terminal. All good but the amount of changes that happened is so big that my 50+ loc updates are like a needle in a haystack. It is like that because apparently there are already malformatted files in the project. It is definitely not possible to understand what I did because of so much noise. So ... I want to run Prettier but only on the files that I touched in that particular branch.

I had some time during the weekend and decided to work on my slides for an event at the end of the month. I reached the part where I have to do a live coding session and I was wondering what tool to use. At the end I created my own called Demoit. This is a short article explaining how it works.

Episode #15 of NADCAST was live recorded at ReactNotAConf conference in Sofia on 28th of April. After every presentation we've made a panel with the speaker and ask topic related questions. So, if you listen the whole episode you'll get a pretty good overview of what the conference was about.

Епизод 9 на NADCAST е с Радо Станков. Основно си поговорихме за React и нашумелите около библиотеката теми. Приятно слушане :)

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.

I'm a proud father of two and programmer for more then 15 years. My kids are small so I'm really into parenting right now. A bit of a problem for me is to stay up-to-date with the latest technologies in the Web. I really love my job but I just don't have enough time to look after all these frameworks, libraries or tools. I used to read Twitter, monitor RSS feeds and spend hours reading Reddit or Medium. However, no time for that anymore.

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

React is probably one of the best choices for building UI. Good design, support and community. However, there are cases where we want to use an external service or we want to integrate something completely different. We all know that React works heavily with the actual DOM and basically controls what’s rendered on the screen. That’s why integrating of third-party components could be tricky. In this article we will see how to mix React and jQuery’s UI plugin and do it safely.

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.

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.

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.

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.

Christmas is just around the corner. I thought that I should post something. Recently I watchedvideos from two big front-end conferences. So, here is my present for you. A few talks that I think worth attention.

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.

It has been 10 years since Packt Publishing embarked on its mission to deliver effective learning and information services to IT professionals. In that time, it has published over 2000 titles and helped projects become household names, awarding over $400,000 through its Open Source Project Royalty Scheme.

It's again Sunday and I'm planning to watch talks. Last week few conferences shared their recordings. I got some nice videos from Twitter and again my bookmarks bar is full with YouTube and Vimeo links. So, it's time to clear it a bit and make room for the next weekend. Here is my plan:

Us JavaScript programmers like to use words like, "event-loop", "non-blocking", "callback", "asynchronous", "single-threaded" and "concurrency". We say things like "don't block the event loop", "make sure your code runs at 60 frames-per-second", "well of course, it won't work, that function is an asynchronous callback!".

This blog has 460 posts. In some of them, I need to show video clips demonstrating some feature or browser behaviour. I found that it was much better to do that in an animated Gif. However, they play automatically which is kinda annoying. Imagine that we have ten Gifs on the page and while you are reading they all blink or show moving content. It's like having a page full with banners.

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.

I'm currently working on the official site of AbsurdJS. There are a lot of code samples out there and I wanted to present them in JSBins.

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

By definition :before and :after are CSS pseudo elements. You can use them to insert something before or after the content of an element. There are some great articles giving the basics, but I wanted to write down a blog post for the real use cases. Or, at least, to show what I'm using them for.

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.

Ok, that was a long journey. I took an already build project and I had to make some changes. It's a complex system involving flex applications, nodejs and a mobile site. Before to start making changes I had to setup the project and make it work on my local machine. I spend few days doing this. At the end I successfully compile the flex application and made the necessary corrections. I uploaded the new swf file and of course it didn't work.

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

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.

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.

Ok, I should admit that mod_rewrite and regular expressions are not my strongest part. Today - as every other day I realize how little knowledge I have. Actually it's good to have such moments. I lost almost two hours fighting with a really really simple mod_rewrite rule in my .htaccess file.

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.

The goal is to achieve a background of the text inside an inline element.

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.

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.

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.

A bunch of useful things about our lovely browser - Chrome. Dev tools theming, console tips, editing of SASS directly inside the browser.

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.

HTML slicing the site of VarnaLab using LESS and Twitter Bootstrap

sugru is the exciting new self-setting rubber that can be formed by hand. It moulds like play-dough, bonds to almost anything and turns into a strong, flexible silicone rubber overnight.

French beat box phenomenon EKLIPS performs a 4 minutes history of HIP HOP for Trace Urban... In one single take! www.eklips-beatbox.com

Paul Boag covers strategies for working better with design clients.

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.

The European JavaScript conference is really close. It's scheduled for 01 and 02 of October. I wish I could be there. I hope that the videos from the lectures will be shared online, as this happened for the last year. I strongly recommend to watch them. There are available here http://blip.tv/jsconfeu.

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

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.

Flash is wonderful technology and has many advantages. Before a couple of years it was really popuplar to use it for displaying fonts that are not installed on the user's machine. Flash is still powerfull tool for such kind of tasks. These days I worked on a project which had to use a lot of fonts. It wasn't possible to embed all of them so I decided to implement runtime embedding.

Simple way to produce numbered image with PHP. The script uses PHP GD.

"We created an unique physical 3D video mapping experience by turning a white living room into a spacious 360° projection area. This technique allowed us to take control of all colors, patterns and textures of the furniture, wallpapers and carpet. All done with 2 projectors."

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.

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.

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

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.

Currently I'm working on an application that gets data from Twitter. The tweet's string contains links that have to be transformed into html link tags. Here is a simple PHP function that helped me.

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.

Currently I'm working on an AIR application and in the header of it there is a nice gradient which has to be repeated by the x axis to fill the whole screen area. One way to do it is to use a really wide image, something like 2000px. The other way is to use a simple trick and repeat a small part with the gradient.

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.

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

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.

As you probably know there is no such kind of option. We should deal with a little AS3 code.

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.

I successfully finished an interactive project for one of my clients. We did a great job and finally I had to install the system on their server. I received the FTP and MySQL information from their IT team, but when I uploaded all my files the site didn't work at the first time. The server didn't show any errors and I wasn't able to find out the problem.

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

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.

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.

Before a couple of days the code of my site was injected with some milware script code. In this article I will advice you how to remove this message.

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.

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.

Very helpful solution that will save you maybe several hours. I used JSFL language and very short script to parse all the items in the library. Then for every item just embed the characters that I wanted. Get the script from here http://www.outset.ws/files/jsfl/embedCharactersInTextField.jsfl. In flash: Commangs -> Run command (or simply Ctrl+R) and point the script file.You can download the jsfl documentation from here http://livedocs.adobe.com/flash/9.0/main/flash_cs3_extending.pdf.

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.

I'm working with a class for creating scrolling text field. So I'm using a MovieClip as mask and TextField. When I test the movie and close the testing window Flash just crashes. It's because I have applied the mask directly to the TextField :) The problem is described here. Thank you BKWLD !

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

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.