author: Krasimir Tsonev

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

#JavaScript

Using JavaScript module system for state management

posted in JavaScript on 2021-03-08   , ,

Hot topic last couple of years is state management. Especially in the front-end apps. There are lots of problems and lots of solutions. One thing thought is totally ignored in this context - the JavaScript module system. I'm very often reaching out to this approach and decided to share it here.

read more comments

Miss Piggy - a test runner for Puppeteer

posted in JavaScript on 2021-02-01   , ,

These days I did (again) a bunch of changes in Google tag manager. This time however was more of a refactoring exercise. So, I had to prove that the tags that were placed before the refactoring exist after the refactoring. And what we programmers do in such cases - we write tests.

read more comments

Reinventing the routing in React apps

posted in JavaScript on 2021-01-18   , ,

The router is the backbone of your application. Trust me, that's how it is and I can prove it. One of the fundamental ideas in Web is the URL (Uniform Resource Locator). Or the way of how we very often call it - "web address". No mather what you are building there is a web address which identifies your resource. The router is the front office that accepts the request to particular URL and wires it to a logic. Logic for generating HTML or JSON response or something else. So, the router is very important part of your system.

At the end of last year I rewrote one of my favorite projects - a vanilla JS router called Navigo. I was procrastinating this work for years. Finally I did it in TypeScript and wrote 100+ unit tests along the way. This refactoring opens the door for new features and more importantly, for integrating the library into other places. Like React for example.

read more comments

Transpile to ES modules with Babel

posted in JavaScript on 2021-01-14   , ,

While I was working on Navigo an issue popped out. It was about using the library in the context of Web Dev Server where we have everything in TypeScript. And something was not ok with Navigo. The npm package wasn't exported properly and we were keep getting a does not provide an export named 'default' error. It turned out the problem is that Navigo is not exported properly as ES module (also known as ESM).

read more comments

Mocking console methods with Jest

posted in JavaScript on 2021-01-01   , ,

I'm recently working on two OS libraries. Both I'm unit testing with Jest. There is some logic that leads to a warning which I'm doing with console.warn. In the unit tests this is happening quite often so I want to suppress it. Also I want to verify that it happens on the right place.

read more comments

Replacing code for production with Babel transformation

posted in JavaScript on 2020-11-29   , ,

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.

read more comments

What the heck is Google Tag Manager and what it has to do with Google Analytics

posted in JavaScript on 2020-09-13   , ,

Just recently I had to do changes in Google Tag Manager at work. It's interesting how I keep forgetting how everything works. So I finally decided to sit down and write an article about these things. If nothing else I will have a good memory snapshot to remind me what is what.

read more comments

You Really Don't Need All That JavaScript, I Promise by Stuart Langridge

posted in JavaScript on 2020-09-12   , ,

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.

read more comments

ReactNative: using SVG as a button

posted in JavaScript on 2020-09-07   , ,

Just recently I started using ReactNative. I've been using React for years but this thing is a whole new world. There are tons of basic stuff which I don't know how to do. Using an SVG as a button is one of them. Find my solution below and expect more short #reactnative blog post soon.

read more comments

React: 50 shades of state

posted in JavaScript on 2020-07-21   , ,

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.

read more comments

Recreating Facebook's Recoil library

posted in JavaScript on 2020-07-12   , ,

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

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

read more comments

Smart placeholders in your markdown

posted in JavaScript on 2020-05-06   , ,

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.

read more comments

Create your own Covid-19 data tracker

posted in JavaScript on 2020-03-30   , ,

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.

read more comments

Pairify - how to match balanced string pairs

posted in JavaScript on 2020-03-11   , ,

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

read more comments

From 0 to 100 GitHub stars in a week

posted in JavaScript on 2020-02-27   , ,

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.

read more comments

Webpack/TypeScript/React starter kit as of 2020

posted in JavaScript on 2020-02-23   , ,

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.

read more comments

Octomments - using GitHub as a comment plugin

posted in JavaScript on 2020-01-31   , ,

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.

read more comments

