• Javascript arrow functions
• Factorial

Dialogue

Do you know recursion?

• Yes

Do you really know recursion?

• Yeah, I would say so

No, but do you really know recursion?

• Alright, I’ll bite

Show me the Factorial structure

• Here you go

// factorial
(n) => {
  // base case
  if (n === 0) {
    return 1
  }
  // recursive case
  return n * factorial(n - 1)
}

Could you do it if the language did not support recursion?

• I don’t know… yet but I can try

What would be a good starting point?

• Eliminating the recursive call

How would you do that?

• By abstracting out the recursive part

// factorialStructure
(toBeDetermined) => {
  return (n) => {
    if (n === 0) {
      return 1
    }
    return n * toBeDetermined(n - 1)
  }
}

• How can we infer toBeDetermined?

Lets try to reverse engineer. Can you tell that this behaves like factorial0 for input n = 0?

• Of Course, because that’s the base case

Does that mean we have factorial0?

• Yes, as long as we never reach the recursive case

Assumption: Infinity

To keep the focus of this write up on Recursion, we will assume that Infinity is a function that never produces a value.

const infinity = () => {
  return infinity()
}

So can we call this factorial0?

((toBeDetermined) => {
  return (n) => {
    if (n === 0) {
      return 1
    }
    else {
      return n * toBeDetermined(n - 1)
    }
  }
})(infinity)

• After reducing it to the following,

// factorial0
(n) => {
  if (n === 0) {
    return 1
  }
  else {
    return n * infinity(n - 1)
  }
}

• It matches the behavior of factorial0, and hence we can call it factorial0

Now that we have factorial0, can we write factorialLessThanOrEqualTo1 as the following?

// factorialLessThanOrEqualTo1?
(n) => {
  if (n === 0) {
    return 1
  }
  else {
    return n * factorial0(n - 1)
  }
}

// which reduces to
(n) => {
  if (n === 0) {
    return 1
  }
  else {
    return n * ((o) => {
      if (o === 0) {
        return 1
      }
      else {
        return o * infinity(o - 1)
      }
    })(n - 1)
  }
}

Given that this follows the behavior of factorial for input n = 0 and n = 1, it can be called factorialLessThanOrEqualTo1

So, is the following function factorialLessThanOrEqualTo2?

// factorialLessThanOrEqualTo2?
(n) => {
  if (n === 0) {
    return 1
  }
  else {
    return n * ((o) => {
      if (o === 0) {
        return 1
      }
      else {
        return o * ((p) => {
          if (p === 0) {
            return 1
          }
          else {
            return p * infinity(p - 1)
          }
        })(o - 1)
      }
    })(n - 1)
  }
}

• Yeah, but this seems a lot. There is a lot of repetition here.

Yes, I agree we can abstract out the repeating bit

What does this look like?

((makeFactorial) => {
  return makeFactorial(infinity)
})(
  (factorial) => {
    return (n) => {
      if (n === 0) {
        return 1
      }
      else {
        return n * factorial(n - 1)
      }
    }
  }
)

• I don’t know yet, I’ll have to evaluate this

How would you do that?

• I would do a single substitution. That would give us

((factorial) => {
  return (n) => {
    if (n === 0) {
      return 1
    }
    else {
      return n * factorial(n - 1)
    }
  }
})(infinity)

Can we reduce it further?

• Yes we can. That would give us…

(n) => {
  if (n === 0) {
    return 1
  }
  else {
    return n * infinity(n - 1)
  }
}

• That looks exactly like factorial0

Correct, So can we write factorialLessThanOrEqualTo1 using makeFactorial as the following?

// factorialLessThanOrEqualTo1
((makeFactorial) => {
  return makeFactorial(
    makeFactorial(infinity)
  )
})(
  (factorial) => {
    return (n) => {
      if (n === 0) {
        return 1
      }
      else {
        return n * factorial(n - 1)
      }
    }
  }
)

(please try reducing this with pen and paper if possible)

What about factorialLessThanOrEqualTo2?

• Here you go

// factorialLessThanOrEqualTo2
((makeFactorial) => {
  return makeFactorial(
    makeFactorial(
      makeFactorial(infinity)
    )
  )
})(
  (factorial) => {
    return (n) => {
      if (n === 0) {
        return 1
      }
      else {
        return n * factorial(n - 1)
      }
    }
  }
)

So is recursion a bunch of pending operations stacked on top of each other?

• True while executing

• That does work but how far can we keep going? We wouldn’t want to manually compose makeFactorial to get factorialLessThanEqualToN

I agree, lets see if we can automate this composition to work for all n values

• Where would we start? makeFactorial

Since it doesnt matter what we pass to makeFactorial for the base case i.e. factorial0, can we give it makeFactorial instead of infinity?

• Sure, that would give us factorial0 as

// factorial0
((makeFactorial) => {
  return makeFactorial(makeFactorial)
})(
  (factorial) => {
    return (n) => {
      if (n === 0) {
        return 1
      }
      else {
        return n * factorial(n - 1)
      }
    }
  }
)

Can we use the name makeFactorial instead of factorial?

• Sure, that doesn’t change the meaning. So factorial0 would look like

// factorial0
((makeFactorial) => {
  return makeFactorial(makeFactorial)
})(
  (makeFactorial) => {
    return (n) => {
      if (n === 0) {
        return 1
      }
      else {
        return n * makeFactorial(n - 1)
      }
    }
  }
)

• But why would we want to do that?

Because some names are more equal than others

Can we use the else branch to generate a recursive case?

// ?
((makeFactorial) => {
  return makeFactorial(makeFactorial)
})(
  (makeFactorial) => {
    return (n) => {
      if (n === 0) {
        return 1
      }
      else {
        return n * makeFactorial(infinity)(n - 1)
      }
    }
  }
)

• Yes, this gives us factorialLessThanOrEqualTo1 because makeFactorial(infinity) reduces to a function that behaves like factorial0 as we saw above

Can we do this more than once?

• How would we do that?

How about feeding makeFactorial to itself?

