Kalena will be the most beautiful calendar. But a calendar without events is not too useful. So I want to connect to google calendar.

Google APIs

I'm used Google APIs for internal projects. But to release a project that more people outside my organization can use, the process is not so easy. I need to have a privacy policy, a working app and even submit a video with the example use case. As maker is a painful process that can take up to a week. At least, as a user, it increased my trust in using services that require google connection.

How to create a privacy policy document?

If you have resources, you ask a lawyer. If not, you look for templates. After several, searches I ended with freeprivacypolicy.com. Even if it says free, if you use google analytics, it asks you to pay. So I used the free version as template and amend it with different clauses that document the use of google calendar APIs and online examples.

Kalena new privacy policy

You can see it live in kalena.app/Privacy

Bundle Size

To disconnect a little bit from paperwork, I wanted to research about how big the app was becoming. In my time at Tourlane, I remember that David (Sorry: can't find his social profile now) on his first day created a visualization of the bundle size to learn how big was the application, and which dependencies are being loaded. I wanted that.

I followed the React Guide to analyze bundle size. Sadly it didn't work:

$ npm run analyze
> kalena@0.1.0 analyze /home/guillermo/kalena/app
> source-map-explorer 'build/static/js/*.js'

[build/static/js/5.dbdafb38.chunk.js] Your source map only contains one source (components/scene/Home.js)
This can happen if you use browserify+uglifyjs, for example, and don't set the --in-source-map flag to uglify.
See https://github.com/danvk/source-map-explorer/blob/master/README.md#generating-source-maps
[build/static/js/runtime~main.4952ef62.js] Your source map only contains one source (../webpack/bootstrap)
This can happen if you use browserify+uglifyjs, for example, and don't set the --in-source-map flag to uglify.
See https://github.com/danvk/source-map-explorer/blob/master/README.md#generating-source-maps
[build/static/js/2.2cab5e4a.chunk.js] Unable to map 141/170734 bytes (0.08%)
[build/static/js/3.9cbe6057.chunk.js] Unable to map 130/145730 bytes (0.09%)
[build/static/js/4.056b6e3c.chunk.js] Unable to map 121/27830 bytes (0.43%)
[build/static/js/6.60f492b2.chunk.js] Unable to map 121/10504 bytes (1.15%)
[build/static/js/main.eed00bc0.chunk.js] Unable to map 136/4094 bytes (3.32%)

OK. What now? @jbandi wrote last December a method that works perfectly:

$ npm run build -- --stats
$ npx webpack-bundle-analyzer ./build/bundle-stats-json

After that, it showed this report:

Original bundle

I am happy that it is less than a megabyte, but I am loading a material-ui TextField on the home page where I don't use it.

Lets split

To get rid of that, I followed the Code-Splitting react guide. I learn about lazy and suspense. Resulting in a code that looked like this:

/* ... */
const Home = lazy(() => import('../components/scene/Home'))
const Life = lazy(() => import('../components/scene/Life'))

class App extends Component {
  render() {
    return (
      <Router>
        <Suspense fallback={<Loader />}>
          <Route exact path="/" component={Home} />
          <Route path="/life" component={Life} />
        </Suspense>
      </Router>
    );
  }
}
/* ... */

Now the app page requires half of the previous kilobytes to render the home screen:

Loading the home after spliting the code

This also generated a new graph, that confirms that material ui is not being loaded in the homepage.

Bundle once added lazy import

Offline images

The last thing I worked on today was the offline version. While playing with the download speed, I measure the performance during offline mode. Surprisingly, the images where gone. I look for documentation about how to append images to some kind of manifest but didn't find an easier way. So I should be doing something wrong: Using the public folder. 🤦‍♂️ To be able to be cached by the webworker, in a default react app, It is needed to import the image with the normal import. After doing that, Kalena works without internet perfectly.

If you have any comment: