-
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
-
Part 1: We need channels! A gentle introduction to communicating sequential processes.
posted in Riew on 2020-01-06 riew csp routine go javascript channels put javascript fibonacci index function return pattern fibonacci number -
CSP is a formal language for describing patterns of interaction in concurrent systems. It's used in Go, Crystal, Clojure's core.async and a couple of other places. The idea in its core is nothing so complicated but it offers some interesting capabilities. Surprisingly enough it is not really popular in JavaScript. Recently I'm exploring this pattern and here are my findings.
read more
-
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
-
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
-
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
-
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 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
-
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
read moreprops.children
. It gives us the power to create a placeholder that is later filled with content from the outside.
-
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
-
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
-
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
-
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
read morereturn
everything else after that is simply not executed. Ops … I did it again, I kind of lied again.
-
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
read moremap
,filter
orreduce
. 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 usingreduce
.
-
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
-
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
-
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
-
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
-
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
-
5 useful ActionScript 3 tips
posted in ActionScript on 2011-05-24 movie color function date movie getchildat month number return tips -
Sometimes, when you work on some project, you find something that is small, but very interesting and useful. Usually I'm adding such kind of things in classes that I like to call helpers. The following tips are part of my helpers.
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
-
Remove html tags from a string wtih PHP
posted in PHP on 2010-11-12 str tag remove str return str ius str return -
Sometimes you don't need any formatting. That's just a nice way to remove all the html tags.
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