// ?
((makeFactorial) => {
  return makeFactorial(makeFactorial)
})(
  (makeFactorial) => {
    return (n) => {
      if (n === 0) {
        return 1
      }
      else {
        return n * makeFactorial(makeFactorial)(n - 1)
      }
    }
  }
)

• This feels unnatural

Is it because up until now, we were feeding makeFactorial a function that behaves like factorial for smaller inputs?

• BINGO

Well, makeFactorial IS the creator of such functions

• Ooo, but does it actually work?

Lets try, whats the output for input n = 0?

// ?
((makeFactorial) => {
  return makeFactorial(makeFactorial)
})(
  (makeFactorial) => {
    return (n) => {
      if (n === 0) {
        return 1
      }
      else {
        return n * makeFactorial(makeFactorial)(n - 1)
      }
    }
  }
)

• We can unwind this to get a flat function before applying for the input n = 0. Lets try substituting the arguments step by step

((makeFactorial) => {
  return (n) => {
    if (n === 0) {
      return 1
    }
    else {
      return n * makeFactorial(makeFactorial)(n - 1)
    }
  }
})(
  (makeFactorial) => {
    return (n) => {
      if (n === 0) {
        return 1
      }
      else {
        return n * makeFactorial(makeFactorial)(n - 1)
      }
    }
  }
)

Can we reduce it even further?

• Yes we can

// reducedStructure
(n) => {
  if (n === 0) {
    return 1
  }
  else {
    return n *
      ((makeFactorial) => {
        return (n) => {
          if (n === 0) {
            return 1
          }
          else {
            return n * makeFactorial(makeFactorial)(n - 1)
          }
        }
      })(
        (makeFactorial) => {
          return (n) => {
            if (n === 0) {
              return 1
            }
            else {
              return n * makeFactorial(makeFactorial)(n - 1)
            }
          }
        }
      )(n - 1)
  }
}

Do you know the answer for n = 0 now?

• Yes, its clearly the base case i.e. 1

What about n = 1?

• We can work it out. For n = 1, it will return the else branch i.e.

1 *
  ((makeFactorial) => {
    return (n) => {
      if (n === 0) {
        return 1
      }
      else {
        return n * makeFactorial(makeFactorial)(n - 1)
      }
    }
  })(
    (makeFactorial) => {
      return (n) => {
        if (n === 0) {
          return 1
        }
        else {
          return n * makeFactorial(makeFactorial)(n - 1)
        }
      }
    }
  )(1 - 1)

which will reduce to…

1 *
  ((n) => {
    if (n === 0) {
      return 1
    }
    else {
      return n *
        ((makeFactorial) => {
          return (n) => {
            if (n === 0) {
              return 1
            }
            else {
              return n * makeFactorial(makeFactorial)(n - 1)
            }
          }
        })(
          (makeFactorial) => {
            return (n) => {
              if (n === 0) {
                return 1
              }
              else {
                return n * makeFactorial(makeFactorial)(n - 1)
              }
            }
          }
        )(n - 1)
    }
  })(0)

Does this seem familiar?

• Yeah, its the same structure that we started with, applied to a smaller input

1 * reducedStructure(0)

• Since we already established that reducedStructure(0) evaluates to 1, we can conclude that reducedStructure(1) evaluates to 1 * 1 => 1

Can you try evaluating the same for input n = 2? (Please try this on paper)

Did you actually do it?

• Yes, it seems that no new structures appear and it self replicates until it reaches the base case at which point recursion ends and we get the output

Did we cook recursion at home?

• Yes, yes we did, YAYYYY

• But can we do this for any recursive pattern instead of just factorial?

Yes, I recommend you check out The Little Schemer. Thank you Daniel P. Friedman and Matthias Felleisen

Is everything a function?

• Always has been

Yes I do, because I am recursion God who has cracked the Y Combinator thanks to The Little Schemer but lets hope no one asks me that in an interview.

Also here’s my quicksort implementation.

def quicksort(array):
	if len(array) <= 1:
		return array
	# use last element as pivot
	pivot = array[-1]
	# assuming no duplicates
	left = [x for x in array if x < pivot]
	right = [y for y in array if y > pivot]
	return quicksort(left) + [pivot] + quicksort(right)

But people squint at me and accuse me of using extra memory.

• How do you respond to those people?

I take a deep breath and pull out my whiteboard and scribble IN PLACE QUICKSORT

• How would you do it “in place”?

Since this requires partitioning, I suppose we could partition the array in place into 2 parts and recursively sort the partitions in place.

• How would you partition it?

I guess we could split the array into 2 partitions by having 1 boundary. We can traverse the array and move items < pivot to the left side of the partition, and naturally the only items in the right partition will be items > pivot, assuming there are no duplicates going further.

• How would you move the items in place?

Easy, Swap them.

• Can I see an example? Sure, I am a visual learner so here you go.

[ 7 2 1 8 6 3 5 4 ]

Considering the last item as pivot(More on that later), we can partition the array as left having 0 items.

[ ][ 7 2 1 8 6 3 5 ] 4
     ^               ^

Since 7 > 4, 7 can stay on the right partition

[ ][ 7 2 1 8 6 3 5 ] 4
      ^             ^

2 < 4, we can move it to the left partition

[ 2 ][ 7 1 8 6 3 5 ] 4
         ^           ^

The first iteration of quicksort will result in the following array

[ 2 1 3 ][ 7 8 6 5 ] 4

• But how do you do swaps?

I guess we could maintain an index as boundary. At the beginning, since we don’t have any items on the left we can use 0 as the boundary. So for the first item < pivot with index, we would swap out item[index] and item[boundary]

array = [...]
def inplace_quicksort(...):
	...
	boundary = 0
	# use last element as pivot
	pivot = array[-1]
	# iterate till second last element
	for index in range(len(array) - 2):
		item = array[index]
		if item < pivot:
			array[boundary], array[index] = array[index], array[boundary]
	...

• Where does boundary lie, in the left or right partition?

Right

• What if the first element < pivot and thus needs to be in the left partition?

No worries, we iterate from the beginning that would result in the same swap. No harm done.

• Can you code that up?

