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

# JavaScript

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

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

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

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

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

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 t wo 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AbsurdJS fundamentals posted in JavaScript on 2013-11-11 css api color styles var function absurd absurdjs javascript: AbsurdJS became one of my favorite projects. I spent a good amount of time developing it and it's getting more and more interesting. I also received some positive feedback, so I think it is time to write a bit more about the module and explain how it actually works and what exactly is made for.
read more

An alternative JavaScript for loop syntax posted in JavaScript on 2013-11-08 users var syntax user users var users undefined elements array: As javascript developers we all have to write a lot of for loops. Before a couple of months I saw an alternative syntax, which I really liked. It saves some time and it looks much nicer. However, one of my colleagues reported that this fancy syntax is not working as it should.
read more

JavaScript: dependency free extend method posted in JavaScript on 2013-10-28 extend var function o prop destination tobedefined expect o address bla bla: While I worked on AbsurdJS I needed a function which accepts numerous objects and combines their properties. I.e. something like the _.extend method of UnderscoreJS. What I did is actually to use one more dependency just because of such method. John-David Dalton nicely pointed out my mistake and added a simple function which solved the problem. I change it a bit and now it acts as UnderscoreJS's version.
read more

JavaScript challenge: queue implementation posted in JavaScript on 2013-09-24 function queue item var api queueelements flags delay return api queue function: I'm currently working on an animation-heavy web application. There are long chains of CSS transitions/animations, which I have to do. I wrote this little library, because I needed something lightweight with minimalistic API. I think that it deserves its own repository and I created one.
read more

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

Managing events in JavaScript posted in JavaScript on 2013-08-23 model function var view controller eventbus callback function var scope event: I just noticed that the most popular repository in my GitHub account is EventBus. There is already an article about it, but it's a little bit outdated. I needed to clarify few things, so here is a new one.
read more

Send message from web page to chrome extension\'s background script posted in JavaScript on 2013-08-22 script event web page document function message content script background script send: I just answer on that question in StackOverflow. I think that this is a common quetion so it worths writing about it.
read more

A bad side effect of the aspect oriented programming posted in JavaScript on 2013-08-15 thing result function thing prototype dosomething start prototype dosomething function aspect oriented programming problem original class: I just read this very interesting article published on know.cujojs.com. It's about aspect oriented programming. At the beginning I thought "Oh, that's kinda cool", but when I start thinking about how I'll use it in practice I notice something bad. The blog post itself is well written and informative, but doesn't include any cons of the used technique.
read more

AJAX request doesn't work in IE (url encoding problem) posted in JavaScript on 2013-08-08 url api works json stringify parameter fixed: The good old Internet Explorer. It's full with surprises. I just fixed a bug happening only in IE. Everything works just great in every other browser.
read more

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

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

JavaScript is cool posted in JavaScript on 2013-07-23 var function class return instance pubmethod module event function return: I'm writing a lot of JavaScript these days. Sometimes it's really crazy what you can do with that language. I have bunch of tools in my arsenal and I wanted to document them somehow. Writing an article is a good option. By tools I mean patterns, piece of logic or just syntax shortcuts. However, this article is not exactly about design patterns, but it uses some of them. It's just about few ideas, which I came into during my daily scripting.
read more

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

JavaScript: sequencing function calls #2 posted in JavaScript on 2013-07-10 chain error console log arguments function res chain errors run object chainends: I created a simple JavaScript library for running functions in a sequence. The story behind this is published here. Today I made few interesting changes which deserve a new blog post.
read more

JavaScript: sequencing function calls posted in JavaScript on 2013-07-09 function var callback run element chain function res type console log: While I'm working on Auxilio I end up in a sitatuation where I have to call few javascript functions in a sequence. It's an interesting how this could be solved and I'll be happy if you share your opinion for such problem.
read more

