DEV Community: Arthur Christoph

FFMon - Fresh Food Monitor app

Arthur Christoph — Wed, 24 May 2023 06:20:34 +0000

What I built

Real experience in my everyday life: leftover food, fresh produce, dairy products got into the fridge and forgotten. What if there's a convenient, fast and mobile-friendly app with focuses solely to monitor and keeping track these foods and reduce wasting valuable food that were forgotten. FFMon is born on that very day

Category Submission:

Phone Friendly

Screenshots

https://freshfoodmonitor.web.app/

Technology stack:

Vue is arguably the best and easiest web framework to work on front-end UI.
- Notable vue libraries used:
- Vuetify - a mobile-friendly Vue UI library, well-documented and has comprehensive list of most-used components in a typical web app.
- Pinia - an easy to use state management framework to simplify storage solutions in web applications
- Vue Router - provides routing capability for view transitions
Firebase: provides hosting solution for the deployment of this app
Github: provides repository and actions to perform continuous integration. A must-have for a rapid deployment workflow

Description

The Fresh Food Monitor app allows users to keep track of their food inventory by giving them the ability to add, edit and delete item stored in their fridge / shelves / etc . The app is designed to be simple, fast and user friendly

Link to Source Code

FFMon

Permissive License

MIT License

How I built it

Setup the repo in the Github
Use vuetify generator to speed up the process of installing vuetify into vue app, adding pinia for state management and vue-router for routing feature
Start modeling the UI screens, finding the minimum data needed from users or other resources to reach the MVP (minimum viable product)
Implement the solutions which involves UI layout management, defining state management actions , validations and view transitions
Add Local Storage using a Vue plugin to persist data in the web browser
Install firebase into the project directory and test the deployment
Add github actions which is conveniently available using firebase generator
Try a PR and test the auto-deployment is working after merging to main branch

Background (What made you decide to build this particular app? What inspired you?)

What's Next

While this app showcases the rapid dev and deployment using Github Action, there are so many features can be added to this app such as food items lookup, more validations, favorites , Unit Tests, E2E Tests, etc
We are more than eager to continue building this app and will share more of it in coming posts. Stay Tune!

Collaborators

Ester Kim dev.to

Go Series: Pointer

Arthur Christoph — Tue, 25 Apr 2023 21:50:10 +0000

A pointer is simply a variable that holds the location in memory where a value is stored.
Pointer indicates mutable parameter.
Go gives the choice to use pointers or values for both primitives and structs.

The common gotcha is when passing a struct - a struct is passed by value. Example

func changePersonFailed(person Person){
  person.Name = "Jane"
}
person := Person{Name: "John", Age: 1}
changePersonFailed(person)

Original person object is not modified since the person is a copy of the original person struct

To pass by reference or in other words, passing the pointer instead, can be done by adding the * prefix on the person parameter in the method definition, and to pass the pointer of the object by adding & prefix to the person object

func changePerson(person *Person){
  person.Name = "Jane"
  desc := "new value"
  person.Description = &desc
}
person := Person{Name: "John", Age: 1}
changePerson(&person)

The best practice, however, is to always strive to not modify the object passed as argument into the function and return it as a return value of the function instead, such as:

func changePersonBestPractice(person Person) (p Person) {
    p = Person{Name: "Name", Age: person.Age}
    return p
}
person := Person{Name: "John", Age: 1}
updatedPerson := changePersonBestPractice(person)

Mutated object can be difficult to track of - where the object was mutated . Instead, returning a new object will guarantee the original object is modified while still getting back a new object with updated values.
append methods is an example of this practice. Original slice is kept as is, and a new slice returned with the given element added

names := []string{"a","b"}
names = append(names, "c")
fmt.Println(names)

Another reason is garbage collector has more work with pointers since value types are in stack and stack is sequential where as heap where the pointers located are not.

Go Series: Defer, Finally...

Arthur Christoph — Sun, 20 Nov 2022 10:50:05 +0000

Defer is commonly used in Go where in other languages use finally or ensure block, such as cleaning up resources. Defer runs right before the enclosing function is exiting.
Other languages like Python, JS, Ruby to name a few, can use finally try-catch-finally block to handle cleanup.
Note the flat vs nested nature between go and other languages. Idiomatic Go always strives for flat structure when possible : defer, goroutine, returning error as a value of a function, etc.

In Go:

defer file.close()

In JS:

try {
}
catch {
}
finally{
  file.close()
}

Cleaning up resources is a very good case for defer and in Go, this is handled gracefully with just a single statement defer. Other languages resort to a different construct for more elegant solution as we see below. Let's compare the file reading between Go, JS, and Python.

In Python, it has try finally construct as below

file = open('a.txt', 'r') 
try: 
  for line in file:
    print(line)
finally: 
  file.close() 
  print('finally', file.closed)

However, Python has 'with' to deal with context management such as closing file. A close function is implicitly called.

with open('a.txt', encoding="utf-8") as f:
  line = f.readline()
  print(line)

In JS, it relies on NodeJS methods to open file, whether with callback, sync or async methods. The cleanup is handled automatically by the methods.

// readFile / readFileSync opens a file and automatically close it
fs.readFile('a.txt', 'utf8', (err, data) => {
  if (err) {
    console.error(err);
    return
  }
  console.log(data)
})

const data = fs.readFileSync('a.txt','utf8')

In Go, reading file would be in this order:

Open the file
Defer the close file
Do something with the file data

One important characteristic of defer in idiomatic Go is: placing the deferred resource closing function right after the opening resource function

f, err := os.Open("a.txt")
defer f.Close()
if err != nil {
  log.Fatal(err)
}
// read the file line by line using scanner
scanner := bufio.NewScanner(f)
for scanner.Scan() {
  // do something with a line
  fmt.Printf("%s\n", scanner.Text())
}

You can place the defer at the very end of the function but avoid doing this for two reasons:

The point of placing right after opening resource is so that you remember that you will close file whatever happens
It can give a misconception that it may not be run, as it looks like a normal statement. An inexperienced reader of the code might think that it will return without invoking the f.Close(). Especially when it is a way down in a long method that it is hard to read/confirm if the closing function does exist, as shown below.

func readFile() error { 
f, err := os.Open("a.txt")
if err != nil {
  return err
}
// Many line of statements can hide the defer statement below
defer f.Close()
}

Another common defer usage in Go is for db transaction. Using database/sql package, defer can be used for conditionally running transaction method based on an error existence.

defer func() {
  if err == nil {
    err = tx.Commit()
  }
  if err != nil {
    tx.Rollback()
  }
}()

Defer is Go is a powerful construct that gives the language a simple, elegant and robust way to handle closing of resources, when the closing must be done regardless of the conditions in the enclosing function.

Go Series: Closure

Arthur Christoph — Tue, 15 Nov 2022 07:35:13 +0000

A closure is the combination of a function and the lexical environment within which that function was declared.
This environment consists of any local variables that were in-scope at the time the closure was created.
The closure concept exists in many languages, in JS for example , it is heavily used for many cases. In go, closure is commonly used for defer and goroutines - we'll explore more of these topics in upcoming series.

The function adder returns another function when invoked, the lexical scope includes the sum variable which is accessible by the returned function. Note that in Go, a closure is always an anonymous function.

func adder() func(int) int {
   sum := 0
  // this is a closure, it has access to sum variable
  // each closure has its own sum variable
    return func(x int) int {
        sum += x
        return sum
    }
}

every time adder is invoked, it creates a new function with closure.

  addFn := adder()
  fmt.Println(addFn(1)) // initial sum value of 0 is added to 1  
  fmt.Println(addFn(2)) // returns 3, sum variable is maintained by addFn closure
  // calling adder like below will not work as intended as the closure from first line is not being used by the second line, instead, creating a new one
  fmt.Println(adder()(1)) // returns 1
  fmt.Println(adder()(100)) // returns 100

Another example of closure below where the closure is assigned to a variable first

func namer() func() string {
    name := "my name"
  // name variable still exists in fn even after namer is finished
    fn := func() string {
        return name
    }
  return fn
}

