Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

Generate QR code on your machine using Node.js

posted in JavaScript on 2024-06-02   node qr javascript

I spoke at an event last week, and on the very last slide, I had a QR code that was supposed to lead people to my contacts page. Well, it didn't. I used a service for "free" QR code generation, and the link expired. So, I learned my lesson and came up with a line that generates whatever code I need right into my terminal.

read more

Reactive UI in 10 lines of code

posted in JavaScript on 2024-02-11   javascript react proxy

Reactivity became de-factor a standard in the last couple of years. All the major frameworks have some reactivity model implemented. One of the biggest even has the name React. In this article, we'll see how to write a simple reactive UI with just a few lines of JavaScript.

read more

A short introduction to CSS nesting

posted in CSS3 on 2023-09-16   css nesting modern

I did use Sass and Less in the past, and one of my favorite features was the nesting. Not only me but the whole community was asking about that constantly over the years. The browser vendors heard that plea, and today, we have CSS nesting.

read more

Write your own progress indicator with vanilla JavaScript

posted in JavaScript on 2023-09-16   JavaScript Node progress

Many moons ago, I was writing a lot of Flash applications. One thing was typical, and that was a progress indication of something that we were downloading. The loaded bytes of the Flash file (.swf) itself and later of some other resource the application needs. Once I started writing everything in JavaScript, this feature disappeared. In this post, we'll see how to implement it with vanilla JavaScript.

read more

I've made an Express.js based source viewer

posted in JavaScript on 2023-08-07   JavaScript Express source viewer

It's unsurprising that we all use Express.js when we need a web server. In this article, I'll show you how I built a source viewer. It's distributed as a npm package view-source and it could render the content of a directory in a nice tree-view style.

read more

q2m - a library for translating URL params to MongoDB query

posted in JavaScript on 2023-07-03   JavaScript MongoDB query

I'm not open-sourcing very often anymore, but recently I finished developing a small tool called q2m that I believe is worth sharing. It's a library designed to convert URL parameters into MongoDB queries, which I needed for my latest project, a little SaaS called Lumina CMS.

read more

AI driven open source library for measuring your web page carbon footprint

posted in JavaScript on 2023-01-14   JavaScript AI OS

Some people say that 2023 will be the year of AI. With tools like ChatGPT and DALL·E the world is definitely changing. There are different opinions on how such instruments will affect the everyday tasks of the professionals. My two cents (for now) are that those are just tools to achieve what we want quicker and more efficiently. Who knows, someday I may call myself a "prompt engineer". For the time being, though, I'm still writing a lot of stuff alone and occasionally ask ChatGPT for help.

read more

Anchor links pointing to a fragment fires History API's "popstate" event

posted in JavaScript on 2022-11-15   history popstate anchor javascript

I hit an interesting "bug" while working on a SPA application. Clicking an anchor link that points to a fragment on the page fires the History API's popstate event. This triggers some logic on my end, which was not my intent. I fixed that with a bit of JavaScript, and I had to share the snippet.

read more

Using web dev skills to test web dev skills

posted in JavaScript on 2022-10-30   javascript quiz exercise test

Last year or so, I worked on a platform where I would publish video courses. The first one is on web fundamentals (in Bulgarian), and it's almost ready. You can check it out here. But this article is not about that. It's about a platform feature I built - an in-house validator to exercise the gained HTML, CSS, and JavaScript knowledge. After each lesson, I give a task to the students, and they can work on it right in the browser. The small application became an inspiration for another project - iloveweb.dev. So, I decided to share how the validation works.

read more

Taking Wordle to the next level (case study)

posted in JavaScript on 2022-04-04   wordle dumafun javascript

I'm sure you know what Wordle is. The game got a lot of traction a couple of months ago when The New York Times bought it. I was playing it too, so I decided to create my version in my native language (Bulgarian). This is how duma.fun was born (in Bulgarian duma means word). And as usually happens with my "little" experiments, I didn't stop at just implementing the basics. I managed to translate the initial ~300 lines of code into a three months-long project. Here's why, what, and how.

read more

The tiniest presentation framework

posted in JavaScript on 2022-03-06   presentation framework html javascript

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

read more

13 Years of Blogging

posted in Must-see on 2021-12-31   blog top year

I'm committing to posting a report at the end of each year. A report about this blog. I did the last one five years ago when this place was eight years old.

read more

How I wrote and published my 5th technical book

posted in JavaScript on 2021-12-19   how-to book 50tipsonjs

I like to write. It's not happening often, but I do. A couple of weeks ago, I finally finished my 5th book, "50 Tips on JavaScript". I decided to use Amazon as a distributing mechanism. In this article, I'm sharing my journey. From the idea, through the writing and the publishing.

read more

TAMO JUNTO - Animated Short Film

posted in Cinema on 2021-12-16   pandemic together

Tamo Junto is an independent animated short film by flooul animation. 2 neighbors lean on each other, turning small moments of life into great treasures. Voices by Criolo, Luciana Silveira and Emicida. Original Soundtrack By Loud+

read more

Here is how call-to-action widgets probably work

posted in JavaScript on 2021-10-26   widget dom sciprt

Did you ever wondered how the call-to-action widgets work? You know, those little buttons for sharing content in the social networks. Very often they are distributed as iframes but sometimes we have to copy/paste script tags. And the instructions are "Place the following code where you want the button to appear". But if that's a script tag how it knows where to inject the button? The goal of this article is to give you an answer on this question.

read more

Get to know Kent C. Dodds

posted in Inspiration on 2021-10-05   kent dodds documentary story

A short movie for Kent C. Dodds.

