Articles

Browse the full recovered archive.

Command Line Applications Using React - Snake Game Tutorial

July 24, 2019React

Absolutely CRAZY combo! In this tutorial we'll learn how to build a CLI Snake game using React and Javascript. One of the most powerful features of React is that it supports different renderers. That means you aren't lim

Quokka Clone In 10 Minutes - VSCode Extention Tutorial

July 22, 2019VSCode

In this tutorial, we'll learn how to create a VSCode extension that will communicate with Node Inspector to collect execution data basically a Quokka.js clone. For those who don't know what Quokka.js is it's a live scrat

5 Git Tools You Must Use Today

July 21, 2019Git

Watch the video on YouTube In this article I'll list 5 git tools that you must use today. Hub Hub is my favourite tool and I use it a lot. If you use GitHub to store your repositories this tool will save you a ton of tim

Render HUGE Lists In React - React Window Tutorial

July 17, 2019React

Watch the video on YouTube This is a tutorial on react window, at the end of the article there is a link to a Github repo with code examples. Rendering lists in React is simple, I would say trivial. You just map through

Basic Webpack React Setup

June 22, 2019React

Open the Glitch example Usually create react app is enough to create new React applications, and if you need to have some specific settings you can always eject and alter its webpack configuration. But sometimes you just

What Is DOM

June 3, 2019HTML

DOM (Document Object Model) is a programming api for your HTML (or XML) documents. Basically it is an object representing parsed code of your page. It has tree like structure and allows you to traverse, access and modify

Fullstack GraphQL Beginner Tutorial - Instagram Clone

May 20, 2019Graphql

Watch the video on YouTube In this tutorial, we'll build a simple Instagram clone using React and GraphQL. In our version, it will only contain cat pictures. GraphQL allows you to fetch data using Queries and update it u

Automate Git With Hooks And Husky

May 1, 2019Git

Watch the video on YouTube Git provides an interface to run some code as reaction on specific triggers. Those triggers are called githooks (hooks used by git). You can run code on every commit, push, pull or other action

Promises In Javascript

April 14, 2019Javascript

Watch the video on YouTube In Javascript Promises are special sort of objects that serve as a proxy for data that is initially unknown. The concept is not unique for Javascript, similar constructs exist in other language

React PropTypes

April 2, 2019React

Javascrpt is dynamic language, it doesn't have static typechecking. You can't syntactically specify that you function works only with strings, or only with numbers. Same applies to React components. You can pass a prop t

React Context API

March 29, 2019React

In React application data and event handlers are passed down to children components through props. But sometimes you need to make some data available on several levels at once. Passing data through props manually can be

For Loop In Javascript

March 24, 2019Javascript

Sometimes you need to do some action repeatedly. For example here, for whatever reason I want to output "Hello loops" five times. Loops offer an easy way to do this. There are several different ways to implement loops in

Handling Errors In React

March 10, 2019React

One of the problems you might face when working on your React application is that some error happens in one of your components it breaks the whole app. To solve this problem React has error boundaries . What Is An Error

Controlled And Uncontrolled Forms In React

March 10, 2019React

There are two ways of working with forms in React. Controlled and uncontrolled . Let's see when should you use each of them. Uncontrolled Forms The easiest way to handle forms in react is to use uncontrolled inputs. In u

React Synthetic Events

March 10, 2019React

The events that you get when your event handlers get triggered are actually SyntheticEvents an abstraction around browser events provided by React. It has the same interface as the browser’s native event, including stopP

React Pure Components

March 10, 2019React

By default, a plain React.Component has shouldComponentUpdate set to return true. You can write your own implementation of this method to avoid unnecessady re renders. What Is PureComponent? React provides React.PureComp

React Functional Components

March 10, 2019React

The simplest way to define a component in React is to use function. You just declare a function that receives props and returns some JSX layout. Here is an example: You can use object destructuring to get specific props:

Pure Functions And Side Effects

March 10, 2019Programming

In computer programming pure function is a function that satisfies two conditions: It is deterministic , which means that for any given input it will always return same output. It has no side effects . Which means it doe

React Lifecycle Methods

March 10, 2019React

ReactJS provides a bunch of methods that are executed during different stages of components life. Those are called lifecycle methods . Lifecycle methods are only available for class based components. For functional compo