array = [23, 87, 5, 99, 42]

def inplace_quicksort(left, right):
	global array
	if left > right:
		return
	if right - left + 1 <= 1:
		return
	# use last element as pivot
	pivot = array[right]
	boundary = left
	# iterate till second last element
	for index, item in enumerate(array[left:right]):
		index = left + index
		if item < pivot:
			array[boundary], array[index] = array[index], array[boundary]
			boundary = boundary + 1
	inplace_quicksort(left, boundary - 1)
	inplace_quicksort(boundary, right - 1)
	# place pivot in between left & right partitions
	# by shifting it from extreme right to the boundary position
	while right > boundary:
		array[right], array[right - 1] = array[right - 1], array[right]
		right = right - 1

• Does pivot always has to be the last item?

No, we can use any random item from the array as pivot. Although, a good pivot partitions left and right equally.

• How can I get the best pivot?

Finding the med… https://stackoverflow.com/questions/164163/quicksort-choosing-the-pivot here you go.

• Are you a god?

I might be.

What is a bit?

A bit can be 1 or 0

What are bits?

A sequence of bits. 10110100

Can we only have 8 bits at a time?

No, we can have infinite length of bits

What is bit size of 10110100?

8, since it has 8 bits

What do bits represent?

Bits can be set ie 1 or unset ie 0

OPERATIONS

Can we toggle bits from set to unset and vice versa?

Yes we can. Thanks NOT operation

What is NOT of 10110100?

01001011

Is there a shorthand for NOT OPERATION?

Yes, there is. ~. ~10110100 = 01001011

What are other ways we can combine 2 bits?

We can set the result bit if and only if both the bits are set. Thanks AND Operation.

Is there a shorthand for AND OPERATION?

Yes, there is. &. 11010111 & 01011010 = 01010010

Can we set a bit if either of the bits are set?

Yes, thanks OR Operation

Is there a shorthand for OR OPERATION?

Yes, there is. |. 11010110 | 01011010 = 11011110

Can we set a bit if and only if both the bits are different?

Yes, thanks Exclusive Or(XOR) Operation

How about shifting bits left or right?

Yes, thanks to LEFT SHIFT and RIGHT SHIFT Operations

Shifting 11010110 left by 1 = 10101100

Shifting 11010110 right by 1 = 01101011

How can we shift 2 bits to left for 11010110?

We can drop left 2 bits and pad right 2 bits by 0

How about shifting right 2 bits?

We can drop right 2 bits and pad left 2 bits by 0

Are there shorthands for LEFT SHIFT and RIGHT SHIFT?

Yes, LEFT SHIFT is << and RIGHT SHIFT is >>

Shifting 11010110 left by 1 = 11010110 << 1 = 10101100

Shifting 11010110 right by 1 = 11010110 >> 1 = 01101011

BIT MASKS

What is a bit mask?

A bit mask is a bit pattern. 1s in the mask defines the bits we want to keep and 0s we want to discard

What does this bit mask represent 00010000?

It preserves the 5th bit from right and discards the rest

How can we get the 5th bit of a bit pattern?

By using a bit mask which preserves the 5th bit

How do we use this bit mask on a bit pattern?

Lets solve this issue for a simple case for the bit pattern 1

How can I check if the bit is set or unset?

By using the bit mask 1

How do I use the bit mask 1 on bit pattern 1 to get the first bit?

By using AND operation

So, how would we get the 5th bit of a bit pattern?

By BIT_PATTERN & 00010000

How would we know if the 5th bit is set using the above operation?

If any of the bit is set, it means the 5th bit is set

Is there any other way to achieve the same result?

We could use bit shifts

And how would we do that?

• By shifting 5th bit to the 1st position and apply AND with 1

(BIT_PATTERN >> 4) & 1

Can we generalize it?

NTH_BIT = (BIT_PATTERN >> (n - 1)) & 1

How can we set the 5th bit?

How can we toggle the 5th bit?

How can we compose bit masks?

By using OR

How can we subtract bit masks?

A minimal config

jest.config.js

module.exports = {
 transform: {
   "^.+\\.jsx?$": `<rootDir>/jest-preprocess.js`,
 },
 moduleNameMapper: {
   '^.+\\.(css|style|less|sass|scss)$': 'identity-obj-proxy',
 },
 transformIgnorePatterns: [ '!node_modules/',],
 testEnvironmentOptions: {
   url: `http://localhost`,
 },
}

Further Reading

• Jest configuration docs
  • https://jestjs.io/docs/configuration
• identity-obj-proxy docs
  • https://github.com/keyz/identity-obj-proxy

jest.preprocess.js

const babelOptions = {
  // your babel config goes here
};

module.exports = require('babel-jest').default.createTransformer(babelOptions);

Further Reading

• Babel docs
  • https://babeljs.io/docs/en/presets/
  • https://babeljs.io/docs/en/plugins

You want coverage reports

jest.config.js

module.exports = {
...
 collectCoverage: true,
 coverageDirectory: 'coverage',
 reporters: ['default', ['jest-junit', { outputDirectory: 'reports' }]],
...
}

Further reading

• Reporters
  • https://jestjs.io/docs/configuration#reporters-arraymodulename--modulename-options

You want to enable/add path alias support

jest.config.js

const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('./jsconfig.json'); // or tsconfig.json

const paths = pathsToModuleNameMapper(compilerOptions.paths, {
  prefix: '<rootDir>/',
});

module.exports = {
...
    moduleNameMapper: {
        ...paths,
        // other path aliases you want to add manually
    }
    ...
}

Your project uses other file extensions ie svg/gql/…

You need transformers Here’s how you would add transformers for .gql & .svg files. You will need to add them as dev dependencies.

jest.config.js

module.exports = {
...
  transform: {
    '\\.(gql|graphql)$': '@graphql-tools/jest-transform',
    '^.+\\.svg$': 'jest-transformer-svg',
    ...
  },
...}

Further Reading

• Transformers
  • https://jestjs.io/docs/code-transformation

Setup file