read more

White-labeling React apps

posted in JavaScript on 2021-08-16   react whitelabel webpack

A white label app is an app that we build once and "resell" it to other people/companies. Very often we are talking about applying different themes but sometimes we have to change logic too. Such changes should be as declarative as possible so they scale well. Otherwise is more of a copy/paste exercise. In this article I want to sketch out a couple of approaches for white labeling in React applications.

read more

Firebase/GCP: save money by cleaning up your artifacts

posted in JavaScript on 2021-06-06   firebase gcp budget cost

I'm working on a personal project and I'm using the awesome Google Cloud Platform. There are so many things that you can do. All the tools that you may need are probably there. This of course comes with a price. In this article I'll share a tip how to reduce your spendings there.

read more

Using JavaScript module system for state management

posted in JavaScript on 2021-03-08   javascript module state management

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

Miss Piggy - a test runner for Puppeteer

posted in JavaScript on 2021-02-01   puppeteer test runner tagmanager

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

Configure Google domain email in Vercel with ImprovMX

posted in Architecture on 2021-01-27   vercel email google improvmx

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.

read more

Reinventing the routing in React apps

posted in JavaScript on 2021-01-18   router react navigo

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

Transpile to ES modules with Babel

posted in JavaScript on 2021-01-14   es babel javascript transpile typescript

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

Mocking console methods with Jest

posted in JavaScript on 2021-01-01   jest mocking console warn

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

Copy files and directories from and to Kubernetes pods

posted in Architecture on 2020-12-11   Kubernetes copy pods ssh

At work we have a project that uses node:10-jessie image as a base for its docker container. That image has no vi inside so I wondered how to check the content of a file. Luckily kubectl has a neat command to copy files from and to a pod.

read more

Replacing code for production with Babel transformation

posted in JavaScript on 2020-11-29   babel transform plugin production replacement

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

iPhone stuck on the Apple logo

posted in Other on 2020-11-27   iphone stuck broken apple logo

Last weekend I was helping a friend to deal with his "broken" iPhone XR. It was stuck on the Apple logo. No mather what we do the phone was just black and the apple shows up.

read more

Transfer MP3 file from Mac OS Catalina to iPhone iOS 14.0

posted in Other on 2020-09-18   mp3 catalina iphone ios14 mac transfer

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

read more

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

posted in JavaScript on 2020-09-13   javascript tagmanager analytics google gtm gtag

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

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

posted in JavaScript on 2020-09-12   javascript performance optimization

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

ReactNative: using SVG as a button

posted in JavaScript on 2020-09-07   reactnative tips svg

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

React: 50 shades of state

posted in JavaScript on 2020-07-21   react state management form components button viewmore compound state component theme onchange application state feature state data client text span const

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

Recreating Facebook's Recoil library

posted in JavaScript on 2020-07-12   recoil facebook state management mycoil facebook s recoil counter atoms atom component library formattedcountervalue selector key function javascript subscribers hook const return

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

A journey into software development with Lea Verou

posted in Inspiration on 2020-06-05   lea verou journey software development

Lea Verou, known in the community as the "Queen of CSS", shares her personal story about how she became a web developer. She discusses how her passion for computers began in her childhood and her dream of living outside Greece.

read more

The simplest HTTP proxy with custom headers

posted in Nodejs on 2020-05-06   proxy headers authorization node local request server req http basic pass

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

read more

Smart placeholders in your markdown

posted in JavaScript on 2020-05-06   markdown placeholders template annotation marked contentful https button part content stuff p p seemore const

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

How Open Source Changed My Life with Max Stoiber

posted in Inspiration on 2020-04-28   max stoiber styled-components react-boilerplate

We spent a day with Open Source-“Wunderkind” Max Stoiber in Vienna. Despite his young age of only 23, Max has achieved incredible things: he's created react-boilerplate and styled-components, his start-up, Spectrum, was recently acquired by GitHub and he gives talks all over the world. Learn more about his journey - and how he dropped out of university (twice!) - in this mini-doc.

read more

Create your own Covid-19 data tracker

posted in JavaScript on 2020-03-30   covid-19 tracker virus api zeit covid https data github data tracker thevirustracker time johns hopkins university code back end endpoints react created recharts beginning tags tag link countries package sh https c19stats

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

NADCAST.24 с Радо Станков

posted in NADCAST on 2020-03-26   nadcast remote productivity work tips home working remotely separation https rstankov biz 24_radostankov mp3 cbox biz 24_radostankov host003 cbox biz ws host003 cbox outset ws host003 nadcast outset ws http nadcast outset mp3 http nadcast

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

read more

My top 3 tips for working remotely

posted in Other on 2020-03-20   remote home work tips productivity working remotely separation working

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

read more

Pairify - how to match balanced string pairs

posted in JavaScript on 2020-03-11   pairify balanced matches javascript pairs decided type stack line starter token code const position function category https

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

GraphQL: the documentary

posted in Inspiration on 2020-03-03   graphql documentary language story

Starring Lee Byron, Dan Schafer and Nick Schrock (co-creators of GraphQL) and other big names from the #GraphQL community, "GraphQL: The Documentary" explores the story of why and how GraphQL came to be and the impact it's having on big #tech companies worldwide, including Facebook, Twitter, Airbnb and Github.

read more

Vue.js documentary

posted in Inspiration on 2020-02-28   vue documentary framework story

With the help of Sarah Drasner, Taylor Otwell, Thorsten Lünborg and many others from the Vue.js community, Evan You tells the story of how he fought against the odds to bring Vuejs to life.

read more

From 0 to 100 GitHub stars in a week