VSCode go to definition/implementation fixed

posted in JavaScript on 2020-01-17   , ,

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.

read more comments

AST fun. Remove a function call from your bundle

posted in JavaScript on 2020-01-13   , ,

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

read more comments

Hopa - zero config CLI that runs JavaScript and TypeScript

posted in JavaScript on 2020-01-12   , ,

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.

read more comments

Make your objects iterable

posted in JavaScript on 2019-11-01   , ,

Just recently I became a fan of the iterable protocol. I knew about it for some time now but never actually integrated it on my own. I ended up using it to provide a nice API for one of my libraries and I thought that this approach worth sharing.

read more comments

Rethinking the Redux API

posted in JavaScript on 2019-09-10   , ,

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

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

read more comments

React: rendering vs running your components

posted in JavaScript on 2019-07-03   , ,

Recently I stumbled upon on an interesting bug which reminded me what is actually happening with my components when React is rendering them.

read more comments

From PHP to Node with Zeit's lambdas and Cypress.io

posted in JavaScript on 2019-05-23   , ,

The first post in this blog was published on 25th of August 2008. This place was always living on a shared PHP/MySQL hosting. It was driven by a custom made PHP CMS for over 10 years. It is time to move forward and follow my actual language of choice - JavaScript. I spent some time recently migrating it to Zeit and this article is showing my process.

read more comments

Why and how I built my own alternative of the GitHub's UI

posted in JavaScript on 2019-04-25   , ,

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

read more comments

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

posted in JavaScript on 2019-04-20   , ,

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

read more comments

forEach or not to forEach

posted in JavaScript on 2019-04-12   , ,

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

read more comments

Build your own interactive JavaScript playground

posted in JavaScript on 2018-11-13   , ,

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

read more comments

My new and shiny tool for live demos - Demoit

posted in JavaScript on 2018-11-05   , ,

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.

read more comments

React hooks: changing the mindset

posted in JavaScript on 2018-10-31   , ,

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

read more comments

Pixo - Image editor for your web app

posted in JavaScript on 2018-09-03   , ,

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.

read more comments

A story about React, Redux and server-side rendering

posted in JavaScript on 2018-06-29   , ,

Long long time ago in a kingdom far far away there was an app. The app was supported by the well known React and Redux families but there was a problem. It was damn slow. People started complaining and the app had to do something. It had to deliver its content quickly so it provides better user experience. Then the server-side rendering was born.

read more comments

React and separation of concerns

posted in JavaScript on 2018-05-27   , ,

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

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

read more comments

Implementing an async queue in 23 lines of code

posted in JavaScript on 2018-05-07   , ,

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

read more comments

My take on Redux architecture

posted in JavaScript on 2018-04-06   , ,

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

read more comments

Meet Evala - your terminal in the browser

posted in JavaScript on 2018-02-14   , ,

On my machine I have four applications always open - VSCode, Chrome, iTerm and Slack. I spend most of my time in Chrome and VSCode. My editor is full with awesome extensions and I feel pretty good there. What I am doing for the browser is making sure that I have fewer tabs open and install only extensions that I really use. One thing though I can achieve so far. I can't find the perfect new tab extension.

read more comments

Debugging your front-end like it's 2019

posted in JavaScript on 2018-01-20   , ,

(If you are lazy jump to this section to learn what is this article all about.)

Remember The Island movie from 2005. I watched it again these days and I realized that the old sci-fi titles start with something really interesting. It is funny how they create a world of flying vehicles and say something like "The year is 2019 …". Well, we are 2018 and the public transport is still on the ground. We still can't clone people (I hope so) or travel in a giant spaceship which looks like a fully-functional city.

read more comments

Markup as function

posted in JavaScript on 2017-12-01   , ,

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

read more comments

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

posted in JavaScript on 2017-11-24   , ,

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

read more comments

Getting from Redux to a state machine

posted in JavaScript on 2017-11-10   , ,

