Latest post

Two design articles

27 Oct 2017

Two design articles

Just wanted to share two articles that helped me understand visual design better. I was already aware of the most of these things, but having someone explain it how and why was really helpful.

Learn more about design

When asked how to learn more about design as a developer, design partner in my company recommended studying work of these two designers. I haven’t taken my time to do it, but it is on my todo list.

Frontend developers should have at least basic understanding of visual design. Because great products are symbiosis of both great design and great tech. Hopefully, these links will help you in that regard.

Animate between two react components

2 Comments

Just a quick proof of concept I made for transitioning between two react components. It animates height (of the parent) and fades components into each other.

In componentWillReceiveProps it checks if children prop has changed. When that happens, it will save currently rendered children and the height of the wrapper.

Then it will animate wrapper’s height to a new component’s height, fade out previous component and fade in the new one. Finally when animation is finished it will reset wrapper’s height to auto.

I might release it as a standalone npm component, but it needs some polishing before I do so. If you make use out of it, please share in the comments.

Setting up Webpack, Babel and React from scratch, revisited

51 Comments

Last summer I wrote this post which quickly became my most popular one to day. With webpack 2 and 3 it got outdated, so I decided to write a new one.

Before we start

I’ll assume you have a basic knowledge of unix terminal, npm and JavaScript. You did some React, but now you want to level up and learn how setup React projects from scratch.

This is detailed step-by-step guide, as I’ll try to explain the whole process. If you just want code to play with, check this repository I created for this tutorial.

Every time I talk about changing a source file, I’ll paste complete file’s content beneath it. You can look for ADDED IN THIS STEP comments which point out specific things that changed.

Please note that this tutorial is written on macOS using node 8.5.0, but it should work on Linux and Windows without any major issues. If you find something that is not working, please provide a correction in the comments.

What are we trying to build?

Simple development setup for React applications using Webpack and Babel. But my main goal is for people to better understand these tools and how to use them.

Setup that we are going to create is minimal, but it follows the best practices and gives you a solid ground to start from.

Read more

Minor design refresh

I kinda got bored by the current design. Rotating SVGs in the header ate too much CPU power (oh the irony). So I decided to change a thing or two.

First thing was to get rid of the rotation. Then logo got replaced and I added this marvelous font. Header is a bit smaller now and footer blends more with the page. Typography did undergo some small changes, and both buttons and borders are not lighter as well. Code snippets are now using a light theme, which should be easier on the eye.

This is just a minor refresh until I do a full redesign (one of the trillion ideas).

I have a trillion ideas.

But I need to regroup and focus on finishing at least one, instead of starting all of the trillion ones and finishing none.