Recharts vs Chart.JS

For my latest project I required about 50 x 250px x 250px charts on one page. Initially, I used Recharts because it looks freaking great and integrates nicely with React.

I quickly realized however that Recharts does not scale well because it is DOM heavy. For my applicaiton I quickly reached 12,000 DOM nodes. Loading performance is pretty bad when so many DOM elements needs to be initialized – however, the performance when initialized is actually OK.

In any case, I replaced Recharts with Chart.JS and saw a big performance improvement. My DOM nodes were reduced from 12,000 nodes to about 2000 nodes. Loading time was substantially improved and the performance of the application feels much better.

The biggest difference between the two charting components isthat Recharts is implemented using SVG elements while Chart.JS is implemented using a 2D canvas. The canvas only requires a single DOM node, while SVG requires several DOM nodes for data, chart configuration, etc.

In any case, for chart heavy applications with many charts, Chart.JS is my charting component of choice.

Advertisements

glMatrix

I was looking for a fast JavaScript vector library and found glMatrix. glMatrix is a Matrix and Vector library with high performance. The high performance is achieved using API conventions, e.g. by avoiding reducing use of implicit memory allocation and by carefully designing the usage of the library.

The lib does not feel natural but I do like that I know that memory management performance will not explode in my face when using it.

Creating a 2D vector is done explicitly by writing

let v = vec2.create();

while adding vectors together is done by

vec2.add(out, v1, v2);

operations such as add, sub, etc. do not enfer any memory allocation what so ever, making the operations fast and without garbage collection at a later time.

The API does feel very ‘C’ like. I really miss the ability of .NET where one can allocate to the stack by using Structs.

 

Photoshop Mockup

I ditched the idea of doing mockups using scripting from Photoshop. The primary reason was that Photoshops scripting capabilities are not great for doing WYSIWYG, i.e. every time a code change is made one has to reopen and reload the script. I had personally hoped for the ability to do F5 refresh of the script without any hassle.

Alas this is not possible. In any case, I actually did manage to produce a Mockup of a Red Alert inspired game using both real-time and turn based mechanics. This mockup was made using Photoshop and conventional tools.

mockup_1

I got heavily inspired by the graphics of the Cmd & Kill game made by renderhjs.
Primary inspiration thread can be found at: http://polycount.com/discussion/120427/pixel-art/p10

I got the idea of combining RTS and Turned-based strategy. The concept uses two phases: planning & execution. In the planning phase, one plans troop movements, production etc. In the execution phase, troops move and attack. I made a GIF showcasing the concept.

lvl1

I haven’t really decided yet if I want to pursue this any further – but I believe it can be made to work. Frozen Synapse uses something similar, although this is on a more tactical level compared to what I was thinking.

Photoshop Scripting

In Photoshop CS6+ it is possible to do scripting using JavaScript. Photoshop exposes a DOM, similar to that found on the web, where one can manipulate layers, etc.

Creating a new document is as simple as invoking the following code:

var docRef = app.documents.add(2,4);

Next up, we can add a text layer:

var artLayerRef = docRef.artLayers.add();
artLayerRef.kind = LayerKind.TEXT;

and set the text of the text layer:

var textItemRef = artLayerRef.textItem;
textItemRef.contents = "Hello world";

Simple as that.

I had an idea that I might be able to use Photoshop for some mockup purposes using scripting. Not yet verified though.

Android 8.0 Security Changes

One of my Apps recently broke with the introduction of Android 8.0. The reason being Android 8.0 introduced tighter security.

My app required the SEND_SMS permission to obviously send SMSes. This was the only permission required and have worked without any issues on pre 8.0. The reason was that my app also required the READ_PHONE_STATE permission – this was automatically granted when the SEND_SMS permission was granted prior to 8.0.

This is no longer the case on Android 8.0, the app now has to explicitly ask for the permission.

 

 

Reactstrap

Bootstrap is my favorite CSS framework and React is my favorite JavaScript library for frontend development.

Reactstrap combines the two, by more or less implementing all of Bootstraps CSS classes into React components.

Usage is super easy, just import the component one needs into a React project and use it as any React component:

import React from 'react';
import { Alert } from 'reactstrap';
const alert = (props) => { return <Alert color="success">Success!!!</Alert> };

Nothing more to it.

When using TSX instead of JSX, one also gets type support which is super great when dealing with a huge project.

Weight loss – from 107.5kg to 96kg

I made a decision to lose some weight exactly one year ago. This was prompted after a one week vacation with too much to eat and too much to drink and the weight telling me that my mass had increased close to 107.5kg!

107.5kg is waaay to much for my measly 189cm height, with a BMI of around 30 I was considered obese and not just overweight. I made a decisions to 1. eat less and 2. get more exercise. My goal was to reach 95kg in one year time.

One year has passed and I nearly made it there. My weight is now 96kg and my BMI has dropped from 30 to 26.9, which is still overweight but not considered obese.

Great Success.

For motivation and for sciency purposes, I decided to weigh myself every single day and record how much I exercised. Google sheets was perfect for this since I could easily input my weight and exercise minutes from my phone in the morning. Weighing was always done right after I left the bed in the morning.

weight.png

As seen, weight-loss motivation was very high from August until start December. Then Christmas came and the temptations started. But I quickly got back on track with a decent amount of weight loss.

I did not fully reach my 95kg goal, partly because summer vacation resulted in 1 week with eating and drinking, as seen in the end of the graph where my weight spiked.

Regarding exercise, I mostly used my traning bike + a bit of running. On average, I exercised 14min a day according to my data, with a total of 86 hours! Not bad for a beginner!

My total weight loss is 11.5kg close to one kg each month about 30g/day. My next target is 90kg, i.e. 6kg weight loss. With 30g/day I expect to reach this in about half a year / end of january

Stay tuned!