Back in February last year I blog on topic Email not working after DNS change. Well, I had kinda similar situation but not exactly. This time I bought a domain from Google and wanted to use an email with it. The setup wasn't obvious for me so I decided to document the process.

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.

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.

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.

87% of my readers are using Chrome on desktop. This means that I have the luxury to care less about performance. However I just recently found that this blog has 56 (out of 100) points on Google's pagespeed test. That's not good. The report says that my Disqus comments are blocking the main thread for ~900ms. I want comments on my blog but I also want my users to reach to content as quickly as possible. So, after so many years using Disqus I decided to break with it and use something else.

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 small library that has a logger. I'm bundling the app to a single file and I want to disable the logger for the production version. In this blog post we will see how I removed the logger.log calls from my bundle using AST (abstract syntax tree).

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.

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'm using Git and GitHub in particular a lot. And when I say a lot I really mean all the time. Recently I tracked a week of work and found that 62% of my working time goes into code reviews. Sometimes I'm checking out a branch locally and trying stuff but really most of my time goes into github.com. I spent some time analyzing why the code review process is so time consuming for me. I identified couple of reasons, made a tool and changed some of my habits. In this article I'll show you how I improved my code review speed and lower the time to 38%.

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.

If your users deal with images (photos, product images, etc.) it will be great if they have the ability to apply some basic editing after upload, e.g. adjust brightness and contrast for sharper view, crop, add some text, etc. However, if image editing is not the primary feature of your product, the profit from investment in such secondary feature won't cover the costs. Integrating a 3rd party image editor appears to be a wiser choice.

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.

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.

One of my favorite conferences Bulgaria Web Summit 2017 is just around the corner. I’m happy to attend again. The organizer prepared a good set of speakers and the event is two days this year.

When we start using React we very soon also start asking questions. Where I’m suppose to put my data, how to communicate changes or how to manage state? The answers of this questions are very often matter of context and sometimes just practice and experience with the library. However, there is a pattern which is used widely and helps organizing React based applications - splitting the components into presentational and containers.

Amazing art direction and storytelling in this one of a kind 360-degree musical short film from Oscar-winning animator Patrick Osborne. Watch out, it's a tear jerker!

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.

This is a quick post so I document my two hours research. I'm working on a open source library for routing in the browser. Or in other words JavaScript library that uses the history API. The thing is that locally I'm using Apache as a dev server and I wanted all the request to specific folder to be redirected to index.html.

I could split my programming experience in two parts. The first one is a little bit more creative. That's the time where the application still does not exist. You invent and architect the program. The second part is extending and fixing the already created system. They, these two parts, have their own interesting and boring sides. However, I believe that they both are in the essence of delivering quality software. This article focuses on bug fixing. It aims to give you bunch of advices how to properly handle the problems in your applications.

The year is 2005. At that time I was a student in Technical University of Varna. As every normal student I had to visit the building of the university from time to time.

I’m reading and watching a lot of interesting things regarding client-side performance. I’m interested in the browser’s processes happening before and just after the page’s load. There are tons of stuff to think about. Before a couple of days, I joined the online workshop of Vitaly Friedman. I had a great time and learned some clever facts about performance optimization.

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.

These are screencasts from the this year's Scotland JS conferences. It happened on 9th and 10th of May. If you are a JavaScript developer you will probably want to see the talks.

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.

I'm a Windows user and I'm working on a ExpressionEngine based site. I'm using EasyPHP as a server and everything works as expected. However, once I decided to upload a file I got "Thumbnail could not be created for the image. Please make sure the thumbnail directory is writable.".

I'm currently working on a JavaScript application which is using the facebook API. There are some things which I need to pass from one page to the other. So, I decided to use cookies. The storing works like a charm, but the deleting doesn't. I needed one hour to find the exact problem.

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.

The first challenge, was something which I was thinking about a lot these days. The next one is actually a well known common task, but it is still difficult. In every project we have different types of layouts. Of course there are some patterns. The idea today is to implement them with pure CSS.

Nowadays is really difficult to be up to date with the latest technologies, concepts or tools. There are several ways to accomplish this. You could use RSS, check blogs regularly or follow as many people as possible in Twitter/Facebook. My way is to watch videos from various conferences.

That's first of (I hope) many posts with such an idea. Problems solved with pure CSS. No JavaScript.

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.

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.

That's a guest blog post provided by Chatwing.

The cinemas will be filled with new movies again and I will be expecting more honest reviews from film buffs and wannabes from different parts of the world. Well, one can say that there are always new stuff in the Internet—new trend, new meme, new films, and new books. Everything becomes old in the Internet so fast. Along with these new things, my favourite chat box has started launching new updates. Wait—what is my favourite chat box?

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

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.

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.

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.

A bunch of cool stuff ;-)

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.

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.

PHP is one of the most popular back-end solutions available. However, I think that there is something wrong with the way we are using it. It is really popular to use some giant framework, with a lot of features. Generally, I'm not a big fan of this approach. Even if the framework is well documented and has big community it still adds some restrictions and complexity. Many people are trying to build the perfect framework, which covers as many cases as possible, but the true is that it is not possible. In this article I'll present you my vision about PHP programming and I will be very happy if you share yours.

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.

We all know the annoying message of Internet Explorer about non secure items. I just found a simple web tool which helps to find those items and repair them.http://www.whynopadlock.com/

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.

Today I received my Pomodoro Robotlegs timer. Special thanks to Stray and Robotlegs team for this little gem.

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

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.

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.

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

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.

Amazing lineup ...

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.

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.

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.

Finally I managed to create the RSS feed for this blog. The url is http://krasimirtsonev.com/blog/rss.

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.

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.

There are some things that I'm doing in almost every project. Loading of data in Flash is actually one of them. In this article I'll show you how to load information from MySQL database. We will use PHP as a junction between the Flash and the database. You need an Apache server like XAMPP or EasyPHP installed or just a hosting account that supports php.

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.