RSS

Tag Archives: example

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: , , , ,

Learn React VR: A great tutorial series deserving a good read


Chapter 1 | Hello Virtual World
Chapter 2 | Panoramic Road Trip
Chapter 3 | Outdoor Movie Theater
Chapter 4 | Transitions and Animations
Chapter 5 | Star Wars Modeling
Chapter 6 | Vector Graphic Exploration
Chapter 7 | UI/UX Principles for VR Design
Chapter 8 | Building a VR Video App
Chapter 9 | Reacting to Our Exploration

Please support Michael Mangialardi either by up-voting his articles as shown above or purchase his git book.

Enjoy!

 
Leave a comment

Posted by on July 27, 2017 in General, Programming, React-VR

 

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 »

 
7 Comments

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

 

Tags: , , , , , , , ,

Bing Search in C#: A step by step walk-through tutorial


This blog is the 3rd article of the series Search in C# example demonstration. If you are interested in my earlier blogs in this series, please refer to below blogs:

In this blog, I am going to walk through how to do Bing Web Search using the latest v5 API.

BingSearch

Read the rest of this entry »

 
1 Comment

Posted by on December 15, 2016 in Dotnet/C#, Programming

 

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

vmware workstation unrecoverable error (vcpu-0)


When you install some virtual OS using vmware workstation or vmware player, if you encounter below error:

unrecoverable error (vcpu-0)

Try below actions:

  • open *.vmx file in the folder where your OS is located
  • append below line to the tail of the vmx file (you can put this line anywhere in the vmx file, and vmx file will be auto-sorted for you)

smc.version = 0

image

That is it! Happy working!

 
2 Comments

Posted by on December 12, 2016 in General, Linux, Mac, Windows

 

Tags: , , , , , , , , ,