I saw the following article on dev.to and it very impressive to me.

Why I turned my homepage into a timeline

Then, I found a good library, react-chrono.

prabhuignoto / react-chrono

Looks good and also it’s super easy to use.

First, I tried react-chrono with create-react app.

Step1 Set up a react app

$ yarn create react-app mytimeline --template typescript
$ cd mytimeline
$ yarn add react-chrono

Step2 Add sample data

data.ts
I use this data from react-chrono's sample

const items = [
  {
    title: "May 1940",
    cardTitle: "Dunkirk",
    cardSubtitle:
      "Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.",
    cardDetailedText: `On 10 May 1940, Hitler began his long-awaited offensive in the west by invading neutral Holland and Belgium and attacking northern France. Holland capitulated after only five days of fighting, and the Belgians surrendered on 28 May. With the success of the German ‘Blitzkrieg’, the British Expeditionary Force and French troops were in danger of being cut off and destroyed.`
  },
  {
    title: "25 July 1940",
    cardTitle: "The Battle of Britain",
    cardSubtitle: `RAF Spitfire pilots scramble for their planes`,
    cardDetailedText: `After France’s surrender in June 1940, Churchill told the British people, “Hitler knows that he will have to break us in this island or lose the war”. To mount a successful invasion, the Germans had to gain air superiority. The first phase of the battle began on 10 July with Luftwaffe attacks on shipping in the Channel.
      The following month, RAF Fighter Command airfields and aircraft factories came under attack. Under the dynamic direction of Lord Beaverbrook, production of Spitfire and Hurricane fighters increased, and despite its losses in pilots and planes, the RAF was never as seriously weakened as the Germans supposed.` …

You can see the demo
https://www.impersonator.org/project_img/impersonator_plus_plus/demo_video/demo_1_512x512.mp4

Impersonator++

Liquid Warping GAN with Attention: A Unified Framework for Human Image Synthesis, including human motion imitation, appearance transfer, and novel view synthesis. Currently the paper is under review of IEEE TPAMI. It is an extension of our previous ICCV project impersonator, and it has a more powerful ability in generalization and produces higher-resolution results (512 x 512, 1024 x 1024) than the previous ICCV version.

Creator’s Google Colab
https://colab.research.google.com/drive/1bwUnj-9NnJA2EMr7eWO4I45UuBtKudg_?usp=sharing#scrollTo=hCqM2xQitKXj

Google Colab (Famous propeller dance in Japan)

requirements
source movie: mp4
source image: one image/two images(This GoogleColab is using two images)

The following is the result I tried. …

Recently Oracle has released the new version of VirtualBox and I installed it on Bigsur. Finally, I could run VirtualBox on BigSur.

The following are what I got when I tried to install Ubuntu on VirtualBox.

BigSur Version 11.1 Beta
python $ pip install matplotlib
Collecting matplotlib
 Using cached matplotlib-3.3.3.tar.gz (37.9 MB)
 ERROR: Command errored out with exit status 1:
 command: /Users/koji/.pyenv/versions/3.8.0/bin/python3.8 -c ‘import sys, setuptools, tokenize; sys.argv[0] = ‘“‘“‘/private/var/folders/gj/x6v5vwdx1v7741fdfcxwmr100000gn/T/pip-install-dwdwanvq/matplotlib/setup.py’”’”’; __file__=’”’”’/private/var/folders/gj/x6v5vwdx1v7741fdfcxwmr100000gn/T/pip-install-dwdwanvq/matplotlib/setup.py’”’”’;f=getattr(tokenize, ‘“‘“‘open’”’”’, open)(__file__);code=f.read().replace(‘“‘“‘\r\n’”’”’, ‘“‘“‘\n’”’”’);f.close();exec(compile(code, __file__, ‘“‘“‘exec’”’”’))’ egg_info — egg-base /private/var/folders/gj/x6v5vwdx1v7741fdfcxwmr100000gn/T/pip-pip-egg-info-kbc9eqzu
 cwd: /private/var/folders/gj/x6v5vwdx1v7741fdfcxwmr100000gn/T/pip-install-dwdwanvq/matplotlib/
 Complete output (62 lines):Edit setup.cfg to change the build options; suppress output with — quiet.BUILDING MATPLOTLIB
 matplotlib: yes [3.3.3]
 python: yes [3.8.0 (default, Sep 3 2020, 23:19:59) [Clang 12.0.0
 (clang-1200.0.31.1)]] …

I have used BigSur for a couple of months and so far so good. There is one thing that I regret. It is that I cannot build openFrameworks on BigSur 😭

Then I have followed the one issue on GitHub.

Amazingly, this issue was solved by @ofTheo.

In the issue, he said he would work on a PR for this for the patch-release branch / 0.11.1.

However, some of you like me can’t wait 😝

The solution is very easy.

Step1. Replace your libfmodex.dylib with the latest one

If you use of 0.11.0, the file path is of_v0.11.0_osx/libs/fmodex/lib/osx/libfmodex.dylib

Step2. Modify Run…

Just started using hasura-cli for prototyping and got stuck.

The error was “Killed:9” when I tried to hit yarn hasura init and all hasura commands 😭

Recently, one contributor posted the new build.

Step1. Download the new build

https://200424-137724480-gh.circle-artifacts.com/0/cli/binaries/cli-hasura-darwin-amd64

Step2. Rename the new build

In my case, moved downloaded file to project_folder/node_modules/hasura-cli

$ mv hasura _hasura
$ mvcli-hasura-darwin-amd64 hasura

Step3. Give new permission to the build

$ chmod 755 hasura (haven’t tested, but 644 and 705 might be enough)

Step4 Use hasura command

$ yarn hasura init hasura

Overview

In this post, I will introduce a way to build a simple web application that is a simple blog with a famous headless CMS, contentful.

Sample

Here is my code for this post.
repo https://github.com/koji/typescript/tree/master/simple_blog_with_contentful
​

What is Headless CMS?

Let me tell you what a headless CMS briefly.
Roughly speaking, a headless CMS is a CMS without the functionality of displaying content.
Let’s say it is like WordPress that has only a dashboard.
Probably, some of you think why we need to use headless CMS instead of other CMSes.

• merits
• Can focus on frontend and there is no limitation by a CMS(You can use anything you want to use and the development process is the same as normal frontend…