This article is about Stent - a Redux-liked library that creates and manages state machines. Stent implements some of the Redux’s core ideas and in fact looks a lot like it. At the end of this post we will see that both libraries have a lot in common. Stent is just using state machines under the hood and eliminates some of the boilerplate that comes with Redux’s workflow.

read more comments

You are managing state? Think twice.

posted in JavaScript on 2017-10-27   , ,

Recently I started questioning the state management in React applications. I’ve made some really interesting conclusions and in this article I’ll show you that what we call a state management may not be exactly about managing state.

read more comments

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

posted in JavaScript on 2017-10-10   , ,

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

read more comments

The powerful higher-order component pattern

posted in JavaScript on 2017-06-10   , ,

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

read more comments

Children in JSX

posted in JavaScript on 2017-01-06   , ,

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

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

read more comments

React and third-party libraries

posted in JavaScript on 2016-11-27   , ,

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. read more comments

Presentational and container React components

posted in JavaScript on 2016-08-01   , ,

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.

read more comments

React.js in patterns

posted in JavaScript on 2016-07-20   , ,

Long time I was searching for a good front-end framework. Framework that will help me write scalable and easy to maintain UI. Even though React is just a library for rendering it comes with so many benefits that I can easily say “I found it”. And like every thing that I use a lot I started seeing some patterns. Techniques that are applied over and over again and I see in the code of other developers. It’s time that I start documenting, discussing and sharing these patterns.

read more comments

Let's write, not generate code. Thoughts about naming stuff.

posted in JavaScript on 2016-07-03   , ,

I’m writing code for approximately ten years now and at some point the word “writing” became more important then “code”. I found out that it is easy to generate code but it is difficult to write code. Writing means creating something meaningful. Something that other human beings will read. The code is indeed sent to machines and they do understand ugly code. Not the same for humans though. An important part of our job is to make sure that our code is clear for other teammates.

read more comments

The bare minimum to work with React

posted in JavaScript on 2016-06-13   , ,

The setup here is available at GitHub here.

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

read more comments

Thoughts on semantic versioning, npm and JavaScript ecosystem as a whole

posted in JavaScript on 2016-05-11   , ,

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.

read more comments

iframe, or not, that is the question

posted in JavaScript on 2016-04-09   , ,

One of the things that I really like at work is the fact that we spend time in research tickets. We have unknowns and we make a research to find out more information on particular topic. We then base our decisions on the results. Recently we had to decide whether to use an <iframe> for a third party widget development. I feel that the collected information may be handy to someone else so I decided to write it down here. read more comments

Lazy-load your images with Coloor

posted in JavaScript on 2016-04-03   , ,

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

read more comments

The earthquake in the JavaScript community

posted in JavaScript on 2016-03-25   , ,

You probably heard about Kik, NPM and left-pad saga this week. Shortly, a company Kik asked a developer Azer Koçulu to give the ownership on a NPM module. The module name matches the name of the company. The developer refuses and the company reaches the registry (NPM). The module was transfered to the company based on a NPM policy. The developer then decided to remove all his modules from the registry. The bad thing is that one of these modules left-pad is a dependency of many other modules. As a result of the un-publishing all the packages that depend on left-pad can not be built. Some really popular tools like Babel and React started getting broken builds.

read more comments

Constructive destructuring

posted in JavaScript on 2016-02-24   , ,

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

read more comments

Meet sequence expression

posted in JavaScript on 2016-02-02   , ,

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

read more comments

Unexpected usage of Array.length

posted in JavaScript on 2016-01-14   , ,

I like reading code of other developers. It’s a nice way to learn patterns, techniques and small tricks. Recently I found something about Array.prototype.length which caught my attention.

read more comments

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

posted in JavaScript on 2016-01-05   , ,

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

read more comments

Deep dive into client-side routing

posted in JavaScript on 2016-01-03   , ,

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

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

read more comments

Start your own JavaScript library using webpack and ES6

posted in JavaScript on 2015-12-30   , ,

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

read more comments

JavaScript's reduce could be really helpful

posted in JavaScript on 2015-12-25   , ,