How To Add Named Anchor In Markdown

March 10, 2019Markdown

Sometimes you might want to have a link to an item inside your markdown document. It can pe especially useful when you create table of contents for your document. The most common way to do this is to provide a named anch

What Is The Difference Between Let, Const and Var In Javascript

March 9, 2019Javascript

One of the most important things in programming is to clearly express your intent. With release of ES6 we got two new keywords to define identifiers for our values: let and const. Before that we had only var in our toolb

React Concept - Virtual DOM

March 8, 2019React

Unlike many other frameworks React doesn't update DOM directly on every change and uses VirtualDOM to to optimize re renders. What Is DOM DOM (Document Object Model) is a programming api for your HTML (or XML) documents.

How To Localize React Application Using `react-intl`

February 28, 2019React

In this tutorial we'll localize React application from start to finish using react intl made by Yahoo. We'll use create react app to generate a new application and then we'll go through the whole set of steps needed to l

React Dev Tools

February 27, 2019React

To develop React applications effectively you'll need to use React DevTools browser extension. It's available for both Chrome and Firefox. It has two main features: view of a component tree and the current state and prop

Javascript `this`

February 26, 2019Javascript

A lot of people find this keyword in Javascript very confusing. Depending on where is it used and defined it can have different value. This In Functions In normal Javascript functions this refers to global object. It wil

Handling Events In ReactJS

February 25, 2019React

Handling events in ReactJS is very similar to how it's done on DOM elements. There are a few differences though. Event names are camelCased, so instead of onclick you have to use onClick: Also as you can see event handle

React Props

February 24, 2019React

In ReactJS props is how components get data from their parent. When you add a tag to your JSX code and pass it some attributes the components referenced by this tag will receive them as a props object. In this example na

Html Entities

February 23, 2019HTML

HTML entities are strigns inside HTML code that start with ampersand & and end with semicolon ;. They allow you to add wide variety of characters to your HTML code. For example characters are reserved in HTML because the

Typescript Constructor Shorthand

February 22, 2019Typescript

Here is a thing, in Typescript there is a shorthand to create and assign class properties from constructor params. Imagine you have following code, let's say you have class User: You can write same class using shorter sy

React Components

February 21, 2019React

Introduction to ReactJS Components. What Is Component A component is an isolated piece of interface. It contains some piece of layout describing what should appear on the screen. It can also have some bound state and con

Lists And Keys In React

February 20, 2019React

How to display lists of elements in React? You can use map method to loop through an array of items and then use curly braces to insert it into your JSX code: Here we mapped through the array of strings array using the a

Javascript Generators

February 19, 2019Javascript

Watch the video on YouTube ES6 brought a bunch of new functions to deal with asynchronous data streams. Generator functions and async/await syntax among them. Generators are special kind of function that can be paused an

Conditional Rendering In JSX

February 18, 2019React

There are many ways to have conditional expressions in your JSX code. Let's look at them. If Statement The easiest way to have condition in your render code is to use if statement in render() method of your component. Yo

Starting With JSX

February 17, 2019React

Watch the video on YouTube Today we continue to learn ReactJS. In this React tutorial for beginners you'll get familiar with JSX syntax used in React applications to describe the layout of your components. At this moment

What's New in ES10? Javascript Features ES2019

February 16, 2019Javascript

It is 2019, and there is a bunch of new features that got approved by the TC39 consortium and soon will become part of ES10 standard. Array.flat First thing we're gonna look at is Array.flat method. What it does is it fl

How To Install ReactJS

February 16, 2019React

Watch the video on YouTube How to install React? ReactJS is a Javascript library so by asking how to install it you most likely mean "How to setup a React project?". Use A Sandbox If you just want to tackle with React an

Introduction To ReactJS

February 15, 2019React

Watch the video on YouTube An introduction to ReactJS for beginners. What Is ReactJS? ReactJS is a Javascript Library for building User Interfaces. It was initially created by Jordan Walke in Facebook. First time it was

How do you serve a page with content in multiple languages?

February 3, 2019HTML

How do you serve a page with content in multiple languages? Serving webpages in multiple languages is a very big topic and for me it breaks down into three main parts. First we need to recognize what language is preferre