• Why you need this?
  • When you have Provider wrappers in your app ie SnackbarProvider, ThemeProviders, you might need to setup a custom render function which automatically wraps your Component to be tested with the necessary wrappers.

jest.setup.js

import '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect'; // needed for assertions
import React from 'react';
import { render } from '@testing-library/react';
// import all your Providers here

const AllTheProviders = ({ children }) => {
  return <Provider>{children}</Provider>;
};

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options });

export * from '@testing-library/react';

export { customRender as render };

You want to run jest

npx jest

Add it as a script to package.json package.json

{
  "scripts": {
    "test": "jest"
  }
}

Further Reading

• Jest CLI options
  • https://jestjs.io/docs/cli

You want to see how tests are written?

• Codevolution
  • React Testing Tutorial
• The Net Ninja & Laith Academy
  • React Testing Library Tutorial

While testing

You want to test Apollo graphql

• Here’s how to set it up
  • https://www.apollographql.com/docs/react/development-testing/testing/
• Here’s a really neat way to set it up along with preliminary debugging
  • https://www.swarmia.com/blog/debugging-apollo-graphql-mockedprovider/
• Is there any way to make this easier?
  • I pass my mocks as second argument to the render function
  • I have a utility to create the mock request-response entity
  • Here’s how it looks like

    const {...} = render(<Component {...props}/>, MakeResponses({
      'query-name': {
        params: // query params go here,
        data: // response goes here
      },
      ...
    }))
    

You want to simulate browser events - Click/Change/…

• https://www.pluralsight.com/guides/simulate-browser-events-react-react-testing-library

You are facing SOME_ENV_VAR not defined

You can define global variables by jest.config.js

module.exports = {
  ...,
  globals: {
    ENV_VAR_NAME: VALUE
  },
  ...
}

Further Reading

• Globals Object
  • https://jestjs.io/docs/configuration#globals-object

You want to mock

You want to mock a npm dependency

If the dependency is a commonjs module, you can do

jest.mock('dependency', () => ({
  default: jest.fn(),
}));

Assuming the dependency is exported as default

• For named exports, you can do

jest.mock('dependency', () => ({
  namedExportedFunction: jest.fn(),
}));

• If the dependency is es6 module, you can do

jest.mock('dependency', () => ({
  __esModule: true,
  default: jest.fn(),
  namedExportedFunction: jest.fn(),
}));

Further Reading

• Jest Mocks
  • https://jestjs.io/docs/mock-functions
  • https://medium.com/@rickhanlonii/understanding-jest-mocks-f0046c68e53c

You want to mock a Component

For example, You want to mock Route to bypass authentication. Assuming you have the following folder structure and Route is the default export

...
|-Route
  |- index.js

You can add the Route mock at Route/__mocks__/index.js

Route/mocks/index.js

function MockRoute({children}) {
  return (
    <>{children}</>
  );
};

Route can be automatically mocked by placing the following snippet in your test file

jest.mock('path/to/Route');

You want to mock a Context

AuthProvider has the following state

const AuthContext = React.createContext({
  user: null,
  login: () => {},
  logout: () => {},
});

You can mock AuthProvider by AuthProvider/mocks/index.js

const AuthContext = React.createContext();
const AuthState = {
  user: null,
  login: jest.fn(),
  logout: jest.fn(),
};

export default function AuthProvider(){
  return (<AuthContext.Provider value={{
    user: null,
    login: () => {},
    logout: () => {},
  }}>
    {children}
  </AuthContext.Provider>);
}

The day I started working out my arms were fucked for some days and I thought it was ergonomics.

Why trackball?

In the thrill of trying something new, on the 10th of January 2023 my lizard brain bought a Logitech Ergo M575 because trackballs are better than mice for health.

How is it different from a traditional mouse?

This is a thumb trackball mouse. The other variant of trackball mice are finger trackballs.

Finger trackballs look better for precision relative to thumb trackballs but thats just from watching people playing with it on youtube.

How have I been using it?

I use my trackball for both gaming and work. When I am gaming, the trackball stays on the usual position ie right side of the keyboard. When I am working, it stays below the keyboard because its better for me to move from home row toward myself.

I have a 45 degree tent for the trackball so my palm is at around 90 degrees from the tray.

Have I been using acceleration?

Yes, I use Jump acceleration. No I do not know the difference between the types of acceleration but Jump feels the best for me. I use rawaccel for acceleration settings. I haven’t setup acceleration on linux yet. Most of the trackballers in the community use acceleration as well.

Whats the curve?

What is my conclusion for now?

For work, its the best for me as a programmer. Its good for productivity and certain types of games where you don’t need reflexes. I had alot of fun on this playing Civilization.

What am I looking upto next?

I am going to play games on this thing for a while and record my observations. I am also going to buy a finger trackball soon so I can play better.

Do I have a youtube channel where I play with the trackball?

Jarusll

What is it?

Code discoverability is how easy it is for a developer to find existing functionalities and dependent functionalities.

How to rate discoverability

• How easy is to traverse indirections?
• How declarative is the business logic?
  • Declarative code describes “what” as opposed to imperative code which describes “how”. It describes the code intent closer to business logic.

How to achieve it?

Code Browsers

Code browsers index all the primitive components of codebase. It could be Classes or functions or any abstraction provided by the language. Some of the best code browsers I’ve used are the

Pharo’s system browser

Credit - https://files.pharo.org/

Eclipse’s Java browsing perspective

Credit https://querix.com/

Visual Studio’s object browser

Credit - https://matthiasfriedrich.gallerycdn.vsassets.io

Edit: 19/02/2023

Outliners

VSCode’s Outline view

I heavily use the outline view to have a birds eye on the file although its not as beneficial in React

Regex

Good’ol Grep/Ripgrep REGEX RULES!!! Regex would be my last option along with data wrangling.

Tag browser

Tags generated by ctags can be used as well to navigate the codebase.

Intuitive interfaces

For functional programming It would be sensible function signatures like Hoogle.

For OO It would be Interfaces. I believe you could search classes by receives and sends clause. Pharo’s supports this.

Here’s a thread where I asked developers how they go about getting comfortable with a new codebase.

What do you start with?

