DEV Community: RedCalmContemplator

Lessons from game development

RedCalmContemplator — Sun, 16 Oct 2022 15:54:00 +0000

Minimize state
Use one function to update the state
Separate simulation from timing loop
Renderer should only display on what is the current state

Random Haskell Code Challenge

RedCalmContemplator — Sat, 02 Apr 2022 15:45:08 +0000

I was at work when a friend and colleague of mine showed me a funny meme, and it is about a student that tricked the teacher in a simple programming challenge, or probably a test. The requested output from the student is to create a program and produce the following result on the screen

ABCDEFGFEDCBA
ABCDEF_FEDCBA
ABCDE___EDCBA
ABCD_____DCBA
ABC_______CBA
AB_________BA
A___________A

At first, it seems that the challenge involves an algorithm "for loops" and manipulation/re-arranging of data inside the loop to achieve the desired result. The student presented a dummy non-working code that has two nested for loops and some index manipulation. These loops appear to be dead code, and the student then adds a procedure that prints the encoded output. After that, the teacher didn't bother to check the underlying logic and asked the student to run the code directly, yet the student managed to hide the encoded code in plain sight.

for(int i=0; i<arr.length; i++) {
  for(int j=0; i... ) {
    // some none working code..
  }
}
printsomething()

printSomething() {

  print("ABCDEFGFEDCBA")
  print("ABCD....")
  ...
}

That's very funny to think of, and it's quite challenging, and I thought perhaps "Why not solve this kind of challenge in Haskell code" I'm not an expert in Haskell, nor do I use Haskell in my day-to-day work, but in any case, it's a good exercise so let's jump in.

Without a problem definition, we assume that we need to print "A" to "G" and after that, it will go back from "F" to "A", and at the very least that's how it appears in the first line. We could then apply this rule for all the succeeding lines, and just with an added twist we also eliminate the characters in the middle until there's only one character left to print out.

First Step: Generate a Data

Generate a list of lists, and each list will have different lengths

list 1 of length 7
list 2 of length 6
list 3 of length 5
...

we then put this on a list, that would be

[ list1, list2, list3, ... ]

as of now this list contains ordered numbers incremented by 1, we achieve that by Haskell infinite list and take only the desired length.

take 5 [1..] -- take 5 elements in an infinite list.
-- [1, 2, 3, 4, 5]

Okay, so far we have a function to build a list of numbers incrementing by 1. Next, we generate a list of length 7 used as a row, this then will be mapped to generate a list as a length, let's call this rangeMatrix.

import Data.List

rangeMatrix = fmap (\n -> take n [1..]) [1..7]
-- [ [1]
-- , [1, 2]
-- , [1, 2, 3]
-- , [1, ... ]
-- ...
-- ]

The fmap here is like in javascript Array.map, which maps each element in the list using a mapper function, in our case the mapping function accepts an integer (n) and returns a list taking only (n) elements.

Now that we have a generated matrix of numbers, we convert these numbers to our desired characters "A" to "G", we then create a simple mapping function to achieve this

conv :: Int -> Char
conv 1 = 'A'
conv 2 = 'B'
conv 3 = 'C'
conv 4 = 'D'
conv 5 = 'E'
conv 6 = 'F'
conv 7 = 'G'
conv _ = ' '

then we map the rangeMatrix numeric to converted character.

rangeMatrixChars :: [[Int]] -> [[Char]]
rangeMatrixChars xss = fmap (fmap conv) xss
-- [ ['A']
-- , ['A', 'B']
-- , ['A', 'B', 'C']
-- , ['A', ... ]
-- ...
-- ]

Second step: Format Data

The next step and the most interesting part is to format this matrix to a readable string. It is a common practice in functional programming to design modular functions, each of which has responsibilities. In our case, we just currently designed a function that generates data, and now we will create a function that accepts our matrix characters and process it to a single list of characters (also equivalent to String in Haskell).

prettyFormat :: [[Char]] -> [Char]
prettyFormat xss =
 foldl prettyFormatStep [] xss

and each step of the format will do

