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

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

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

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

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

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

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

PHP: please, please, clear my cookies

posted in PHP on 2013-10-31   time cookies result arr setcookie request_ids time setcookie app_request_type time store needed

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

read more

CSS: Understanding first-child, last-child and nth-child

posted in CSS3 on 2013-08-16   child element nth child scope row4 markup type color styles

I like the CSS only solutions. Very often I need to select a specific DOM element. Sure I could add a new class, but it is always nice if I can do that inside my stylesheets. It just looks better and keeps my HTML markup clean. first-child, last-child and nth-child are made exactly for this purpose.

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

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

AssetsPack - a friend of the front-end developer (pack your assets with NodeJS)

posted in Nodejs on 2013-03-16   css js file assetspack pack tests data type packing html module

AssetsPack is a NodeJS module which helps in organization, compilation and minification of assets. It's meant to be used in local environment during the development process. It was made generally for HTML/CSS/JavaScript based applications.

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

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: 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

AS3: Using custom Metadata in Flex (part 1)

posted in ActionScript on 2010-12-28   metadata public flex mycustomclass information metadata tags tag as3 flash utils describetype public function mycustomclass

I'm sure that you've already used metadata tags in your flex applications. There are several reserved keywords like [Bindable], [Embed], [Event] and so on (the full list is available here). The function of the metadata tags is to provide additional information to the flex compiler. For example information about embeding assets, dispatching events. This article doesn't explain how to use the default flex tags (you can learn that from here). It shows you how to create your own metadata tags and how to use them.

read more

PHP: export data to XLS file

posted in PHP on 2010-12-01   xlswritelabel echo pack 0x0 function content type application header content type download header content row col 0x0 echo pack ssssss

Sometimes it is necessary to present your data in format which is popular and easy to work with. In most cases the CSV format will fit perfectly you and your clients, but sometimes you have to export the information in XLS file. These several functions will help you to do that.

read more

Distort MovieClip in Flash with AS3

posted in ActionScript on 2010-09-05   getrandomnum clip setting mtd tweentype out_expo end getrandomnum distort private function number movieclip distortimagewrapper

As you probably know there is no simple way to distort a MovieClip in Flash. The solution that I've found uses AS3. Special thanks to Thomas Pfeiffer and Ruben Swieringa. They share their experience with this problem.

read more

Trace JSON object in AS3

posted in ActionScript on 2010-07-17   str description gettypeof o spaces var object information users

I'm absolutely sure that all of you are working with JSON objects. It's pretty helpful to be able to print them and find out what exactly they contain. I wrote a simple function that makes this possible.

read more