Actions

What are Actions?

• User interactable actions
• Events in the application logic

What does an action look like?

Its a javascript object

{
	"type": String,
	"payload": JSONValue
}

The type is a string constant typically representing an action name. The payload is the data associated with the action event

Eg

{
	"type": "ADD_POST",
	"payload": {
		"tags": ["primer"],
		"text": "What do you start with?..."
	}
}

Would it be convenient if we had helper functions to create the action objects?

Yes, they are called action creators

function addPost({tags, text}){
	return {
		type: "ADD_POST",
		payload: {
			tags,
			text
		}
	}
}

Can we do better?

Yes, createAction, thanks @reduxjs/toolkit

const { createAction } = require('@reduxjs/toolkit')

addPost = createAction('ADD_POST')

addPost({tags: ["primer"], text: "What do you start with?..."})
	{
		type: 'ADD_POST',
		payload: {
			tags: [ 'primer' ],
			text: 'What do you start with?...'
		}
	}

Whats the next step?

Reducers

What are reducers?

Reducers manage your state using prevstate and action to give you nextstate

PrevState + Action => NextState

What do they look like?

Here’s a trivial example of a reducer

let initialState = 0
function counterReducer(state = initialState, action){
	switch(action.type){
		case "INCREMENT":
			return state + 1
		case "DECREMENT":
			return state - 1
		default:
			return state
	}
}

counterReducer(10, {type: "INCREMENT"})

11

Can we do better?

Yes, createReducer, thanks again @reduxjs/toolkit

const { createReducer } = require('@reduxjs/toolkit')

let increment = createAction('counter/increment')
let decrement = createAction('counter/decrement')

initialState = 0
counterReducer = createReducer(initialState, (builder) => {
	builder
	.addCase(increment, (state, action) => state + 1)
	.addCase(decrement, (state, action) => state - 1)
})

counterReducer(10, increment())

11

Can we couple counter actions & counter reducer for convenience?

Yes, its called a slice

Why is it called slice?

Because they are a slice of the global state

const { createSlice } = require('@reduxjs/toolkit')

initialState = 0
const counterSlice = createSlice({
	name: 'counter',
	initialState,
	reducers: {
		increment: (state) => state + 1,
		decrement: (state) => state - 1
	},
})

increment = counterSlice.actions.increment
counterReducer = counterSlice.reducer
counterReducer(10, counterSlice.actions.increment())

11

From this point on, reducers and slices may be used interchangeably

How to decide what reducers to make?

Every reducer in the store(global state) is associated with a key

Eg - The value returned by counterReducer will be associated with key count in global state.

{
	"count": counterReducer
}

So one good way to figure out the reducers is by determining the states you will access.

Whats the next part?

Store

Whats a store?

The store is the global state

How do you make a store?

const { configureStore } = require('@reduxjs/toolkit')
const store = configureStore({
	reducer: {
		count: counterSlice.reducer
	}
})

How do you change state?

By dispatching actions

store.dispatch(increment())

{ type: 'counter/increment', payload: undefined }

How do you access the state?

store.getState()

{ count: 1 }

Has redux come a long way?

Yes, thanks @reduxjs/toolkit

What is a 1D peak?

An element in a 1D array which is greater than its neighbour

Which element has the least number of neighbours?

A one without any, Singleton

Is 7 a peak in [7]? – Base case 1**

Yes, an uncontested victory.

Whats the peak in [7, 8]? – Base case 2

8, max(array) if array has only 2 elements

What the next element which has the least number of neighbours?

Edges, since they have only 1 neighbour

Is 7 a peak in [7, 3, ...]? – Base case left edge

Yes, since 7 > 3

Is 7 a peak in [..., 3, 7]? – Base case right edge

Yes

Is 7 a peak in [..., 3, 7, 4, ...]? – Base case mid

Yes, 7 > 3 and 7 > 4

Whats the peak in [1, 2, 3, 4, 5], a strictly increasing array?

5

Whats the peak in [5, 4, 3, 2, 1], a strictly decreasing array?

5

Whats the peak in [5, 5, 5, 5, 5], a strictly leveled array?

5

Is 7 a peak in [..., 3, 7, 9, ...]?

No, since 9 > 7

Where should we look for a peak next?

[9, ...], since it has atleast 1 peak

Reason, for the array [9, x, ...]

• Considering x is less than 9, in this case 9 is a peak
• Considering x is equal to 9, in this case 9 is a peak
• Considering x is greater than 9, then the slice [x, ...] contains the peak element – Case right

Whats the peak in []? – Base Case 0

None

How about finding all the peaks?

Can be done using the same code and complete search

peak([...])
	[] => None -- Base case 0
	[x] => x -- Base case 1
	[a, b, ...] and a >= b => a -- Base case start
	[..., y, z] and y <= z => z -- Base case end
	[..., k, l, m, ...] and k <= l and l >= m => l -- Base case mid
	[..., k, l, m, ...] and k >= l => peak([..., k]) -- case left
	[..., k, l, m, ...] and l <= m => peak([m, ...]) -- case right

What is maximum subarray sum of {}?

• 0

What is maximum subarray sum of {1}?

• 1

What is maximum subarray sum of {1, -2}?

• 1, because including -2 will make the sum negative

What is the subarray sum of {1} in the considered array {1, ...}?

• The sum of subarray {1} is 1

Assuming there is potential positive sum subarray head, should we include the subarray {1} in the array {1, ...}?

• if we include {1}, it will bring the subarray sum up by 1
• So yes

Should we include the first two elements {1, -2} for subarray sum in the array {1, -2, ...}?

• The sum of the two elements is -1
• Assuming there is a potential positive sum subarray ahead, including the elements will bring down the sum by 1
• So no

What about {4, -3} in the array {4, -3, ...}?

• The sum of {4, -3} is 1, so yes

What about {4, -3} in the array {4, -3, 1}?

• If we do add the subarray sum {4, -3}, it will bring up the subarray sum of {1} by 1.
• But clearly 4 is the maximum subarray sum
• We need more clarity

What about {4, -3} in the array {4, -3, 10}?

