Forem: Aravind Balla

Setting up icloudpd on Synology NAS

Aravind Balla — Tue, 12 Nov 2024 00:00:00 +0000

In this article I document how I setup backups for iCloud library in a Synology NAS (ds923+ to be precise).

Out of all the solutions out there, I opted to have a copy in my NAS rather than moving everything to it. And I wanted a way that needs minimal recurring effort.

So went with icloudpd docker container which would directly download stuff from iCloud. I don't have to keep originals on my phone and wait to get home to have the backed up. This was a lot figure out. The repo - https://github.com/boredazfcuk/docker-icloudpd

Setting up the filesystem

Initially, we need to create 2 directories. One for the container settings and one for the location of downloads. In /docker, the default directory Container Manager creates, I create icloudpd/config directory so that the container can create the settings. For the download path, I use volume1/homes/<user>/Photos/icloud so Synology Photos has access to the downloaded media.

Setting up the docker image

We need to create a new project with the path as the /docker/icloudpd and the following docker-compose

version: '3.3'
services:
    icloudpd:
        container_name: icloudpd
        restart: always
        environment:
            - user=username
            - user_id=1026 # default
            - group=users # default
            - group_id=100 #default
            - apple_id=apple-user@icloud.com
            - authentication_type=2FA
            - 'folder_structure={:%Y/%m}'
            - notification_days=3
            - synchronisation_interval=21600
            - TZ=Asia/Calcutta
            - 'download_path=/icloud'
            - skip_check=false
        network_mode: host
        healthcheck:
            test: ["CMD", "/usr/local/bin/healthcheck.sh"]
            interval: 10m
            timeout: 10s
            retries: 3
            start_period: 2m
        volumes:
            - '/volume1/docker/icloudpd/config:/config'
            - '/volume1/homes/user/Photos/icloud:/icloud'
        image: boredazfcuk/icloudpd:latest

Figuring out user_id and group details was a chore. It would not get proper permissions to download without this. After some debugging here's what worked

SSH into your NAS
Run id username

As soon as, you setup the docker container, you would need to setup a few things like the failsafe file and authentication. This was convenient to setup from the terminal as I was ssh-ed into it already.

SSH into your NAS (if you already haven't)
touch <download-path>/.mounted - this is the failsafe file
docker exec -it icloudpd sync-icloud.sh --Initialise - this would initiate the iCloud authentication

Ran into few issues and one of the error messages suggested I login in icloud.com and see if there are any popups on screen. After clicking them away and re-running the container, it seems to download the icloud library.

Tweet daily using Github Actions

Aravind Balla — Tue, 12 May 2020 00:00:00 +0000

Github Actions are really powerful. I like to see them as personal assistants. You tell your assistants to do some work for you. Similarly, you tell Github actions to do some job for you.

I’ve recorded a video while building this. If you’d like to watch me build, here is the video 👇

The main usecase for these actions, I feel, is when we use it to publish your library to npm or deploying your app on S3 or Github Pages whenever you push new changes. CI/CD - like the techies call it.

These actions can be triggered in different scenarios. In the above usecase, it is triggered on push. Similarly, you can also do it on a pull-request where we run a few checks or welcome new contributors to the project.

Another way to trigger an action is on a schedule, which is what I used to make the action Tweet everyday. 🗓We can give CRON expressions to schedule the triggers for the action.

Okay, where do we tell all these things to the Action? There’s got to be some config, right?

Yeah. We have a yaml file for every action and we specify all the configuration for it there. All the yamls for your actions lie in .github/workflows path in your GitHub repo.

This is the action config I wrote

(Trimmed version. Full code here)

name: Tweet

on:
  schedule:
    - cron: '0 10,16 * * *'

Now we know how to schedule things. Next step?

We know there should be an API to post tweets. But for that, you need a few API credentials from Twitter. This was a big time taking process for me as the application for a dev account on Twitter had to go through a few reviews from Twitter employees.

Once you get the credentials, tweeting is as easy as the code below.

Full Code

const Twitter = require('twitter');

const client = new Twitter({
  consumer_key: process.env.TWITTER_API_KEY,
  consumer_secret: process.env.TWITTER_API_SECRET,
  access_token_key: process.env.TWITTER_ACCESS_TOKEN_KEY,
  access_token_secret: process.env.TWITTER_ACCESS_TOKEN_SECRET,
});

client.post('statuses/update', { status: tweet }, function (error, tweet, response) {
  if (!error) {
    console.log(tweet);
  }
});

I have this in a file scripts/getQuote.js and I run using yarn tweet. We add a script in package.json to be able to do this.

"scripts": {
  "tweet": "node scripts/getQuote.js",
}

Last step

What’s remaining now is that we tell our Action to run yarn tweet and that’s it.

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Tweet it yo
        run: |
          yarn install
          yarn tweet
        env:
          CI: true
          TWITTER_API_KEY: ${{ secrets.TWITTER_API_KEY }}
          TWITTER_API_SECRET: ${{ secrets.TWITTER_API_SECRET }}
          TWITTER_ACCESS_TOKEN_KEY: ${{ secrets.TWITTER_ACCESS_TOKEN_KEY }}
          TWITTER_ACCESS_TOKEN_SECRET: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET }}