With the fundamental understanding of closure, let's explore defer in the next post - one of the unique things in Go compared to other popular languages

Go Series: Function Declarations

Arthur Christoph — Sat, 29 Oct 2022 08:29:10 +0000

Declaring functions

There are a few ways of declaring functions in Go.

The most basic function has no argument and no return value. The main function in go is this type of function

func Say() {
  fmt.Println("Hi")
}

Function can have a return value. In Go, not only the type that is declared, we can also declare the variable that is used as the return value. This helps to make the function more descriptive and self-documented - we can tell what is being return just by reading the function declaration.

func LastName() (name string) {
  name = "Smith"
  return name
}

In comparison of the standard declaration:

func LastName() string {
  var name string
  name = "Smith"
  return name
}

One note however, by declaring (name string) as above , the unused variable checking is no longer using used whereas if var name string is not used, go will not compile. The same rule applies to parameter as well - unused parameters will not trigger the unused variable checking.
Below is an example of a function with parameters and named return value declaration

func FullName(first string, last string) (fullName string) {
    fullName = first + " " + last
    f := first + " " + last
    return f
}

We can shorten the parameter declaration by grouping same type parameters. Make sure that the method still looks readable, the grouped parameters can be less readable the definition as we need to scan more to the end to see the type.

func FullNameWithMiddle(first, middle, last string, id int) (fullName string) {
    fullName = first + " " + last
    return fullName
}

Function can return multiple values, a common pattern in go is returning an error as the last return value and this allow us to check if the function has error or not. More into error handling later in the series

func FullNameWithValidation(first string, last string) (fullName string, err error) {
    if len(first) == 0 {
        return fullName, errors.New("First Name cannot be empty")
    }
    fullName = first + " " + last
    return fullName, err
}

If the function has named return values, it is possible to have a return without specifying them. However, this is not recommended since it makes it harder to read as you'll need to scan all the way up to see what they are.

func MagicNumber(num int) (n int, err error) {
    if num == 0 {
        // this still returns n and err, but not obviously visible without going back to function definition line, it may look like it's returning nothing
        return
    }
    if num > 100 {
        return n, errors.New("larger than 100 is not valid")
    }
    fmt.Println("n is not calculated if an error occurred")
    n = num * 100

    return n, err
}

Named parameter features in popular language such as typescript, python, ruby. While it might be surprising, go uses its struct to simulate the feature. While it might look more verbose, it forces a clear documentation of what is being passed into the function

type MyOpts struct {
    FirstName string
    LastName  string
    Age       int
}
func MyFnWithNamedParams(opts MyOpts) {}

Another common feature is variadic parameter. Go does have this feature. Note the variadic parameter needs to be the last parameter in the function.

func MyNumbers(nums ...int) {}
MyNumbers(1, 2, 3)

Function can also have another function passed into the function. We'll look more into detail in function patterns topic.

func FnWithLogger(fn func(int, int) int) int {  
  num1 := 1
  num2 := 2
  result := fn(num1, num2)
  fmt.Println("logging", result)
  return result
}

This concludes the introduction of function in Go. Next a few topics, we'll dive into defer and closure in go.

Go Series: Variable Declaration Best Practices & Gotchas

Arthur Christoph — Mon, 26 Sep 2022 10:14:27 +0000

Declaring variables

To declare a variable in go, you can either:

Declare without initial value, the type has to be declared:

var name string

Declare with initial value, the type is optional as it is implicitly inferred by go:

With type declaration:

var name string = "go"

Without type declaration:

var name = "go"

Short declaration: string := "go"

One important note on using this short declaration: be aware of variable shadowing, it may look you are reusing the variable, but it is not the case, unchecked colon can make all the difference

count := 1
if count > 0 {
// this is a new count variable within the block
// so vigilant when using same variable name
  count := 2
  fmt.Println(count) // print 2
}
fmt.Println(count) // print 1

Mixed of value assignment to existing variable and short declarations, this is one of the most common things you write: assigning a value and possible error from a function to variables. I'll discuss more on the best practices in function to avoid the common errors

