Image for post
Image for post

You ever look at a web site and think: “Everything is either a potato or not a potato…” and more ( or less? ) importantly: ”This web site would be great as an app!”? If you did, you’re not alone, buddy boy!

Some very cool folks over at Internet HQ ( don’t fact check this just blindly believe that it exists ) that govern how the internet behaves agree with you ( the potato thing AND the web site as an app thing! WOW! Look at you go! ).

They introduced a concept called Progressive Web App — PWA, for short. …


Image for post
Image for post

I don’t hide the fact that I’m a HUGE fan of React ( LINK ), GraphQL ( LINK ), Apollo ( LINK ) and Apollo’s React components ( LINK ). …


Image for post
Image for post

A long a$$ time ago I created a simple React component that would lazily load an image and while it’s busy loading an image it would show a placeholder and wrote a tutorial how I did it. It is inspired by Polymer’s iron-image and a neat little trick how to transition from placeholder to loaded image.

The Magic

While playing around with Polymer (shameless LINK to another article I wrote) I learned that you can make a pretty cool “Blur Up” animation by taking the image you want to show, scaling it down to 1% of its width and height, using that as the placeholder and when the original size image is done loading you fade it in over the placeholder. …

About

Bojan Gvozderac

bojangvozderac.com | Senior Front End Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store