If you observe, we pass the Twitter API credentials as environment variables. This can be done in the Repo settings in GitHub. You can add a few secrets and they get passed to the Actions in that repo.

That takes us to the end of the article. Thanks for reading till end and if you think learnt something from this, please tweet it so your friends learn too.

If you'd like to check out the tweets in action, its here -https://twitter.com/learningcurvpod

Learning Curve Podcast

@learningcurvpod

You need to trust your employees. Otherwise you shouldn't have hired them.

10:09 AM - 10 May 2020

0 3

Take care.

Project walkthrough: Learning Curve website

Aravind Balla — Mon, 09 Mar 2020 11:55:07 +0000

This website is built with Gatsby, TailwindCSS and the source is from Anchor FM (as its a podcast). It also uses Netlify Forms to collect the emails from people who are interested.

Source: https://github.com/aravindballa/learningcurve.dev
Website: https://learningcurve.dev

Here is the video -

Dark/Light favicons in Gatsby

Aravind Balla — Tue, 11 Feb 2020 06:00:25 +0000

This is me documenting the process of reaching the goal rather than a tutorial.

I implement how we can change the favicon based on the user's color preference on my website.

Here is the commit - https://github.com/aravindballa/website2017/commit/fc9ff64da55eb209f475e3f488980c2cca3742c6

Resources

Don't wait till you are ready

Aravind Balla — Wed, 05 Feb 2020 16:39:56 +0000

You will never be

We weren't ready

We had a lot of un-figured-out stuff that could keep us from starting our podcast last year in December. But it didn't. We recorded and published 6 episodes till now and are going to keep doing it.

Yeaaaaaa 🤸‍♂️

Brittik and I decided to start a podcast and we began by recording the episode instead of figuring out things like publishing and creating a website for it first.

We decided on the topic and started recording it the next day. Mic's were not proper. My audio was bad. But this is the episode with highest listens!

But we could figure things out

We did not know anything about publishing audio. Luckily, Brittik knew a thing about editing, so at least that was in place.

After we recorded the first episode, we had 4 days to figure out things like publishing and creating a landing page, and this deadline helped us put in the work and launch. We wouldn't have launched if we had to get everything ready before we recorded. Yes, the first episode wasn't perfect, the audio wasn't clear but guess what, we launched. The website had a single page with a form to collect mail id of interested people.

Anchor app made it easy for us to upload audio and publish it across platforms, which was great. It handles all the distribution now and gives us good analytics on how the audience is. We didn't know about Anchor earlier.

I used Gatsby to build our website, which was a single page, and it is hosted on Netlify. It has a form, handled by Netlify Forms to collect mail id's of people interested and we promised to send a mail the podcast launches. We used Buttondown for it where we manually imported subscribers from the Netlify form responses to Buttondown.

After launch

We published, sent out mails and tweeted about it. People listened to it and a few gave us feedback. Personally, I learnt a lot in this process. We improved episode by episode.

I now use Blue ice mic, which I borrowed from my friend, and its better than having nothing. The quality improved a lot. I record in Garageband (or Audacity sometimes). Brittik made a good intro music and we include it from the 3rd episode onwards. It's a great start to the episodes now. We record in the mornings these days because it's mostly silent and audio is better.

It's fun to talk about things we love and be able to share it to people. We are looking forward to publish more this year.

I'm really happy to share these stats