var result int
result, err:= calculate()
fmt.Println(result, err)

Multiple variable declaration can be done in one-liner for same type, allowing omitting type for the other variables :

var a,b int

or multiline for same or different type:

  var (
    c string
    d bool
  )

Two kinds of variables based on the scope:

1.Package level variable - warning: only used this as constant . For a good reason, mutating the value will be hard to track.

package main
var myPkgVar = 1
func printMyVar(){
  fmt.Println(myPkgVar)
}

Constants value are determined at compile time - only primitive values or static computation, otherwise Go will throw compile error if you try. So boolean, numeric, string, rune work.

These work:

const myArrLen = len([1]int{1})
const myStrLen = len("str")
const myNum = 2/4

but no these dynamic values:

const t = time.Now()
const slice = []int{}

2.Function level variable - this is what we usually use, always strive to use function-level variable. We'll look more why when we explore function in go , as everything in passed by value

3.There's actually the third one - the 'universe level' block which we'll never abuse but good to know. The following will surprisingly compile without error as true is one of a set of predeclared identifiers on the very top scope that can be overshadowed

true :=1
fmt.Println(true)

Few more notes

Unused variables will throw error, this is go mechanism to reduce code clutter, however package-level variable is not checked, another reason to avoid using it. Also const variable is not checked either, this is because it is calculated at compile time - no side effect, so if not used, it's not included in the compiled code, still we do want to avoid unused variable cluttering, this is why const is also less used than var, the combination of var & pass-by-value is enough as a const replacement in general.
Idiomatic go uses camelCase for variable naming
Capitalized name has special meaning - it indicates it is accessible outside of package it is defined in
Go prefer short variable names. These short names serve two purposes. The first is that they eliminate repetitive typing, keeping your code shorter. Second, they serve as a check on how complicated your code is. If you find it hard to keep track of your short-named variables, it’s likely that your block of code is doing too much.
Package-level names on the other hand should be more descriptive since it's more widely used by definition.

Next post will be a big topic: function , so much to cover that it might need several parts that focus on different aspect of it.

Go Series: The Way to Go

Arthur Christoph — Wed, 21 Sep 2022 08:33:35 +0000

In this series, I'll start exploring Go language that I found useful and interesting in developing programs using Go.

Let's start with a Hello World program.
Any go program requires a package declaration. The package named main is special as it indicates that it is executable.
The main program in go can be named anything and usually called main.go.

package main

import (
    "fmt"
)

func main() {
  fmt.Println("Hello, World!")
}

Beyond a simple program, we would need to include more packages. In the simple example above, we imported fmt package that is included in Go's standard library

To organize our code better, we can define a package in the folder structure of our app.

The steps are:

Add go.mod file - this will turn our root folder into the root of the module. A module in go represents a collection of packages
Inside the go.mod, add the module name, this name will be used when we import our package: module myapp
Create a new folder where the new package will be defined, any file defined in this folder needs to be in the same package, otherwise go will complain. Let's call this package greeting. Note that the package name can be different than the folder name. To emphasize this, the package folder name is g
Create a file hello.go as the first file that contains code for our greeting package
Define functions that will be used in the main package, function Hi and Say are defined here, note that uppercase make these functions publicly accessible which is what we want
Go back to main.go, then import the package, to do this, we need to specify the complete path which is: module name followed by the path to the package, so in our example the package is myapp and the package folder name is g. The best practice is to name it exactly as the package name which is greeting, but I want to show that when you import , the path is not the package name but the folder name of the package

import (
    "fmt"
    "myapp/g"
)

I can use the package method by specifying the package name first followed by the function to invoke, this shows why the best practice is to name the folder the same as the package name - we have no idea what package name is unless we open the file first

fmt.Println(greeting.Hi())

However, we can actually define an alias like:

import (
    x "myapp/g"
)

Then I can call it:

fmt.Println(x.Hi())

But the best practice is to make the package name equal to the folder, the g folder should be called greeting folder instead

Run the program by running: go run . or go run main.go

This concludes the getting started with go. We'll explore more in the next post of this series