I love using functions like map, filter or reduce. They are an important part of my arsenal and I simply can’t stop using them. Today I had to solve an interesting problem and I ended up using reduce.

read more comments

Using Mocha with ES6 spec files

posted in JavaScript on 2015-12-23   , ,

The new ES6 specification of JavaScript simply works better for me. It helps expressing my ideas in a shorter and cleaner way. So, I want to write ES6 everywhere. Even while I’m testing my applications.

read more comments

Dissection of Flux architecture or how to write your own

posted in JavaScript on 2015-12-18   , ,

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

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

read more comments

A story about currying

posted in JavaScript on 2015-12-15   , ,

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

read more comments

Enforce standards while submitting a pull request

posted in JavaScript on 2015-11-29   , ,

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

read more comments

Distributing React components

posted in JavaScript on 2015-11-23   , ,

While I was open sourcing react-place I noticed that there is some complexity around preparing the component for releasing. I decided to document the process here so I have a solid resource next time. You may be surprised but writing the working jsx file doesn’t mean that the component is ready for publishing and is usable for other developers.

read more comments

A modern React starter pack based on webpack

posted in JavaScript on 2015-10-01   , ,

Checkout React webpack starter in GitHub.

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

read more comments

How require/import may decrease your testability

posted in JavaScript on 2015-08-23   , ,

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

read more comments

Rethinking JavaScript readability

posted in JavaScript on 2015-08-10   , ,

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

read more comments

Hacking Browserify

posted in JavaScript on 2015-07-04   , ,

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

read more comments

Using Local Storage as a communication channel

posted in JavaScript on 2015-05-05   , ,

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

read more comments

Unit test your client-side JavaScript

posted in JavaScript on 2014-11-20   , ,

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

read more comments

ToDoMVC with AbsurdJS

posted in JavaScript on 2014-07-26   , ,

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

read more comments

Feeding the beast at 60fps

posted in JavaScript on 2014-07-23   , ,

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

read more comments

Stop autoplaying your Gifs

posted in JavaScript on 2014-06-19   , ,

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.

read more comments

Win Free Copies of the new book - Getting Started with Grunt

posted in JavaScript on 2014-04-15   , ,

Hi guys, you would be pleased to know that I have teamed up with Packt Publishing to organize a Giveaway of the new book - Getting Started with Grunt: The JavaScript Task Runner. And three lucky winners stand a chance to win 3 digital copies of this book. Keep reading to find out how you can be one of the Lucky Winners.

read more comments

Look ma, JavaScript only Off-Canvas menu

posted in JavaScript on 2014-03-25   , ,

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

read more comments

JavaScript: bind function

posted in JavaScript on 2014-03-09   , ,

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

read more comments

Using media queries in JavaScript (AbsurdJS edition)

posted in JavaScript on 2014-03-04   , ,

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

read more comments

Mastering the DOM access

posted in JavaScript on 2014-02-28   , ,

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

read more comments

Cross-browser handling of Ajax requests

posted in JavaScript on 2014-02-23   , ,

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

read more comments

A modern JavaScript router in 100 lines

posted in JavaScript on 2014-02-21   , ,

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

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

read more comments

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

posted in JavaScript on 2014-01-23   , ,

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

Dependency injection in JavaScript

posted in JavaScript on 2014-01-06   , ,

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

7 lines JavaScript library for calling asynchronous functions

posted in JavaScript on 2013-12-12   , ,

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

read more comments

JavaScript template engine in just 20 lines

posted in JavaScript on 2013-12-01   , ,

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

AbsurdJS fundamentals

posted in JavaScript on 2013-11-11   , ,

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

read more comments

An alternative JavaScript for loop syntax

posted in JavaScript on 2013-11-08   , ,

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

read more comments

JavaScript: dependency free extend method

posted in JavaScript on 2013-10-28   , ,

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

read more comments

JavaScript challenge: queue implementation

posted in JavaScript on 2013-09-24   , ,

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

read more comments

JavaScript: creating class based on object

posted in JavaScript on 2013-08-31   , ,

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

read more comments

Managing events in JavaScript

