Forem: Aishanii

Day 0: System Architecture basics

Aishanii — Tue, 25 Mar 2025 16:22:45 +0000

Introduction📚

This first post will just be an introduction to basic terminologies and key concepts one should know before we start working with case studies. I aim to write about the foundational concepts which are useful for system design interview.

High-Level Architecture of a Computer System 📕

System design begins with understanding the high-level architecture of a computer. The fundamental building blocks include:

Bits and Bytes: The smallest unit of data in computing is a bit (0 or 1). Aggregations of bits lead to bytes (8 bits) and further into kilobytes, megabytes, gigabytes, and terabytes.
Storage: Storage devices can either be Hard Disk Drives (HDD) or Solid State Drives (SSD). SSDs are more expensive but significantly faster in data retrieval, boasting speeds up to five times that of HDDs.
RAM: Random Access Memory (RAM) is volatile memory that serves as the primary workspace for currently running applications and data. It provides rapid read and write access, which is crucial for efficient processing.
Cache Memory: This is a smaller, faster memory located closer to the CPU, designed to decrease data access times by storing frequently used data.
CPU: The central processing unit (CPU) is the brain of the computer that executes instructions by compiling high-level programming languages into machine code.
Motherboard: Acts as the communication backbone that interconnects all components.

Production-Ready App Architecture 📗

The architecture of a production-ready application integrates several key components:

CI/CD Pipeline: Continuous Integration and Continuous Deployment automate the code deployment process, ensuring seamless transitions from development to production without manual intervention.
Load Balancers: These distribute incoming user requests across multiple servers, ensuring reliable performance during peak traffic.
External Storage Solutions: Storage systems are kept external to the main production server, interlinked through a network.
Logging and Monitoring Systems: These systems record and analyse application performance, allowing real-time error detection and user notification through platforms like Slack.

Debugging Process 📘

When an error occurs, the debugging process comprises:

Error Identification: Use logs to find patterns or anomalies.
Replication: Recreate the error in a non-production environment.
Analysis: Employ tools to inspect the running application.
Hotfix Deployment: Implement temporary fixes swiftly to restore functionality.

Key Principles of System Design🥸

Good system design embodies several essential principles:

Scalability: Systems must accommodate increases in users and data traffic gracefully.
Maintainability: Future developers should be able to understand and improve the system.
Efficiency: Resources need to be optimally utilized.

Additionally, systems must be designed with the understanding that failures are inevitable, ensuring they remain robust under adverse conditions.

CAP Theorem 🧢

The CAP theorem, formulated by Eric Brewer, delineates key trade-offs for distributed systems:

Consistency: All nodes must reflect the same data state.
Availability: The system remains operational, serving requests consistently.
Partition Tolerance: Operations persist even in the face of network failures.

A distributed system can only achieve two out of these three characteristics at a time, necessitating a thoughtful approach to designing systems based on specific business needs.

Measuring Availability and Reliability
Availability refers to the operational uptime of the system, typically expressed as a percentage.

Networking Basics 🛜

Networking fundamentals focus on how devices communicate through:

IP Addressing: Distinguishing devices on a network (IPv4 and IPv6).
Data Packets: Units of data formatted for transmission, containing IP headers to facilitate communication.
Transport Layer Protocols: TCP guarantees reliable packet delivery, while UDP provides faster, less reliable transmission, suitable for time-sensitive communications.

Application Layer Protocols 📙

Common application layer protocols include:

HTTP: A stateless protocol for web transactions, suitable for standard web operations.
WebSockets: Allow for real-time, two-way communication over a single connection.
SMTP: Standard used for sending emails between servers.
FTP: Used for file transfers.
GRPC and GraphQL: Modern methodologies for creating APIs, offering advanced features and flexible queries

API Design Best Practices🙌

Creating exceptional APIs involves defining clear input and output operations. Best practices include:

RESTful Principles: Apply standardized HTTP methods and ensure statelessness.
GraphQL: Allows clients to request specific datasets, reducing data over-fetching.
Rate Limiting: Prevent abuses of the API through controlled requests.