posted in JavaScript on 2020-02-27   github stars project branding promote octomments krasimir write idea https github blog align center don t easy section add https post link javascript reddit facebook make time

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

Webpack/TypeScript/React starter kit as of 2020

posted in JavaScript on 2020-02-23   webpack typescript starter react eslint beginning krasimir beginning npm run watch components app tsx src components app beginning https github

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

Email not working after DNS change

posted in Architecture on 2020-02-07   email dns not working zeit domain working google mx record mail server services thing

I just recently moved my outset.ws domain to Zeit name servers. That's my 13 years old domain which I'm not using it anymore. It makes sense to point to krasimirtsonev.com. The thing is that I have an email which is used all over the net. I of course want to keep that email. And suddenly I wasn't able to receive messages to it. I started missing some very important emails. Like bills that have to be paid and GitHub notifications.

read more

Octomments - using GitHub as a comment plugin

posted in JavaScript on 2020-01-31   octomments github comments github comments github issues server issues comment https github krasimir octomments https repo app

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

"Exit strategy" by Travis Bible

posted in Cinema on 2020-01-24   cinema short film https www youtube

Two brothers caught in a time loop must traverse a series of maze-like events in order to prevent a catastrophic fire from occurring.

read more

VSCode go to definition/implementation fixed

posted in JavaScript on 2020-01-17   vscode typescript intellisense problem implementation working common fixed definition

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

Running Prettier for specific Git branch

posted in Architecture on 2020-01-14   prettier git bash script branch file awk print echo file awk run prettier line column file mode files project

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

read more

AST fun. Remove a function call from your bundle

posted in JavaScript on 2020-01-13   javascript ast bundle object property path callee javascript esprima node const type

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

"The Candidate" by David Karlak

posted in Cinema on 2020-01-12   cinema short film secret society http www davidkarlak https www youtube

The story follows a secret society whose purpose is to find people who don’t deserve to live and to kill them with their thoughts. The tension between the pessimistic protagonist and the liaison of the secret society comes to a head in a riveting twist.

read more

Hopa - zero config CLI that runs JavaScript and TypeScript

posted in JavaScript on 2020-01-12   hopa runner typescript javascript babel typescript io webpack https code don t krasimir hopa

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

Part 2: Riew - reactive view basics

posted in Riew on 2020-01-06   riew csp routine go javascript channels channels channel const javascript function ch view console log

Riew is a library based on communicating sequential processes (CSP). It is made to help with communication and synchronization between your view and business logic. It's distributed as a npm package, it has 0 dependencies and adds ~8KBs (gzip) to your application on production.

read more

Part 1: We need channels! A gentle introduction to communicating sequential processes.

posted in Riew on 2020-01-06   riew csp routine go javascript channels put javascript fibonacci index function return pattern fibonacci number

CSP is a formal language for describing patterns of interaction in concurrent systems. It's used in Go, Crystal, Clojure's core.async and a couple of other places. The idea in its core is nothing so complicated but it offers some interesting capabilities. Surprisingly enough it is not really popular in JavaScript. Recently I'm exploring this pattern and here are my findings.

read more

Part 3: Riew - reactive view in patterns

posted in Riew on 2020-01-06   riew csp routine go javascript channels console log yield krasimir riew https github function state const

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.

read more

Reactive view - the concept

posted in Riew on 2020-01-04   riew csp routine go javascript channels kitty ch const function view https react redux

Something bugs me last couple of years. I'm using React for some time now and there is always this doubt if I'm placing the business logic on the right place. I'm trying to be pragmatic, to follow best practices and listen what the community is saying. However, I still feel that something is not ok. This blog post presents the idea of the reactive view. That is nothing new per se but I came up with this term because it fits well in my idea.

read more

Bret Victor: Inventing on principle

posted in Inspiration on 2020-01-01   inspiration inventing principle href https vimeo bret victor inventing decade

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.

read more

NADCAST.23 с Яни и Ния

posted in NADCAST on 2019-12-10   nadcast influencer.bg remoteit world https https influencer bg world https influencer remoteit world https https remoteit world