What are you waiting for?

Yes you.

~~Go listen to out podcaaasst! Haha no, that’s not the point.~~

Start what you were waiting to start. There is no perfect time than now. And you don't have to be ready. You will never be 100% ready 💯

Let me know what you start/launch/started with a comment here.

Take care!

Why I'd like to start a podcast

Aravind Balla — Sun, 08 Dec 2019 00:00:00 +0000

This isn’t a motivational post. This is a short why post. It’s about the reason why I’d like to start a podcast. Hopefully this will help me stick around.

I should not do it because

I know I don’t have thousands of followers on Twitter. And things I say wont probably be heard by a lot of people. I am also not a pro at what I do and I am still getting there. I am not an influencer.

Instead, I am doing it because

I want to improve. I know I am not good at talking or presenting or articulating a thought. Yes, I stammered a bit in the first episode. But, this will be a way for me to improve at all those things, publicly. Trust me, I’ll get better. #GrowInPublic

Not being know by a lot of people puts me in a great position, where I can experiment lot of things and I don’t have to feel bad if it fails.

Brittik is a kind person who you will want to be around. I share a same vibe from the day I met him. We talk about a lot of things and learned a lot from each other. Sometimes, we keep taking about a topic and at the end, we think the conversation should have been recorded. This time, we are consciously recording it.

I like to share things that I learn and that has been the motivation to write this blog, make (very few) videos and give talks. This podcast is another outlet.

Brittik and I actually started it. By the time of writing, first episode is already recorded and is set to be published the next day. We built up the landing page and setup things for the podcast distribution. Also, this is the first thing Brittik and I are launching together. (We will talk about things that failed too.)

I’d want you to listen to the podcast - learningcurve.dev and give me feedback. A DM on Twitter would help.

Thanks a ton for reading this 🎉

Good day!

Single Page Apps w/ Gatsby

Aravind Balla — Mon, 04 Nov 2019 00:00:00 +0000

Gatsby, which is a static site generator, is famous for blogs and documentation websites. But there is no wrong in build full blown React apps with it.

In the case of a blog, Gatsby builds a page for every article at the build time and generates a directory which can be hosted directly. But when it comes to Single Page App (SPA), we have only one index.html at the root, and the components are loaded depending on the route that the user is in.

We can get the benefits of code spitting with some React lazy suspense features with some minimal extra work too.

const Contact = React.lazy(() => import('../components/Contact'));
const LazyContact = props => (
  <React.Suspense fallback={'<p>Loading...</p>'}>
    <Contact {...props} />
  </React.Suspense>
);

The Contact component is loaded only when it will be rendered, which is when we hit a particular route. We will have a look at the routes in a moment.

But wait

Before that, we need a gatsby-node.js file to let Gatsby know that we want all the route to end up in index.html

After cloning Gatsby’s Default starter, let’s add this file.

// gatsby-node.js

exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions;
  if (page.path === `/`) {
    page.matchPath = `/*`;
    createPage(page);
  }
};

Now we are ready.

Components for each Routes

Let’s plan to have two routes, /contact and /about . In src/components we will create basic components like this.

// src/components/Contact.js
import React from "react"

console.log("contact component")

export default function() {
  return <div>Contact Us as you like.</div>
}

// src/components/About.js
import React from "react"

console.log("about component")

export default function() {
  return <div>We are a great bunch of people</div>
}

I’ve added the console logs to check when this file is loaded. We don’t want it to load at the homepage. Rather only when the route is visited.

Main App

In the main page, which is src/pages/index.js we make use for @reach/router which Gatsby itself, uses for routing.

// src/pages/index.js

import React from 'react';
import { Router, Link } from '@reach/router';

const Contact = React.lazy(() => import('../components/Contact'));
const About = React.lazy(() => import('../components/About'));

const LazyComponent = ({ Component, ...props }) => (
  <React.Suspense fallback={'<p>Loading...</p>'}>
    <Component {...props} />
  </React.Suspense>
);

const Home = () => <h2>Hello and Welcome</h2>;

const IndexPage = () => (
  <div>
    <h1>Hi people</h1>
    <Link to="/">Home</Link>
    <br />
    <Link to="/contact/">Contact</Link>
    <br />
    <Link to="/about-us">About Us</Link>
    <br />

    <input />

    <Router>
      <Home path="/" />
      <LazyComponent Component={Contact} path="contact" />
      <LazyComponent Component={About} path="about-us" />
    </Router>
  </div>
);

