RSS

Tag Archives: how to

Ramda function explained: lens


Ramda is a practical functional library for JavaScript programmers. It follows functional programming paradigm, and official doc for lens is shown here. One of the limitation of ramda is that its docuementation is too abstract and the learning curve is just too steep!

In this series of articles,  ramda functions are going to be explained in an intuitive ways so that usage of Ramda is straightforward.

The 1st article of this series is on lens or a family of functions related to lens.

First let’s ask a simple question, why is the function named “lens”? Understanding why is important, it makes one easily recall which function to use in ramda, without referring to the doc again and look for a candidate function among hunderds of them.

Lens make it focus, full stop.

lens-1209823_1280

With lens, you do not see the whole picture, but parts of it, yet with much more details. That fully describes what lens is.

Analogous to this, if you have a very large amount of data, but your interest is not on the whole data set, but parts of it, and you want to manipulate it, read, write, delete …… That is where lens come into play.

With this understanding, you will never forget what lens is!

Example 1: Use lens to access/read data:

const input = ['a', 'b', 'c']
const o1 = view(lensIndex(0), input);            //=> 'a'

Here, lensIndex(0) tells us we are using lens to focus on the first element, that is it. But hold on, we know lens allow you to view the object, but lens is not the object it self! That is why we have a related function view, which returns the element itself.

Emmmm, I can easily do the same thing as below, why bother?

const input = ['a', 'b', 'c']
const o1 = input[0]                              //=> 'a'

Absolutely right! But consider the following example:

const input = {
  id: 'a1',
  features: [
    {
      id: 'f1',
      children: [
        { id: 'c1' }
      ]
    },
    {
      id: 'f2',
      children: [
        { id: 'c2' },
        { id: 'c3' }
      ]
    }
  ]
};

How do you get/focus ‘c2‘ in this? There is no trivial solutions. That is where lensPath come into play:

const o1= view(lensPath(['features', 1, 'children', 0, 'id']), input) //c2

Wow! That is really powerful! It reads naturally like this:

const o1= input ['features'] [1] [ 'children'] [0].'id']

Equally, we can also set the value along that path:

const output = set(lensPath(['features', 1, 'children', 0, 'id']), 'x100', input)

and now output is:

{
    features: [
        {
            children: [
                {
                    id: "c1"
                }
            ],
            id: "f1"
        },
        {
            children: [
                {
                    id: "x100"   // <---- updated
                },
                {
                    id: "c3"
                }
            ],
            id: "f2"
        }
    ],
    id: "a1"
}

If your path to the location of interest is very simple, you can also use lensProp to replace lensPath:

const o2= view(lensProp('features'), input) ;

and now O2 is

[
    {
        id: "f1"
        children: [
            {
                id: "c1"
            }
        ],

    },
    {
        id: "f2"
        children: [
            {
                id: "c2"
            },
            {
                id: "c3"
            }
        ],

    }
]

That is it.

To recap, you can use lensIndex, lensProp and lensPath to locate the data of interest, this is analogous to use a lens to focus on specific fields. And then you can use view, set to read/write the values.

Happy coding.

Advertisements
 
Leave a comment

Posted by on March 4, 2019 in Programming, ramda

 

Tags: , , , ,

Vuforia: Delayed Initialization Explained


Vuforial is a widely used AR toolkit, and if you use it for some time, you will find “Delayed Initialization” for sure.

image

You would like to try it, right?

Go and do it, cry please, you will see below errors:

Vuforia cannot be started before it is initialized.Please disable Delayed Initialization in the Vuforia configuration or initialize Vuforia manually with the VuforiaRuntime-class.

image

You would Google this, frustrated, as you can hardly find good answers, and here is why this article comes into play. Read the rest of this entry »

 
3 Comments

Posted by on December 11, 2017 in Programming, Unity 3d, Vuforia (QCAR)

 

Tags: , , , , ,

React Native: “No dimensions set for key window” error and solution


In my recent project, I created a brand new React-native project, and run that on the simulator, then the captioned error pops up:

“No dimensions set for key window”

What hell does this mean? After a quick search on the internet, we found the solution: it turns out that the terminal (Mac) or the command line window is running for quite some time, and for unknown reasons, some of the information is outdated, which results in the captioned errors.

So the solution is simple:

  • Turn off all the terminal instances, restart the terminal/command line window,
  • Re-run the command:  react-native run-ios

That is it! Happy coding!

 
Leave a comment

Posted by on September 19, 2017 in Programming, React-native

 

Tags: , , , ,

‘com.github.dcendents.android-maven’ not found, the solution


Recently, I build some open source Android libraries, and when building the project, below error occurred:

Error:(2, 0) Plugin with id ‘com.github.dcendents.android-maven’ not found.

Quick Solution:

install Yarn, everything works!

Mac: brew install yarn
Windows: refer to this link.

 

A less elegant solution is to manually change the top level build.gradle:

From

dependencies {
classpath ‘com.android.tools.build:gradle:2.2.2’
}

To –>

dependencies {
classpath ‘com.android.tools.build:gradle:2.2.2’
classpath com.github.dcendents:android-maven-gradle-plugin:1.5  //Add this
classpath com.jfrog.bintray.gradle:gradle-bintray-plugin:1.7.3      //Add this

}

Rebuild. It should work. But this is tedious, for every project (e.g. react-native), you repeat doing so?  Emmmmmm!

Now try to create a new react-native project using:

react-native init ProjectName

Run the project:

react-native run-android  // or
react-native run-ios

It compiles and works! Happy coding.

 
2 Comments

Posted by on April 18, 2017 in Android

 

Tags: , , , , , , , , , , , ,

Using Firebase in Unity3D Tutorial 1: Basics and setup


Firebase is a platform that helps you quickly develop high-quality apps,  It is made up of a collection of features that is very handy for Unity3D, Android, iOS app developers.

In this series of tutorials, I am going to cover how to harness Firebase features to streamline your app development process. Each tutorial is designed to be compact, and follows the SRP (Single Responsibility Principle), so that you can use these take-aways quickly in your own development.

Read the rest of this entry »

 
1 Comment

Posted by on January 21, 2017 in Programming, Unity 3d

 

Tags: , , , , , , , ,

Firebase Unity3D example: a walk through tutorial


image

Read the rest of this entry »

 
8 Comments

Posted by on January 16, 2017 in Programming, Unity 3d

 

Tags: , , , , , , , ,