What is doctype in HTML documents? And why do you have to specify the doctype?

January 30, 2019HTML

If you open any webpage, and look at it's source code, you'll always see a little thingy just before the opening html tag. So what is it, and what does it do? This string is a document type declaration, and it's importan

React App Video Course, Parts 6-10

August 10, 2018React

I'm super proud of myself, managed to deliver an episode daily so far. And the best part is that it's getting easier with each one. 6 Watch the video on YouTube 7 Watch the video on YouTube 8 Watch the video on YouTube 9

React App Video Course, Parts 1-5

August 5, 2018React

Initially I was going to just use this app as an example in my basicreact.com course. But then I decided to make a separate series on YouTube to practice making videos. My biggest mistake when doing tutorial videos was s

Git Stash

July 12, 2018Git

Sometimes you have uncommited changes and you need to switch to another branch. Here is where git stash is very handy. Basic Usage Watch the video on YouTube When switching between tasks you sometimes have uncommited wor

Life Updates 2018

June 13, 2018Random

For me 2018 is a year of dramatic changes. New people, new places, new projects. Let me share what happened to me during these months. I Moved To Sweden Right after new year I got hired to 0x.se consultancy and moved to

How To Comment React JSX Code

May 13, 2018React

Sometimes you need to comment out some JSX code or just add some informative comment to your layout. How to do it? First problem is that JSX is not HTML and HTML comments wont work: Even though JSX will be compiled to Ja

What Is React?

May 6, 2018React

This article is part of react course I'm currently working on. It will be free beginners course published on Udemy. This is an introduction, where I tell what is React, what are React key features and give a quick app ex

My First Javascript Talk

April 21, 2018Random

Last Tuesday I had my first talk in Stockholm and actually ever in life. Recently (3 months ago) I moved to Stockholm. Now I work in 0+x as a consultant. And recently I had a chance to participate in local ReactJS meetup

Js Statements Vs Expressions

April 20, 2018Javascript

Let's talk about statements and expressions . It's very important to understand difference between them. I've checked several articles on this topic and in a lot of them authors say something like: OK, we have statements

Do You Need Static Type Checking?

April 8, 2018Javascript

We'll talk about types and static type checking in Javascript. Why you might want it and how to apply it. WAT? Javascript Has No Types Well, maybe I went a bit extreme. Let me explain myself. If you will search the inter

CryptoKitties Clone Part 3 Adding Frontend

March 28, 2018Ethereum

In last part we added an auction contract. Now we can buy and sell our GradientTokens. Let's add some nice UI for that. This is what we'll be building: Create React App Let's start by bootstrapping the front end with cre

React 16 Course - Managing State

March 22, 2018React

state in react is a plain Javascript object used to manage data specific to some component. Keep in mind that only data that is going to be needed for rendering should belong to the state. Contents What Is State Differen

CryptoKitties Clone Part 2 Adding An Auction

March 19, 2018Ethereum

In last part we created our own non fungible token. For the sake of simplicity, we didn't create as many fields as CryptoKitties have and went with just 2. Inner and outer color of our GradientToken. In this part, we'll

Surviving The Javascript Type System

March 12, 2018Javascript

"Everything is crooked. Reality is poison. I want to go back, I hate this. I can’t live like this." Morty from the Morty's Mindblowers episode. Also me after investigating about Javascript type system. What Type System D

React 16 Course - Component Lifecycle Methods

March 11, 2018React

Like everything in existence – react components follow their natural cycle of creation, existence and destruction. This article is part of WIP React 2018 course for beginners. React Lifecycle Methods Let's see what happe

CryptoKitties Clone In 20 minutes. Non-fungible Token Tutorial

March 5, 2018Ethereum

If you've read previous articles about Ethereum DAPPs (First, Second) – you already have your very own ERC20 compliant token. Today we'll make ourselves familiar with ERC721 . What Are We Going To Build I think everyone

Firebase React Authentication Tutorial

March 4, 2018React

Watch the video on YouTube Sometimes you just need to make a fast prototype and you don't want to mess with back end, authentication, authorization and all of that. Here is where Google's firebase can help you. In this t

Quick D3 Voronoi Example

