Part 3: Performance optimization with react-lazyload & react-window, memoization and how to deal with issues that both packages pose…

Part 1+2 Recap

In Part 1 and Part 2 we looked at how to take care of the concerns we hd for implementing an ImageLoading components. We created an implementation that contained functionality that could conditionally preloading Images as well as kick of the image’s network request when the Image component would come within a certain threshold of the viewport (using the Intersection Observer API). …


Part 2: Preloading, IntersectionObserver, Fade In transitions, preventing image download with pointer events and more…

Part 1 Recap

Part 1 ended with the basic setup for the creation of the PreloadImage component. The component so far has functionality to set a ‘placeholder’ that would be set when the image loading fails. And besides that there is the ‘lazy’ property that can be set to either instantiate an Intersection Observer to the component that keeps track on when the component comes into the vicinity of the viewport and consequently start loading the image from the network. Not setting the lazy property would invoke the setPreloader() function that will preload the image as soon as the component gets mounted.

Persons and Videos list on the Metacules.com Home Screen

If…


Part 1: Preloading, Lazy Loading, IntersectionObserver, Fade In transitions, windowing, error handling, placeholders and more

Introduction

I am, by trade, first and foremost a (native) Android developer and have been working for 6+ years for a whole range of companies and projects.
One of the challenging problems in the world of development is that if you want to create an app and be a serious player in the market you kind of need to develop for iOS and Android. And additional questions might rise like: Should I also create a website? Or when you want to create a website you at least should make sure it looks good on mobile devices. …


I am working on a new tech platform (metacules.com) that aspires to connect the user to interesting podcast, video & book content via various 3rd party open APIs.

One of the strategies to create traction, spread the word and have users (and ourselves) share interesting videos of podcast they liked is by sharing them to social media platforms like Twitter & Facebook.

Initially (and naively) I thought it would be as simple as using a sharing library like ‘react-share’ which is great for getting some out-of-the-box functionality to share to the various social media platforms.

But what I didn’t realize…


I am proud of the rapid progress we’re making with the creation of the Metacules platform — that will become an antidote to Big Tech censorship.
Since last week I’ve spend all my focus working on a mobile version of the website (the desktop version is very different!).

Screenshot of the podcast page on the desktop version

Normally — in a ‘professional’ setting — creating an app for mobile with a small team (iOs developer, Android developer, designer, product owner/manager) will quickly and easily take up at least half a year, costing a company easily $75–100k (if not way more). But I am sure we can do it way…


Hello everyone, My name is Rik... and I am currently working on, not only – what in effect will be an antidote to censorship - , but a new type of platform: a website that will connect you to all the interesting information & content out there on the internet. But not just any content... No: we won't be connecting you lovely cat videos. Nor to videos of dogs for that matter. No... we will be connecting you to people, to people and their ideas! Or to be more precise we will be connecting you to podcasts, videos and books…


So I wanted to add offline view-ability of data to my app. Arguably the most popular way to go currently seems to be the repository pattern (or a variation of it…). There are a whole bunch of (blog)posts out there, but so far I hadn’t found any that covers all the details for what I required in my use case.

So what did I need?

  1. Whenever I request data I want my data layer to make an api call to get me the latest up-to-date data.
  2. If for some reason the api call takes to long or the server responds…

Rik van Velzen

(native) Android Mobile specialist / React JS Web developer creator of the metacules.com platform

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