Strategies for Reducing Latency ♻️

Latency reduction techniques such as caching and content delivery networks (CDNs) are pivotal in modern web development:

Caching: Storing copies of data to expedite access.
CDN: Geographically distributed servers that deliver content closer to users.

Proxy Servers📒

Proxy servers act as intermediaries between clients and servers, fulfilling various roles:

Forward Proxy: Acts on behalf of clients, anonymizing requests and managing internet access.
Reverse Proxy: Disguises backend servers, balancing load and managing SSL encryption.

Load Balancing🎢

Load balancing distributes workloads across multiple servers to prevent bottlenecks. Strategies include:

Round Robin: Sequential allocation of requests to servers.
Least Connection: Directs traffic to servers with minimal active connections.
Geographical Algorithms: Routes requests based on user proximity to servers.

Database Fundamentals📈

Understanding databases is crucial for system design. Key points include:

Relational vs. NoSQL Databases: SQL databases offer structured data management, while NoSQL databases provide flexibility for unstructured data.
Sharding and Replication: Techniques for horizontal scaling to enhance availability and performance.
Caching and Indexing: Important performance optimization techniques.

include NSPrivacyAccessedAPICategoryDiskSpace & NSPrivacyAccessedAPICategoryFileTimestamp Information🤔

Aishanii — Mon, 01 Apr 2024 19:02:15 +0000

Hey, so apple just came out of nowhere and sent a big email outlining something like NSPrivacyAccessedAPICategoryFileTimestamp Information, NSPrivacyAccessedAPICategoryDiskSpace and NSFileSystemFreeSize with few other API declaration.

Here's what it means for you as a developer and here is what you can do.

How to release my current app😵‍💫

Don't worry till May 1st, Apple doesn't expect you to declare these. In fact, they would just flag the required API declaration and approve your app for now. So pushing to production won't stop🥳

How do I get what are the declarations required before submission on Appstore?

You can run a bash script to check your codebase and dependencies for such API declaration requirements.

Use the following one:
https://github.com/Wooder/ios_17_required_reason_api_scanner/blob/main/required_reason_api_text_scanner.sh

Download the required_reason_api_scanner_text.sh file.
Go to terminal and go to the directory where this file was downloaded to. Run the following command with your app directory path.

sh required_reason_api_scanner.sh <AppDirectory>

This will give you a list of declarations, in the following format:

Found potentially required reason API usage 'UserDefaults' in './ViewController.swift' Line numbers: 128

Search for the API declarations mentioned here:

https://developer.apple.com/documentation/bundleresources/privacy_manifest_files/describing_use_of_required_reason_api

What's next?

Go to Xcode (15 and above)
File -> New -> File
Search and select the 'App privacy' option
The default privacy file name is required, do not change that and continue
Copy the following file, and edit the newly created PrivacyInfo.xcprivacy:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
 <key>NSPrivacyAccessedAPITypes</key>
 <array>
  <dict>
   <key>NSPrivacyAccessedAPIType</key>
   <string>NSPrivacyAccessedAPICategoryUserDefaults</string>
   <key>NSPrivacyAccessedAPITypeReasons</key>
   <array>
    <string>CA92.1</string>
   </array>
  </dict>
 </array>
</dict>
</plist>

You're done!
Build your app, sit back and relax.⛱️

Bun is breaking other package managers

Aishanii — Wed, 20 Sep 2023 22:39:14 +0000

A new javascript runtime is the central thing on the internet and I think it's time for new sticker on my laptop I code JS on.

But how is Bun so performant?⚡️

Built from scratch🧑‍🍳

Bun is not built on top of nodejs, rather they have used Zig over Webkit (for Safari) and internally optimised for performance by getting into the basics.

Caching and linking internally📁

Once installed, packages are needed to be called in node_modules and for that they have dedicatedly taken OS in consideration. While in linux syscalls help make internal calls faster, in macOS that is not available, hence they copy all the files that costs memory.

The APIs✍️

The APIs are in Native code and not in javasript which not only exposes them to machine level code but also gives them freedom to look into things at a deeper level.

