Front end development, maybe occasional rants and music.
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.
Original, 250x250px jpeg 2
Result, 500x500px png
If you ask me, results are really impressive, kudos to nagadomi!
2 Image is from my favorite animated show Rick and Morty
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
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
I’m happy to announce Marvin, boilerplate for kicking off React/Redux applications.
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.
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.
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.
Be sure to check them on SoundCloud as well.