author: Krasimir Tsonev

Hi there, I'm Krasimir. Senior front-end engineer with over 13 years of experience. I write, speak and occasionally code stuff.

Headings Map

Automatically creating GitHub issues

Posting a new comment

Comments fetching

Quick start with Octomments

Pros and cons

Using GitHub issues as a comment plugin

Removing AST node

What is AST

Handling errors in state selectors and mutators

Handling errors inside routines

Async mutations

Managing application state

Use the routine for a short-life local state

Delegating and forking

Re-running/looping routine

Routine's lifecycle


Merging using listen

One-shot piping using take

Merging is consuming values

Bridging the non-riew with the riew world

Local and application state

Routines - start, stop, re-run, fork

Channels - merging/piping, strategies, transforms

Dealing with dependencies

PubSub (listening)

Reading vs taking



Routines and Channels

Communicating sequential processes (CSP)

Communication vs synchronization

The publisher-subscriber pattern

The mediator pattern

Brute-force approach

The test case

Slick interface for your objects


What is iterable protocol

No built-in side effects support

Too much boilerplate

Dealing with DNS

Deployment and alias

Going static

Writing serverless functions

Writing the tests

Cypress runner

Migrating my content to Zeit's lambdas

e2e testing with

Export content from the old MySQL database

The plan

The reasons

This is a title here.

This is a title here

Tricky rendering

Data flow

The data layer

Re-building the context

Code reviewing

Building the context



You like it?

Using the context

Using a reducer

Sharing state

All together

Catching the logs

Producing markup as a result

Handling import statements

Using JavaScript to run JavaScript generated by JavaScript

Transpiling the code

The editor

The default configuration


The obvious advantages

What are hooks


Browser and platform support


Writing the React component ()

Implementing the Redux pattern

The server-side rendering

Running the Node server

Developing the React + Redux application




React components


Store and its reducers

Modeling the actions

Wiring to React components


Final thoughts

Simple counter app using Redux

Redux architecture and its main characteristics

The back-end

The front-end

Detail view of an event

Monitoring the state

Adding a marker and clearing events


Call for contributors

TodoMVC done with React, Redux and redux-saga

Writing a custom emitter

Meet Kuker

A better debugging experience


The script

Chaining generators

Running a function that returns a generator

Handling a command that returns a promise

Handle synchronous function calls

Using a library

Handling errors

Implementing the robust command pattern

Doing the same but using a generator

How’s the command pattern looks like

Quick introduction to generators

Stent implementation - done

The rendering

State machine transitions’ map

Defining the state machine

State machine table/graph

Redux implementation - done

The rendering bit

Wiring our main React component to Redux

Making the HTTP request



Implementing with Stent

Redux implementation

The dummy React components

The authorization service

Teaching by example

The idea

Implementing a state machine in JavaScript

Working with a state machine

What is a state machine?

What about Flux or Redux?

The elephant in the room

The awesome ES6 classes


Template literal

The this problem

Injecting dependencies

Trigger rendering

What is a Higher-Order component?

What's next


To aggregate or not


Venue and city

Second day (8th of April)

First day (7th of April)

Using JSX expression

Hiding complex formatting/styling

What happened last year

Controlling the plugin using React

Initializing the plugin

Force a single-render


Presentational component


A side note

Other resources

The problems

Final thoughts about dependency injection

Passing a child as a property

Using React’s children API



One-way direction data flow

Dependency injection

Higher-order components



Functions and methods


In JavaScript



In a project



The syntax

Post-install scripts

Peer dependencies

The dependency tree hell

What about the package manager

Semantic versioning

An experiment

JavaScript-only, the bad parts

JavaScript-only, unicorns and rainbows

iframe, the bad parts

iframe, unicorns and rainbows


Meeting Coloor

Other commands


Increase visibility

Setting a breakpoint

Continue execution (cont or c)

Step out (out or o)

Step in (step or s)

Next step (next or n)


Available commands

How to run the debugger

When to use Node’s debugger

The unknown property

Working with arrays

