DEV Community: Ng Chen Hon

Enumerating collections the Ruby way

Ng Chen Hon — Sun, 13 Mar 2022 11:03:06 +0000

Originally posted at my blog.

Enumeration is the complete and ordered listing/traversing of all items in a collection. To list over something in Ruby, most of us may start with something like this:

class Collection
  def initialize(items)
    @items = items
  end

  def each(&block)
    @items.each { |item| block.(item) }
  end

  # OR
  def each(&block)
    @items.each(&block)
  end
end

A good follow question will be can we now use the #map and #reduce that we all love? We will be horrified to learn that we need to implement them by hand if we follow the way above!

Fortunately, we can implement our own with the Enumerable module, as do by the Hash, Array and Range classes. By including the Enumerable module in our collection class and implementing the #each method, we will get access to all methods that has an element of listing over elements such as #map, #reduce and #each_slice.

Example

There are two booths in a data collection exercise. The first collects a person's name and the second collects the person's hobbies. After filling up the entire list, the organizer wants to traverse over a person's name and hobbies together. An array of names and a two-dimensional array of hobbies are readied in the same sequence. We can imagine these requirements as a NameHobbiesColletion class to list over a person's name and hobbies in sequence.

class NameHobbiesCollection
  include Enumerable

  def initialize(names, array_of_hobbies)
    @names = names
    @array_of_hobbies = array_of_hobbies
  end

  # This will be the only method we need to implement for traversal.
  def each(&block)
    @names.zip(@array_of_hobbies).each do |name, hobbies|
      block.(name, hobbies)
    end
  end
end

Testing Them Out

Let's setup an instance and see some enumeration methods in action!

collection = NameHobbiesCollection.new(
  %w(James Joe Tony),
  [
    %w(Talking Baking),
    %w(Science Coding Talking),
    %w(Coffee)
  ]
)

We can use #each to list over the collecitons and do things:

collection.each do |name, hobbies|
  puts "#{name} has hobbies of #{hobbies.join(', ')}"
end
# => James has hobbies of Taking, Baking
# => Joe has hobbies of Science, Coding, Talking
# => Tony has hobbies of Coffee

We can use #map to produce an array of human-readable logs:

collection.map do |name, hobbies|
  "name:#{name} hobbies:[#{hobbies.join(',')}]"
end
# => [
# =>   "name:James hobbies:[Talking,Baking]",
# =>   "name:Joe hobbies:[Science,Coding,Talking]",
# =>   "name:Tony hobbies:[Coffee]"
# => ]

#partition allows us to group chatty people together and the others together:

collection.partition do |_name, hobbies|
  hobbies.include? 'Talking'
end
# => [
# =>   [["James", ["Talking", "Baking"]], ["Joe", ["Science", "Coding", "Talking"]]],
# =>   [["Tony", ["Coffee"]]]
# => ]

We can use #each_slice to iterate over the collection in chunks, useful for persisting items to the database in batches instead of everything at once:

collection.each_slice(2).to_a
# => [
# =>   [["James", ["Talking", "Baking"]], ["Joe", ["Science", "Coding", "Talking"]]],
# =>   [["Tony", ["Coffee"]]]
# => ]

Can we make it chainable?

If we want to chain methods like collection.map.with_index, the colletion is expected to return an Enumerator. To do that, we can rely on the Object#to_enum method to create an enumerator listing over the collection using a specified method from it. Any arguments should be past over.

  def each(*args, &block)
    # When there is no block given, we return an Enumerator that points to this each method!
    return to_enum(__method__, *args) unless block_given?

    # Implementation follows here when there is a block.
  end

Testing them out

Chaining #each with #with_index:

collection.each.with_index do |(name, hobbies), index|
  puts "queue #{index}: #{name} has hobbies of #{hobbies.join(', ')}"
end
# => queue 0: James has hobbies of Talking, Baking
# => queue 1: Joe has hobbies of Science, Coding, Taking
# => queue 2: Tony has hobbies of Coffee

Iterating over the collection with an arbitrary object with #each and #with_object and returns it:

collection.each.with_object({}) do |(name, hobbies), hash|
  hash[name] = hobbies
end
# => {
# =>   "James"=>["Talking", "Baking"],
# =>   "Joe"=>["Science", "Coding", "Talking"],
# =>   "Tony"=>["Coffee"]
# => }

Emitting the entire collections:

collection.each.entries
collection.each.to_a
# => [
# =>  ["James", ["Talking", "Baking"]],
# =>  ["Joe", ["Science", "Coding", "Talking"]],
# =>  ["Tony", ["Coffee"]]
# => ]

References

Enumerator includes the Enumerable module. Explore more methods availbale in the Enumerator module below:

Enumerable: https://ruby-doc.org/core-3.0.2/Enumerable.html
Enumerator: https://ruby-doc.org/core-3.0.3/Enumerator.html

Integrating DataTables.net into Rails with Webpacker

Ng Chen Hon — Sun, 15 Nov 2020 08:27:47 +0000

Originally posted at my blog

Hey there,

This article is about an opinionated way to integrate DataTables.net into a Rails 6 project with Webpacker for server-rendered views. I hope this article and code bits can help people with similar use cases in setting thing up.

Premise

Back then on Ruby on Rails, we could just place every js files in the /assets directory and Sprockets will compile everything in it. Then, all methods and symbols will be readily available on the global scope to be used on Rails server-rendered views.

When I started a new Rails project at work, I discovered that we can use Webpacker to compile our js files and leverage the abundance of packages from npm . Also, I quickly found out that Webpacker does not expose all methods and classes included in all js files globally, while trying to debug it for hours. 😂

From my crude understanding of how Webpacker works, as js files are compiled into individual modules, so do the methods and classes defined are packaged into its very own scope. It means that things do not get leaked into other modules unless being required or imported. The same applies to global scope.

I found ways to import jQuery at the global scope via a global import but the same approach does not work to expose DataTables.net at the global scope of $.

How I want this to work

jQuery and DataTables.net compiled and initialised at application.js level for ease of maintainance.
jQuery and initialised DataTables.net instance must exists at global scope for server-rendered views.

Steps

Installing Dependencies

Get the necessities
```
yarn add jquery datatables.net datatables.net-dt
```
Please refer to https://datatables.net/download/npm to know which relevant DataTables.net release to get for your preferred stying framework.

Get webpack loaders

yarn add -D css-loader expose-loader imports-loader

Add the following js files that defined the packages we want to load.

jQuery loader, save at config/webpack/loaders/jquery.js

// expose-loader helps us to expose the jquery module as $ and jQuery at
// the global object, allowing us to access it at Rails server-rendered
// views.
module.exports = {
    test: require.resolve("jquery"),
    loader: "expose-loader",
    options: {
        exposes: ["$", "jQuery"],
    },
};

DataTables.net loader, save at config/webpacker/loaders/datatables.js

// datatables.net relies on the jquery global variable to work.
// import-loader helps us to add the necessary require('jquery') so the
// jquery variable is available when any datatables.net packages are loaded.
// refer to https://webpack.js.org/loaders/imports-loader/
module.exports = {
    test: /datatables\.net.*/,
    loader: "imports-loader",
    options: {
        // Disables AMD plugin as DataTables.net
        // checks for AMD before CommonJS.
        additionalCode: "var define = false;",
    },
};

At config/webpacker/environment.js, we will append our loaders to webpack and add a ProviderPlugin.

const { environment } = require("@rails/webpacker");

const webpack = require("webpack");

// import our loaders.
const datatables = require("./loaders/datatables");
const jquery = require("./loaders/jquery");

// append them to webpack loaders.
environment.loaders.append("datatables", datatables);
environment.loaders.append("expose", jquery);

// ProviderPlugin helps us to load jQuery when the variables of $ and jQuery
// are encountered as free variables at other modules.
// Let's say if you want to use Bootstrap 4 and Popper.js.
//
// Refer here https://webpack.js.org/plugins/provide-plugin/
environment.plugins.append(
    "Provide",
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
    })
);

module.exports = environment;

At app/javascript/packs/application.js

import dt from "datatables.net";

document.addEventListener("turbolinks:load", () => {
    dt(window, $);
});

At whatever views you have. Let's say app/views/members/index.html.slim.

h1 Member List

table#member-table
  thead
    tr
      td Member ID
      td Family Name
      td Given Name
      td Birth Day
  tbody
    - @members.each do |member|
      tr
        td = member.id
        td = member.famil_name
        td = member.given_name
        td = member.birthdate.strftime('%d %B %Y')

/ Just slap this in.
javascript:
  document.addEventListener('turbolinks:load', function() {
    $('#member-table').DataTable();
  });