prettyFormatStep :: Int -> [Char] -> [Char] -> [Char]
prettyFormatStep maxChar [] xs =
  xs
prettyFormatStep maxChar acc xs =
  xs
  ++ ['\n']
  ++ acc

ABCDEFG
ABCDEF
ABCDE
ABCD
ABC
AB
A

We're getting closer to the desired output. In addition, we need to tweak it out a little bit. Next, we add negative space, to show disappearing characters. As of now, we use the * character

negativeSpaceFormat maxChar whiteSpaceChar xs = 
  replicate (abs (length xs - maxChar)) whiteSpaceChar

and in prettyFormatStep will be

prettyFormatStep maxChar [] xs =
  xs
+ ++ (negativeSpaceFormat maxChar '*' xs ++ reverse xs)

prettyFormatStep maxChar acc xs =
  xs
+ ++ (negativeSpaceFormat maxChar '*' xs ++ reverse xs)
  ++ ['\n']
  ++ acc

ABCDEFG
ABCDEF*
ABCDE**
ABCD***
ABC****
AB*****
A******

and finally, we add the mirror of the output per row.

prettyFormatStep maxChar [] xs =
  xs
  ++ negativeSpaceFormat maxChar '*' xs
+ ++ (negativeSpaceFormat maxChar '*' xs ++ reverse xs)

prettyFormatStep maxChar acc xs =
  xs
  ++ negativeSpaceFormat maxChar '*' xs
+ ++ (negativeSpaceFormat maxChar '*' xs ++ reverse xs)
  ++ ['\n']
  ++ acc

Since the negative whitespace characters are in symmetry we don't need to reverse it, but in general, the reversed will also be applied. The final output would be

ABCDEFGGFEDCBA
ABCDEF**FEDCBA
ABCDE****EDCBA
ABCD******DCBA
ABC********CBA
AB**********BA
A************A

But wait! We have an error, the output so far is not the same as the expected output at the beginning of this article. If we notice the first row has a duplicate G and the second row has an extra * for each row. The problem is that we mirror exactly our data which is the exact inverse of the list. We could fix this by removing the first element of the inversed list. We can use the function tail to fix this.

prettyFormatStep maxChar [] xs =
  xs
  ++ negativeSpaceFormat maxChar '*' xs
- ++ (negativeSpaceFormat maxChar '*' xs ++ reverse xs)
+ ++ tail (negativeSpaceFormat maxChar '*' xs ++ reverse xs)

prettyFormatStep maxChar acc xs =
  xs
  ++ negativeSpaceFormat maxChar '*' xs
- ++ (negativeSpaceFormat maxChar '*' xs ++ reverse xs)
+ ++ tail (negativeSpaceFormat maxChar '*' xs ++ reverse xs)
  ++ ['\n']
  ++ acc

ABCDEFGFEDCBA
ABCDEF*FEDCBA
ABCDE***EDCBA
ABCD*****DCBA
ABC*******CBA
AB*********BA
A***********A

If you read the article up to this point you deserve applause 👏 we did arrive at the expected output.

There are a few optimization and syntax that needs to be adjusted, some of you may have a better understanding of Haskell may point out eta reduction, list comprehension, and many more. I leave it to you to tinker with this solution.

Thank you, and have fun coding

Full runnable source code: https://replit.com/@RonnelReposo/SimplisticAffectionatePackagedsoftware#Main.hs

Simple Synchronization with RxJS switchmap

RedCalmContemplator — Thu, 04 Feb 2021 16:29:28 +0000

In this post we are going to discuss what is switchmap operator, how do we use this operator to do proper synchronization, how does it differs from other operators such as map and mergeMap. Without further ado, lets dive in.

Let's define what does switchMap does, simply defined from official documentation "Map to observable, complete previous inner observable, emit values"

Synchronization

Examples of simple requirements that switchMap would be applicable are as follows:

When something triggers I need to call this second Observable.


// ID Type alias.
type ID = string

// Define a trigger to call the API.
const loadMyData$ = new Subject<ID>();