export default IndexPage;

LazyComponent renders the Component we pass to it as a prop under React.Suspense with a fallback.

If you build this project and serve, you can open the Networks tab in the browser console and see that a new JS file is loaded when you hit the /contact route for the first time.

That’s it, this is all we need to make an SPA using Gatsby.

Here is a working codesandbox link - https://codesandbox.io/s/gatsby-starter-default-yf72w

Positioning yourself for remote work

Aravind Balla — Tue, 17 Sep 2019 00:00:00 +0000

Remote work is picking up these days. Its easy to find people, in countries like India, who are working remotely for a company which is located elsewhere. And there are a lot of predictions which say: by 2020, there will be 50% workforce will be remote. Companies like Basecamp, Stripe, etc have remote teams and encourage them to be remote.

But how do you land a remote job? Especially when you are a fresher.

Imagine you are the recruiter looking for a remote candidate. What would you search for? You would obviously look for the work the person has done in the past. Its easy if the person has some previous experience in the same field. If not, you could check his github profile and the projects that they have done. He/She has a blog and write about the technology regularly? Then its an added advantage. The person knows what they are doing, that’s why they care to explain it in their blog.

Hope that has all the answers you were looking for.

Landing a remote job is hard and there is some luck involved. But I feel hard workers are the luckiest.

Number one rule -

Build a profile

Tell people about the projects you have made and write about the decisions you took while building it. If you need more content, journal daily while building the projects.

Create a basic website that tells about you. Portfolio websites are the modern resumes. Its very easy to get started these days, with companies like Netlify offering free hosting.

Write about technology that you care. Write about what you are learning. Help others start off, as well.

Push all your projects to Github and let people, and potentially recruiters, know you can code.

Community

Join a community, preferably with remote devs, so you can get help and know about job opportunities. If you are from India, Remote Indian is such group. Its a very active and good place to hangout with remote workers from India.

Find people on Twitter or dev.to (or Reddit) and talk to them. Get to know how it feels to work remotely and ask them if they can refer you to any job that they know of. I’d be happy to help if you hit me on Twitter.

Non blocking updates in React

Aravind Balla — Mon, 01 Jul 2019 00:00:00 +0000

Sometimes, a few updates/computations take up a lot of time. They block the UI from updating, which makes it look as if things are slow. I am not talking about asynchronous data fetches which take time.

TL DR; We will be using web workers as a solution along with Hooks.

Consider this for example

// Codesandbox - https://codesandbox.io/s/admiring-pond-ixp59
import React from 'react';
import ReactDOM from 'react-dom';

const fib = i => (i <= 1 ? i : fib(i - 1) + fib(i - 2));