Give me all but not …

Better naming and default values

The good old options-as-object case

What’s destructuring assignment

Check if there is a History API

Navigating to a new page

Regular expressions

Subscribing for changes

Changing the path

Reading the route

Navigo - my exercice router implementation

Client-side routing is not exactly only client-side

A routing revolution with pushState

Hash-based routing

The client-side routing is not a new thing

Building production version

Building the development version

npm commands


A few other configuration files

The starter

Directory structure

First of all, what I meant by saying “library”

The task

My choice

Higher-Order components concept

Using a context

With a mixin

Using a helper

A live demo

Wiring all the pieces

The store

The view

The markup

Bounding the views and the stores

The dispatcher

Wrapping up

The final code

The actions

My two cents

Flux architecture and its main characteristics

Curry all the things

Using bind instead

Creating our own currying helper

The template

How to write and use bookmarklet

The result

Generating browser bundle

Producing ES5 entry point

The base


The component

Final notes


Running a local web server



Compiling the JavaScript

NPM as a task runner

All good but we are not living in a perfect world



Factory pattern to the rescue

What is all this about

Bit.js or Digging deeper into Function.prototype patches

Writing readability helpers

A proposal


The Hacking

How Borwserify works

The implementation

Finish line

Get the things done

The preparation

If you are still wondering

The price

Aaaaand, some of the speakers are:

Ben MacGowan: The Era of Gratuitous Animations - Front-end London May 2014

James Higgs - Product development = tradeoffs - Front-end London, November 2014

Alice Bartlett: Burn your select tags - EpicFEL 2014

Nicolas Gallagher - Making Twitter UI infrastructure

Petro Salema - Dream big. Think small.

Kyle Simpson - Choose your own JS adventure

Pete Hunt - Scaling up and down: evolving your testing strategies

Just the whole test

A quick note

Writing the test

Show me the unit …

The blog

Image optimization

Leverage browser caching

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Avoiding redirects

The old state

Improve your responsiveness

Thinking out of the box

Can I use variables in vanilla CSS?

What is a variable actually

How to enter?


The winners

The book

The basic example

The connect dependency

Improving UI after the population


Toggling the ToDos

Deleting an entry


The main area

The header

The footer

Removing, editing and toggling ToDos

Displaying the ToDos

Adding new ToDo

Bootstrapping the application

Writing the model

AbsurdJS components and its dependency injection

Defining a namespace

The CSS styles

Project's setup

AbsurdJS introduction

Smart animations

Dealing with big data

Processing hundreds of DOM elements

Bug reporting

Feedback required

The example

Google I/O - Keynote

Web Rebels 2014

Velocity 2014

XSS (No, the other 'S') - CSSConf EU 2013

Aral Balkan - Free is a Lie - Thinking Digital 2014

Philip Roberts: Help, I'm stuck in an event-loop.

John Sutherland: A Humane Introduction to Functional Programming

Justin Searls: JavaScript Testing Tactics

Dave Kennedy: Foundations for Assemble

Ryan Sandor Richards: High Performance Visualizations with Canvas

James Coglan: Make: the forgotten build tool

Matt Field: Don't Go Changin'

Jonathan Lipps: Yield! How ES6 Generators and Monocle-js Can Bring Async Into Line, Literally

Angelina Fabbro: Keynote

Gabe Hollombe: Build Games with JavaScript and Phaser

Tom Ashworth: ServiceWorker & the offline web

Phil Leggetter: Testing Ginormous JavaScript Apps

Coby Chapple: How design happens at GitHub

Jason Frame: Beyond the AST - A Fr**ework for Learnable Programming

Stian Veum Mollersen: Making math come alive with JavaScript

Sugendran Ganess: Refactoring Legacy Code

Tero Parviainen: Build Your Own AngularJS

Amanda O'Connell: Let's talk... mental health

Joe Pettersson: JavaScript Security: myths, fallacies and anti-patterns

Jan Monschke: Building a collaborative audio editor based on the Web Audio API

Mikeal Rogers: Keynote

