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

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

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

Dependency Injection in PHP. Create your own DI container.

posted in PHP on 2012-05-12   class key view show arguments array content navigation title skills

By my opinion one of the biggest problems in programming are dependencies. If you want to have a good well written application you should avoid dependencies between your modules/classes. There is a design pattern which could help and it's called Dependency Injection (DI). It allows you to inject objects into a class, instead of creating them there.

read more

AS3: Dealing with multi-language data in your application

posted in ActionScript on 2011-06-16   language storage key class text key string static storage addvalue http www site trace storage getvalue

I'm a big fen of the MVC pattern. I like the idea to store my data in one place and be able to get it fast. In most of my projects I used a class called Storage for similar purpose. It supports a multi-language data saving, so I decided to share it with you.

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

Google Chrome announcement

posted in Other on 2008-09-11   google chrome key engineering decisions interpretationof key engineering comics interpretationof key scott mccloud hood

"Look under the hood of Google Chrome in this comics interpretationof key engineering decisions, by Scott McCloud."

read more

5 helpful tips in photoshop

posted in Design on 2008-08-26   tool zoom layer click press selection keyboard button quick mask mode

1. Moving background layer - sometimes you want to move the background layer. But by default it's locked. So just click twice on the layer and choose "OK" in the popup message. The layer will be transformed to normal layer.

read more