• If we do add the subarray sum {4, -3}, it will bring up the subarray sum of {10} by 1.
• In this case, the subarray {4, -3} did help

How do we overcome this ambiguity?

• By storing the subarray sum at every point in traversal

What is the maximum subarray sum for the following array?

|       |   |    |   |
|-------|---|----|---|
| Array | 4 | -3 | 1 |

• Starting with the first element, since its positive

  Array	4	-3	1
  Subarray Sums	4

• 4 + -3 = 1. Since 1 > 0, we do not reset the sum

  Array	4	-3	1
  Subarray Sums	4	1

• 1 + 1 = 2.

  Array	4	-3	1
  Subarray Sums	4	1	2

We have calculated all the subarray sums. Max(4, 1, 2) = 4. Hence the maximum subarray sum for {4, -3, 1} is 4

What about the array

• Same for first element

  Array	4	-5	3	-2	17
  Subarray Sums	4

• 4 + -5 = -1. Since -1 < 0, we reset the subarray sum to 0.

  Array	4	-5	3	-2	17
  Subarray Sums	4	-1

• Since sum has been reset, it’ll be 3 for {3}

  Array	4	-5	3	-2	17
  Subarray Sums	4	-1	3

• 3 + -2 = 1, which can increase the sum of potential subarray ahead

  Array	4	-5	3	-2	17
  Subarray Sums	4	-1	3	1

• 1 + 17 = 18

  Array	4	-5	3	-2	17
  Subarray Sums	4	-1	3	1	18

Max(4 , -1 , 3 , 1 , 18) = 18, Hence 18 is the maximum subarray sum

Is this better than 0(n²)?

• Yes, because its linear. Thanks Kadane.

Do you know what a permutation is?

Yes

Can you tell the next lexicographic permutation for {2, 1, 3}?

• No

What is the permutation of {1, 2, 3}?

• {1, 2, 3}
• {1, 3, 2}
• {2, 1, 3}
• {2, 3, 1}
• {3, 1, 2}
• {3, 2, 1}

What are the bounds of the above permutations?

From {1, 2, 3},strictly increasing to {3, 2, 1},strictly decreasing.

Can we say that a strictly decreasing arrangement has run out of its permutation?

Yes

What is the direction of making a permutation?

From left to right

Whats the direction of backtracking a permutation?

From right to left

Whats a strictly decreasing arrangement in {1, 3, 2} from end?

• {3, 2}

Whats a strictly decreasing arrangement in {2, 1, 3} from end?

• {3}

  Arrangement	Vacant
  {2, 1}	{3}

Have we run out of arrangements for 1?

Yes

What should replace 1?

The next successor in the vacant pool

| Arrangement | Vacant |
|-------------|--------|
| `{2, 3}`    | `{1}`  |

What should the next step be?

Appending sorted Vacant to the Arrangement because every new permutation starts sorted

| Arrangement | Vacant |
|-------------|--------|
| `{2, 3, 1}` | `{}`   |

Is {2, 3, 1} the next permutation after {2, 1, 3}?

Yes

Heres another, {4, 6, 2, 3, 8, 5, 1}

| Arrangement             | Vacant |
|-------------------------|--------|
| `{4, 6, 2, 3, 8, 5, 1}` | `{}`   |

Determining the strictly decreasing arrangement from end

| Arrangement               | Vacant |
|---------------------------|--------|
| `{4, 6, 2, 3, *8, 5, 1*}` | `{}`   |

Moving the strictly decreasing to Vacant space

| Arrangement    | Vacant      |
|----------------|-------------|
| `{4, 6, 2, 3}` | `{8, 5, 1}` |

3 has run out of its arrangements, its successor in Vacant space is 5. Replacing 3 with 5

| Arrangement    | Vacant      |
|----------------|-------------|
| `{4, 6, 2, 5}` | `{8, 3, 1}` |

Sorting Vacant space and appending to Arrangement

| Arrangement             | Vacant |
|-------------------------|--------|
| `{4, 6, 2, 5, 1, 3, 8}` | `{}`   |

In the list 1->2->3->4->5, S and F point to 1. What are S and F when S moves by 1 element and F moves by 2 elements?

• S is slow pointer and F is fast pointer

Will S travel half the distance of F at any given point?

• Yes, since F is twice as fast as S

Will S be at middle of list when F is at the end?

• Yes

Do we have our base case and reduction case?

• Yes we do

What is the permutation of { }?

{ }

What is the permutation of {1}?

{1}

What is the permutation of {1, 2}?

• {1, 2}
• {2, 1}

What is the permutation of {1, 2, 3}?

• {1, 2, 3}
• {1, 3, 2}
• {2, 1, 3}
• {2, 3, 1}
• {3, 1, 2}
• {3, 2, 1}

Which of them start with 1?

• {1, 2, 3}
• {1, 3, 2}

What are the rest of these elements?

• {2, 3}
• {3, 2}

Do they resemble something?

• No

What about the permutation of {2, 3}?

• Yes

What is append x on {y, z}?

• {`{x, y, z}`}

What is append x on each of {y, z}?

• {x, y}
• {x, z}

Can we say the permutation of {1, 2, 3} = {append 1 on each permutation of {2, 3}}, {append 2 on each permutation of {1, 3}}, {append 3 on each permutation of {1, 2}}?

• That’s a mouthful.

What is {append 1 on each permutation of {2, 3}}?

• {append 1 on each permutation of {2, 3}}
• {append 1 on each {{2, 3}, {3, 2}}}
• {{1, 2, 3}, {1, 3, 2}}

What about {append 2 on each permutation of {1, 3}} and {append 3 on each permutation of {1, 2}}?

• {{2, 1, 3}, {2, 3, 1}, {3, 1, 2}, {3, 2, 1}}

What do we get when we combine them all?

• {{1, 2, 3}, {1, 3, 2}, {2, 1, 3}, {2, 3, 1}, {3, 1, 2}, {3, 2, 1}}
• i.e., permutation of {1, 2, 3}

Do you know what a permutation is now?

• Yes

Did you have fun?

• Go have some cookies.