Polyglot Series in Javascript, Dart, Ruby, Python,Go: Enum

Arthur Christoph — Sun, 24 May 2020 04:33:16 +0000

Playground path: collection/enum

Enum

Javascript does not have enum type, however Typescript does have enum type. The default value type is numeric, enum type can also be of string type.

Typescript

// numeric enum
enum Color {
  Red,
  Green,
  Blue,
}

// string enum
enum Answer {
  No = '1',
  Yes = '2',
}

// printing its value: 0
console.log(Color.Red);
console.log(Color.Red.valueOf());
// printing its name: 'Red'
console.log(Color[Color.Red]);

// enum is hashable
let m = new Map();
m.set(Color.Red, 1);
console.log(m.get(Color.Red));

Dart

In Dart, the enum type is enum. To get its enum name, unlike Javascript, the default and toString() print its actual name instead of the value but it prints the fullname of it: 'Color.red'. Flutter framework has a method describeEnum that can extract just the 'red' value or you can come up with a regex.

  enum Color { red, green, blue }
  // Color.red is an enum type, this will print 'Color.red'
  print(Color.red);

  // Printing its name can be done with toString() as well
  print(Color.red.toString());

  // enum type has index property starting at 0
  print(Color.red.index);

  // enum type is hashable
  var m = Map();
  m[Color.red] = 1;
  print(m[Color.red]);

Python

Enum in Python has to be imported from enum package and the values have to declared - not defaulted to numeric value.
The methods are nicely named and predictable: name,value
In addition, the enum is iterable and accessible like Dictionary as well. So, Python has the most complete feature of all other languages.

from enum import Enum

#the enum values must be declared

class Color(Enum):
    red = 1
    green = 2
    blue = 3

print(Color.red)
# enum name and value are printable
print(Color.red.name)
print(Color.red.value)
# it can be enumerated
for c in Color:
    print(c)
# like Javascript, it can be accessed like Map
print(Color['red'])
print(Color(1))

Ruby

Ruby does not have enum, we can use module instead, and must be capitalized, e.g: Red instead of red.

module Color
  Red = 1
  Green = 2
  Blue = 4
end

p Color::Red

Go

Like Ruby, Go does not have enum either. One way to simulate this is to make a list of constants with iota value - a sequential integer value

type Color int

const (
  Red Color = iota
  Green
  Blue
)

fmt.Println(Red, Green, Blue)
var d Color = 0
// it will print Red
switch d {
case Red:
  fmt.Println("Red")
default:
  fmt.Println("Other Color")
}

Polyglot Series in Javascript, Dart, Ruby, Python,Go: Iterating Map and Set

Arthur Christoph — Mon, 18 May 2020 05:13:26 +0000

Playground path: collection/map_and_set/iter

Iterating Map

In Javascript, Dart and Go is commonly called Map, in Ruby is Hash, and in Python is Dictionary.
Iterating Map can be divided into three forms: key-only, value-only or key-value pair.

Iterating Set

Iterating set is simpler than list and map, since we do not have key or index to look for, it's simply just an unordered value-only collection.
Set is the standard term in these languages.
Iterating Set has one form, just like list - iterating its elements: value-only form

Javascript

In Javascript, map can be represented in two types: Object and Map. Both of them have keys(), values(), entries() methods to iterate the three forms. Both, by default, can be iterated, iterating Map returns the element in [key,value] form, whereas iterating object returns the object's property values.
Javascript Set is iterable using for-of

//iterate Map. By default, Map is iterable
for (const k of m) {
  log(k);
}

//iterate Map with keys
for (const k of m.keys()) {
  log(k);
}

//iterate Map with values
for (const v of m.values()) {
  log(v);
}

//iterate map with keys and values
for (const [k, v] of m) {
  log(k, v);
}

//iterate object by default using for-in')
for (const e in objects) {
  log(e);
}
//iterate object with keys
for (const k of Object.keys(objects)) {
  console.log(k);
}
//iterate object with values
for (const v of Object.values(objects)) {
  console.log(v);
}
//iterate object with keys and values
for (const [k, v] of Object.entries(objects)) {
  console.log(k, v);
}
//iterate set
let set = new Set([1, 2, 3]);
for (const e of set) {
  log(e);
}

