Playgrounds for React patterns: compound components and render as a props

During my preparation to talk in Verona on ReactJSDay I have tried to dive deep in some patterns in React that have been broadly¬†discussed (at least in my twitter feed ūüôā¬† ). For me, one of the best ways to understand the code better is by playing with it a little bit, so I have created a few simple codepen¬†playgrounds that were based on the existing code samples. Maybe you will find them useful as well.Continue reading →

Accessibility practical guide

permanent temporary situational accessibility

Recently in many front-end conferences, the accessibility topic appears very often and in some way, it reminds me the endless discussion about how styles should be done using the CSS-preprocessors/CSS or some CSS-Modules solutions etc. Hot topic? So how to make our own sites more accessible?

Why actually should we care about accessibility? I think everyone has their own different answer to this question. And there are a lot of possible ones:Continue reading →

How not to miss updates in React Documentation

React is the “instrument” that I am using on a daily base, and for this reasons, I am trying not to miss any updates that are happening in this framework. And is really hard to miss something, as I am active twitter user, and am following a lot of other React¬†funs. But somehow it happened that I have missed when the PureComponent appear. So I decided to find some more reliable method to track what changes are happening in the React.Continue reading →

How to make smart chaining of custom pure functions

I love the concept of functional programming. Lately, in addition to my work with React + Redux +JS, etc. I have worked also a lot with the ClojureScript (I was warned that after I will start writing in any dialect of Clojure I will start thinking slightly different about functional programming, not I see that this is true).

Last weekends I was enjoying by doing some training tasks on JavaScript, and to solve one of the problems in it with the love of functional programming¬†I came up with 4 pure functions (let’s name them function1, function2, function3, function4) that I wanted to apply to my data step by step to obtain the expected result. If it were a ClojureScript, the expected code should be something like this:
(def output-data (function4 (function3 (function2 (function1 input-data)))))
Continue reading →

How to convert icons from fonts to separate svg files

Recently I have moved out rich text editor from the TinyMCE to the Draft.js. I wanted to make this transfer as less noticeable as possible for our end users in terms of the UI. One of the interesting points was to create buttons in the editor toolbar similar to the ones that were in the TinyMCE editor. Icons that are used in the on the button in the TinyMCE editor are done using the specific TinyMCE font that is part of the TinyMCE package. I will go through some ideas on how this can be done.Continue reading →

8 Playgrounds for Examples from Official Draft.js Repository (v.0.10.0)

Draft.js

Last four working days were quite interesting, as I was moving rich editor that we used in our application from the TinyMCE to Draft.js. There were many reasons why I decided to do this. The most general was to have more ownership over editor in our app and be possible to customize it quite easily, so it would reflect our needs (yeah, and make it possible to fix any bugs in the editor on your side). Moreover, I think that I will be able to reuse created rich editor, that it based on the draft-js in the re-frame project, on which I will be working in next month.

Working with Draft.js is quite challenging and interesting at the same time. Challenging as this pretty new tool, so there is some lack of the documentation and enough examples of the documentation (you can fin documentation on the official web-site: https://facebook.github.io/draft-js/docs/overview.html#content ¬†+ check the issues on the Github: https://github.com/facebook/draft-js/issues; links to a quite a lot of examples of the usage are available in the Awesome Draft.js¬†) ¬†At the same time, it was interesting as give very deep understanding what basic concepts are used in the editors.Continue reading →

How to find tech job in United Kingdom

Last year I relocated to the London and was faced the need to find the job for myself. On the beginning of my search I have found one of the articles in the Habrahabr community very useful, so I decided to translate/interpret it to English.

How to find the job in the United Kingdom

1. Write the CV. For a¬†better understanding how to write good CV in English take a look at how other people have done this. On the¬†cv-library.co.uk¬†you can find a lot of the CVs,¬†on the free mode all of them are available without the contact data, and you actually do not need the contact data.Continue reading →

ReactNL 2016: How it was

ReactNL review

On the mid of this October, I was on a great conference dedicated to the React.js in the Amsterdam – ReactNL. You can check the program of the conference here http://reactnl.org/#program. As there were a few streams I was not on all the speeches, but I will try to do my best to share what I have heard (and yes, I think there would be a video from all the speeches). Originally I have created this small talk review for my teammates that were not at the conference, so they were able to get what there was.

1) ‚ÄúStyling React.js application‚ÄĚ. Really good talk about how the styling is currently done in the react components. Max had compared all existed technologies (one of the slides from his speech https://pbs.twimg.com/media/CupKNldWIAA39zp.jpg) and presented new one that he + open source community are currently developing – styles-components https://github.com/styled-components/styled-components. It‚Äôs great! )) Still raw, but it is great do not have to make state changes just for handling hover state for the button. I have tried it on the small project on weekend and it‚Äôs interesting to play with and very suitable to use.
Continue reading →