Епизод 23 на малко позабравения NADCAST е тук. Този път гости ми бяха Яни (https://remoteit.world/) и Ния (https://influencer.bg/). Поговорихме си за маркетинг, брандинг, hiring и работа от разстояние. Приятно слушане.

read more

Make your objects iterable

posted in JavaScript on 2019-11-01   javascript iterator skills console log javascript const lastname object react parts user method

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

Rethinking the Redux API

posted in JavaScript on 2019-09-10   redux const state login username password authenticated action function reducer

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

React: rendering vs running your components

posted in JavaScript on 2019-07-03   react input component app form button components running rendering

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

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

posted in JavaScript on 2019-05-23   https blog cypress content zeit html javascript article articles

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

NADCAST.22 live at React.NotAConf

posted in NADCAST on 2019-05-16   https twitter nadcast

Last weekend I was part of the ReactNotAConf conference and this 22th episode was live recorded on stage there. Kudos for the organizers and the speakers. It was an awesome event and it looks like we've made a really interesting panels. Enjoy.

read more

NADCAST.21 с Радо Станков за React.NotAConf

posted in NADCAST on 2019-05-03   http react notaconf nadcast

Една седмица преди React.NotAConf с Радо обсъдихме някой важни подробности около събитието. Ако се чудите за какво точно ще говорят лекторите или ако все още не сте решили какво да правите на 11 май изслушайте епизода. Ще се радвам да се видим в Interpred WTC.

read more

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

posted in JavaScript on 2019-04-25   igit code github context time api code review roger app

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

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

posted in JavaScript on 2019-04-20   time roger const state return function usestate yohoho action

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

forEach or not to forEach

posted in JavaScript on 2019-04-12   array foreach item component update react iteration position remove state

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

NADCAST.20 със Стефан Кънев

posted in NADCAST on 2019-02-27   https https www nadcast

Пилотния за сезон 2019 епизод е със Стефан Кънев. Поговорихме си за мениджмънт и лидерство. Приятно слушане.

read more

NADCAST.19 с Радо Станков и Минко Генчев

posted in NADCAST on 2018-12-20   https nadcast https twitter

Ето един малък коледен подарък - епизод номер 19 на NADCAST. Последните няколко месеца съм на вълна продуктивност. С Радо Станков и Минко Гечев си поговорихме за TEA framework. Или казано по друг начин, как да намерим повече време (time), енергия (energy) и фокус (attention). Приятно слушане.

read more

Build your own interactive JavaScript playground

posted in JavaScript on 2018-11-13   code function const console exports editor require file error js

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

My new and shiny tool for live demos - Demoit

posted in JavaScript on 2018-11-05   demoit resources live coding code demo tool css files tools writing don t

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

React hooks: changing the mindset

posted in JavaScript on 2018-10-31   react function hooks count counter return useeffect state const usestate

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

NADCAST.18 with Sara Vieira

posted in NADCAST on 2018-10-04   https sara vieira nadcast

This episode is with Sara Vieira. She is doing a lot of interesting things with React, GraphQL, Apollo and with JavaScript in general. She's also part of bunch of conferences doing talks and workshops which itself is a big challenge. Happy listening :)

read more

Pixo - Image editor for your web app

posted in JavaScript on 2018-09-03   pixo images image editor modal editing api key web app

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

NADCAST.17 с Радо Станков

posted in NADCAST on 2018-07-26   nadcast https

След дългата, почти два месеца пауза, епизод 17 на NADCAST е с Радо Станков. Започнахме с някои много интересни новини като предстоящия NotAHackathon и VarnaConf. След това си поговорихме за различните по вид работни среди. През freelancer-ството до работата в продуктова компания.

read more

A story about React, Redux and server-side rendering

posted in JavaScript on 2018-06-29   server app store react js data users content div redux

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

NADCAST.16 с Владимир Конушлиев

posted in NADCAST on 2018-05-31   https nadcast

Много ценен разговор с Владо се получи. В този 16-ти епизод дискутираме code review процеси, навици, мотивация и като за финал малко за баланса в нашата професия. Надявам се да ви хареса.

read more

React and separation of concerns

posted in JavaScript on 2018-05-27   loading users return error component react function data app css

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

NADCAST.15 live recorded at React.NotAConf

posted in NADCAST on 2018-05-09   https twitter react nadcast https www youtube http nadcast krasimirtsonev mp3 http nadcast live recorded

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.

read more

Implementing an async queue in 23 lines of code

posted in JavaScript on 2018-05-07   tasks taskindex getnexttask numofworkers function result promise task array process error run

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

NADCAST.14 със Стефан Кънев и Димитър Димитров

posted in NADCAST on 2018-04-19   https nadcast

Стефан и Митьо споделиха солидни практики и опит в менторирането на по-начинаещи програмисти. Надявам се този 14-ти епизод да ви бъде полезен независимо на какво ниво сте.

MP3: http://nadcast.krasimirtsonev.com/StefanKanev_DimitarDimitrov.mp3

read more

NADCAST.13 с Радо Станков

posted in NADCAST on 2018-04-11   react https http nadcast patterns conf summit https bulgariawebsummit web summit https bulgaria web summit notaconf http react react notaconf http

Фаталният епизод 13 на NADCAST е с моя добре познат събеседник Радо Станков. Основна тема на нашия разговор беше новата версия на React и предстоящите React.NotAConf (http://react-not-a-conf.com/) и Bulgaria Web Summit (https://bulgariawebsummit.com/) конференции.

read more

My take on Redux architecture

posted in JavaScript on 2018-04-06   state action redux const visible store function return counter type

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

NADCAST.12 с Димитър Димитров

posted in NADCAST on 2018-03-22   https nadcast

Епизод номер 12 е с Димитър Димитров (Митьо). Поговорихме си за менторството и за това как трябва да се подхожда към начинаещите програмисти. Имаше и малко DevOps даже :)

read more

NADCAST.11 с Мариан Игнев и Павел Иванов

posted in NADCAST on 2018-02-23   http sashido io nadcast

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

read more

Meet Evala - your terminal in the browser

posted in JavaScript on 2018-02-14   shell evala socket terminal app open browser term data web chrome

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

Debugging your front-end like it's 2019

posted in JavaScript on 2018-01-20   kuker step answer redux state events robot event result

(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

NADCAST.10 с Минко Гечев и Радо Станков

posted in NADCAST on 2017-12-22   http angular nadcast https twitter

Предколеден 10-ти епизод на NADCAST е с Радо Станков и Минко Гечев. Разговора започна с малко meta теми, но после си поговорихме за Angular, React и JavaScript като цяло. Приятно слушане и весели празници.

read more

Markup as function

posted in JavaScript on 2017-12-01   ischristmas user state function children component props greeting redux userdataprovider jsx

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

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

posted in JavaScript on 2017-11-24   generator player function result return position error const console log yield call player

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

Getting from Redux to a state machine

posted in JavaScript on 2017-11-10   state error machine const user redux credentials login submit stent

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

You are managing state? Think twice.

posted in JavaScript on 2017-10-27   state input false state machine isinprogress request isloggedin submit states message

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

NADCAST.09 с Радо Станков

posted in NADCAST on 2017-10-23   link react https facebook license nadcast graphql http state facebook event link

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

read more

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

posted in JavaScript on 2017-10-10   function user return firstname lastname var person object constructor greeting

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

NADCAST.08 с Александър Тодоров

posted in NADCAST on 2017-09-14   http nadcast

Епизод 8 на NADCAST е с Александър Тодоров. Поговорихме си за тестване, QA, release процеси, малко за React. Оказа се че тестването в компании като RedHat може да бъде доста голямо предизвикателство.

read more

README driven development

posted in Architecture on 2017-09-06   library readme driven development api code writing make documentation started helped

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

read more

NADCAST.07 with Kent C. Dodds

posted in NADCAST on 2017-08-15   http https kent c dodds

Episode 7 of my podcast with Kent C. Dodds. We had a nice chat about open source, teaching, React and Prettier.

read more

NADCAST.06 with Cole Peters

posted in NADCAST on 2017-07-10   https cole css

Episode 6 of my podcast with Cole Peters. We had a nice chat about the good old days, designing for web and CSS.

read more

Rakka by Oats Studios

posted in Cinema on 2017-06-23  

Rakka is the first short film from Oats Studios.

read more

NADCAST 05 с Христо Панайотов

posted in NADCAST on 2017-06-19   nadcast

Епизод 5 на NADCAST е с Христо Панайотов. Прави доста интересни неща по доста интересен начин. Поговорихме си за това как се случват по кретивните уеб сайтове в днешно време и малко за JavaScript stack-a.

read more

NADCAST.04 с Найден Гочев и Михаил Кочанов

posted in NADCAST on 2017-06-12   forum nerds2nerds https groups google

Тази седмица мои гости бяха Мишо и Найден от Nerds2Nerds. Както всеки път така и в този епизод темите са малко на случаен принцип. Поговорихме си за интервю процеси, за remote work и къде е по-яко да се работи.

read more

The powerful higher-order component pattern

posted in JavaScript on 2017-06-10   component function props react const job dependencies h1 return state

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

NADCAST.03 с Радо Георгиев

posted in NADCAST on 2017-06-07   https

Трети епизод на "NADCAST". Този път със Радо Георгиев. Радо преподава и програмира и компания движи и конференция организира и още какво ли не. Поговорихме си за доста неща и е трудно да ги изброя тук. Та изслушайте го целия епизод :)

read more

NADCAST.02 със Стефан Кънев

posted in NADCAST on 2017-05-26  

Втори епизод на моя podcast наречен "NADCAST". Този път със Стефан Кънев си поговорхме за процесите в една компания. Надявам се да ви е интересно.

read more

NADCAST.01 с Радо Станков

posted in NADCAST on 2017-05-22   podcast nadcast

Това е един експеримент, който мисля от доста време. Първи епизод на моя podcast наречен "NADCAST". Поговорихме си малко с Радо Станков. Предимно за React.

read more

Strange Beasts

posted in Cinema on 2017-03-28  

A sci-fi short about augmented reality. "Strange Beasts" is an augmented reality game. It allows you to create and grow your own virtual pet. How far can it go?

read more

Surviving the Web

posted in Must-see on 2017-03-03   smashfind links time cool places popular stuff twitter web read

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.

read more

Bulgaria Web Summit 2017 is just around the corner

posted in Must-see on 2017-01-30   ll day time talk nice interesting events good happy

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.

read more

Children in JSX

posted in JavaScript on 2017-01-06   todo header component return props children function todos classname todolist title

(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

8 Years of blogging

posted in Must-see on 2017-01-02   javascript top year years pseudo elements css visits blog convert html string practice node js

The first article on this blog is published on 22th of August 2008. It’s about a website which I saw at FWA. Eight years later I’m still publishing stuff here and because it is the beginning of a new year I decided to give you some statistics.

read more

Short Film: Find my Phone

posted in Cinema on 2016-12-17   phone thief stolen

After my phone got stolen, I quickly realized just how much of my personal information and data the thief had instantly obtained. So, I let another phone get stolen. This time my phone was pre-programmed with spyware so I could keep tabs on the thief in order to get to know him. However, to what extent is it possible to truly get to know someone by going through the content of their phone?

read more

React and third-party libraries

posted in JavaScript on 2016-11-27   react tags tag render list jquery plugin extends react component props

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

Full Stack Fest and CSS day Videos

posted in Must-see on 2016-09-23   full stack fest

One of the ways to stay up-to-date with the latest technologies is to watch talks from popular conferences. Here are two of my favorite ones:

read more

Presentational and container React components

posted in JavaScript on 2016-08-01   time component clock components props react seconds container return

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

React.js in patterns

posted in JavaScript on 2016-07-20   component react title props header data app extends react component class

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

Short movie by Oscar-winning animator Patrick Osborne

posted in Inspiration on 2016-07-10   animator patrick osborne winning animator patrick oscar winning animator

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!

read more

Jamie xx - Gosh

posted in Cinema on 2016-07-05  

The new Jamie XX video clip directed by Romain Gavras will blow your mind without using any CGI, proving you don't need special effects.

read more

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

posted in JavaScript on 2016-07-03   code data html classes naming css good tags

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

Unity Adam demo - the full film

posted in Cinema on 2016-06-21  

The Adam demo is a real-time-rendered short film created with the Unity engine by our demo team. It runs at 1440p on a GeForce GTX980 and was shown on the booths at our Unite Europe conference.

read more

The bare minimum to work with React

posted in JavaScript on 2016-06-13   react app function file babelrc return babelify browserify render superclass

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

DevTools in 2016: Accelerate your workflow

posted in Must-see on 2016-05-22  

What a nice improvements of Google Chrome's DevTools. Amazing stuff!!!

read more

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

posted in JavaScript on 2016-05-11   browserify npm dependencies version package release don t versions features

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

iframe, or not, that is the question

posted in JavaScript on 2016-04-09   page widget javascript iframe div content script

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

Lazy-load your images with Coloor

posted in JavaScript on 2016-04-03   image src coloor img var images base64 canvas size function

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

The earthquake in the JavaScript community

posted in JavaScript on 2016-03-25   kik npm modules module company azer developer left pad

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

Debugging with Node

posted in Nodejs on 2016-03-22   debugger step node text function program line run counter command

Node has a wonderful debugger. As a front-end developer I’m mainly using Chrome’s tools but sometimes I run things in Node environment and this native feature comes handy. In this article we’ll see how to debug in the terminal using Node’s debugger.

read more

My new experiment is released - 10 Lessons in Front-end ebook

posted in Must-see on 2016-03-10   front end html ll book lessons released

It's finally done. My first self-publishing ebook is released. The book is available here. I'm running a free giveaway for the next five days. So, subscribe for my newsletter at this address http://eepurl.com/bKt0TD and you'll get a free coupon that will lower the price to 0$.

read more

Constructive destructuring

posted in JavaScript on 2016-02-24   var destructuring function object data enabled files options attachments

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

The last job on Earth

posted in Inspiration on 2016-02-18  

Did you know that in the next 30 years 50% of the jobs will go away because we'll get machines doing them. I have the good feeling that my job (programming) is not in those 50%. Or maybe it is :)

read more

Meet sequence expression

posted in JavaScript on 2016-02-02   var item b returns sequence expression true return skipif result loop

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

Unexpected usage of Array.length

posted in JavaScript on 2016-01-14   arr length array b c d string undefined elements c d arr var arr words text

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

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

posted in JavaScript on 2016-01-05   function format return result var defined function dosomething code var format function result var format return result var

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

Deep dive into client-side routing

posted in JavaScript on 2016-01-03   router javascript navigo routing

(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

Start your own JavaScript library using webpack and ES6

posted in JavaScript on 2015-12-30   library js webpack babel true var file module exports eslint function build

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

JavaScript's reduce could be really helpful

posted in JavaScript on 2015-12-25   testcase true patterns state reduce current cases expected return array test

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

Using Mocha with ES6 spec files

posted in JavaScript on 2015-12-23   mocha babel es6 package json file es5 babel preset es2015 tests test results javascript mocha reading spec files written

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

Apache .htaccess for HTML5 push state manipulations

posted in Architecture on 2015-12-20   dev krasimir navigo home dev krasimir http home dev index html html http home index html http browser routing

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.

read more

Dissection of Flux architecture or how to write your own

posted in JavaScript on 2015-12-18   store function action var return consumer change dispatcher view

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

A story about currying

posted in JavaScript on 2015-12-15   var function read dict key return currying button bind big dictionaryb blue

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

UNCANNY VALLEY (2015)

posted in Cinema on 2015-12-04   uncanny valley

In the slums of the future, virtual reality junkies satisfy their violent impulses in online entertainment. An expert player discovers that the line between games and reality is starting to fade away. 3DAR’s latest short film explores the frightening potential of our next technological revolution. Behind the scenes coming soon! Stay connected, but not too much ;)

read more

Hacking a weird failing HTTP request

posted in Architecture on 2015-12-04   request nginx server st http router problem external api

I recently finished watching Mr. Robot. If you didn’t check out the show please do. Last few days I felt like I’m hacking something. Just like Elliot in MR. Robot. This blog post is about fixing a weird bug. Really strange problem with a failing HTTP request.

read more

Enforce standards while submitting a pull request

posted in JavaScript on 2015-11-29   template textarea javascript bookmarklet n n template var code pull request

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

Distributing React components

posted in JavaScript on 2015-11-23   js react component file build react place src jsx browserify babel js map

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

A modern React starter pack based on webpack

posted in JavaScript on 2015-10-01   webpack karma js var config dev plugins loader file react

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

CSSSteal - Chrome extension that extracts CSS

posted in CSS3 on 2015-09-17   css styles var section el small li element rules

We had to update some of our old pages adding new elements. This means mixing old and new code. Placing HTML markup and JavaScript in legacy pages is not that difficult. Yes, it brings some issues but they are easily solvable. However, the CSS is a whole new story. That’s why I did CSSSteal. It helps me extract the needed styles.

read more

How require/import may decrease your testability

posted in JavaScript on 2015-08-23   login http js function var module password username login js user promise

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

Rethinking JavaScript readability

posted in JavaScript on 2015-08-10   function moveforward var code return callwith skipped event bind

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

Hacking Browserify

posted in JavaScript on 2015-07-04   function require user var return

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

Choosing Your Javascript Framework

posted in Must-see on 2015-06-04  

A really nice infographic for one of the most popular JavaScript client-side frameworks - Angular, Ember and Backbone.

read more

Using Local Storage as a communication channel

posted in JavaScript on 2015-05-05   namespace data localstorage function var storage loop browser buffer namespace

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

The proper way of fixing bugs

posted in Must-see on 2015-02-11   bug problem time system parts don t fix steps work

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.

read more

Bulgaria Web Summit / must-go conference for the modern web person

posted in Must-see on 2015-02-03   conference problems people speakers bulgaria web summit similar working talks time year

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.

read more

Fun playing with npm, dependencies and postinstall script

posted in Nodejs on 2015-01-07   c module package json npm runme js node_modules b installed index dependencies

I like npm and the fact that I can install tons of stuff. It’s great piece of software and helps me solve problems everyday. Yesterday I had to use a postinstall script and hit a problem.

read more

Merry Front-End Christmas

posted in Must-see on 2014-12-24   making talk ll capabilities technologies make language testing big

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

read more

How I squeezed two hours and a half

posted in Must-see on 2014-11-21   issue london wasn t web frontend page past magazine back

Usually I don't write such articles but this time I'll share my story. I was going to fly from London to Bulgaria. The flight is two hours and a half which is (by my opinion) enough to get bored. When I was traveling from Bulgaria to London I used my phone a lot. I read lots of stuff for reactive programming, played few games, ate some snacks. However, for the way back I wasn't prepared.

read more

Unit test your client-side JavaScript

posted in JavaScript on 2014-11-20   var register test function message password username js directive jsdom angularjs

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

My front-end performance case study

posted in Must-see on 2014-08-25   css file blog time page images performance pagespeedinsights main

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.

read more

CSS variables are here for ages

posted in CSS3 on 2014-08-13   div content font size color container css width div class footer variables

Every front-end developer that starts reading about CSS preprocessors thinks “Oh, finally variables in CSS". Indeed, the ability to create and use variables in CSS makes our code much more flexible. However, I think that there is no need to use a preprocessor to create flexible stylesheets.

read more

Win Free Copies of my new book – Node.js Blueprints

posted in Nodejs on 2014-08-12   node js book array top winners writing users tmp var array current array

Readers would be pleased to know that I have teamed up with Packt Publishing to organize a Giveaway of a new book written by me - Node.js Blueprints. And three lucky winners stand a chance to win 3 e-copies of this book. Keep reading to find out how you can be one of the Lucky Winners.

read more

Node.js Blueprints book - second chapter's clarification

posted in Nodejs on 2014-07-30   express version book app chapter node js blueprints var bodyparser code

Before a couple of months my first book Node.js Blueprints was published by Packt. There are a couple of reviews in Amazon about chapter two. It’s about Express. One of the most popular frameworks in the Node.js ecosystem. The book mentions version 3.0 but the truth is that the code samples are for version 4.0. I feel that I still have to point out the differences and mark these parts of the chapter that are not valid for the newest version of the library.

read more

ToDoMVC with AbsurdJS

posted in JavaScript on 2014-07-26   model function js todos app main css component absurdjs event

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

Feeding the beast at 60fps

posted in JavaScript on 2014-07-23   li data browser function var processed code list time

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

Usersnap - the holy grail of bug reporting

posted in Must-see on 2014-07-15   usersnap data xmlhttp json function script project client s page

The bug reporting is something very important for us. As developers, we produce code that should work everywhere. Not only on our machines. No matter how many times we test our application it often happens that it does not work properly for the client. We all know how helpful is an email with text “It does not work. Fix it ASAP!”. Usersnap is amazing tool that removes the gap between you (the developer) and the non-techy guy from the other side.

read more

The three rules of the good CSS architecture

posted in Must-see on 2014-07-15   css projects mess

CSS is easy? CSS is messy! And as a project grows, it only gets messier. You find yourself throwing !important at everything or fighting with long selectors just to get a style to overrule another. Projects eventually become unmanageable and you pray for the next redesign when you can burn it all down and start from scratch.

read more

Mobile Web performance auditing

posted in Must-see on 2014-07-10   performance

Building high performance sites and apps is crucial to your success on the web, and never more so as people start using smartphones as their primary means of internet access. But how can you make sure you're squeezing out every last bit of performance from your projects? In this talk we'll look at the tools you need to succeed and how to integrate them into your workflow.

read more

Packt Publishing celebrates 10 years with a special $10 offer

posted in Must-see on 2014-07-01   packt publishing book offer years

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

read more

Hungry for knowledge #2 - the Sunday's talks collection

posted in Must-see on 2014-06-29   thinking digital web conference talk videos lie thinking digital aral balkan free sites

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

read more

Hungry for knowledge - Scotland JS 2014 talks

posted in Must-see on 2014-06-22   javascript neo uk vimeo talk web js ll code build

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.

read more

"Help, I'm stuck in an event-loop" by Philip Roberts

posted in Must-see on 2014-06-22   event loop javascript philip roberts m stuck words

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

read more

Stop autoplaying your Gifs

posted in JavaScript on 2014-06-19   gifffer image library page gifffer min js animated gif

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

Why I'm happy to be a web developer

posted in Must-see on 2014-06-13   web banner message site change seconds slow

You may not realize it but we, as web developers, have special powers. We could control the Web. Here are two annoying things that I was able to workaround just because I know how to use DevTools.

read more

Jenn Schiffer: What's the Harm In Sorting: Sanitizing Inputs For More Optimized JS

posted in Must-see on 2014-06-10  

Jenn Schiffer introduces jortSort. If you want to know what is all about, check out the talk.

read more

Developing Node.js applications with Google Chrome

posted in Nodejs on 2014-06-09   node js yez page git terminal browser chrome console url http var

Google Chrome is my favorite browser. I'm spending a big part of my working hours there, so it makes sense to use it for everything. Last week I posted "Sorry, Chrome killed the terminal". The article was about Yez!, an extension that brings terminal-liked functionalities to the browser. Today, I'll show you how I use Chrome in my Node.js development workflow.

read more

Node.js application made with Express and AbsurdJS

posted in Nodejs on 2014-06-07   html js function css express content styles absurdjs app

Node.js is one of those new technologies, which are attracting more and more developers every day. Mainly, because it's JavaScript driven, a lot of people are interested working with it. In this tutorial, I'll show you how to use AbsurdJS together with Express. Express is one of the popular Node.js frameworks. However, the other instrument is really fresh one and I hope that you will find it useful.

read more

Sorry, Chrome killed the terminal

posted in Nodejs on 2014-06-04   yez extension browser terminal node js chrome shell commands running task

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

read more

Node.js: managing child processes

posted in Nodejs on 2014-05-21   error stdout js exec console log stderr visits function var module

These days I spent some time working on Yez!. Chrome extension whose main role is to replace the annoying switching between the terminal and the browser. It uses Node.js module to run shell commands. So, I had to deal with child processes, and I decided to document my experience.

read more

Testing responsiveness

posted in HTML5 on 2014-05-14   width content viewport device browser panel nav href chrome

We all know what responsive means nowadays. We, as developers, normally develop responsive applications. There is a dozen of instruments helping us achieving our goals. Some of us use extensions and even pay for them. However, I'm using one thing - Google Chrome browser. In this article, we will see what the Chrome's capabilities for testing responsiveness are.

read more

Codefront.io retrospection

posted in Must-see on 2014-05-13   talk end conference nice interesting talked rest people track day things chance

Okey, I normally don't write such articles. The things that I am writing about are technical stuff, concepts, experiments related to my job. However, this time will be a little bit different. I had a chance to speak at Codefront conference. And because it was so awesome I decided to share my experience.

read more

Mandy Lauderdale & Jed Schmidt: JavaScript Medley

posted in Must-see on 2014-05-08  

Today I landed on the site of JSConfEU. I was browsing and opened this video. What a great surprise!

read more

Codefront.io is around the corner

posted in Must-see on 2014-04-25   developer open io front end css javascript talk speakers interesting conference linz

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

read more

No back-end blog solution with Node.js and Markdown

posted in Nodejs on 2014-04-22   articles techy md tags article blog html page sidebar content

Before a couple of weeks I published Techy. It's a flat CMS based on Node.js and Markdown. I made it because I wanted to write my articles in Markdown format and avoid the annoying publishing workflow which I'm using now. I feel that it's not very clear how Techy works and decided to create a simple blog illustrating the processes.

read more

Book review: Getting Started with Grunt: The JavaScript Task Runner

posted in Nodejs on 2014-04-21   book grunt experience free javascript task runner helpful started

I just finishing reading Getting Started with Grunt: The JavaScript Task Runner. The same book that we (I and Packt publishing) run a contest for. You could still joint it here and win a free copy.

read more

EdgeConf 3

posted in Must-see on 2014-04-16  

A conference with a great format. It's more like a discussion panel. It's really informative. Some of the top developers nowadays talk about the future of the Web.

read more

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

posted in JavaScript on 2014-04-15   grunt array winners book top task tasks users tmp shuffle

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

Look ma, JavaScript only Off-Canvas menu

posted in JavaScript on 2014-03-25   menu content css links function html position absurdjs isopen

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

JavaScript: bind function

posted in JavaScript on 2014-03-09   function bind prototype comments fullname var scope user call arguments

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

Using media queries in JavaScript (AbsurdJS edition)

posted in JavaScript on 2014-03-04   media css function var width window matchmedia dom html mq absurdjs

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

Mastering the DOM access

posted in JavaScript on 2014-02-28   el parent var dom api return selector function val element

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

Cross-browser handling of Ajax requests

posted in JavaScript on 2014-02-23   ops xhr function data request var headers return callback ops method

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

A modern JavaScript router in 100 lines

posted in JavaScript on 2014-02-21   router javascript navigo match history node

(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

Simple, good looking separator made with pure CSS

posted in CSS3 on 2014-02-12   jsbin translate 95px 12px transform translate 95px line small link top solid 1px border top solid block border top display block border content display block

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

read more

THE GAP by Ira Glass

posted in Cinema on 2014-02-07   ira glass gap

"I made it for myself and for anybody who is in doubt with his/her creative career. I also think that Ira Glass' message isn't only limited to the creative industry. It can be applied to everyone who starts out in a new environment and is willing to improve."

read more

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

posted in JavaScript on 2014-01-23   wrapmap table tr element tbody var html td div map

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

Using Node.js to rename set of images

posted in Nodejs on 2014-01-22   file processed path glob files fs require

Today I had to rename a bunch of image files to the same names, but in lower case. Here is how I did it.

read more

SASS and Gruntjs (Node.js setting up)

posted in Nodejs on 2014-01-14   grunt sass compass css add based gruntjs grunt contrib compass

I'm writing a lot of JavaScript these days. Even if the project is not Node.js based I'm using it for processing some tasks. At the moment most of my projects use GruntJS. Today I spend some time adding SASS to my workflow.

read more

Dependency injection in JavaScript

posted in JavaScript on 2014-01-06   function var dependencies router service scope arguments deps dosomething

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

Flash CS5 is not working

posted in ActionScript on 2013-12-19   flash cs5 problem

That's one of those blog post which I'm using as documentation. When I find a bug and I fix it I feel that I have to write the whole process somewhere, because if I meet the same problem in the future I'll really want to save some time. Today I open my Flash CS5 and apparently I can't paint on the stage.

read more

7 lines JavaScript library for calling asynchronous functions

posted in JavaScript on 2013-12-12   function var funcs callback scope queue function funcs var queue function array

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

JavaScript template engine in just 20 lines

posted in JavaScript on 2013-12-01   javascript template engine

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