Dart

Dart, like Javascript also has keys, values and entries but implemented as properties instead of methods. Unlike Javascript, Map is not iterable, so we need to use one of the three methods. However, Set is iterable using for-in

for (var k in d.keys) {
    print(k);
  }
for (var v in d.values) {
  print(v);
}
for (var e in d.entries) {
  print("${e.key} ${e.value}");
}

Set set = new Set.from([1, 2, 3]);
for (var e in set) {
  print(e);
}

Ruby

In Ruby, while there are keys and values properties in Hash class, using each_key and each_value are the more expressive options. Both Hash and Set are iterable using each method.
However, Set needs to be imported explicitly using the usual way of Ruby import: require 'set'

// with keys
d.each_key {|k| p k}
d.keys.each {|k| p k}

// with values
d.each_value {|v| p v}
d.values.each {|k| p k}

// with keys and values
d.each {|k,v| p "#{k} #{v}" }

// iterate set
require 'set'
set = Set.new([1,2,3])
set.each{|e| p e}

Python

Python also have the three forms, implemented as keys(), values(), and items(). Both Dictionary and Set are iterable using the usual for-in

for k in d:
    print(k)

for k in d.keys():
    print(k)

for k in d.values():
    print(k)

# with keys and values
for k, v in d.items():
    print(k, v)

# iterate set
set = {1,2,3}
for e in set:
    print(e)

Go

Map is iterable. Focusing for simplicity, Go only provides for-range to iterate by value, key, and key-value (using underscore to ignore key or value). There is no standard Set , instead Map can be used to simulate Set by assigning the value of each element with a constant value.

m := map[string]int{
"one":   1,
"two":   2,
"three": 3,
}

for k, v := range m {
  fmt.Println(k, v)
}

const t = true
set := map[string]bool{"one": t, "two": t, "three": t}

Polyglot Series in Javascript, Dart, Ruby, Python, Go: Iterating List

Arthur Christoph — Mon, 18 May 2020 02:18:02 +0000

Playground path: collection/list/iter

Iterating List

There are two common terminologies: Array and List

In Javascript and Ruby, it is called Array
In Python and Dart, it is called List
In spite of different terms, all of them have dynamic length - it will grow its length automatically, unlike Java's array or C's
In Go, array has fixed size, but it has Slice to declare array without specifying its length. We'll discuss more detail in my next posts.

In iteration, we can divide into 3 forms: element-only, index-only, or both index and current element.

Python and Dart use for-in a primary element-only iteration. Ruby's for-in is not as much used, as the .each method is more idiomatic in Ruby.
Javascript's for-in has a different purpose - enumerating object properties
do-while is not discussed below, as while is a more common form to use.

Javascript

Javascript has a for-of iteration to enumerate list.

let numbers = [1, 2, 3];

for (const e of numbers) {
  console.log(e);
}

When the iteration needs index, forEach has a second argument to display index, note that it cannot break out of the loop (using break) if a condition is met, unlike for-of.

numbers.forEach((e, i) => {
  console.log(e, i);
  // break;  this is an illegal statement
});

The versatile for loop with index, provides index-based iteration.

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i], i);
}

while loop is more commonly used when there are multiple conditions, although it also possible to do the same thing with for loop.

let sum = 0;
while (sum >= 0 && sum < 3) {
  sum++;
}
console.log(sum);

//for loop alternative for while-like loop
for (let sum = 0; sum >= 0 && sum < 3; ) {
  sum++;
}
console.log(sum);

Dart

Dart uses for-in to iterate list.

  for (var e in numbers) {
    print(e);
  }

The usual for loop for index-based iteration.

for (var i = 0; i < numbers.length; i++) {
  print("${numbers[i]} ${i}");
}

while loop, more common for multi-conditions.

var sum = 0;
while (sum < 3) {
  sum++;
}
  print(sum);

Ruby