I have timestamped them with my school grades because I don’t remember exact years.

Nokia 3310c

• 5th - 7th grade

Credit - https://archiwum.allegro.pl/oferta/nokia-3310c-plus-i7246256743.html

My first ever personal phone. It was Java based. I rocked this for about 2 years. I played so many games on this thing. Some of the ones I can recall is Spiderman, Street fighter ripoffs, Tomb raider. And ofc bounce.

I used to spend hours downloading apps & games. And it actually took time because I had to find the ones for my phones resolution. Yes, Apps came with their own resolution. And not only that, app compatibility wasn’t guaranteed. The only way to know it was to run it. Some of the best apps I can recall for this phone are Facebook, Ebuddy, Opera Mini, UCBrowser. Gameloft games were big on Java.

Samsung Corby Pro B5310

• 7th grade - 9th grade

{/* FIXME corby /} {/ */}

*Credit - https://www.techspot.com/products/smartphones/samsung-gt-b5310-corby-pro-genio-slide.35659/

The first touch & multitasking phone for me. I discovered that feature after a year. I din’t even know Java phones had multitasking. And ofcourse the slider keyboard.

Having this thing in my pocket I no longer felt like a boy, I was a grown up man.

Nokia N91

• 9th grade - 10th grade

Credit - https://www.gsmarena.com/flashbacknokian91-news-40659.php

My first Symbian phone. This was during when N95 was the coolest phone around. But I couldn’t get one so I got an N91.

This thing was a chonky boi. I learnt alot with this phone. I tried jailbreaking & emulation. I used to emulate sega genesis & doom on this. And if you rotated & mapped the music buttons It actually felt like a handheld, just like N95.

This would be end of T9 layout for me.

Samsung Galaxy Y GT-S5360

• 10th Grade

Credit - https://gadgets360.com/samsung-galaxy-y-556

My first Android phone. I explored rooting & custom roms with it.

Installing Tablet roms on the small screen was fun.

Iball Slide Tablet

• 10th grade - 12th grade

Credit - https://gadgets360.com/iball-slide-co-mate-3439

My first tablet, I bought this to read. I only used this to read, didn’t really tinker around with it. I read alot.

Micromax Bolt A064

• 11th grade - 2nd year Uni

Credit - https://gadgets360.com/micromax-bolt-a064-2026

This was during the time When I got my first PC & I lost interest with mobile tinkering.

I still tinkered with it with Xposed modules. This was the peak of android mods. I maximised my battery life with Greenify, Amplify. Customized my ui with XBlast, hide my details with XPrivacy.

Vivo Y20

• 2nd year Uni - Current

Credit - https://www.gsmarena.com/vivoy202021-pictures-10658.php

I do not mess around with this phone. Its my daily driver & I want stability. I do not care about launchers or battery life or performance because it has it all. I want things to just work and it does.

I plan to use it as long as I can. When I get another phone(which is not anytime soon), this will become my emulation phone. I’ll buy a telescopic controller & play games on it.

Cool emacs gifs

I plan to make something like this. Someday.

magit

The best git interface I’ve ever used. I cannot imagine using anything else but this for git.

which-key

Shows completion keybinds for incomplete keys. Gets you familiar with modes.

ivy + ivy-rich

Completion engine for emacs. Comes with rich observability features like

• Entities(command, function, variable…) docstring
• Keybind of commands

and much more features to make using the minibuffer easy.

golden-ratio

Automatically expands the window you switch to. Very big, split like crazy and stop caring.

helpful

A better *help* buffer. Just because its better.

keycast

A nice to have utility to see which commands are being executed.

There are other modes as well which I use, I only included utility packages here. You can check out my .emacs config here

Golden Ratio - https://github.com/roman/golden-ratio.el

Says what it does, gets my thumbs up.

MechVibes is a cool program to emulate mechanical keyboard sounds.

Get here MechVibes

I use for my youtube videos.

Prereq

• ivy

Steps

Enable counsel-mode in your init.el or .emacs by (counsel-mode 1)

2 things

• Variety
• Speed

Variety

I have noticed about myself that I like heterogeneity whether it comes to programming or food or games. They are like flavours I want to try and I want to try all of them. It helps me grow as an individual. Its the same reason why I tried Object oriented programming when I was a hardcore functional programmer, why I mix my food unevenly so that every bite will taste different and why I explore every part of the game so that I don’t miss out on an experience. Maybe its evolution playing that I am constantly on the hunt for something new.

Speed

This one’s easy, I just don’t want to be slow. I have very limited time and I want to be good at my art which means being efficient. I am speedrunning experiences. It could be as simple as navigating my computer to planning my future. Its the same reason I use i3wm and remap every shortcut I can utilize to make my life easier. Its the same reason why I try to overengineer and abstract my code to keep it lean.

It turns out that everything I do in my life tries to maximize variety and minimize time.

I have kept things to myself all my life, because I found it hard to open up to people. And that did not help. Communication is what makes us humans(probably).

I have definitely matured to open up. Now, I try to be an open book. I want people to see me as me. I want them to know where I come from.

This diary will be my own corner. Also it’ll help me keep track of things.

Have a good one stranger.

Motivation

I have been playing a lot of Oracle in Dota. I like the fact that he’s a double edged sword. The spell combos feel like a mini game itself and I think I can make a game out of it.

Gameplay loop

For those who don’t know Oracle’s spells, heres a quick introduction

Fortune’s End

A channeled ability which roots the enemy. Can be casted on enemy or ally. When casted on ally, purges all debuffs. When casted on enemy, purges all buffs.

Fate’s Edict

Can be casted on ally as well as enemy. When casted, it disarms & saves the player from magic damage.

Purifying Flames

Can be casted on ally as well as enemy. It gives a burst damage and then heals overtime. The heal is greater than the damage given.

False Promise

Can be casted on ally. It delays all the damage and healing during False Promise and healing is doubled.

Combos

Heal allies

Cast Fate’s Edict to save from magical damage, stack them with Purifying Flames so they get healing without any damage.

Punish enemies