function App() {
  const [value, setValue] = React.useState('');
  const [length, setLength] = React.useState(0);

  // whenever `value` changes
  React.useEffect(() => {
    // we calculate the fibonnaci of the length of input * 5
    const result = fib(value.length * 5);
    setLength(result);
  }, [value]);

  const handleChange = async e => {
    const { value } = e.target;
    setValue(value);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input value={value} onChange={handleChange} />
      <p>{length}</p>
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

When we enter the input here, it takes time to update. And it waits for the update to show up until,till the result calculation is not finished. Fibonacci for large numbers is expensive.It even freezes your browser tab if the input is long.

Do we have a solution to this? Can we some how off-load this computation from the main thread?(Why is he talking about threads in javascript?)

Web Workers

Web workers act as threads which are handled/processed by our browser. We can start a worker as a thread and communicate with it in a particular way. React is after all Javascript UI library, and we are running it in the browser, so why not?

This is the worker, which has to be statically served. (Put in public folder)

// thread.worker.js
const fib = i => (i <= 1 ? i : fib(i - 1) + fib(i - 2));

self.addEventListener('message', ({ data }) => {
  let { type, payload } = data;
  if (type === 'UPDATE') {
    payload = payload > 11 ? 11 : payload; // upper limit we set
    const result = fib(payload * 5);
    self.postMessage({ type: 'UPDATE_SUCCESS', payload: result });
  }
});

self.addEventListener(
  'exit',
  () => {
    process.exit(0);
  },
  false
);

We communicate with the worker using events. Look at the code here, we are listening 👂 to message events. We process the data according to type passed and return the result as a message.

If you can guess right, we will have to listen to these messages from the worker in our component. Our component goes like this.

// App.js
import React from 'react';
import ReactDOM from 'react-dom';

import './styles.css';

const worker = new Worker('/thread.worker.js');

function App() {
  const [value, setValue] = React.useState('');
  const [length, setLength] = React.useState(0);

  // when mount and unmount
  React.useEffect(() => {
    const listener = ({ data: { type, payload } }) => {
      console.log(type, payload);
      if (type === 'UPDATE_SUCCESS') setLength(payload);
    };
    worker.addEventListener('message', listener);
    return () => worker.removeEventListener('message', listener);
  }, []);

  React.useEffect(() => {
    worker.postMessage({ type: 'UPDATE', payload: value.length });
  }, [value]);

  const handleChange = async e => {
    const { value } = e.target;
    setValue(value);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input value={value} onChange={handleChange} />
      <p>{length}</p>
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

If you are using Webpack, you can load it into your component with worker-loader!thread.js. We are directly using Worker() to load it from the public directory.

Here is the codesandbox demo - https://codesandbox.io/s/funny-nightingale-5kxo1

Here is the Effect Hook documentation for reference.

We are adding the listeners for the messages in the first effect , where the dependencies are [], which means this will run when the component is mounting and unmounting.

And in the second effect , we send a message to the worker whenever the value changes.

We can see a huge performance bump with workers when we compare it to the first demo. The load is taken up by the browser now.

That’s how you can use web workers in React. Thanks for reading!

Keep on Hacking! ✌

Fetch so many things, at once

Aravind Balla — Sat, 20 Apr 2019 00:00:00 +0000

There is the fetch API in Node, which allows us to make a HTTP request and get some information from the servers. We can use that to make REST calls, get HTML content of a webpage(if we are using node for scraping) and many more things.

This article is valid for any function that returns a promise.

An example of such call goes like this

fetch('/url')
  .then(res => res.json())
  .then(data => console.log(data));

The Async way

We could do the same thing, using async and await.

const result = await fetch('/url');
const data = await result.json();

console.log(data);

// Or, a one-liner
// const data = await (await fetch('/url')).json(); 😉

I have so many things to fetch!

Okay fine. We can do that over a classic for loop. The synchronous nature will be preserved. I mean, we can fetch one after the other, synchronously.

const urls = [...];
for(const url of urls) {
    const result = await fetch(url);
    const data = await result.json();

    console.log(data);
}

But what if, the order does not matter? We can fetch them all at once. Yes, all at once, using the Promise API. After all, fetch returns a promise and that’s why we await for it to be resolved.

Promise API has this method Promise.all() , which can be awaited on for all the promises that it accepts as an argument to be resolved.

const urls = [...];
const promises = urls.map(url => fetch(url));

await Promise.all(promises);

for (const promise of promises) {
    const data = await promise.json();
    console.log(data);
}

This will save us a lot of time. Imagine we want to parse many webpages, around 100, and each webpage takes 2 seconds to be fetched and scraped for information we need. If we fetch it one after the other, it will take us around 200 seconds, which is over 3 minutes. But if we fetch all at once, it will take under a minute.

Like, really SO MANY!

What is we have over 10000 urls to fetch. If we do the same thing as above, we will most probably not make it. We will have to face some weird socket hangup error. What can we do about it?

There is a node package called Bluebird which has its own Promise API and it functions the same. It has this method called map, which takes an extra options argument where we can set concurrency.

Promise.map(urls => fetch(url), { concurrency: 100 });

This will, as we can infer from the line, concurrently fetch 100 requests at a time. This will save a significant load on CPU.

const Promise = require('bluebird').Promise;
const urls = [...];
const promises = await Promise.map(
    urls => fetch(url),
    { concurrency: 100 }
);

for (const promise of promises) {
    const data = await promise.json();
    console.log(data);
}

Thanks for making it till the end.

Keep on Hacking! ✌

How remote work changed me

Aravind Balla — Fri, 25 Jan 2019 00:00:00 +0000

Now that I don’t work from the same concrete place every time, I am really loving it. I rent a desk at a co-working space nearby and often go there. Sometimes I work from home when I have to do my daily chores, and sometimes from nearby coffee shops.

I really enjoy that I don’t go to an office to work every day. Gone are those days when I had to sit at the same place to work (under the nose of my manager) and feel guilty to take a break or spend some time in the cafeteria.

The days earlier were daunting(in a way) and I did not have time for anything other than work. I used to work my ass off even in the weekends, sometimes. I could not function like this more than 6 months. These were the first 6 months of my day job, and I clearly knew I was getting exhausted. This was not the way to work, for me especially. It even took a toll on my productivity. Zero progress on side-projects or the things I wanted to learn or the books I wanted to read. The to-do lists just kept increasing.

You cannot function for long without re-fueling yourselves.

I decided to change this. I took up a remote position at an awesome company. They are the best people I’ve ever worked with. A lot of things, including my lifestyle, have changed lately. I really enjoy the work I do, along with the life I am living.

Things that I take benefit of

Flexibility - time 🕰

I don’t have to work at strict timings anymore. If I have some other work in the afternoon, I can shift my work timing to the night. If I don’t like to work in the day, because of the noise out there, I can become a batman and work at nights.

Our team is remote. The main pro, and also a con, of a completely remote team is availability. But, when well managed, this is not such a problem. When you know, who will be available at what time and when to expect replies, you can adapt to the routine. I use There app to keep track of the different time zones my colleagues are in.

Flexibility - location 🏕

No office to go to. I go to a co working space in the city centre and work from there. I could not function alone from home for more than a month. I go to that space to have some people around. I met some amazing people there. Co-working spaces have have diverse people. From startup founders to designers to architects I’ve met them all. Its good to talk to them about the work they do and listen to the problems they face.

I visit my family often. I go home during some weekends and extend my stay there for few days.

I work from coffee shops if I need some change and I am getting to like it. I am planning to do it more often. I get more work done in a coffee shop. Maybe the aroma makes me more productive. 😉

(Also, I can wear anything I want.)

Travelling to other cities has been on my checklist from long ago and I will check that off soon. I plan to stay in another city for a month.

Free time

I can now attend conferences and speak at meetups. I learned a lot by attending conferences and events. I should start writing and publishing about those experiences too.

Also, I love sharing the things I’ve learnt, so I speak at few meetups.

Those who know, do. Those who understand, teach.

Not only this, I now have time for hobbies. I have been learning German and I am loving it. Vershest du Duestch?

I read books in the evening sometimes. This year, I want to do it more. One book a month is the goal. This is the progress till now - Goodreads.

I find myself pull out a notebook and practicing hand lettering sometimes. A complete beginner though.

All these things are helping me unwind after work and being in track. Productivity and the quality of work I do has improved a lot. I am learning great things at my job and it doesn’t feel as overwhelming as it used to be.

So…

I encourage you to introspect and see where is your life taking you to and where do you want to be. Change things that you are not happy with and I hope this post helps you (a little bit) in doing so.

`throw` objects and functions

Aravind Balla — Mon, 08 Oct 2018 07:47:30 +0000

Did you know you could throw objects/functions in Javascript? Objects mean, useful objects for the program to run, not only useful for debugging. Here's a very short one for you!

Lets look at simple code demonstrating a not-at-all-useful cache.

    const cache = new Map();

    const read = key => cache.get(key);

    const store = (key, value) => {
      cache.set(key, value);
    }

    const fakeExternalRes = key => Math.random(0, 888);

    const readResource = async key => {
      let value;

      // try reading from cache
      // if not found, fetch it from external resource
      try {
        value = read(key);
        if(!value) throw key;
      } catch (key) {
        value = fakeExternalRes(key);
        store(key, value);
      }

      return value;
    }

    store('asdf', 'world');
    console.log(readResource('hello'));
    console.log(readResource('hello'));

/*
Output:
0.4123278447585672
0.4123278447585672
*/

Here, we threw the key and caught it to actually fetch it from external resource and store in the cache. Kinda cool way.

One gotcha here is, we generally use throw for exceptions and not in normal good case scenarios. So we have to make sure that we don't disturb that mindset for fellow members in the team.

This is used in react-cache package by the Facebook team. I have just demonstrated a very simple thing with this. But you can check out the below link for how they have implemented.

https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js#L281-L305

Take care.