Import 'datatables.net-dt/css/jquery.datatables.css' with your preferred method.

That should do the trick. Now:

Our DataTables.net have the needed jquery variable within its scope.
DataTables.net is initialised at application.js level.
We get to access $(<query>).DataTable() at the global scope at any Rails server-rendered views.

Example project

I have setup an example projects with the workings here.

References and citations

The approach in this article is a compilation of solutions from many precursors asking and answering the same question.

I might have missed out some references here.

Bidding hello to the world, again!

Ng Chen Hon — Fri, 02 Oct 2020 10:24:19 +0000

Originally posted at my blog

Hello there, and welcome to my blog! In the past, I had written on dev.to but stopped. Today, this will be my first post on my very own blog after a long hiatus. Hopefully I will write much more often.

Here I bid hello world to everyone again!

A little bit about me.

My full name is Ng Chen Hon. Currently, I mostly mine rubies with Ruby on Rails and flex yoga with React Native. My common tech stacks are on Ruby on Rails, React.JS, React Native and Typescript.

Well RoR runs on Ruby and React Native runs on Yoga Layout, geddit?

I am a developer who puts emphasis on productivity quality, there will be time for quality code writing and time for quality brainstorming. Also, developer-kinds aren't machines 😫, we got to take breaks from writing code.

As a person, I have this belief that we should learn like a child would and embrace whatever that might be new with an open heart, however, with past experience and your intricate bull💩 sensor attached on.

My current favourite thing is working with Ruby and with Rails. It was on 2019 when I first came in touch with Ruby. I had fallen in love with the language after learning Ruby and working with Rails after a couple of months. The syntax, at initial glance, was weird and disconnected from the common family of C languages we came to learnt. However, as time went by, only then I discovered how beautiful and elegant the language is. Then, with Rails, I find it handy that development and testing came bundled together within the same hierachy.

It is so enjoyable, happy and productive to write code with Ruby.

I am currently working Singapore for a small Rails shop. If you are in Singapore and love to have a beer or kopi, feel free to ping me. 🙂

Getting connected status on React Native

Ng Chen Hon — Thu, 07 Jun 2018 11:02:34 +0000

We may need to know if a device is connected to the internet sometimes on React Native.

What the Doc said

We should be using NetInfo.isConnected.fetch() to get a boolean denoting the device is connected or not.

In fact

Up until the current newest v0.55, it is still observed that NetInfo.isConnected.fetch() works properly on Android only. It tends to return false on iOS. It is a known bug.

Solutions from the internet

Use Event Listener We can add an event listener and listen to changes in network status.

onInitialNetConnection = (isConnected : boolean) => {
    console.log(`Is initially connected: ${isConnected}`);
    NetInfo.isConnected.removeEventListener('connectionChange', this.onInitialNetConnection);
};

constructor(props : Props) {
    super(props);
    NetInfo.isConnected.addEventListener(
        'connectionChange',
        this.onInitialNetConnection
    );
}

Ping a Website In this case, y'all can try pinging google.com

let req = await fetch('https://www.google.com');
let hasConnection = req.status === 200;

Ugly, but it works.

Use NetInfo.isConnected.fetch() a Few Times ???

Tested on < v0.55, I discovered that calling NetInfo.isConnected.fetch() multiple times on componentWillMount of the root component of the app actually works.

On v0.55, this seems to stop working.

¯\_(ツ)_/¯

Compiling Box2D from source for Codeblock using mingw and cmake

Ng Chen Hon — Thu, 01 Feb 2018 08:34:12 +0000

Compiling Box2D Static Lib

1. Getting the sauce

Get the latest Box2D release from github link as the zip form.

Unzip it and put into any directory you like.

2. Modifying some stuff

Open Box2D > CMakeLists.txt, as below :

Then remove this few lines including glui, freeglut and test bed into the compilation, so that you won't need to add them in, as below :

Then save it.

Then head to Box2D > Box2D > CMakeLists.txt, add this line on top :

cmake_minimum_required(VERSION 3.10)

You can change to your version of cmake also.

3. Configure Cmake and generating

Open cmake-gui and set the source and target path, following your box2d directory :

Then, click Configure.

Select CodeBlocks - MinGW Makefiles .

Click okay, then you might see something like this and some errors :

Just ignore them and click Configure again. You should see it getting configuration done like this :