posted in JavaScript on 2013-08-23   , ,

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

read more comments

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

posted in JavaScript on 2013-08-22   , ,

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

read more comments

A bad side effect of the aspect oriented programming

posted in JavaScript on 2013-08-15   , ,

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

read more comments

AJAX request doesn't work in IE (url encoding problem)

posted in JavaScript on 2013-08-08   , ,

The good old Internet Explorer. It's full with surprises. I just fixed a bug happening only in IE. Everything works just great in every other browser.

read more comments

DalekJS - Automated cross browser testing with JavaScript!

posted in JavaScript on 2013-08-02  
If you like instruments like Selenium or Phantomjs you should definitely check DalekJS. Written by Sebastian Golasch this nodejs module could help you to test your front-end. read more comments

Auxilio Chrome extension - common use cases

posted in JavaScript on 2013-07-25  
Last months I'm actively working on an extension for my favorite browser - Google Chrome. Here are few videos showing some of its functionalities. read more comments

JavaScript is cool

posted in JavaScript on 2013-07-23   , ,

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

read more comments

Twitter streaming API, NodeJS and 401 Unauthorized error

posted in JavaScript on 2013-07-17   , ,
I'm working on a year old application written in node. There is twitter streaming API implemented and it worked before a couple of months. These days we moved the site on another server and I found that it is not working anymore. read more comments

JavaScript: sequencing function calls #2

posted in JavaScript on 2013-07-10   , ,

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. read more comments

JavaScript: sequencing function calls

posted in JavaScript on 2013-07-09   , ,

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

read more comments

Extending Jasmine (BDD framework for testing)

posted in JavaScript on 2013-07-05   , ,

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

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

posted in JavaScript on 2013-06-18   , ,
It's really interesting to work on an extension for Chrome. However, sometimes it's a little bit difficult to debug. Especially when you work on a dev tools add-on (i.e. a new tab). read more comments

Insert css or javascript dynamically

posted in JavaScript on 2013-06-18   , ,
That's a super simple function for adding new css or javascript files in the current document. I didn't test it in all the browsers, because I'm using it in the chrome extension and I need only Chrome supported. read more comments

Javascript string replace and regular expression

posted in JavaScript on 2013-06-15   , ,
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. read more comments

Chrome Extension: run JavaScript in the context of the current page

posted in JavaScript on 2013-06-14   , ,
I'm currently working on a Google Chrome extension and I need to run a JavaScript in the context of the current page. The obvious choice for such a logic is the content script. However it is not so easy, because the content script has an access only to the DOM of the current page. It can't run global functions or use global objects. read more comments

Simple command line parser in JavaScript

posted in JavaScript on 2013-06-11   , ,
There should be some super cool RegEx, which I can use. However after short research I wasn't able to find it. So, I created a simple function which does the job. read more comments

Convert HTML string to DOM element

posted in JavaScript on 2013-06-11   , ,

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

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

read more comments

iPhone and iPod detection under JavaScript

posted in JavaScript on 2013-03-29   , ,
A little code snippet for detecting iPhone or iPod. You can easily edit it to match iPad. read more comments

Tern - intelligent JavaScript editing

posted in JavaScript on 2013-03-15   ,
This is Tern. Tern is a stand-alone, editor-independant JavaScript analyzer that can be used to improve the JavaScript integration of existing editors. read more comments

Douglas Crockford’s Function Challenges

posted in JavaScript on 2013-02-25   , ,
Douglas Crockford’s Function Challenges. Test your knowledge of function scope and and learn to compose functions that can be called multiple times through function returns. read more comments

JSConf 2012 (videos)

posted in JavaScript on 2012-08-22   , ,
Today is a day for posting videos. Another interesting conference - JSConf 2012. The videos are available here http://2012.jsconf.us/. read more comments

What is JavaScript prototype by Angus Croll

posted in JavaScript on 2012-06-30   , ,
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/ read more comments

Google I/O 2011: Learning to Love JavaScript (by Alex Russell)