// Data upon trigger.
const data$ = loadMyData$.pipe(
 switchMap(id => httpGetData(id)) // API request
);

// Some trigger happens
loadMyData$.next("10d27de0-...-62b02cd72468") // trigger to get http data.

Whenever we use switchMap we are passing our task to other Observable. Its like saying to your friend, "Hey I did my part and this is what I produce, now do yours". In our example, we we're passing our trigger to httpGetData API request.

What if I my trigger is so fast, I don't want to overload my server with API requests?"

In the next example, we explore cancellation, using switchMap.

And now for the special part of switchMap, cancellation or unsubscription of inner Observable.

switchMap has the ability to cancel or unsubscribe inner observable, in our case the API request could take time to complete for example, fetching a large BLOB or any expensive API requests, we don't want to flood our API with useless requests, scenarios like:

When I trigger multiple API calls, I want my previous API calls to be cancelled.

// Next Image Trigger.
const nextImage$ = new Subject<ID>();
// Get image.
const data$ = nextImage$.pipe(
 switchMap(id => httpGetImage(id)) // supports cancellation internally.
);

No special wiring of Observable, it's basically the same as the first example.

When not to use switchMap

There are other alternative operators for passing or switching Observable, mergeMap would be an example, the only difference is mergeMap does not have cancellation on internal. This is useful for example add item to the cart, when calling the API, it may not be useful if we use switchMap, but make sure to check your requirements first.

Difference from map operator

map only transform values, and not needing the task to another Observable, for example:

const date$ = dateTrigger$.pipe(
 map(stringDate => new Date(stringDate))
);

// Should be equal to
const date$ = dateTrigger$.pipe(
 switchMap(stringDate => of(new Date(stringDate)))
);

Why not use concat after the trigger?

concat awaits for the first Observable to complete before triggering the second Observable, in many cases there can be no completion of the source Observable, thus leaving the second Observable not to be called at all.

Personal Preference

When faced with uncertainty, I'd like to use switchMap first to stitch Observable together specially on calling APIs whether the source is interval, or manual click trigger, only then after that I'll assess the synchronization requirements.

Bonus

The signature resembles to monad operator bind.

Thank you for reading this far, let me know what you think below.

References

Object Oriented and Functional Programming

RedCalmContemplator — Sat, 01 Aug 2020 17:03:18 +0000

In our day to day programming, one must follow a certain paradigm
wether its procedural, imperative, object oriented or functional programming.

In this post we will explore object oriented and functional programming,
explore a simple example on how to implement a simple user story for both paradigms.

I'm no expert in object oriented nor design patterns in OOP, as well as
functional programming. You may find this post opinionated on implementation level.
But I will try my best to express it on how we might code it on our day to day basis.
With all the caveats, let's proceed anyway.

User story

A Customer should have the following information

firstname
middlename (not required)
lastname
age

Sales clerk should allow view of the following:

Name: {lastname}, {firstname} {middleInitial}

Name: {lastname}, {firstname}

Status: {Allowed} or {Not Allowed}

Notes

Name should have a period at the end, if has a middle name, otherwise none.
Status allowed if the customer is in legal age.

Object Oriented Programming

OOP encapsulate states in an object, object is created using an instance of class, classes have methods that operates the object states.


class Customer {
    firstname: string
    middlename: string
    lastname: string
    age: number
}

Okay, so far so good.

We also want a concatenated information of the customer name,
we should achive this by creating a method that formats the
customer information.

class Customer {

...

+   formattedName: string
+   
+   formatCustomerName () {
+       this.formattedName = `${this.lastname}, ${this.firstname}`;
+       if (this.middlename) {
+           if (this.middlename[0]) {
+               this.formattedName = `${this.formattedName} ${this.middlename[0]}.`
+           }   
+       }
+       this.formattedName = 'Name: ' + this.formattedName;
+   }
}

and finaly we add status.

class Customer {

...

+   isLegalAge () {
+       return this.age >= 18;
+   }

+   getStatus (): string {
+       return 'Status: ' + this.isLegalAge() ? 'Allowed' : 'Not Allowed'
+   }

}

