Forem: JoelBonetR 🥇

Design Patterns demystified with examples

JoelBonetR 🥇 — Wed, 30 Oct 2024 16:14:41 +0000

So the AI era is here, the huge leap forward that, at the moment, spits Node code with const fetch = require('node-fetch') 😳 (true for both ChatGPT and Gemini as of today) and feeds yet another spin of the cyclic machine that is Internet and its content.

In that amalgamation of content, design patterns are appearing again

From posts explaining how to apply design patterns in Node(???) to posts explaining with all detail obsolete stuff like how to apply the factory pattern in Java (Java 8 released in March 2014 added Lambdas).

Definition

Ever stumbled upon Refactoring guru?
It is a website you probably visited in your learning journey through computer science, specially in programming. It's design patterns section is quite well explained and one of the most shared through different forums over the years.

If we go to the definition of what design patterns are, we find:

Design patterns are typical solutions to common problems
in software design. Each pattern is like a blueprint
that you can customize to solve a particular
design problem in your code.

Why this post, then? I mean, there's plenty of information on the website linked above; this could be all.

The thing is, I always struggled with accepting this definition... "to solve a particular design problem in my code"... in my code? Does my code have a problem that I need to solve?

Definition, reimagined

What happens really, is that I need to code a certain "something" for which the programming language used in the project is lacking abstractions for.

Plain and simply. Just in case that doesn't resonate with you yet, lets see some examples with code.

This is a really simple implementation of the Factory Pattern in Java (primarily an Object Oriented programming language).

public class ShapeFactory {
  public Shape createShape(String type) {
    if (type.equalsIgnoreCase("CIRCLE")) {
      return new Circle();
    } else if (type.equalsIgnoreCase("SQUARE")) {
      return new Square();
    } 
    return null;   
  }
}

Then Java 8 (March 2014, just in case you forgot) added Lambdas (a concept from functional programming) so we can do this instead:

Map<String, Supplier<Shape>> shapeFactory = new HashMap<>();
shapeFactory.put("CIRCLE", Circle::new);
shapeFactory.put("SQUARE", Square::new);

Shape circle = shapeFactory.get("CIRCLE").get();

No need for the factory design pattern ever again (at least in Java).

Yes I know the factory pattern is the example most people use all the time, but what happens with the others? And what happens in other programming languages?

This is the visitor pattern in Typescript:

interface Shape {
  draw(): void;
  accept(visitor: ShapeVisitor): void; 
}

class Circle implements Shape {
  radius: number;

  constructor(radius: number) {
    this.radius = radius;   

  }

  draw() {
    console.log("Drawing a circle");
  }

  accept(visitor: ShapeVisitor) {
    visitor.visitCircle(this); 
  }
}

class Square implements Shape {
  sideLength: number;

  constructor(sideLength: number) {
    this.sideLength = sideLength;
  }

  draw() {
    console.log("Drawing a square");
  }

  accept(visitor: ShapeVisitor) {
    visitor.visitSquare(this);
  }
}

interface ShapeVisitor {
  visitCircle(circle: Circle): void;
  visitSquare(square: Square): void;
}

class AreaCalculator implements ShapeVisitor {
  private area = 0;

  visitCircle(circle: Circle) { 
    this.area = Math.PI * circle.radius * circle.radius;
    console.log(`Circle area: ${this.area}`);
  }

  visitSquare(square: Square) {
    this.area = square.sideLength * square.sideLength;
    console.log(`Square area: ${this.area}`);
  }

  getArea(): number {
    return this.area;
  }
}

// Using the Visitor
const circle = new Circle(5);
const square = new Square(4);
const calculator = new AreaCalculator();

circle.accept(calculator); 
square.accept(calculator);

The following code is doing exactly the same but using reflection (the ability of a language to examine and manipulate its own objects at runtime) instead of the Visitor pattern:

interface Shape {
  draw(): void;
}

class Circle implements Shape { 
  // ... (same as before)
  radius: number;
}

class Square implements Shape {
  // ... (same as before)
  sideLength: number;
}

function calculateArea(shape: Shape) {
  if (shape instanceof Circle) {
    const circle = shape as Circle; // Type assertion
    const area = Math.PI * circle.radius * circle.radius;
    console.log(`Circle area: ${area}`);
  } else if (shape instanceof Square) {
    const square = shape as Square; // Type assertion
    const area = square.sideLength * square.sideLength;
    console.log(`Square area: ${area}`);
  }
}

const circle = new Circle(5);
const square = new Square(4);

calculateArea(circle);
calculateArea(square);

Now the observer pattern, also in TypeScript:

interface Observer {
  update(data: any): void;
}

class NewsPublisher {
  private observers: Observer[] = [];

  subscribe(observer: Observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer: Observer) {
    this.observers = this.observers.filter(o => o !== observer);
  }

  notify(news:   
 string) {
    this.observers.forEach(observer => observer.update(news));
  }
}

class NewsletterSubscriber implements Observer {
  update(news: string) {
    console.log(`Received news: ${news}`);
  }
}

// Using the Observer
const publisher = new NewsPublisher();
const subscriber1 = new NewsletterSubscriber();
const subscriber2 = new NewsletterSubscriber();