posted in JavaScript on 2012-06-11  
JavaScript remains one of the most popular and important programming languages in history. Web Developer and Chrome Engineer Alex Russell exposes the timeless strengths of the JavaScript language and why it is a vital part of the open web platform. Come hear what's next for the JavaScript standard and how to get the most out of the new features coming soon in V8 and Chrome. read more comments

Javascript Development Workflow of 2013

posted in JavaScript on 2012-06-05  
A bunch of tools to speed up and improve your javascript development workflow by Paul Irish. read more comments

Speed Up Your JavaScript

posted in JavaScript on 2012-04-26   , ,
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. read more comments

JavaScript object creation

posted in JavaScript on 2012-03-04   , ,
In this article, Keith Peters discusses object creation in JavaScript using prototypal inheritance as an alternative to the new operator. Check out here. read more comments

Testing Facebook application

posted in JavaScript on 2011-11-29   , ,

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

read more comments

Filtering data with jQuery

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

Google Chrome debug console tips

posted in JavaScript on 2011-10-04  
My personal opinion is that the console of Google Chrome is one of the best tools for debugging of JavaScript applications. Paul Irish gave us some very useful tips. read more comments

JSConf.eu 2011

posted in JavaScript on 2011-09-11   , ,
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. read more comments

GoogleMaps JS API: address to coordinates transformation

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

Another IE surprise

posted in JavaScript on 2011-05-19   , ,
We all know that the usage of InternetExplorer brings a lot of problems for us (the developers). Did you know that there is a JavaScript method createStyleSheet that you can call only 31 times. read more comments

A few things you don\'t know about JavaScript

posted in JavaScript on 2011-05-18   , ,
A couple of days ago, I found very useful page about JavaScript called "JavaScript Garden". Check out here.JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes, subtle bugs, as well as performance issues and bad practices that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language. read more comments

OOP in JavaScript (part 2)

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

Javascript: handling with crossdomain requests

posted in JavaScript on 2011-01-19   , ,
Ajax is a powerful tool for loading new content or data asynchronously. The well known problem is that we can't make requests to other hosts. In other words if your code is located at aaa.com you can't load bbb.com/getData.php. There are several solutions available. read more comments

Javascript: handling keyboard shortcuts with jQuery

posted in JavaScript on 2011-01-19   , ,
Last few years the JavaScript frameworks are big part of our web sites. I strongly recommend the usage of tools like jQuery or MooTools, because they will save you a lot of time and problems. These days I needed to create a keyboard shortcut for one of the projects that I'm working on. I wanted to catch the Ctrl+Shift+F9 combination. It was just a few lines of code and I decided to share it with you. read more comments

JavaScript: managing events (dispatch, listen)

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

GoogleMaps API v3: convert LatLng object to actual pixels

posted in JavaScript on 2011-01-07   , ,
It is not so easy as it looks like. You should get the map object's projection and the map's zoom to be able to calculate it. read more comments

CSS styles doesn\'t work on dynamically created elements in IE

posted in JavaScript on 2010-12-28   , ,
Again, IE proves that is full with bugs. Simple but effective solution. read more comments

Delegation in JavaScript

posted in JavaScript on 2010-12-27   , ,
I think that the delegation is an important part of every programming language. It is also possible in JavaScript. read more comments

Object Oriented Programming in JavaScript (Extending / Inherit classes)

posted in JavaScript on 2010-12-23   , ,
As you probably know JavaScript is not exactly OOP based language. Of course there are some ways to handle with this and you can still create classes and inherit them. It is much much better to use classes. Your application will be well structured and split to modules. read more comments

Javascript: autocomplete country script

posted in JavaScript on 2010-12-06   , ,
We are all filling registration forms. It's really nice when the page helps us to do that faster. The script, that I'm going to show you, is designed to be used for a country field. read more comments

Cloning JSON object in JavaScript

posted in JavaScript on 2010-10-04   , ,
Simple and easy solution. read more comments

Validating date in JavaScript

posted in JavaScript on 2010-06-27   ,
A very simple way to validate date in JavaScript. read more comments