If its done, just click Generate there. A Generating done will be logged out.

4. Compiling

Then go to Box2D > Build,

Spawn a terminal there and run mingw32-make

Wait until it finished running.

Then go to Box2D > Build > Box2D, you will find libBox2D.a there, as below :

5. Using it with CodeBlock

Put libBox2D.a into MinGW > lib.
Copy Box2D > Box2D, the Box2D folder inside root Box2D directory into `MinGW > include'.
Then in CodeBlock, open Settings > Compiler > Linker Settings > Add Library and Select MinGW > lib > libBox2D.a.

6. Setup is done :)

Test it out, here is a test cpp from my uni course gist.

7. Why am I doing this

I am just merely trying to challenge myself to compile it and not following instructions.

8. Test ?

I tested the compiled lib with a uni provided cpp along with sfml, somehow it works without glui and freeglut.

                ¯\_(ツ)_/¯

Using GvrEditorEmulator Prefab From GoogleVR Package and Not Sinking the Camera Downward Until the Parent Center On Unity Editor

Ng Chen Hon — Wed, 22 Nov 2017 09:04:06 +0000

If you are making a game targetting Cardboard or Daydream platform. You might need to dump the GvrEditorEmulator prefab came with GoogleVR package into the scene and pair a camera with it.

Let's say this is how you setup your scene :

You have to child the camera within a GameObject parent.
The parent have a shape.
The camera should be at the "head" of the parent which deviates away from the center of the parent.
You have GvrEditorEmulator paired with that camera and enabled.

The good thing is that you can pan around to view 360 degrees by tapping Alt + mouse moving around.

However, it appears that the camera is sinking downward.

The GvrEditorEmulator script will always try to default the local position (position relative to the parent) of the camera to Vector3.Zero which is (0, 0, 0).

To prevent that :

// line 90
m_camera.transform.localPosition = neck;

// line 103
m_camera.transform.localPosition = Vector3.Zero;

Open up GvrEditorEmulator script with your favourite IDE and comment out the lines at 90 and 103.

That should prevent the camera from sinking downward from the intended y position.

Lazy Approach to Display YouTube Videos in A React Native App

Ng Chen Hon — Fri, 17 Nov 2017 15:52:43 +0000

Sometimes ago, I made an half-baked RN app for an internship job. I would need to display company videos from their YouTube account. Went I was to find plugins on npm. As I did not come across a working plugin at that moment so I decided to go with the laziest method I thought of.

WEBVIEW FTW !!!

Yass, I am lazy to write a native plugin so there is WebView :)

<WebView 
    ref={(ref) => { this.videoPlayer = ref;}}
    scalesPageToFit={true} 
    source={{ html: '<html><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /><iframe src="https://www.youtube.com/embed/' + this.props.navigation.state.params.videoId + '?modestbranding=1&playsinline=1&showinfo=0&rel=0" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe></html>'}} 
    onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest} //for iOS
    onNavigationStateChange ={this.onShouldStartLoadWithRequest} //for Android
/>

It has a this.videoPlayer component reference.
this.props.navigation.state.params.videoId is a parameter pass in by Redux using React Navigation NavigationActions.navigate.
It has a source to an embed YouTube player with 100% css height and width.

Then, there is a Youtube logo on the bottom which the user can tap to either open the native YouTube app or a new tab in their default browsers to YouTube.

I did not want the user to leave the app as well. I included a little "hack" that disallow this action.

onShouldStartLoadWithRequest = (navigator) => {
    if (navigator.url.indexOf('embed') !== -1
    ) {
        return true;
    } else {
        this.videoPlayer.stopLoading(); //Some reference to your WebView to make it stop loading that URL
        return false;
    }    
}

For every url change, the WebView will call the function delivered to its onShouldStartLoadWithRequest and onNavigationStateChange props. It simply check if the embed from YouTube web embed url is still there or not.

Otherwise, the WebView will stop loading.

Quick and dirty. Ugly but IT WORKS

Hi, I'm Ng Chen Hon (Mutatedbread)

Ng Chen Hon — Thu, 23 Feb 2017 05:41:47 +0000

I have been coding for 3 years.

You can find me on GitHub as MutatedBread

I live in Kuala Lumpur.

I still study at Multimedia University Cyberjaya.

I mostly program in these languages: C++ and JavaScript.

I am currently learning more about Game Development.

Nice to meet you.