publisher.subscribe(subscriber1);
publisher.subscribe(subscriber2);

publisher.notify("New product launched!");

The same but using the built-in (in the Node API) EventEmitter:

import { EventEmitter } from 'events';

class NewsPublisher extends EventEmitter {
  publish(news: string) {
    this.emit('news', news);
  }
}

const publisher = new NewsPublisher();

publisher.on('news', (news) => {
  console.log(`All subscribers received the news: ${news}`);
});

publisher.publish("New product launched!");

At that point, you might have realized that the "problem" is the OOP implementation, and you would be quite right, but not fully.

Every programming paradigm, specially when taken in its most pure form, has its quirks, difficulties or "things that can't be achieved in a straight line", if you will.

Let's get ourselves to the functional programming realm. You've probably heard of Monads.

Whether you fell for the mathematical definition mind trap or not, we -software developers- could understand Monads as design patterns as well. This is because in a world of pure functions, where nothing unexpected happens, it's difficult to conceive a side effect, but most software products need side effects, so how do we...?

This is an example of the IO Monad in Haskell:

main :: IO ()
main = do
  fileContent <- readFile "myFile.txt" 
  putStrLn fileContent

The side effect (reading a file) is contained in the IO monad.

Let's add a monadic example using typescript;

class Maybe<T> {
  private value: T | null;

  constructor(value: T | null) {
    this.value = value;
  }

  static just<T>(value: T): Maybe<T> {
    return new Maybe(value);
  }

  static nothing<T>(): Maybe<T> {
    return new Maybe<T>(null);
  }

  map<U>(fn: (value: T) => U): Maybe<U> {
    if (this.value === null) {
      return Maybe.nothing<U>();
    } else {
      return Maybe.just(fn(this.value));
    }
  }
}

// Usage
const user = Maybe.just({ name: "Alice", age: 30 });
const userName = user.map(u => u.name); // Maybe<string> with value "Alice"

const noUser = Maybe.nothing();
const noUserName = noUser.map(u => u.name);

A classic one, I've seen the maybe monad like 50 times all over the Internet, but what is it, really?

The problem it's trying to solve:

let user;

We forgot to define the properties of our object! 😩

in a real use-case this would be the input from a side-effect mostly, like reading from a database or a file

So now if we do:

const userName = user.value.name; // Uncaught TypeError: Cannot read properties of undefined (reading 'value')

the program explodes.

The solution without the Maybe monad:

const userName = user?.value?.name; // undefined

The program does not explode.

The maybe monad is not necessary in JavaScript or typescript due to the optional chaining operator but if you're using a language that does not implement it... well, you can apply the maybe monad or shall I say design pattern?

Yes I know, there's people that just learnt the Maybe thingy and eagerly applied it to 6 side-projects all at once and now I'm being the giggle at the party for telling you "you don't need it". You can still use it though, in fact I invite you to do so if you feel it's cool (at the end of the day it's your code + with that pretty face you can do whatever you want! 🤭)

But back to basics. What about other paradigms? If you're thinking outside the OOP/FP box, I like it!

All paradigms definitely have their own recurring solutions and techniques, even if they aren't always formally called "design patterns."

Here are a few examples (thanks Gemini for avoiding me thinking, thanks me for the pretty formatting and added value 😁):

Logic Programming:

Constraint Logic Programming: This paradigm involves defining constraints and relationships between variables, and then letting the system find solutions that satisfy those constraints. Techniques like backtracking and constraint propagation are crucial for efficient problem-solving in this paradigm. (Quite useful when dealing with AI).
Deductive Databases: These databases use logical rules and inference to derive new information from existing data. Techniques like forward/backward chaining are fundamental to how these databases operate and could be considered patterns within this paradigm.

Concurrent Programming:

Message Passing: In concurrent systems, where multiple processes execute simultaneously, message passing is a common technique for communication and coordination. Patterns like producer-consumer and reader-writer provide established solutions for managing concurrent access to resources and ensuring data consistency.
Synchronization Primitives: These are low-level constructs like mutexes, semaphores, and condition variables that are used to control access to shared resources in concurrent programs. While not "patterns" in the traditional sense, they represent well-defined solutions to common concurrency challenges.

Data-Oriented Programming:

Data Transformation Pipelines: This paradigm emphasizes transforming data through a series of operations. Techniques like map, filter, and reduce (common in functional programming as well, and used A LOT in javascript since its addition) are fundamental building blocks for constructing these pipelines, and could be considered patterns within this paradigm.
Entity-Component-System (ECS): This architectural pattern is popular in game development and other data-intensive applications. It involves breaking down entities into components (data) and systems (logic), promoting data locality and efficient processing.

There are a lot of "techniques" and "patterns", this list is just to give you threads to pull if you're curious.

Hope you find this useful, read you rather soon!

🔖 Summary, for the hurry ones!

While the term "design patterns" is most closely associated with OOP, other paradigms have their own sets of recurring solutions and techniques. These techniques address the specific challenges and constraints of those paradigms, providing established approaches to common problems. So, even if they aren't always formally labeled as "design patterns," they serve a similar purpose in guiding developers towards effective and maintainable solutions.