Ruby has for-in, but .each is more idiomatic in Ruby - the dot syntax.

for e in numbers do
  p e
end
numbers.each { |e| p e }

If index needed, each_with_index has a second argument representing the index.

numbers.each_with_index {|e,i| p "#{e} #{i}"}

Ruby's while method, just like others, is more common for multi-conditions.

sum = 0
while sum < 3
  sum += 1
end
p sum

Python

for-in method is the versatile loop syntax in Python. Unlike others we have seen above, instead of providing several for-like syntax, Python's for-in keeps a consistent form for element-only, index-only, or bot - by only modifying the form of the list to a suitable structure.

Without index, we can use for-in in its simplest form:

for e in [1, 2, 3]:
    print(e)

Range method returns list of sequential numbers, by passing the list's length calculated by len method, this is the for loop version of Python:

for i in range(len(numbers)):
    print(numbers[i], i)

For iterating both element and its index, enumerate method returns a pair of index and the current element. Note on the order - the index is the 1st argument and 2nd is the element unlike Javascript and Ruby 'index' method

for i, e in enumerate(numbers):
    print(e, i)

Python's while loop is just like others, used commonly for multi-conditions .

sum = 0
while sum < 3:
    sum += 1
print(sum)

Go

Go's for loop, is the only form of loop in Go, there's no while loop - focusing on minimum interface - fitting well with Go's idiom.

If index not needed, we use underscore to ignore it. The range keyword when passed a list, returns the index of the each element in the list.

for _, e := range numbers {
  fmt.Println(e)
}

We add i , to include index of the element.

for i, e := range numbers {
  fmt.Println(e, i)
}

The familiar for loop with index, also exists in Go.

for i := 0; i < len(numbers); i++ {
  fmt.Println(numbers[i])
}

Go avoids introducing while loop if for loop can do the same thing.

sum := 0
for sum < 3 {
  sum++
}
fmt.Println(sum)

Polyglot Series in Javascript, Dart, Ruby, Python,Go: Sorting List

Arthur Christoph — Wed, 06 May 2020 07:13:42 +0000

Preface

This is the first post of the series that will dive into my journey in exploring these languages, some of which I have years of experience (Javascript, Ruby) and those are newer to me (Dart, Go).
As there are many aspects of programming language that we can explore and compare, my exploration will emphasize on the cookbook-style approach - how to solve common problems like sorting, filtering, etc, while comparing the unique features of the language.
I hope these posts will help new learners to get started with the languages and experienced learners alike to reinforce/refresh your understanding.
Last but not least, your feedbacks are very welcome to help me revise these posts with more contents, alternate solutions or even better ones.

Sorting List / Array

Scripts are located under the following path: collection/list/sort
The script has been structured with the following content:

Sort methods can either returns a new array or modify existing one
Sort methods with a single comparator and multiple comparators
Sort list of string in numeric order and vice versa
Sort a numeric list

Javascript

the sort method accepts the comparator function, if not specified, the elements are converted to string and ordered in UTF-16 code units order.
if supplied, the comparator function fn(a,b) is expected to return:
- a negative number for a order less than b
- a positive number for a order greater than b
- a zero for equal order
- typically, -1, 1, and 0 is used to represent these values
In Javascript, 0 value is evaluated as false when treated as boolean. This enable a nice hack when sorting the list with multiple comparator using OR operator. So, as in the example below, if the length of a and b is equal, the returned 0 value is evaluated as false, which then execute continue to invoke the second comparator byLowerCase. It makes the code looks so succinct.

c.sort((a, b) => byLength(a, b) || byLowerCase(a, b));

Another nice hack is we can take advantage of the comparator function convention to write a succinct line when sorting a numeric array by calculating the value difference of a and b. Javascript unfortunately needs this, since sort() without argument will sort by string value.

f.sort((a, b) => a - b);

Dart

Instead of using low-level comparator condition, Dart has a helper function compareTo that behaves just like the Javascript comparator

byLength(a, b) {
  return a.length.compareTo(b.length);
}