Extending Jasmine (BDD framework for testing) posted in JavaScript on 2013-07-05 function jasmine htmlreporter spec reporter jasmineenv test prototype: Don't get me wrong, Jasmine is a wonderful framework. I'm using it for testing JavaScript in both places - front-end (in browser) and back-end (Nodejs). However, the client side has some disadvantages, which I just fixed. I hope that someday these changes will be moved to the official version (or at least I'll make a pull request very soon).
read more

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

Chrome extension: debugging dev tools tab or how to make console.log posted in JavaScript on 2013-06-18 chrome dev tools obj message alert chrome runtime console log bglog function work: It's really interesting to work on an extension for Chrome. However, sometimes it's a little bit difficult to debug. Especially when you work on a dev tools add-on (i.e. a new tab).
read more

Javascript string replace and regular expression posted in JavaScript on 2013-06-15 word git replace string innerhtml text replace element innerhtml text changetext function word creator linus torvalds linux creator linus source project started: The replace method in JavaScript is pretty much the same as in the other languages. Replace part/s of a string with something else. However, there are some tricky moments and I wanted to write this article, because I met this problem several times in the past. Actually, very often I use my blog as a documentation for myself and this is one of those cases. Probably I'll be in the same situation after week or so and I'll just check here for the proper solution.
read more

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

Convert HTML string to DOM element posted in JavaScript on 2013-06-11 var markup output el link html frame contentdocument document createelement dom element

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

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

read more

Simple command line parser in JavaScript posted in JavaScript on 2013-06-11 long parameter param3 var parse command param1 commandparser parse command param3 commandparser parse param1 param2 param3 command param1 param2 param3 command param1 string function: There should be some super cool RegEx, which I can use. However after short research I wasn't able to find it. So, I created a simple function which does the job.
read more

iPhone and iPod detection under JavaScript posted in JavaScript on 2013-03-29 iphone ipod navigator useragent match: A little code snippet for detecting iPhone or iPod. You can easily edit it to match iPad.
read more

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

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

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

What is JavaScript prototype by Angus Croll posted in JavaScript on 2012-06-30 javascript prototype understanding javascript prototypes http javascriptweblog wordpress language http javascriptweblog javascript language http context explanations: Maybe one of the best explanations of the prototype in the context of JavaScript language.http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/
read more

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

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

Speed Up Your JavaScript posted in JavaScript on 2012-04-26 javascript 2nd edition wrox contributor author slow: As an interpreted language, JavaScript is filled with hidden performance issues that conspire to slow down your code and ruin the user experience. Learn exactly what is fast, what is slow, and what you can do to squeeze that last bit of performance out of your JavaScript code.
read more

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

Testing Facebook application posted in JavaScript on 2011-11-29 facebook function php testing var fb config id sdk check: I had a lot of work these days and didn't have time to blog here, but I think that the tips in this article are very useful. The number of Facebook applications is increasing every day. We all know that the testing (debugging) of our code is really important. That's why I decided to share my experience in this area.
read more

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

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

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

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

Another IE surprise posted in JavaScript on 2011-05-19 createstylesheet problem createstylesheet k found usage: We all know that the usage of InternetExplorer brings a lot of problems for us (the developers). Did you know that there is a JavaScript method createStyleSheet that you can call only 31 times.
read more

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

OOP in JavaScript (part 2) posted in JavaScript on 2011-02-22 child function parent prototype getname superclass parentclass childclass prototype extend child parent getname function return: I already wrote an article on this topic (Object Oriented Programming in JavaScript (Extending / Inherit classes)), but last few days I realized that there are some things that I didn't explain.
read more

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

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

GoogleMaps API v3: convert LatLng object to actual pixels posted in JavaScript on 2011-01-07 map var map getprojection fromlatlngtopoint worldpoint scale object fromlatlngtopoint map getbounds getprojection fromlatlngtopoint map: It is not so easy as it looks like. You should get the map object's projection and the map's zoom to be able to calculate it.
read more

JavaScript: managing events (dispatch, listen) posted in JavaScript on 2011-01-06 function event events dispatch classname type eventbus addeventlistener testclass2 testclass1 var: As a huge fen of the flash platform, I always like to work with events. The events system in ActionScript3 is really helpful when we are building a big application with many modules and we want to keep them independent. JavaScript hasn't native support of events, but we can still use them.
read more

CSS styles doesn\'t work on dynamically created elements in IE posted in JavaScript on 2010-12-28 createelement div element document createelement div element document createelement var element document: Again, IE proves that is full with bugs. Simple but effective solution.
read more

Delegation in JavaScript posted in JavaScript on 2010-12-27 var numofargs arguments length var numofargs arguments args var numofargs var args var delegate scope method function delegate scope delegation: I think that the delegation is an important part of every programming language. It is also possible in JavaScript.
read more

Object Oriented Programming in JavaScript (Extending / Inherit classes) posted in JavaScript on 2010-12-23 function baseclass class childclass var getname subclass2 subclass1 extend: As you probably know JavaScript is not exactly OOP based language. Of course there are some ways to handle with this and you can still create classes and inherit them. It is much much better to use classes. Your application will be well structured and split to modules.
read more

Javascript: autocomplete country script posted in JavaScript on 2010-12-06 field function helper ac countries var loop div script javascript: We are all filling registration forms. It's really nice when the page helps us to do that faster. The script, that I'm going to show you, is designed to be used for a country field.
read more

Cloning JSON object in JavaScript posted in JavaScript on 2010-10-04 obj obj1 outpurarr var document write obj2 object getname function return obj var outpurarr clone obj var function clone obj: Simple and easy solution.
read more

Validating date in JavaScript posted in JavaScript on 2010-06-27 date mm dd yyyy: A very simple way to validate date in JavaScript.
read more