At this point, we already fulfill the requirement. We can already ship right?

Wait, What about if we have another format for customer name?

We could add another method to our Customer class, if we do that we end up many formatters in a single class, and the customer has now many responsibility at hand.

So, lets introduce a formatter in strategy pattern.


interface ICustomerFormatter {

    format(customer: Customer): string
}

class SalesClerkCustomerFormatter implements ICustomerFormatter {

    format(customer: Customer): string {
        let formattedName = `${customer.lastname}, ${customer.firstname}`;
        if (customer.middlename) {
            if (customer.middlename[0]) {
                return formattedName = `${formattedName} ${customer.middlename[0]}.`
            }
        }
        return 'Name: ' + formattedName;
    }
}

class ReportingCustomerFormatter implements ICustomerFormatter {

    format(customer: Customer): string {

        throw new Error('not implemented yet');
    }
}


class Customer {

...

-   formatCustomerName () {
-       this.formattedName = `${this.lastname}, ${this.firstname}`;
-       if (this.middlename) {
-           if (this.middlename[0]) {
-               this.formattedName = `${this.formattedName} ${this.middlename[0]}.`
-           }   
-       }
-       this.formattedName = 'Name: ' + this.formattedName;
-   }
+   formatCustomerName (formatter: ICustomerFormatter) {
+       this.formattedName = 'Name: ' + formatter.format(this);
    }

...

}


// Usage

let customer = new Customer();
customer.firstname = 'sansa';
customer.middlename = 'tully';
customer.lastname = 'stark';

customer.formatCustomerName(new SalesClerkCustomerFormatter());
customer.formattedName; // Sales Clerk formatted customer name;

customer.formatCustomerName(new ReportingCustomerFormatter());
customer.formattedName; // Reporting formatted customer name;

Functional Programming

Functional programming works on data and pure functions that transforms them.

We could start by defining a record for our customer.


type Customer = {
    firstname: string
    middlename: string
    lastname: string
    age: number
}

and we add helper functions.


const formatSalesClerkCustomerName = (customer: Customer): string => {
    const formattedName = `${customer.lastname}, ${customer.firstname}`;
    return (customer.middlename && customer.middlename[0]) ?
        `${formattedName} ${customer.middlename[0]}.` : formattedName;
};

const isCutomerLegalAge = (customer: Customer): boolean => {
    return customer.age > 18;
};

const customerStatus = (customer: Customer): string => {
    return 'Status: ' + isCutomerLegalAge(customer)? 'Allowed' : 'Not Allowed'; 
};

That's all we need.

How about multiple formats for customer name?

We could also have a strategy pattern in FP, we have to use a higher order function for that.


const formatCustomerName = (
    customer: Customer,
    nameFormatter: (customer: Customer) => string): string => {
    return 'Name: ' + nameFormatter(customer);
};

const reportingFormatter = (customer: Customer): string => {

    throw new Error('not implemented yet');
};


let bran = {
    firstname = 'bran',
    middlename = 'tully',
    lastname = 'stark',
    age: 8
}

// Usage

formatCustomerName(bran, formatSalesClerkCustomerName);
formatCustomerName(bran, formatReporting);

Conclusion

We saw two different paradigms and example on how its implemented,
Decomposed using Strategy Pattern. Choosing paradigm is merley up to you, or your team standard.

I for myself tends to write in both paradigm. When confronted with calculations and working on mapping asynchronous tasks, I leans towards FP. On the other hand, for example Controllers from MVC, then I use OOP and as much as possible using pure functions, on methods.

Let me know what you think below.

Source Codes:

OOP Code

FP Code

Domain Modeling with Union Types in Typescript

RedCalmContemplator — Sun, 03 May 2020 09:57:55 +0000

Typescript is one of the most interesting languages of the decade,
this language is a superset of javascript that has the ability to provide type definition to your javascript codebase.

Union types are one of the type definitions you might encounter in typescript, we will show how does typescript infers union type, and also explore examples of how union type is used in domain modeling.

I do not claim that I'm an expert in domain modeling. It is a wide field on its own right, but with that caveat in mind lets go and explore anyway.