Ron Evans: Cylon.js: The JavaScript Evolution Of Open Source Robotics

Jaume Sanchez Elias: Getting started with three.js and WebGL

Zeno Rocha Bueno Netto: A future called Web Components

Jonathan Martin: The Realtime Web: We're Doing it Wrong.

Jo Liss: No more grunt watch: Modern build workflows with Broccoli


The missing banner

The message

Twitter's bug

Bonus (creating aliases)

Defining tasks

Using Yez!

The Node.js app

Serving CSS

Serving the HTML

Adding routes

The truth

How to get started

It's also a task runner

Is it really a terminal?

The motivation

Killing/Stopping the command

Running shell command

Emulating different browsers

Emulating touch events

Emulating devices

Basic responsiveness

Choosing the subject of testing

Special thanks

11th of May (traveling back)

10th of May (the conference's day)

9th of May (traveling)


The speakers


Source code


Final compilation

The footer

The home and the all articles page

Tags page

The sidebar

The custom Techy methods

The layout

The format of the articles

How Techy works


Installing Techy

The idea

The content

Who is this book written for

Why you should read the book


How to Enter?


The winners (edit: 30.04.2014)

Showing/Hiding the menu

Constructing the HTML


Defining the component


The challenge


The native Function.prototype.bind

Setting the scope of a function

Getting or setting the value of an element

Reaching the DOM element



The final result

Sending the request

Getting feedback about the request

Creating XMLHttpRequest object

Returning the promise


Final source code

Changing the URL

Monitoring for changes


Adding and removing routes

Getting the current URL

The Singleton


Injection directly into the scope

The reflection approach

The requirejs / AMD approach

The goal


Front-end development

Back-end development

Beating blank page syndrome




Getting started


Inheritance / extending

The power of JavaScript


Calling a function once there are no elements in the queue:


Loop the queue

Final result

The library



Committing to master branch


Auxilio scripting

DevTools tab

New tab page

Auxilio Chrome extension

Auxilio back-end


Playing tetris

Manuals / Helper pages


Project manager / workflow optimization

Git helper

Real-time code editing

Writing front-end tests

Front-end testing

File browser

Interactive shell/console


My lightning talk about CSS preprocessors


The problem






Final words

Using list as a source for generator


The story

Source code

Processing the result

Code generation

Expression generation




Layout D - many columns and space between them

Layout C - a bit complex

Layout B - an image and text

Layout A - everything centered

Beyond Tellerrand



CSSConf,, CodeFront, JStanbul, JSPYconf, JSIST


An event apart








The solution

What I tried and it didn't work

Running animations in sequence

Removing all the added animation.css classes

Catching the end of an animation

Removing a class (i.e. returning to the initial state)

Adding a class (i.e. starting animation)

The initialization

Be creative

Catching the end of the animation

Understanding how to start an animation

The proper way

CSS way

JavaScript way

Building The New Financial Times Web App (A Case Study)

Building Apps With the Yeoman Workflow

Looking Into the Future of Sass

Useful GitHub Patterns

The Architecture Twitter Uses To Deal With 150M Active Users, 300K QPS, A 22 MB/S Firehose, And Send Tweets In Under 5 Seconds

Media Queries Are Not The Answer: Element Query Polyfill

Design - Apple Mac

Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study

Shape type

Adapting To A Responsive Design (Case Study)


Styling titles

What is CSS?



Clearing floats

Breadcrumbs (navigation)

Styling external links



PlovdivConf 2013 videos

BurgasConf 2013 videos:

VarnaConf 2013 videos:

Resolving dependencies



Extending modules

Let's modulize

Error reporting

The functional chain pattern

Quick overview

#3 (#1 + #2 + listening for chain ending)

#2 (passing function as array)

#1 (simple)

The support of asynchronous operations

Clearing HtmlReporters

Controlling the rendering. I.e. patching the HtmlReporter.

Installation of the backend

Installation of the extension

Presentation screencast (Bulgarian audio)

My way

The better way

The non-cool way

Database migration

Making things with maths - Steven Wittens




Clown Car Technique: Solving Adaptive Images In Responsive Web Design

Your Web, documented.

The State Of Responsive Web Design

Become a Better, Faster Front-End Developer

JavaScript: Avoiding Repeated Work



Technical tips

It's not only you.

Things to consider


Mobile first should be called content first, focus first or performance first.

So ... what?

So, who is responsible for all this responsive craziness .. the Mobile Web?

Why we should care about the responsiveness

The tools

Designing in the browser

Mobile first


What is responsive web design

Try #3 (little dirty hack)

Try #2 (DOMParser)

Try #1 (document.createElement)

Solution #2

Solution #1

The Future of the Browser—Panel Discussion at Front-Trends 2013

The Mobile Ecosystem—Panel Discussion at Front-Trends 2013

Know your errors - Diogo Antunes - Front-Trends 2013

180 Degrees East - Holger Bartel - Front-Trends 2013

The thinking behind BEM - Varvara Stepanova - Front-Trends 2013

Using big data and WebGL to bring real-world cities to life - Rob Hawkes & Peter Smart - Front-Trends 2013

LET’s CONST together, right now (with ES3) - Olov Lassus - Front-Trends 2013

Web performance considerations in a mobile world - Estelle Weyl - Front-Trends 2013

JavaScript: The Machine Language of the Ambient Computing Era - Allen Wirfs-Brock - Front-Trends 2013

Rendering without lumpy bits - Jake Archibald - Front-Trends 2013

The browser, the programmer and the Dalek - Sebastian Golasch - Front-Trends 2013

Look ma, no backend! - Gregor Martynus - Front-Trends 2013

The humble border-radius - Lea Verou - Front-Trends 2013

Front-Trends 2013 Highlights

Front-Trends 2013 Reel

Responsive localization with L20n - Zbigniew Braniecki & Staś Małolepszy - Front-Trends 2013

The Business Side of Going Web - Faruk Ateş - Front-Trends 2013

Culture change: how to make better user experiences a priority in your organisation - Frances Berriman - Front-Trends 2013

The New CSS Layout - Rachel Andrew - Front-Trends 2013

High Performance Data Visualizations - Vladimir Agafonkin - Front-Trends 2013

Building Languages in JavaScript - Zachary Carter - Front-Trends 2013

I18n for multilingual websites - Gunnar Bittersmann - Front-Trends 2013

Be Friends With Your Designers and Style Guides - Hans Christian Reinl - Front-Trends 2013

There Is No Mobile Web - BD Conf, Sept 2011 / by Jeremy Keith

Adobe Creative Cloud Overview / by Adobe

Taking Ems Even Further / by Ian Yates

Colorcode / by Tamino Martinius, Andreas Storm

Google Street View Hyperlapse / by

The Design of Code: Organizing JavaScript / by Anthony Colangelo

The Right Way to Retinafy Your Websites / by Allan Berger

CSS Paint Times and Page Render Weight / by Colt McAnlis

Avoiding Unnecessary Paints / by Paul Lewis

New Layouts for the Multi-Device Web / by Luke Wroblewski


CSS3 Patterns Gallery / by Lea Verou

Behavioral Breakpoints: Beyond Media Queries / by Lyza Gardner

55+ Great and Useful Tools for Responsive Web Design / by

Picture to ASCII

Chrome DevTools - Authoring & development workflow / by Google

GTAC 2013 / by Google Tech Talks

How To Maintain Hierarchy Through Content Choreography / by Steven Bradley

9 Ways to Optimize Your Front End Performance / by David Walsh

All you need to know about CSS Transitions / by Alex Maccaw front-end code back-end code

Running the server

The html page


Rich snippets (microdata, microformats, RDFa, and Data Highlighter) /

A Guide to Discernible Web Design in Photoshop /

How Browsers Work: Behind the scenes of modern web browsers / Tali Garsiel & Paul Irish

CSS Paint Times and Page Render Weight / Colt McAnlis

Responsive Web Design Workflow Considerations /

A gallery for responsive web sites

Learning to teach / Bartosz Szopka

Adaptive Web App UI with CSS Regions /

Media Query & Asset Downloading Results / Tim Kadlec

Understanding Typographic Hierarchy /

Just say no to reimplementing the browser in JavaScript / Ilya Grigorik

Media Queries are a Hack / Ian Storm Taylor

Chrome PLT Improvements Q1 2013 / Chrome Speed Team

Layout composition

Navigation composition


Basic usage

A pixel is not a pixel / by Peter-Paul Koch

Mobiles and Tablets – Viewport Sizes

What exactly is CSS Specificity / by Vitaly Friedman

About HTML semantics and front-end architecture / by Nicolas Gallagher

2. In code

1. Via the command line

Packing other file formats

Packing less

Packing JavaScript

Packing CSS



Run the tool


How it works



Why I made it

Here is the playlist of all my talks at VarnaLab.

GoogleDevelopers channel

Learn CSS layout

The definitive front-end performance guide

Daily news around HTML5

The Breakpoint Ep. 1: Chrome DevTools with Addy Osmani and Paul Lewis

The Breakpoint Ep. 2: Chrome DevTools with Paul Irish and Addy Osmani

The Breakpoint Ep 3: The Sourcemap Spectacular with Paul Irish and Addy Osmani

The Breakpoint Ep. 4 —The Tour De Timeline

Breakpoint Episode 5: DevTools Grab bag

The Breakpoint Ep. 6: Accelerating Load Time, Run Time, and JS tooling


Step 9: Installing the .ipa file

Step 8: Use AIR Developer Tool (ADT) to generate installable iOS application (.ipa file)

Step 8: create application descriptor file

Step 7: generate a valid P12 file

Step 6: convert the Apple's certificate into a PEM certificate file

Step 5: get a mobileprovision profile

Step 4: create an ID for your app

Step 3: register your device

Step 2: generate certificate

Step 1: generate certificate signing request file


Edge Conference - Panel 7: Testing and tooling

Edge Conference - Panel 6: Privileged access

Edge Conference - Panel 5: Input

Edge Conference - Panel 4: Responsive Layout

Edge Conference - Panel 3: Performance

Edge Conference - Panel 2: Network

Edge Conference - Panel 1: Offline


The concept

Why the custom solutions are not that good idea

Why the big ready solutions are not such a good idea

The answer

The beginning

3. Testing with JavaScript SDK

2. Testing with PHP SDK

1. Creating facebook application

4. Debugging with Monster Debugger

3. SWF to SWF communication

2. Tracing by using a wrapper class

1. Simple tracing

5. Date column custom item renderer

4. Date column class

3. Initialize the data provider

2. Initialize the data grid columns

1. Initialize the grid and add it to the stage

3. ActionScript3 part

2. The JavaScript part

1. Creating the Facebook application

Step 4: Process the results

Step 3: Create google.maps.LatLng object based on the field's value

Step 2: Calling the method

Step 1: Initialize the map

Date validation

public function create(handler:Function, ... args):Function { return function(... innerArgs):void { handler.apply(this,innerArgs.concat(args)); }}


Remove all the children of a MovieClip

Convert color from uint to hex

Change the fill color of a MovieClip

4. The usage of the class

..var numOfLetters:int = _letters.length;var degrees:Number = _startAngle;for(var i:int=0; i

3. Positioning the fields

2. Creating the text fields

1. The CurvedText constructor

Step 3 - creating the actual script

Step 2 - creating a basic script code

Step 1 - creating the macros

Calling the parent constructor

Accessing method of the parent class

Creating methods in the child classes

2. The ActionScript part

1. The JavaScript part

12. Overview

11. The player

10. The list

9. The model

8. The service

7. The preloading screen

6. The startup command

5. The Context

4. Initialization of the application

3. Required libraries

2. Main objects

1. What is RobotLegs

Passing custom parameters to the listeners function

Passing the dispatcher

Simple dispatch/listen

Managing events (the EventBus class)

Events basics