Latest post

React Image Filter

02 Sep 2017

Muffin Man's writings

or the front end playground

Front end development, maybe occasional rants and music.

waifu2x super resolution image resizer

I use the same wallpaper1 (warning, 6mb file) for a long time now. Not sure who is the author (if anyone knows the original author, please let me know in the comments). But with high resolution displays, wallpaper started to look blurry and noisy, so I stopped using it.

But recently, my girlfriend reminded me of this great website which super-scales images using magic. Ok, not magic, but it uses “Deep Convolutional Neural Networks”, which is pretty much the same thing. Results are amazing, try it yourself.

The best thing, website is free to use and project is opensource. Code is available on GitHub.

It supports max scaling of 2x, so if you need more you’ll need to process image multiple times. Or you can dig in the code and add option for arbitrary scaling.

1 This is the resized image using waifu2x.

Example

Original, 250x250px jpeg 2

Original 250x250px image

Result, 500x500px png

Resized 2x 500x500px image

If you ask me, results are really impressive, kudos to nagadomi!

2 Image is from my favorite animated show Rick and Morty

Animate React component by calling 'setState' in 'componentDidMount'

3 Comments

On the front end, we do a lot of animations. Most of the simple animations I create by using CSS transitions. Either I will change class or inline style of the element, and define transitions in CSS file.

Easiest way to do this in React is to render initial state, and then when it renders, change the state to apply class or style to animate. The easiest way to do it in React is to change state in componentDidMount. Setting state in componentDidMount is considered to be anti-pattern, as it forces rerender and can lead to property/layout thrashing. But in our case, that is exactly what we want to do.

When we do that, we hit the wall - only second state is rendered and there is no transition between two states. It happens because of browsers optimization - browsers are not rerendering stuff that changed in the same animation frame. But they merge changes and render the end result.

The problem I just described is not React exclusive, but browser related. Same will happen if we try something like this:

const element = document.querySelector('.AnimateMe');
element.style.height = '50px';
element.style.height = '250px';

So let’s start with example of the problem.

Read more

Introducing Marvin

I’m happy to announce Marvin, boilerplate for kicking off React/Redux applications.

Marvin on Github

Basically my boilerplate became Work & Co’s internal project. It is meant to be a starting point for our React projects. This way faster development is assured along with higher quality code. It is open source, and external contributions are welcome.

Name comes from a fictional character Marvin, android from the The Hitchhiker’s Guide to the Galaxy book as a homage to it’s author Douglas Adams.

React scroll decorator

2 Comments

I love JavaScript decorators. One that I copy to every React project is scroll decorator. It is fairly simple way of injecting scroll position to react components. This way you can handle scroll using react lifecycle.

This decorator is not listening to a scroll event, as that is the performance killer (especially when you push it to react lifecycle). Instead, it is using interval to check if scroll position has changed. To keep it performant, I’m using requestAnimationFrame. Interval is only there to throttle animation frame from triggering too often.

Read more

Time Pills tracks, stems, presets, loops and midi

Friends of mine from the band Time Pills opensourced bunch of their tracks. You can find them on GitHub. They are looking forward to having them remixed by creative people and sharing it with the world

Repo contains all of the tracks, stems, presets, loops and even midi files.

Time Pills SoundCloud profile

Be sure to check them on SoundCloud as well.

Enjoy!