The need for Union Types

Typescript has to deal with existing javascript annotating it with a type.

Consider a simple function in javascript:

    function getAge (name) {

        if (name === "jon") {
            return "20"
        } else {
            return 14
        }
    }

When we switch to typescript, Typescript has to provide a return type definition of the function getAge.

The return type would be. string | number, thus typescript would use union type to express that this function returns either a string or a number, or more explicitly "20" | 14. This allows typescript to transition from javascript and providing inferred type definition.

If we use this in another context, let's say foo, we will get an error.

    function compute(args: []) {
        ...
    }

    // Error. Type string | number is not assignable to []
    isLegalAge(getAge("sansa"))

Extending the Domain with Union Type

In a real-world scenario, let's say we have a type Person with firstname and lastname, extend this information to provide an age.

    type Person = {
        firstname: string
        lastname: string
    }

    let jonSnow: Person = { firstname: 'jon', lastname: 'snow' }

    // Error: `age` does not exist in type Person.
    jonSnow = { ...jonSnow, age: 20 }

for some of us might think,

Just add the age and make it optional.

    type Person = {
        firstname: string
        lastname: string
        age?: number // added optional age.
    }

This would work, but our new type definition it doesn't tell much everything,
is the age really optional information of a person? What we want is to provide an interface that strongly consists of information we need, perhaps clients of this type will implement like this.

    type Person = {
        firstname: string
        lastname: string
        age?: number // added optional age.
    }

    function isLegalAge (person: Person): boolean {

        // ensure the age is present in the Person structure.
        if (!person.age) {

            // person age does not exist? what should I return?
            return false // maybe just false?.
        } else { // else proceed to real computation.

            // compute legal age.
            return person.age >= 18
        }
    }

This not guarantee that the clients of our type a strong definition.
The client will have to wonder why the age is optional, also this does not tell more information about our type, questions might arise:

On our domain, we might ask. Is our domain have an age restriction?
On the technical side, we might ask. If the person doesn't have age, do we return false on our isLegalAge function?

Well let's add another field in type Person.

This would work as well, after all, we have declared the type in our own setup.
However, consider the type Person to be in private, like in most of the APIs? or you have implemented this library and don't want your users to force implementing your new interface?

Union type to the rescue

The problem we're facing is that we would like to retain the old type implementation but we want to extend the type annotation, one solution is to implement a union type.

first let's create a new type annotation to express our intent.

    type PersonWithAge = {
        firstname: string
        lastname: string
        age: number
    }

and general union type information, we have.

    type PersonInfo =
        | Person
        | PersonWithAge

Now, our domain says, PersonInfo is either Person (legacy information) or PersonWithAge.

And from previous our code we could use, PersonInfo instead of Person.

    let jonSnow: PersonInfo = { firstname: 'jon', lastname: 'snow' }

    jonSnow = { ...jonSnow, age: 20 } // ok

or we could create another person with age information without breaking the legacy code.

    let jonSnow: Person = { firstname: 'jon', lastname: 'snow' }

    let jonSnowWithAge: PersonWithAge = { ...jonSnow, age: 20 }

We could also create a formatter that accepts our newly created union type.

    function formatPersonName (personInfo: PersonInfo): string {
        return personInfo.lastname + ", " + personInfo.firstname;
    }

    // Handled legacy code.
    formatPersonName(jonSnow)

    formatPersonName(jonSnowWithAge)

and from our isLegal function, we could strictly use PersonWithAge only

    function isLegalAge (person: PersonWithAge): boolean {
        return person.age >= 18
    }

does eliminate the need to check the age, and has much cleaner code.

Conclusion

Union types are great for exposing our domain, we could add flexibility to our system without breaking the previous legacy domain, It also provides a self-documenting type definition and what would be the shape of our data.

Just a small warning, you find yourself the need to provide a case analysis of which type does it belong, there are many techniques available. One of the most used is tagged union.

Union type is not the only way to extend our domain in typescript, typescript also provides an intersection type.

Let me know your thoughts below, happy coding.