Cast Purifying Flames, wait for cooldown, Cast one more Purifying Flames quickly followed by Fortune’s End to purge healing.

Mobs

Since it comes from Dota, enemies will have both magic and pure damage.

Surrounding World

I haven’t decided on the world. I would probably make it like mario’s worlds.

2D or 3D?

2D, since I will be the only one making it.

Monetization?

NO, since its Valve’s IP.

In emacs, You are either

• Invoking a function through a key press
• Invoking a function manually

Describe Mode^emacs-modes C-h m

Describe mode gives you a list of all enabled Minor modes, functions in the major mode & all their key binds.

I skim through describe-mode the first time I am using a mode. The functions are generally named as namespace-like-action-like-something-else. I remember the pattern so I can type out these functions with some autocompletion engine^completion-engine. I lookup the keybind for that action as well, after using it for a couple of times it becomes second nature.

Describe Function C-h f

Describe function brings up the documentation about a function by name.

I use this almost everytime to find out about a function.

Describe Key C-h k

Describe key gives you the command associated with the key/chord in current mode.

I use this to find the function associated with a key/chord.

Describe Symbol C-h o

Describe symbol gives you the documentation of elisp symbols.

Use this when you are writing elisp code & want to find out about inbuilt symbols.

Describe Variable C-h v

Describe variable brings up the documentation about a variable by name.

I rarely use this as I am not an advanced user. But its good to have for customization.

Where is?

The where-is function returns you the keybind of a function. Use it when you know the function but not its keybind.

Completion engine & Minibuffer goodies

I would recommend any completion engine which works out for you.

I like expanded minibuffer so I can see suggestions at a time.

I personally use ivy because it comes with expanded minibuffer. There are many options for completion engines but an expanded minibuffer is very nice to have.

Keycast mode

This mode shows the keychord & the associated function on the modeline. I like having this so I can learn emacs. Totally optional but a nice to have.

Why best friends?

I believe that one of the biggest difference between a professional and a beginner is that the professional has gotten comfortable in an environment which is pretty hostile to them.

If you foster exploration^xah-emacs-guide for yourself, you can get comfortable really fast.

Godspeed

A properly named message communicates well. The developer does not have to look for the implementation. This has more to do with design, but it has been in Smalltalk’s genes since its inception.

What is an intention-revealing method? A message which

• Reveals intention
• Hides implementation
• Gives return type hint

Intention revealing names answer what instead of how.

Let’s decide on a name for a method which looks up by a key in a Dictionary

• binarySearchByKey: - Bad, reveals how it works, doesn’t hint at return type
• searchValueAt: - Communicates what it does, Good
• valueAt: - Able to communicate while being shorter, Better
• at: - Best, takes Dictionary in context as key-value pairs

This might seem a very simple pattern, but If you can make this happen in your codebase, you are a god.

What did I start with?

2018

My first editor was Emacs^emacs. Why did I choose emacs? I couldn’t figure out how to exit Vim^vim.

I got really into programming with Scheme^scheme. And I liked it so much I decided to choose the editor with its roots in it.

Learning emacs was just getting comfortable with its keybinds. The power of emacs comes from extensibility. Although I am a casual lisp programmer, I never bothered to learn elisp and extend emacs to my liking.

Why did I switch?

2020

The elisp^elisp configs didn’t make any sense. I never got the grasp on emacs modes and I felt slow in emacs. Although I am partly to blamed for not harnessing its power.

I decided to switch to Vim in 2020. I like that just about any action is 1-3+ click/s away. I felt fast, really fast. I felt so fast that I started using it everywhere. I use Vimium in my browser. I use i3wm which has vim-like keybinds. I use vim keybinds in online IDEs for prototyping. I wish it was everywhere.

Why am I switching again?

2022

I have recently been tinkering with smalltalk. The Pharo(or any smalltalk) IDE has been one of the best IDEs I have ever used. I know when I miss vim because I feel slow. But I never felt slow in Pharo’s IDE. Its because you are able to reach just about anywhere within few clicks. I realized I was getting more done and was managing very less code. It made me think about extensibility.

And this made me change my mind. Its about time I did emacs properly.

What do I plan to achieve?

One day I will start my day by opening emacs and I’ll end it by closing it. This is what I am aiming for.

What about Vim?

I will use vim for quick edits. I will continue using it in my browser. Emacs support in browser is not functional. The motions in vim are very powerful and I plan to use Spacemacs after I get comfortable with elisp.

Smalltalk Documentation follows CRC^1(Class, Responsibilities & Collaborators)

• For those who don’t know what CRC is, it’s a tool that helps design objects.
• A CRC card consists of Class name at the top, responsibilities on the left side & collaborators on the right.
• Since a card models only one object, it enables rapid prototyping. It is feasible to go through many iterations before settling on an implementation.
• 

Smalltalk Documentation talks to you

I noticed this in Pharo’s^2 documentation. Classes have comments as they talk to you. They give you an overview of what they are and what they can do. They also tell you how you get started with them with some examples.

Example from Pharo’s documentation for Point

    I represent an x,y pair of numbers usually designating a location on the screen.

    My instances are created either using the message `@` or `x:y:` or `r:degrees:` as follows:

    | pt |
    pt := 10@20.
    pt x
    >>> 10
    pt y
    >>> 20

    | pt |
    pt := Point x: 10 y: 20.
    pt x
    > 10
    pt y
    > 20

    I define many nice messages that deal with point such as:
    - arithmetic such as \+, \*, reciprocal, min, abs,
    - comparison \<, \<=, \=, \>, \>=, closeTo:
    - geometry such as sideOf:, to:intersects:to:,
    - polar coordinates,
    - extent such as scaleTo:
    - transformation such as negated, translatedBy:, scaleBy:
    - rounding with roundTo:, roundUpTo:, truncateTo:, truncated

How cool is that? That makes me wanna take Point for a coffee. I have adopted this style of documentation for just about everything.

Inbuilt support for documentation

The Smalltalk IDE’s are one of the most mature IDEs I have ever used. They have inbuilt support for documentation along with the class. Although this might be more of an IDE feature, it has been since the beginning(probably).