Hello, I'm Stanko, a software engineer in Belgrade, writing mostly about JavaScript and React.

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

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

My blog setup

Few days ago I got a following message on LinkedIn.

Hi Stanko! I’m a junior front-end web developer and I recently found your amazing blog and fell in love with it. Since you don’t have any other social media, I decided to contact you trough here even if it’s not ideal. I was wonder what CMS you were using and if you could do a blog post about it ?

So here it is, post about my blog setup.

Jekyll

I’m not using a dynamic CMS but a static site generator called Jekyll. Static site generators take different approach to making websites.

Instead of having a database, pulling data from it and dynamically building your pages, static site generators generate all the pages only when there are changes to the site. No moving parts, just plain HTML files. This approach is more secure, makes caching much easier and boosts performance.

Smashing Magazine has a post on why static sites are awesome.

Static sites are not limited to blogs. Bigger websites are also easy to build, once you get a hold of it. There are agencies that are even doing it for client work.

Read more