-
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
read moredoes 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).
-
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
read moreGo to definition
orGo 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.
-
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
read morelogger.log
calls from my bundle using AST (abstract syntax tree).
-
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