When using multiple comparators, unlike Javascript, we cannot use the OR operator hack - Dart expects a literal boolean value, so the approach is to have the comparator functions in an array that will execute the next comparator if the current one is zero (equal order)

var sortFunctions = [byLength, byLowerCase];
  c.sort((a, b) {
    var i = 0;
    var r = 0;
    while (r == 0 && i < sortFunctions.length) {
      r = sortFunctions[i++](a, b);
    }
    return r;
  });

Ruby

The idiomatic Ruby gives us the 'spaceship' <=> comparator, equivalent to comparator we have seen in JS and Dart. It does look like the body of a flying saucer from the sideview :)

def by_length(a,b)
  return a.length <=> b.length
end

Unlike Javascript and Dart, both Ruby and Python have specific sort method to either modify the current array or create a new copy of sorted array. In Ruby API, the use of exclamation point at the end of method is to indicate that the method is mutating the current object instead of making a new one. I love this idiomatic.

a.sort! {|a,b| by_lower_case(a,b) }

sort_by can be used to shorten the need of passing a and b. The use of ampersand colon is another idiom in Ruby to make even morse terse syntax

a.sort! {|a,b|  a.downcase <=> b.downcase}
a.sort_by! { |e| e.downcase }
a.sort_by!(&:downcase)

Ruby converts 0 to false in OR operation, so the same nice hack of Javascript can be done as well. Nice :)

c = a.sort {|a,b|  by_length(a,b) || by_lower_case(a,b) }

Python

Python has sorted function to return a new sorted list and the .sort to modify the current list
Instead of defining a comparator function(a,b), Python's sort and sorted have key argument which can specify either: a compare function or a tuple consisting the comparator functions. The shortest of all we have seen so far.

b = sorted(a, key=by_lower_case)
c = sorted(a, key=(len(item), item.lower()))

Go

Go has a less straightforward way of copying a list using the make and copy combo, makes it more verbose to sort that produces a new sorted array
Two ways to sort:
1. use comparator type which implements three functions: Len, Swap and Less. Multiple comparators one is not easy - need to implement a new method that consist for the logic to compare in sequential order of the comparators.
2. use Slice function, which only needs the Less function

type byLength []string

func (s byLength) Len() int {
    return len(s)
}

func (s byLength) Swap(i, j int) {
    s[i], s[j] = s[j], s[i]
}

func (s byLength) Less(i, j int) bool {
    return len(s[i]) < len(s[j])
}
a := []string{"Art", "b", "ART"}
c := make([]string, len(a))
copy(c, a)
sort.Sort(byLength(a))

// Slice method
f := []int{3, 1, 2}
sort.Slice(f, func(i, j int) bool {
 return f[i] < f[j]
})

Unlike other languages, the string to integer conversion has the golang style of returning multiple values, two values: the value and the error if any

ei, _ := strconv.Atoi(e[i])

Summary

We have seen many different features of these languages, just by exploring sorting a list problem. In the sequential posts of the series, I will try to not repeat the same language feature discussion, to keep the posts simpler and more to the point, as we are getting more skilled after this first journey. Onward Polyglots!

Vue, Angular, React Comparison Series: state management library

Arthur Christoph — Fri, 01 May 2020 00:44:13 +0000

A counter app below shows how each of the state management library is setup and used in its basic form.

React - Redux

Redux - The agnostic and minimalistic library that has become the most popular state management library in React ecosystem.
To connect react with redux, we also need to install additional react-redux library.

Provider is defined in the main file: index.js, to make the store available to child components
To access the count state, App and Child component has useSelector hook method to access the state

Vue - Vuex

Vuex - the official state management library that maintained by Vue team. Once the store object included in the main Vue instance in main.js, the $store is available to any component that needs to access the state, to commit mutation, to dispatch action, etc.

Angular - NgRx

NgRx - the library is built based on RxJs reactivity. Being Angular library, it also makes use of the typing features of Typescript to simplify implementation such as: reducer creations and promote type safety programming.

The store module is included in the main module and available to be used inside the components that inject the store object
The count value is retrieved from the state which is returned as an observable that can be extracted using async filter or alternatively with subscribe method