We can understand design patterns as well-known workarounds to patch features that the programming language we're using lacks abstractions for.

This post has been written almost entirely by me, specified examples by Gemini 1.5 Pro

Tech Lead Software Setup - 2024 Edition

JoelBonetR 🥇 — Sat, 09 Mar 2024 18:08:56 +0000

Have you asked yourself what do you really need? Without the noise, without the hassle.

Here's

My software development setup for this 2024

and some extras!

!important; The links of this post contain NO referral links and I've got zero monies to create this list. Everything you're about to read is my experience and opinion, enjoy! 😊

BYE BYE VSCode. Hello VSCodium!

Straight to the point; Why would I want to send telemetry and tracking data to Microsoft all the time?

VSCodium contains the community-driven Open Source, freely-licensed binaries of VSCode with a beautiful icon that suits my desktop better! 😁

Code Companion AI Autocompletion

Apparently, Github Copilot requires Microsoft's distributed version of VSCode (wondering why 😇) and that led me to seek alternatives, now I'm glad I did!

Here's Codeium, which has a FREE individual plan, and has proven more useful to me than copilot, honestly.

The context awareness amongst the project is quite superior and I'm now using the paid version instead the Copilot paid one.

I assume they might train the model further if you use the free version but didn't read the Terms & Conditions. It was sunday morning. I apologize. Shall you do please tell me 🙃

VSCodium plugins

Less is more.

VSCode/VSCodium has improved on every update, linkedEditing settings drove "Auto rename tag" extension obsolete, "bracket pair colorizer" is now the default behaviour in VSCodium, so it's yet another extension that you no longer need and so on and so forth.

On the other hand certain extensions like Codeium made others obsolete, like anything related to "code snippets".

Now here's the full list of extensions I really use:

Codeium explained before
Better comments it adds visual and mental order for me 😂
GitLens the Good Ol' Git Lens, if you didn't tested it yet, give it a shot!
Material Icon Theme Having the proper icon for each thingy, is it too much to ask? This icon theme solves that for you. It even helps by adding easy to grasp icons for common directories like core, utils, dist and much more!
Prettier Undoubtedly one of the most beloved extensions, specially when you enable "formatOnSave" along prettier as default formatter.
Markdown Preview Github Styling which name is self-explanatory I guess. A nice to have one, not the only one, though. I've used others during the time, don't have a favourite as for now, it just happens that I'm using this one at the moment.

And that's been the entire plugins list I'm afraid.
It's not that I've suddenly become lazy and don't want to write any more I promise, this is really the extensions I'm using right now.

In certain projects I can have the Python extensions as well, maybe Language Support for Java or any other language I might be fiddling around with. Maybe some test-related extension if it's any good (Playwright, Jest...) depending on the needs of what I'm doing!!

Tip:

Remember that you can create profiles in VSCodium > Settings > Profiles, each with its very own set of extensions, this way you don't need to manually disable the heavy language/platform specific extensions when you work in other kind of projects, avoiding weird behaviours and/or crashes!

Browser

Who would have told me that we would be talking about browsers in 2024?

Isn't Chrome the king? -Despite tracking the soul out of you-
Isn't Safari so shitty that's considered the new IE?
Isn't Firefox so RAM consuming that's better to just leave it to the QA team?
Isn't Opera / Opera GX buggy and crashy?
Isn't Brave dead after they added third party ads, trackers and crypto scams (the exact oposite of their selling point)?
Is Epiphany something more than a medium to install Chromium in certain Linux distributions?

Aren't you tired of browsers that look the same, do almost the same, each one with it's flaws? SO DID I.

I recently discovered Arc which I've read that "it's not a browser" somewhere even though is developed and published by "The Browser Company" 😂

I'm not yet using all the features (I'm getting old, bear with me), here's what I love the most as for now:

It has "Spaces" to keep your contexts separated (e.g. job space, personal space...).
You can create folders in each space as well, which allows me to store tabs per project.
Contextual AI; honestly didn't used it that much because I'm used to the old fashioned way, but I'm slowly getting there!
Little Arc. Being Arc the default browser, when you open a link from Meet/Teams/Discord, your email or any other source external to Arc, it opens it inside a "little Arc" which you can simply close when you're done (e.g. SSO login pop-up) or hit the maximise button to add it to your "Big Arc"!
Two tabs at the same time! I'm currently using the split view feature, here have a look:

You can also drag the separator to make one side or the other larger or set up the tabs vertically instead (useful when using my secondary monitor which I've rotated 90 degrees).

Being used to other browsers it was a clunky experience the first day, not gonna lie, but an amazing one after a couple of days more, so much so that that's now my main browser!

Who asked for more AI?

I've been testing Faraday with a couple or three of different Mistral-based models, just as GPT-like helper.

If you're interested in task-specific models such improvisation, role play, long conversations and so on you can also find a ton of them in the "Manage Models" menu, so you can download and then link the one you want to test to existing or new "AI Characters".

MORE AI? REALLY?

The previous one was for funzies, just to fiddle around but this one... oh boy, this one's a MUST!

WARP Terminal allows for seamless copy paste, it remembers previous commands and suggest them to you while you type and many more goodies

You won't regret checking the "Reusable Workflows" feature!

THE END

Share your favourite tools in the comment section! 👇🏻😁👇🏻

CS fundamentals: How Data Storage actually works

JoelBonetR 🥇 — Thu, 11 Jan 2024 17:27:16 +0000

Have you ever wondered how the digital files, photos, and documents you store on your devices are actually kept safe and accessible? Let's dive into it

Understanding Bits and Bytes:

At the core of data storage is the concept of bits and bytes. A bit is the smallest unit of digital information, representing either a 0 or a 1.

Binary Code:

Oftentimes is useful to think of it as Booleans (true/false) and, while they can represent primitive Booleans, this is true or false, by grouping them one can represent numbers, text, images and sounds.

All the data you see on your screen is ultimately represented in binary code - a series of 0s and 1s.

Your computer, smartphone or any other device, reads this code and translates it into the text, images, and sounds you interact with daily.

When eight bits come together, they form a byte, which can represent a character, number, or a small piece of data.

Fractions

The most common method for representing fractions in computers is through floating-point representation. Floating-point numbers consist of two main components: the sign bit, which represents whether the number is positive or negative, and the fractional part, which represents the actual value of the fraction.

E.g. the decimal fraction 0.75. In binary, this is represented as 0.11.
The sign bit would indicate the sign of the fraction

Not all fractions can be precisely represented in the binary system. This can lead to rounding errors and imprecision, especially when performing arithmetic operations involving fractions.

File Systems:

Think of a file system as the organization structure for your data. It manages how data is stored, retrieved, and organized on a storage device.

Without a file system, data placed on a storage medium would be a large body of data with no way of knowing where one piece of data ends and the next begins.

Some examples that may ring a bell are:

NTFS (New Technology File System) mainly used on Windows systems
EXT4 (Extended File System) mainly used on Linux systems
APFS (Apple File System) mainly used on MacOSX systems
FAT32 (File Allocation Table) which is currently at the verge of extinction.

Storage Devices:

Your computer, smartphone, or external hard drive uses various storage devices to keep your data safe. The two main types are:

Hard Disk Drives (HDD): A stack of spinning disks with magnetic surfaces. Data is stored on these disks as magnetized areas, and a tiny arm reads or writes data as the disks spin.

Solid State Drives (SSD): These use memory chips to store data. Since there are no moving parts, SSDs are faster and more durable than HDDs.

SSD M.2 are just SSD that are connected to the motherboard through M.2 port, an expansion port of the PCI family

Data compression:

As the devices to store data are limited, reducing the size of our data is oftentimes useful.
We can use two methods to achieve data compression:

Lossless Compression retains all the original data when decompressed. Common algorithms include ZIP and GZIP. It's ideal for text files and documents.
Lossy Compression: This sacrifices some data to achieve higher compression ratios. It's often used for multimedia files like images, audio, and video. Examples include JPEG for images, MP3 for audio or MP4 for video.

But how does data compression works?

1- Identifying Redundancy: Compression algorithms exploit redundancies in data, which can be either spatial (repeating patterns within the data) or temporal (repeating patterns over time).

2- Encoding and Replacing: Once redundancies are identified, the algorithm encodes them more efficiently. For example, it might replace repeated patterns with shorter codes or use mathematical representations.

Decompression

If we have compression, decompression must exist as well.
To compress and decompress data processing power is required, hence it has some cost in terms of electricity and time, for that reason not everything is compressed and not everything is compressed the same way or to the same extent.

Following the same logic, we have two techniques:

Lossless Decompression: In lossless compression, the original data is fully restored during decompression, ensuring no loss of information.
Lossy Decompression: In lossy compression, some data may be lost, but the decompressed file should be perceptually similar to the original.

For developers: you might decide when to GZIP a JSON from a microservice (or other) depending on the amount of data returned. Is usually a matter of minutes to enable compression in your server and some time more to benchmark if the download time of your new "gzipped" JSON has shortened more or less than the time the client device lasts in decompressing it.

Cloud Storage:

In addition to local storage on your devices, many of us use cloud storage. This involves storing your data on servers maintained by companies like Google, Dropbox, or Microsoft to mention some.

Ultimately, data will be stored in devices like the ones mentioned above with filesystems like the ones mentioned above and in binary code like mentioned above.
The difference is that you don't need the physical device but an internet connection to interact with your data.

Backups and Redundancy:

To ensure your precious data is safe, it's crucial to make backups. This involves creating duplicate copies of your files, either on an external drive or in the cloud.
Some storage systems also use redundancy, where data is duplicated across multiple drives for added security.

If you want to configure a system with redundancy you might be interested in researching topics like RAID (Redundant Array of Independent Disks) and NAS (Network Attached Storage).

Closing

Remember, every time you save a document or snap a photo, you're engaging with the intricate world of data storage. It's a mix of hardware, software, and clever organization that keeps your digital life intact and easily accessible.

Feel free to ask if you have any questions or want more details on a specific aspect!

Cheers,

AI generated the 90% of this post

JoelBonetR 🥇 — Wed, 18 Jan 2023 10:07:14 +0000

The heading image has been generated with Dall·E 2

In the previous post

JS Functional Concepts: Pipe and Compose

JoelBonetR 🥇 ・ Jan 2 '23

#javascript #webdev #programming #tutorial

I explained these concepts in a way that I felt "enough understandable" for a wide range of people, though I can be wrong because it's my point of view at the end, so I've decided to try and make Chat GPT to explain what it does.

The conversation went like that:

Me:
can you explain me the following function

export const pipeAsync: any =
  (...fns: Promise<Function>[]) =>
  (input: any) =>
    fns.reduce((chain: Promise<Function>, func: Function | Promise<Function> | any) => chain.then(func), Promise.resolve(input));

Chat GPT:

This function is creating a utility function called "pipeAsync", which allows chaining multiple asynchronous functions together in a pipeline.

It takes a list of functions as input, passed as rest parameter, which are all wrapped inside a promise.

It returns a new function that takes an input value as an argument. This returned function uses the Array.prototype.reduce method to iterate over the array of functions, and calls each function in sequence, passing the result of the previous function call as input to the next function.

The reduce function starts with an initial value of Promise.resolve(input), which is the input passed to the returned function. This is the starting point of the pipeline.

The reduce function then calls the next function in the pipeline with the result of the previous function call, and this process continues for each function in the pipeline.

The result of the reduce function is a new promise that resolves with the final result of the pipeline.

The "pipeAsync" function allows you to chain together multiple asynchronous functions in a way that makes the code more readable and maintainable. It is similar to the "pipe" function from functional programming, but it's adapted to work with async/await.

While it is 100% accurate, the language and language resources it uses may require a bit of focus to understand in my opinion.

What do you think? Is it better explained by GPT or by flesh and bones people? Let me know in the comments!

JS Functional Concepts: Pipe and Compose

JoelBonetR 🥇 — Mon, 02 Jan 2023 10:23:34 +0000

Function piping and composition are concepts from functional programming that of course are possible in JavaScript -as it's a multi-paradigm programming language-, let's deep into this concepts quickly.

The concept is to execute more than a single function, in a given order and pass the result of a function to the next one.

You can do it ugly like that:



function1(function2(function3(initialArg)))

Or using function composition



compose(function3, function2, function1)(initialArg);

or function piping



pipe(function1, function2, function3)(initialArg);

To make it short, composition and piping are almost the same, the only difference being the execution order; If the functions are executed from left to right, it's a pipe, on the other hand, if the functions are executed from right to left it's called compose.

A more accurate definition would be: "In Functional Programming, Compose is the mechanism that composes the smaller units (our functions) into something more complex (you guessed it, another function)".

Here's an example of a pipe function:



const pipe = (...functions) => (value) => {
    return functions.reduce((currentValue, currentFunction) => {
      return currentFunction(currentValue);
    }, value);
  };

Let's add some insights into this:

Basics

We need to gather a N number of functions
Also pick an argument
Execute them in chain passing the argument received to the first function that will be executed
Call the next function, adding as argument the result of the first function.
Continue doing the same for each function in the array.



/* destructuring to unpack our array of functions into functions */
const pipe = (...functions) => 
  /* value is the received argument */
  (value) => {
    /* reduce helps by doing the iteration over all functions stacking the result */
    return functions.reduce((currentValue, currentFunction) => {
      /* we return the current function, sending the current value to it */
      return currentFunction(currentValue);
    }, value);
  };

We already know that arrow functions don't need brackets nor return tag if they are returning a single statement, so we can spare on keyboard clicks by writing it like that:



const pipe = (...functions) => (input) => functions.reduce((chain, func) => func(chain), input);

How to use



const pipe = (...fns) => (input) => fns.reduce((chain, func) => func(chain), input);

const sum = (...args) => args.flat(1).reduce((x, y) => x + y);

const square = (val) => val*val; 

pipe(sum, square)([3, 5]); // 64

Remember that the first function is the one at the left (Pipe) so 3+5 = 8 and 8 squared is 64. Our test went well, everything seems to work fine, but what about having to chain async functions?

Pipe on Async functions

One use-case I had on that is to have a middleware to handle requests between the client and a gateway, the process was always the same (do the request, error handling, pick the data inside the response, process the response to cook some data and so on and so forth), so having it looking like that was a charm:



export default async function handler(req, res) {
  switch (req.method) {
    case 'GET':
      return pipeAsync(provide, parseData, answer)(req.headers);
     /* 
       ... 
     */

Let's see how to handle async function piping in both Javascript and Typescript:

JS Version



export const pipeAsync =
  (...fns) =>
  (input) =>
    fns.reduce((chain, func) => chain.then(func), Promise.resolve(input));

JSDoc Types added to make it more understandable (I guess)



/**
 * Applies Function piping to an array of async Functions.
 * @param  {Promise<Function>[]} fns
 * @returns {Function}
 */
export const pipeAsync =
  (...fns) =>
  (/** @type {any} */ input) =>
    fns.reduce((/** @type {Promise<Function>} */ chain, /** @type {Function | Promise<Function> | any} */ func) => chain.then(func), Promise.resolve(input));

TS Version



export const pipeAsync: any =
  (...fns: Promise<Function>[]) =>
  (input: any) =>
    fns.reduce((chain: Promise<Function>, func: Function | Promise<Function> | any) => chain.then(func), Promise.resolve(input));

This way it will work both for async and non-async functions so it's a winner over the example above.

You may be wondering what about function composition, so let's take a gander:

Function Composition

If you prefer to call the functions from right to left instead, you just need to change reduce for redureRight and you're good to go. Let's see the async way with function composition:



export const composeAsync =
  (...fns) =>
  (input) =>
    fns.reduceRight((chain, func) => chain.then(func), Promise.resolve(input));

Back to the example above, let's replicate the same but with composition:

How to use



const compose = (...fns) => (input) => fns.reduceRight((chain, func) => func(chain), input);

const sum = (...args) => args.flat(1).reduce((x, y) => x + y);

const square = (val) => val*val; 

compose(square, sum)([3, 5]); // 64

Note that we reversed the function order to keep it consistent with the example at the top of the post.

Now, sum (which is at the rightmost position) will be called first, hence 3+5=8 and then 8 squared is 64.

If you have any question or suggestion please comment down below

Any good OS isomorphic CRM or ERP?

JoelBonetR 🥇 — Tue, 30 Aug 2022 15:52:03 +0000

I'm checking online trying to find out how many ERP and CRM are out there that implement JavaScript in both backend and frontend but couldn't find much.

Do you know any open source CRM and/or ERP that's made entirely with JavaScript?

Stages in Software Development

JoelBonetR 🥇 — Sat, 27 Aug 2022 19:58:00 +0000

Alpha and Beta versions are common in software, you may also have heard "Friends & Family", specially in business-related development environments or MVP if you landed a project on an initial stage. Let's deep a bit into this interconnected topics.

Friends & Family

have two connotations:

Monies

usually in the form a loan, that a business owner gets from either family members or friends in order to help finance their startup or growing business. Investors.

People

In software testing means a group of people, be in-house workers of the client or even investors that will test a software product during the development process after each deploy to UAT or User Acceptance Testing environment.

Alpha version

of software means that it's not thoroughly tested by the developer before it is released to customers. Alpha software may contain serious errors, and any resulting instability could cause crashes or data loss. Alpha software may not contain all of the features that are planned for the final version.

Beta version

of software is one that has completed intensive internal testing, as well as often being tested by a carefully selected range of external testers in "Live" situations around the world, and we feel it is now as "bug" free as possible and is therefore ready to be safely used by a broader set of users.

Not every software is suitable for all testing stages mentioned above. Friends and family is quite common in every software but on the rest, you should analyse the market and see if it's suitable for an alpha or beta version. There's also a sub-category here, both alpha and beta can be open or closed.

Closed

Only a limited group of people will have access to the software in this testing version. Think on supporters in kickstarter (e.g. 7 Days to Die) or any other platform, people that made a reservation (e.g. Call of Duty) on an early stage or a limited amount of subscribers (e.g. DALL-E 2 and Github Copilot).

Open

Open here means "public", anyone can join this version -yet users can be filtered by stablishing a set of prerequisites- usually through a registering/subscribing process (e.g. Android Beta program and Windows Insiders program).

Stages in software development:

The first version of a product is necessarily a PoC (Proof of Concept), which is a base to test the product in a late analysis phase.

The second one would be an Alpha version, in which most features are joining, the functional testing is not 100% compliant and most work on stabilization, integration and bug fixing still needs to be done.

The third one is then a Beta version, in which most bugs have been solved, the software is stable and just needs a bit of polishing.

At this point we reach the MVP (Minimum Viable Product) which is -usually- the V1 of the product.
That means that we reached the minimum set of features that this software needs to have a meaning and a position in the market on a robust and stable version.

From now on it's a development iteration through versions to add extra features, polishing, bug fixing, optimizations etc.

Please note that the MVP is not necessarily a software that is about to be launched to the market, market changes and iterations to the market analysis can lead us to add more features or expand our understanding of what our MVP should be.

Version numbers

Versions in software have -usually- 3 numbers separated by dots.
e.g. 4.12.9
You can also see beta or alpha (pre-releases) in the version, and it can be in one of two ways:
a-0.1.29 or 0.1.29-alpha
b-0.19.33 or 0.19.33-beta

Those numbers are not arbitrary, there's some sort of a standard: Major.Minor.Patch

The first number means a Major upgrade, the second one a Minor upgrade and the last one is a counter on how many Patch upgrades we did.

Major, Minor and Patch

Major Version means a release of a software product that contains significant changes to features or functionality or underlying technology.

The minor version number is incremented when developers add new features to the product that are still compatible with former versions in the same major category.

A software patch or fix is a quick-repair job for a piece of programming designed to resolve functionality issues, improve security or add new features.

If you have any suggestion or question please comment down below

Markdown Editor with JavaScript

JoelBonetR 🥇 — Tue, 23 Aug 2022 16:26:00 +0000

For this little project I'm using Marked to parse the markdown content.

It's just 3 lines of JS in this case, most of the time invested here is in styling.
You'll find a text set as a sort of placeholder that serves the purpose of a quick markdown guide.

Here it goes:

You can edit the textarea and write whatever you want in markdown and it will be translated into HTML with the preview being at the right side (or at the bottom if you're using a smartphone).

That's all for today, hope you enjoyed I sure did doing that

Speech Recognition with JavaScript

JoelBonetR 🥇 — Mon, 22 Aug 2022 09:23:00 +0000

Cover image credits: dribbble

Some time ago, speech recognition API was added to the specs and we got partial support on Chrome, Safari, Baidu, android webview, iOS safari, samsung internet and Kaios browsers (see browser support in detail).

Disclaimer: This implementation won't work in Opera (as it doesn't support the constructor) and also won't work in FireFox (because it doesn't support a single thing of it) so if you're using one of those, I suggest you to use Chrome -or any other compatible browser- if you want to take a try.

Speech recognition code and PoC

Edit: I realised that for any reason it won't work when embedded so here's the link to open it directly.

The implementation I made currently supports English and Spanish just to showcase.

Quick instructions and feature overview:

Choose one of the languages from the drop down.
Hit the mic icon and it will start recording (you'll notice a weird animation).
Once you finish a sentence it will write it down in the box.
When you want it to stop recording, simply press the mic again (animation stops).
You can also hit the box to copy the text in your clipboard.

Speech Recognition in the Browser with JavaScript - key code blocks:



/* Check whether the SpeechRecognition or the webkitSpeechRecognition API is available on window and reference it */
const recognitionSvc = window.SpeechRecognition || window.webkitSpeechRecognition;

// Instantiate it
const recognition = new recognitionSvc();

/* Set the speech recognition to continuous so it keeps listening to whatever you say. This way you can record long texts, conversations and so on. */
recognition.continuous = true;


/* Sets the language for speech recognition. It uses IETF tags, ISO 639-1 like en-GB, en-US, es-ES and so on */
recognition.lang = 'en-GB';

// Start the speech recognition
recognition.start();

// Event triggered when it gets a match
recognition.onresult = (event) => { 
  // iterate through speech recognition results
  for (const result of event.results) {
    // Print the transcription to the console
    console.log(`${result[0].transcript}`);
  }
}

// Stop the speech recognition
recognition.stop();

This implementation currently supports the following languages for speech recognition:

en-GB
en-US
es-ES
de-DE
de-CH
fr-FR

If you want me to add support for more languages tell me in the comment sections and I'm updating it in a blink so you can test it on your own language 😁

That's all for today, hope you enjoyed I sure did doing that

Form input validation WITHOUT JavaScript

JoelBonetR 🥇 — Mon, 15 Aug 2022 18:58:00 +0000

I promised it and here it is,

BEHOLD!

Quick Explanation

We need 2 things here:

The pattern html attribute
Some CSS pseudos like :valid and :invalid

Pattern

The pattern attribute allows us to specify a regular expression that the inputted value must match in order to be considered valid.

!important: You must avoid using the pattern attribute on fields that have a validation by default like <input type="email"> as the browser will validate the input according to the RFC5322 and cast to :valid or :invalid consequently) on its own.

:valid, :invalid

When used in an input, CSS considers it :valid when the regex set in the pattern attribute matches the user input on it. Otherwise it's considered :invalid.

Basic Usage

html



<form>
  <label for="choose">Would you prefer tea or coffee?</label>
  <input id="choose" name="i_like" required pattern="[Tt]ea|[Cc]offee">
  <button>Submit</button>
</form>

css



input:valid { color: green }
input:invalid { color: red }

In this example, because the pattern regex [Tt]ea|[Cc]offee only those 4 words will be valid:

Tea
tea
Coffee
coffee

If you type any of those, the color will change to "green" on the other hand if you type anything else, it will be "red" and any attempts to submit the form will lead to a browser message.

ending

If you try to submit (thats why I left that button in the codepen) while any input in the form is not valid, it will show you a message in YOUR language. Without the need of i18n or anything else, the browser will handle that for you.

I feel this a nice approach for UX; whenever you need to give a quick feedback to the user.

You can design it your way and extend your creativity adding other CSS pseudos like:

And last but not least, you can also edit the label or another element by using the adjacent sibling selector +, which is the reason I've set the label after the input in my first codepen, check the CSS! 😁

Also bookmark this for reference whenever you need it:

Complete CSS Guide for beginners and not so beginners

JoelBonetR 🥇 ・ Jun 23 '20

Till the next one!

Can we talk about this feature? Please

JoelBonetR 🥇 — Mon, 15 Aug 2022 09:26:00 +0000

Explicitly about the "forgot password" thingy.

This little issue that appears in every single project where users can register themselves that says "Implement the forgot password feature" 😅

It's so common than most of the time people even doesn't split the issue. But should we?

Well, let's check the nuances on that.

workaround

Show a message with a "forgot password?" link/button whenever the user fails to log in.
Ask the server to send the "forgot password email".
Catch the request on the server.
Generate a token on the fly
Generate a Link that includes this token
Inject this link into an email template
Send the email with the template
When the link is clicked, we need to validate the token
If it's expired, redirect to the login, showing the "forgot password?" link/button again along with a message that says "The link is expired, please try again".
If it's OK, redirect the user to a view.
This view has -usually- two fields. New password and Repeat password.
Check that each individual password field is aligned with the required pattern (min. 8 chars, 1 uppercase, 1 lowercase, 1 special char...) and that both are equal.
On submit, check the token again. Why? well, it can expire in the meantime, if this happen, return to point 9.
If the token is OK, update the password for this user.
Redirect to the login view with a message that says "your password has been updated successfully"

Munching the workaround

We can send another email once the password has been changed, that typical "Your password has been changed, if it wasn't you please, call the police, the SWAT, the marines and send us a ticket, your entire family may surrender to hackers".

Yet another thing is to handle 2FA if it's implemented in your app. You may want your users to have the chance to use it to make this process easier -for them- but as the 2FA is not something mandatory, you still need to do the rest while providing this other workaround😁

Answering the question I think we all can agree on that being a big YES, splitting the "forgot password" issue is a must (Just in case I mean Github, Gitlab, Jira... any issue tracker).

We need definition for email templates and nuances on some of those points and splitting all this overheat into smaller chunks also reduces the procrastination.

The Problem

This entire thingy is something that I usually procrastinate or delegate. The reason why is because IT IS BORING to develop (at least to me).

It is so boring that I coded a calculator and an NPM package just to avoid coding that forgot password thingy the last time I had to.

And I had to code it again this week. Glad this time I split myself that bunch into several smaller issues, otherwise this post would probably be like "Mom, look what I've done" talking about whatever crazy BS I could have come up with.

I'm still wondering why in the seven seas frameworks don't implement -yet- a nice friendly way to deal with that. I mean like... call this function with a config object as param and WOOSH points 5 to 10 automated!

I'm even thinking on create a npm lib if nothing exists just to spend like 80h trying to automate something worth a morning and making it as dynamic as possible to fit as much projects as possible.

Do you know any tool to help hundreds? If nothing exists, would you like to collaborate to bring something new?

A JavaScript monolith ready to scale

JoelBonetR 🥇 — Sat, 13 Aug 2022 10:26:00 +0000

In many projects I use this stack to quickly getting the things done at the lowest cost possible.

Next JS provides both Node and React sweetened with built-in features like file-system based routing and much more.

If I need to create a project for a client (and assuming there's no showstopper or impediment to proceed this way after the initial analysis) I'll do the following:

1- Create a Next JS app.

2- Create a DB instance on my VPS (or any provider).

3- Add an ORM with the proper DB driver (I use Sequelize -mostly- or Mongoose but there are a tone out there, you can pick your favourite one).

4- Define the data model.

5- Add some validation library (I usually use Joi but as the ORM, pick whichever suits best for you).

6- Create a directory "api" inside "pages".

7- Add a folder for each backend entity like /pages/api/users

The index.js inside will look something like that:



switch (req.method) {
    case 'GET':
        return await getAllUsers();
    case 'POST':
        return await createUser();
    default:
        return res.status(405).end(`Method ${req.method} Not Allowed`);
}

8- Add the view for this API inside pages, that's /pages/users
Which will use getServerSideProps (see the API Reference) to fetch desired data from this API and show related data.

If you need a component instead, simply create a directory in the root like components/users, then you can import your React components in your pages.

Repeat steps 4 to 8 for each entity you need in your project.

You can even convert it into a PWA easily with Next-PWA.

Scaling the monolith

Because it will probably grow in both code and -hopefully- customers.

If you already know that this project will need to handle thousands of concurrent requests you may prefer to start with a different architecture but in most cases I face you simply don't know how the project will do. That's because it depends on many factors, most of them are on the client's roof and some of them are not even under client's control.

1- The first step in scaling the project would be increase the amount of resources of your VPS or cloud instance. e.g. If you started with 2 vCores and 2Gb of RAM, maybe you'll need to scale vCores, RAM or both, depending on what's your App doing and your hosting provider plans.

2- When this is not enough or there are forecasts of heavy traffic, you can simply split your /api/ directory and run it on a Node server in a new instance. That change requires few changes on both /api/ code and frontend code. e.g. changing your calls from localhost for a different thingy (if you handled that with env variables congratulations! it will cost like 2 minutes) and wrapping the /api/ inside an Express plus adding some routing.
At this point we separated the frontend from backend 😁

3- If this is not enough, you can then chunk your APIs and provide them through different instances.
Let's say we've conceptually 3 APIs inside our app users, businesses and stats and our favourite monitoring tool shows us that stats is consuming the 60% of the resources. We can move Stats following the same steps into a fresh instance, releasing a good amount of load from the other.

Following this conceptual guide we add costs just when the project needs them.

Please note that each step forward into a fully fledged micro-services architecture doesn't eliminate the complexity, it's moving the complexity from the code to the infrastructure thus I recommend to check some DevOPS concepts to make it less of a burden.

Do you want a full tutorial on that with code, screenshots and examples? Maybe discuss some step?

Let me know in the comments!