February 28, 2018Javascript

Today I saw a tweet from @levelsio where he asked how to draw areas on his HoodMaps project as vector curves instead of blocks. Here is my version. Here is the question itself: I propose to use Voronoi algorithm from D3j

Ethereum Distributed App With React Tutorial – Part 2

February 14, 2018Ethereum

So, we have a token. Time to create front end part and try to send it between accounts. This article has two parts: How to create ERC20 token How to create ReactJS front end for your DAPP (this one) Go read the first par

Ethereum Distributed App With React Tutorial

February 13, 2018Ethereum

ICO's, crypto, blockchain, DAPPs. Everyone is discussing it nowadays (or at leas heard). Today I'm going to show you how to create your first distributed app on Ethereum blockchain, using ReactJS. This article has two pa

React Native Mobx Tutorial - Part 2

February 13, 2018ReactNative

This is second part of the MobX tutorial series, today we'll setup project and add our MobX stores. Table Of Contents 1. What is MobX 2. Making ReactNative app 2. Testing stores 2. Testing views with Enzyme Setting Up OK

React Native Mobx Tutorial - Part 1

January 1, 2018ReactNative

MobX is state management solution that is gaining popularity very fast. I'll show you how to create a simple React Native app using MobX . What Are We Going To Build I have a few crypto coins on some exchanges. Not like

React Native E2E Testing With Detox

November 29, 2017ReactNative

When you develop for web you have a lot of options to set up your e2e tests. Protractor, CasperJS, PhantomJS, DalekJS and a lot of others. That's not the case in the world of mobile development. But worry not, I'm going

Reducers VS Transducers

November 28, 2017Javascript

Sweet chunk of functional paradigm for you today. I don't know why did I write "versus" while they compliment each other. Anyway, let's get to the good stuff… Reducers Simply speaking a Reducer is a function that ta

Why Should You Use Transform Class Properties Plugin

November 27, 2017Javascript

In my previous post I used pretty interesting syntax to define class methods for my Popup component. I was able to use arrow functions to change the scope of this to class level. Hmm, but it's not actually Javascript, so

Popup With ReactJS For Jekyll Blog

November 23, 2017React

Once upon a time (yesterday) I decided that my blog lacks a good old pop up. You know, the one that unannoyingly asks to join the mailing list. So if you have Jekyll blog and you want to know how to create a pop up using

Open/Closed Principle - SOLID

November 13, 2017Programming

OCP states that software entities (classes, modules, functions) should be open for extension, but closed for modification. Let's figure out what exactly does it mean… That basically means that you should write your modul

Don't Mock What You Don't Own

November 11, 2017Programming

I was refactoring specs of some Rails application when I decided to mock the ImageUploader class of CarierWave. I wanted to be able to check for specific image url. But was it a good idea? No, Don't Do It I know it might

Liskov Substitution Principle - SOLID

November 10, 2017Programming

In 1988 Barbara Liskov wrote something that now stands for L in SOLID principles. Let's dive in and learn what is it and how does it relate to TDD . Here is the original formulation: "If for each object o1 of type S ther

Basic Karma JS Tutorial

October 8, 2017Javascript

Watch the video on YouTube Psst, do you write Javascript that runs in browser? I have something for you, it's called  Karma , you'll like it. When you write Javascript code, you have to test it. The same code m

Add Specific Lines With Git Patch

October 7, 2017Git

You know that git add adds files to index. But did do you know that it can add specific lines of files? Or even add files, ignoring their contents? Let's check this out! First let's get familiar with git add patch c

Getting Schwifty With Pull Requests

October 1, 2017Git

Once I was working on a big feature. Everything was going fine until I got carried away and started to commit everything in one branch instead of splitting to multiple smaller ones. As a result I ended up with a huge PR

7 Skills Of An Effective Developer

September 30, 2017Random

When you see the term effective developer , you probably imagine a person who does a lot of stuff. If yes, then well, you are wrong. To be effective doesn't mean to do more things, it means to do the right things . In to

Magical Mystery Guide For Async/Await In Javascript

September 28, 2017Javascript

Hey there! Today we are going to look at async and await keywords that allow you to pause functions execution, and therefore let you write asynchronous code that reads like synchronous . But first let's go through other