There are many more good things which can be found here:
https://bun.sh/blog/bun-v1.0

The guy to follow to get updates is here: https://twitter.com/jarredsumner (literally the creator tweeting changes incoming)

DeprecationWarning: crypto.createCipher is deprecated.

Aishanii — Mon, 29 May 2023 17:55:24 +0000

Support for both crypto.createCipher & crypto.createDecipher has been pulled as they use a weak key derivation function (MD5 with no salt) and static initialization vectors (iv).

Here, we'll work with migrating from crypto.createCipher & crypto.createDecipher' tocrypto.createCipheriv&crypto.createDecipheriv`

Let's begin with the basics. Run the following command in parent directory of your node.js project.

npm install crypto --save

Encryption

Make sure that the secret key & secret initialization vector is set correctly with required length. To keep the format intact we use createHash from crypto.

Here is the code below:

var Crypto = require('crypto')
var secret_key = 'fd85b494-aaaa'
var secret_iv = 'smslt'
var encryptMethod = 'AES-256-CBC';
var key = Crypto.createHash('sha512').update(secret_key, 'utf-8').digest('hex').substr(0, 32);
var iv = Crypto.createHash('sha512').update(secret_iv, 'utf-8').digest('hex').substr(0, 16);
var encryptMsg = encryptStr("Encrypting", encryptMethod, key, iv);
console.log(encryptedMsg);

function encryptStr(plain_text, encryptMethod, secret, iv) {
var encryptor = Crypto.createCipheriv(encryptMethod, secret, iv);
var aes_encrypted = encryptor.update(plain_text, 'utf8',
'base64') + encryptor.final('base64');

return Buffer.from(aes_encrypted).toString('base64');
};

Decryption

Here is the code below:

var Crypto = require('crypto');
var secret_key = 'fd85b494-aaaa';
var secret_iv = 'smslt';
var encryptMethod = 'AES-256-CBC';
var decryptMessage = decryptStr(encryptText, encryptionMethod, key , iv);
console.log(decrptMessage);

function decryptStr(encryptText, encryptMethod, secret, iv) {
const buff = Buffer.from(encryptText, 'base64');
encryptedMessage = buff.toString('utf-8');
var decryptor = Crypto.createDecipheriv(encryptMethod, secret, iv);
return decryptor.update(encryptText, 'base64', 'utf8') + decryptor.final('utf8');
};

References:
Crypto|Node.js v20.2.0 Documentation

Don't use '&&' for conditional reasoning

Aishanii — Wed, 14 Dec 2022 18:56:06 +0000

We often use '&&' to display a component if a given condition is true and to not display it when the condition is false.

function BigComponent({condition}) {
    return (
        <div>
          <p> After this we will try to render a component based 
             on a condition 
          </p>
          {condition && <NextComponent/>}
        </div>
    )
}

export default BigComponent

So basically, here the condition is evaluated and only if the left side of '&&' is true, we move forward and then render the second half, that is the component.

This is called short circuiting.

There are two problems here:

The output to the condition must be boolean. If the condition gives 0, it will render 0.
If the result from the condition is undefined, it will give an error.

What to do then?

To avoid something like displaying a zero or getting an 🔴error🔴, we can use a ternary operator:

condition ? <ConditionalComponent /> : null

which translates to: "if condition is true do the first statement else execute the statement after the colon (:)"

Happy Coding!👩‍💻

What's Bit Manipulation?

Aishanii — Tue, 23 Aug 2022 10:24:17 +0000

Bit Manipulation- https://450dsa.com/bit_manipulation

For X and Y such that
X/2=Y

Example:

- 7/2=3

7->111 (3)
3->011 (2)

- 12/2=6

12->1100 (2)
6->0110 (2)

If the X is ODD

It will have the least significant bit set. Hence dividing by 2, will be right shifting

If the X is EVEN

Its least significant bit will not be set hence dividing by 2 will have no effect on number of set bits as only 0 will be lost.

So if the number if the X is ODD,

number of set bits of X = 1 + Y

But when X is even,

number of set bits of X = Y

What does javascript engine do?👩‍💻

Aishanii — Tue, 02 Aug 2022 12:36:29 +0000

For starters javascript runtime environment is not the javascript engine.

Javascript engine is inside the javascript runtime environment which is different for different implementations. A javascript engine which is most famous is V8 (Chrome and node.js), Mozilla uses Spidermonkey which was the first js engine.

Parsing👇

Here the code is broken down to smaller pieces known as tokens and is then transformed.

The code that is entered is turned into an abstract syntax tree.

Optimization & compilation👇

Javascript can be treated as both interpreted or compiled language. Spidermonkey treated it as an interpreted language for its fast use in browsers.

Nowadays, both are used, in just in time compiled javascript form.

The abstract syntax tree is broken down into bytes here and sent forward.

Execution👇

This is done along with the two of our favourite components of JS, Call Stack & Memory Heap.

The logic of different JS engine is different from one another. Some of the features that are combined to make the best out it are:

Inline caching: It takes note of the repeated calls to the same method that tend to occur on the same type of object.
Mark and Sweep: This is a garbage collection algorithm where the garbage collector does marking in first phase & sweeping in second.
All the reachable in use objects are ticked as true and marked while others are marked as 0. Then we sweeps the unreachable objects from heap memory.

For more on javascript runtime environment
🌟Understanding JRE

Debouncing in javascript✨

Aishanii — Sat, 30 Jul 2022 11:25:00 +0000

To optimise browser performance as well as keep up with user experience deliverables, there are few techniques, one of which is debouncing.

A very fine example for this would be any search bar. When you type a word in search bar with every letter it shows new recommendations.

From the surface the trick here must be making an API call every time somebody enters a letter to fetch desirable options according to latest input.

A better way to do this is through debouncing,

We set a threshold for a time period, can be 5s or .05 sec.
Every time this threshold timer expires, we make an API call to get data best matching the input.
Clear the timer and reset

Code:

<input
className="search-bar"
onChange={ hecticSearchHandler }
/>

function hecticSearchHandler(...args){

/* capture the search query entered by customer */
const { value } = args[0].target;

/* Make an API call with search query */
getSearchResults(value);
}

Reusable function code:

const optiSearchHandler = debounceFunc(searchHandler, 500)

const debounceFunc = (func, delay) => {
   let timer;
    return function(...args) {
       const context = this;
       clearTimeOut(timer);
       timer = setTimeOut(() => {
           func.apply(context, args);
       }, delay)
     }
}

Watch this video for clarity: Debounce interview ques

Currying in javascript(🔖)

Aishanii — Thu, 28 Jul 2022 11:58:46 +0000

As we were learning before, functions in javascript are

Treated as sub-programs (execution context)
First class objects (they have methods & properties)

Currying is basically:
function (a,b,c) --> function (a)(b)(c)

1. Currying using closures👇

function mix(f) { //closure, f is batter here

  return function(a) {

    return function(b) {

      return f(a, b);
    };
  };
}

function batter(a, b) {
  return a + b;
}
cook=mix(batter)
console.log(cook('flour ')('banana puree'));

2. Currying using function methods- bind()👇

As we have discussed before, bind() is function method used to get a function copy to be used with fixed arguments or this reference.

function multiply(a , b){
    console.log(a)
    console.log(b)
    return a*b
}

getTwice=multiply.bind(this, 2)
console.log(getTwice(7))

We can change the number but getTwice will have a=2 fixed.

Currying requires the function to have a fixed number of arguments.

⭐Read about functional programming concepts here.
I just had to link this one:
⭐Closures, currying & functions in js

call(), bind() & apply() in javascript

Aishanii — Wed, 27 Jul 2022 12:41:24 +0000

If asked about any one of these keywords in a js interview, one thing they all have in common is they are function prototype related methods in javascript.

Every function has it's own execution context, as discussed earlier. Every function also has it's own this keyword, as introduced in ES6. We will be working around with this keyword using the methods mentioned.

call()

The call function let's us provide arguments to a function separately. Here, we are passing the value to this for the function.

I believe that it's always clearer with an example:

function chime() {
  const notif = [this.name, 'has followed you!', this.id].join(' ');
  console.log(notif);
}

const obj = {
  name: 'Joe',
  id: '@Joeisheretocomment',
};

chime.call(obj);

(one of those days where you do not have your pc and it becomes a default light mode day)

This is one of the use cases of call(). We use call function for constructors and objects too (find references below).

apply()

It's similar to call(), just the difference is that we pass the arguments as an array when using apply() method.

A very interesting use case of apply() that I found was while using inbuilt libraries.

array=[21,22,13,45,60,988]
console.log(Math.max(array))

Interestingly, we can use apply here to make the Math.max function take each element of the array be considered as single and separate argument.

array=[21,22,13,45,60,988]
console.log(Math.max.apply(null,array))

The first parameter is not used by Math.max as it doesn't need any context.

bind()

This prototyping method makes another copy of the function and is helpful to hold on to this reference.

Example :

let user = {
  follower: "JoeAgain"
};

function func() {
  alert(this.follower);
}

let funcUser = func.bind(user);
funcUser();

In this case, we are binding a function copy with specific **this=user**.

These can be used for function currying, function binding and constructors.

Go through examples and use cases for each of them, they are so widely used, just don't get confused :D
🌟 Call & apply method
🌟this keyword and function prototyping

setTimeout() & setInterval() in javascript

Aishanii — Mon, 18 Jul 2022 08:01:25 +0000

As we discussed earlier setTimeout() starts it's timer and goes to task queue and waits until the call stack is empty. This is all a part of the event loop working.

setTimeout()

Example code:

function sayHi() {
  alert('Hello');
}

setTimeout(sayHi, 10000);

Here sayHi function is executed after a delay of 10000 ms.

setTimeout() doesn't necessarily execute the callback function precisely after the time inserted.

As it waits for the call stack to be empty, it might be the case that the timer has already expired while waiting, which means it will execute after a while and not the time mentioned.

Hence,


function sayHi() {
  alert('Hello');
}

setTimeout(sayHi, 0);
.
.
.

Even here, it will wait till the whole program is executed and call stack is empty.

By remaining in task queue, it makes sure to avoid thread blocking. So:

It waits atleast the time mentioned to execute the callback.
It does not block the main thread.

setInterval()

It keeps on executing the callback function after given interval until stopped.

let timerId = setInterval(() => console.log('attention'), 2000);

setTimeout(() => { clearInterval(timerId); console.log('stop'); }, 5000);

Here, the 'attention' is printed after every 2 seconds and it's cleared using clearInterval() below after 5 seconds, that is when stop is printed.

Learn more about concurrency in javascript and how can setTimeout(0) is used.
🌟setTimeout() by Akshay Saini

Promises in javascript(🔖)

Aishanii — Thu, 14 Jul 2022 07:24:43 +0000

Promise is an object that bundles a provider and consumer. To understand this, remember how this keyword was encountered in async javascript blog?

Promises are used to keep track of whether a successful output was received from a piece of code or not.

Promises has two callbacks, either one of which is executed depending on the output received- resolve(value) & reject(error).

Resolve is for successful run while reject is for errors received.

const MyPromise=new Promise((resolve, reject)=>{
    const rand=Math.floor(Math.random()*2);
    console.log(rand)
    if(rand===0)
        resolve();
    else
        reject()

})

MyPromise
.then(()=>{console.log("success")})
.catch(()=>{console.log("Error")})

Here we are working with a random number case, where it either returns 1 or 2. .then handles succesful responses and .catch works with errors. These are used to access internal Promise properties called state and result.

state indicates status of the job that needs to be done. Pending, fulfilled or rejected are the three indicators.
result is initially empty but gets a value when either resolved or an error when rejected.

Only the first call to resolve/reject is taken and once the value for state and result is set it's final. More on promises by javascript.info

⭐New to Javascript? Try out great courses from https://boot.dev/tracks/computer-science