DEV Community: Frugence Fidel

How I Solved the Problem of Managing Multiple AI Models

Frugence Fidel — Sun, 01 Dec 2024 15:29:32 +0000

This post is originally published to my blog.

As a developer, I have always been excited about the potential of AI. Over the year, I have explored different AI tools, from language models to image generators. But as amazing as they are, I kept running into the same problem. Managing them was not easy.

Switching between platforms, handling multiple API keys, and trying to understand different pricing plans made everything more complicated. I just wanted to focus on building, but all these issues slowed me down.

I kept asking myself, why is there not one place to manage all these tools?

That question led me to create Mfuniko.

I did not want to build just another AI product. I wanted to solve a problem I was facing. I needed a platform where I could:

Use different AI models in one place.
Manage all your chats in one place, instead of having chats in separate different platforms.
Work with my own API keys without monthly fees.

Mfuniko started as a personal solution, but I realized it could help other developers too.

What Mfuniko Does

Mfuniko is a chatbot platform that connects to different AI models. It makes it simple to use the tools you already have without dealing with the complexity of multiple platforms or subscriptions.

It is designed for developers who want flexibility and the freedom to choose their favorite tools while paying only for what they use.

What I Have Learned

Building Mfuniko has taught me that the best solutions are not always the most complicated. They are the ones that make life easier. That is what I wanted to achieve with Mfuniko.

I am sharing this because I know others might have faced similar struggles. If this feels familiar, I would love to hear your thoughts.

Thank you for reading my story.

Understanding JavaScript Functions

Frugence Fidel — Sat, 19 Jan 2019 23:14:50 +0000

This post is originally published to my blog.

What is the function

Function is the group of statements used to perform certain task. Functions are very useful when perform a repeated task.

For example, we want to output certain song lyrics.

// Declare functions
function verse1() {
  console.log('First verse goes here');
}

function verse2() {
  console.log('Second verse goes here');
}

function chorus() {
  console.log('Chorus goes here');
}

// Call them
// Use this pattern functionName()
verse1(); // First verse goes here
chorus(); // Chorus goes here
verse2(); // Second verse goes here
chorus(); // Chorus goes here

As you can see, function chorus can be repeated as many as you want.

Defining function

Function can be defined in the following ways, namely Function Declaration and Function Expression

// Function Declaration
function verse1() {
  console.log('First verse goes here');
}
verse1(); // First verse goes here

// Function Expression
let chorus = function() {
  console.log('Chorus goes here');
};
chorus(); // Chorus goes here

Returning value

Here is how you can output result from function

let chorus = function() {
  return 'Chorus goes here';
};
console.log(chorus()); // Chorus goes here

function sum() {
  return 1 + 1;
}
console.log(sum()); // 2

Function scope

If you declare variable inside the function, it can not be leak outside of that function. But function can access outside variables(global variables).

const amOut = 'Coming from outside';

function testScope() {
  const amIn = 'Coming from inside';

  console.log(amOut);
  console.log(amIn);
}

console.log(testScope()); // Coming from outside, Coming from inside
console.log(amIn); // amIn is not defined

Parameters vs Arguments

Parameters are used when defining a function while Arguments are used when calling a function. On my side, Arguments are the values of parameters, while Parameters are variables of arguments. Both helps function to take inputs.

// 'a' and 'b' are paremeters
function sum(a, b) {
  return a + b;
}

// 5 and 7 are arguments
console.log(sum(5, 7));

Default Function Arguments

Default Function Arguments are used when arguments are undefined.

function sum(a = 5, b = 7) {
  return a + b;
}

// If all arguments are undefined, then pass nothing
console.log(sum()); // 12

// If all arguments are not undefined
console.log(sum(6, undefined)); // 13

Rest Function Parameters

Rest parameters help to pass arguments as many as you want, no matter how function is defined. Rest parameters collect arguments into array.

// Without rest paremeters
function sum(a, b) {
  return a + b;
}

console.log(sum(5, 7, 6, 8)); // 12
console.log(sum()); // NaN

// With rest paremeters
function sum(...nums) {
  console.log(nums); // [5, 7, 6, 8]
  let total = 0;
  for (num of nums) {
    total += num;
  }
  return total;
}

console.log(sum(5, 7, 6, 8)); // 26
console.log(sum()); // 0
console.log(sum(5)); // 5
console.log(sum(5, 7)); // 12

High order vs callback function

High order function is the function that take other function as parameter while Callback function is the function that passed into other function as parameter.

function callback() {
  console.log('Coming from callback');
}

function highOrder(func) {
  console.log('Waiting for callback');
  func();
  console.log('Callback is called');
}

highOrder(callback);

// Waiting for callback
// Coming from callback
// Callback is called

Anonymous function

Anonymous function is the function with no name.

const anoyms = function() {
  console.log('I am Anonymous function');
};

setInterval(anoyms, 2000);

Arrow functions

Arrow functions are introduced in ES6, they have shorter syntax compared to Expression functions. Arrow functions are always anonymous and non-binding 'this'.

// Expression function
const sum = function(a, b) {
  return a + b;
};
console.log(sum(5, 7)); // 12

// In Arrow function
const sum1 = (a, b) => {
  return a + b;
};
console.log(sum1(5, 7)); // 12

// In Arrow function(Implicity return)
const sum2 = (a, b) => a + b;
console.log(sum2(5, 7)); // 12

10 JavaScript string methods you should know

Frugence Fidel — Thu, 12 Jul 2018 09:06:31 +0000

This post is originally published to my blog.

In this post I will summarize 10 javascript string methods you should at least known according to me.

If interested read here 10 javascript array methods you should know
.

String is anything inside single or double quotes.

Here are 10 javascript string methods you should know.

1. startsWith()

Check if string starts with specified character(s).

  const str = 'JavaScript is amazing';

  console.log(str.startsWith('JavaScript')); // true
  console.log(str.startsWith('Java')); // true
  console.log(str.startsWith('javascript')); // false

  // position is optional
  // if not specified, the default value is 0
  console.log(str.startsWith('Script', 4)); // true
  console.log(str.startsWith('SCRIPT', 4)); // false

2. endsWith()

Check if string ends with specified character(s).

  const str = 'JavaScript is amazing';

  // check if ends with 'amazing'
  console.log(str.endsWith('amazing')); // true
  console.log(str.endsWith('ing')); // true
  console.log(str.endsWith('Amazing')); // false

  // length is optional
  // if not specified, the default value is length of the string
  console.log(str.endsWith('is', 13)); // true
  console.log(str.endsWith('i', 13)); // false
  console.log(str.endsWith('s', 13)); // true

3. includes()

Check if string contains specified character(s).

  const str = 'JavaScript is amazing';

  console.log(str.includes('Script')); // true
  console.log(str.includes('script')); // false
  console.log(str.includes(' ')); // true
  console.log(str.includes('array')); // false

4. slice()

Copy some part of string without modifying the original one.

  const str = 'JavaScript is amazing';

  // Default start index is 0
  console.log(str.slice()); // 'JavaScript is amazing'

  // start copy at index 4
  console.log(str.slice(4)); // 'Script is amazing'

  // end copy at index 10(character at this index will not be included)
  console.log(str.slice(0, 10)); // 'JavaScript'

5. toUpperCase()

Convert string into upper case.

  const str = 'JavaScript is amazing';

  console.log(str.toUpperCase()); // 'JAVASCRIPT IS AMAZING'

6. toLowerCase()

Convert string into lower case.

  const str = 'JavaScript is amazing';

  console.log(str.toLowerCase()); // 'javascript is amazing'

7. charAt()

Return character at specified position.

  const str = 'JavaScript is amazing';

  console.log(str.charAt()); // 'J'
  console.log(str.charAt(11)); // 'i'
  console.log(str.charAt(14)); // 'a'
  console.log(str.charAt(110)); // ''

8. split()

Split string into array of substrings.

  const str = 'JavaScript is amazing';
  const strNew = 'JavaScript-is-amazing';

  console.log(str.split()); // ["JavaScript is amazing"]

  // Separator string used to determine where to make each split
  console.log(str.split('S')); // ["Java", "cript is amazing"]
  console.log(str.split('is')); // ["JavaScript ", " amazing"]
  console.log(str.split(' ')); // ["JavaScript", "is", "amazing"]
  console.log(strNew.split('-')); // ["JavaScript", "is", "amazing"]

9. replace()

Replaces specified value with another value in a string.

  const str = 'JavaScript is amazing';

  console.log(str.replace('JavaScript', 'Node.js')); // 'Node.js is amazing'

  // replace() method is case sensitive
  // replace will not work
  console.log(str.replace('Javascript', 'Node.js')); // 'JavaScript is amazing'

  // use regular expression for case insensitive
  console.log(str.replace(/Javascript/i, 'Node.js')); // 'Node.js is amazing'

  // replace() method replaces only the first match
  console.log(str.replace('a', 'A')); // 'JAvaScript is amazing'

  // to replace all matches, use regular expression
  console.log(str.replace(/a/g, 'A')); // 'JAvAScript is AmAzing'

10. repeat()

Return new string with specified number of copies of existing string.

  const str = 'JavaScript';

  console.log(str.repeat(3)); // 'JavaScriptJavaScriptJavaScript'
  console.log(str.repeat(1)); // 'JavaScript'
  console.log(str.repeat(0)); // ''

10 JavaScript array methods you should know

Frugence Fidel — Sun, 24 Jun 2018 15:23:58 +0000

This post is originally published to my blog.

In this post i will share 10 JavaScript array methods you should know.

If you know nothing about array, you can click here for array introduction.

Here are 10 javascript array methods you should at least know

1. forEach()

This method can help you to loop over array's items.

  const arr = [1, 2, 3, 4, 5, 6];

  arr.forEach(item => {
    console.log(item); // output: 1 2 3 4 5 6
  });

2. includes()

This method check if array includes the item passed in the method.

  const arr = [1, 2, 3, 4, 5, 6];

  arr.includes(2); // output: true
  arr.includes(7); // output: false

3. filter()

This method create new array with only elements passed condition inside the provided function.

  const arr = [1, 2, 3, 4, 5, 6];

  // item(s) greater than 3
  const filtered = arr.filter(num => num > 3);
  console.log(filtered); // output: [4, 5, 6]

  console.log(arr); // output: [1, 2, 3, 4, 5, 6]

4. map()

This method create new array by calling the provided function in every element.

  const arr = [1, 2, 3, 4, 5, 6];

  // add one to every element
  const oneAdded = arr.map(num => num + 1);
  console.log(oneAdded); // output [2, 3, 4, 5, 6, 7]

  console.log(arr); // output: [1, 2, 3, 4, 5, 6]

5. reduce()

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value - MDN

  const arr = [1, 2, 3, 4, 5, 6];

  const sum = arr.reduce((total, value) => total + value, 0);
  console.log(sum); // 21

6. some()

This method check if at least one of array's item passed the condition. If passed, it return 'true' otherwise 'false'.

  const arr = [1, 2, 3, 4, 5, 6];

  // at least one element is greater than 4?
  const largeNum = arr.some(num => num > 4);
  console.log(largeNum); // output: true

  // at least one element is less than or equal to 0?
  const smallNum = arr.some(num => num <= 0);
  console.log(smallNum); // output: false

7. every()

This method check if all array's item passed the condition. If passed, it return 'true' otherwise 'false'.

  const arr = [1, 2, 3, 4, 5, 6];

  // all elements are greater than 4
  const greaterFour = arr.every(num => num > 4);
  console.log(greaterFour); // output: false

  // all elements are less than 10
  const lessTen = arr.every(num => num < 10);
  console.log(lessTen); // output: true

8. sort()

This method used to arrange/sort array's item either ascending or descending order.

  const arr = [1, 2, 3, 4, 5, 6];
  const alpha = ['e', 'a', 'c', 'u', 'y'];

  // sort in descending order
  descOrder = arr.sort((a, b) => a > b ? -1 : 1);
  console.log(descOrder); // output: [6, 5, 4, 3, 2, 1]

  // sort in ascending order
  ascOrder = alpha.sort((a, b) => a > b ? 1 : -1);
  console.log(ascOrder); // output: ['a', 'c', 'e', 'u', 'y']

9. Array.from()

This change all thing that are array-like or iterable into true array especially when working with DOM, so that you can use other array methods like reduce, map, filter and so on.

  const name = 'frugence';
  const nameArray = Array.from(name);

  console.log(name); // output: frugence
  console.log(nameArray); // output: ['f', 'r', 'u', 'g', 'e', 'n', 'c', 'e']

working with DOM

  // I assume that you have created unorder list of items in our html file.

  const lis = document.querySelectorAll('li');
  const lisArray = Array.from(document.querySelectorAll('li'));

  // is true array?
  console.log(Array.isArray(lis)); // output: false
  console.log(Array.isArray(lisArray));  // output: true

10. Array.of()

This create array from every arguments passed into it.

  const nums = Array.of(1, 2, 3, 4, 5, 6);
  console.log(nums); // output: [1, 2, 3, 4, 5, 6]

Introducing JavaScript Objects

Frugence Fidel — Sun, 17 Jun 2018 10:46:10 +0000

This post is originally published to my blog.

Object is the way of storing group of data in key-value pairs. Object is denoted by symbol { }.

Let say we have to list someone first name, last name and his/her nationality.

=>By using Array

const person = ['Frugence', 'Fidel', 'Tanzanian'];

here it is difficult to understand which value is first and last name, perhaps by guessing. What if array values are interchanged

const person = ['Fidel', 'Tanzanian', 'Frugence'];

// access person's first name
person[2]; // This is not meaningful

This is perfect use for an object.

=>By using Object

const person = {
  firstName: 'Frugence',
  lastName: 'Fidel',
  nationality: 'Tanzanian'
};

Now it is simple to read data even if position are interchanged.

const person = {
  lastName: 'Fidel',
  nationality: 'Tanzanian',
  firstName: 'Frugence'
};

Create Object

There are two common way of creating an object. You can create an empty object and adding data later or you can create with it's data.

i. By empty object, add data later

// create empty object
const person = {};

// add data to object
person['firstName'] = 'Frugence';
person['lastName'] = 'Fidel';
person['nationality'] = 'Tanzanian';

console.log(person); // output {firstName: "Frugence", lastName: "Fidel", nationality: "Tanzanian"}

ii. With it's data

const person = {
  firstName: 'Frugence',
  lastName: 'Fidel',
  nationality: 'Tanzanian'
};

console.log(person); // output {firstName: "Frugence", lastName: "Fidel", nationality: "Tanzanian"}

Accessing object's data

There are two common ways of accessing data from object, namely bracket and dot notation.

const person = {
  firstName: 'Frugence',
  lastName: 'Fidel',
  nationality: 'Tanzanian'
};

// bracket notation
const first = person['firstName'];
console.log(first); // output 'Frugence'

// dot notation
const last = person.lastName;
console.log(last); // output 'Fidel'

Update object's data

You can update object by using either dot notation or bracket notation

const person = {
  firstName: 'Frugence',
  lastName: 'Fidel'
};

// bracket notation
person['firstName'] = 'John';

// dot notation
person.lastName = 'Doe';

console.log(person); // output {firstName: "John", lastName: "Doe"}

Adding method to Object

Methods are functions inside the object.

const person = {
  firstName: 'Frugence',
  lastName: 'Fidel',
  nationality: 'Tanzanian',
  sayHi() {
    return `Hi!! My name is ${person.firstName} ${person.lastName}, and I'm ${person.nationality}`;
  }
};

// sayHi is the method
console.log(person.sayHi()); // output "Hi!! My name is Frugence Fidel, and I'm Tanzanian"

Data type in object

Object can hold any javascript data types.

const person = {
  fullName: 'Frugence Fidel',
  isTanzanian: true,
  luckyNumber: 1
};

Nesting object and array

Sometime you may need to nesting Object and Array to meet your need.

const person = {
  fullName: 'Frugence Fidel',
  hobbies: ['Watch TV', 'Football', 'Reading', 'Coding']
};

Understanding basics of array in javascript

Frugence Fidel — Sat, 05 May 2018 10:29:38 +0000

This post is originally posted to my blog.

In the post I will share some basics about Array.

Array

Array is the way of storing group or list of data.

Let say, we want to store group of colors without using array.

  const color1 = 'purple';
  const color2 = 'black';
  const color3 = 'yellow';
  const color4 = 'aqua';

As we see, our codes are not DRY(Don't Repeat Yourself) at all. They are WET(Write Everything Twice), this is not a good practice for writing good code. We can use Array to solve this problem.

  const colors = ['purple', 'black', 'yellow', 'aqua'];

How to create Array

You can start with empty Array and then add data later, or you can start with it's data;

  // empty array
  const colors = [];

  // with data
  const colors = ['purple', 'black', 'yellow', 'aqua'];

Add data into array

There two way I known for adding data into the Array, 'bracket notation' and array methods.

i. By bracket notation

Array are indexed starting from 0.

  const colors = [];

  // Add first data
  colors[0] = 'purple';

  // So the second item
  colors[1] = 'black';

  console.log(colors); // ['purple', 'black'];

ii. By Array methods

If you want to add item at very first position of Array use unshift method, at very end use push method.

  const colors = ['purple', 'black'];

  // use unshift method to add to front
  colors.unshift('aqua');
  console.log(colors); // ['aqua', 'purple', 'black'];

  // use push method to add to end
  colors.push('yellow');
  console.log(colors); // ['aqua', 'purple', 'black', 'yellow'];

Access data from Array

You can access data from Array by using bracket notation.

  const colors = ['purple', 'black', 'yellow', 'aqua'];

  // black and aqua
  colors[1]; // 'black'
  colors[3]; // 'aqua'

Also you can access array's item by loop over it.

  const colors = ['purple', 'black', 'yellow', 'aqua'];

  for(const color of colors) {
    console.log(color);  // purple black yellow aqua
  }

Update data of Array

Also you can use bracket notation to update array's data.

  const colors = ['purple', 'black'];

  // update black to yellow
  colors[1] = 'yellow';
  console.log(colors); // ['purple', 'yellow'];

Array can hold any data type and can be nested.

  const data = [24, true, ['orange', null], undefined];

Naming CSS classes with BEM

Frugence Fidel — Wed, 28 Mar 2018 14:02:04 +0000

This post is originally posted to my blog.

BEM - Block Elemet Modifier is the way of naming CSS classes so that they can be more meaningful and reusable.

BEM help to avoid name collisions and reduce the pain of modifying CSS classes when changes are need to be made. As you known when working with large project, modifying a single CSS class may lead to dozens of affected pages. BEM help to avoid all those problems.

Let me explain what I known about BEM:

B - Block

Block is an independent, reusable and standalone part of design. Blocks can be nested in each other.

  <!-- hero block -->
  <section class="hero">
    <!-- btn block -->
    <a href="#" class="btn">Click Me!!</a>
  </section>

E - Element

Element belongs to a block and can not standalone. Simply it can not be used outside of the block that it belongs to. Elements can be nested inside each other. CSS class is formed as block name plus two underscores plus element name.

  <!-- hero block -->
  <div class="hero">
    <!-- content element belongs to hero block -->
    <div class="hero__content">

      <!-- title element belongs to hero block -->
      <h1 class="hero__title">I'm main title</h1>

      <!-- text element belongs to hero block -->
      <p class="hero__text">Cupiditate dolores iste reiciendis ea non iure est.</p>
    </div>
  </div>

M - Modifier

Modifiers are used to change the default behavior or state of an element or block. Also Modifier are not standalone, mean they can not used outside of blocks that they belongs to. They show what size, how difference or how does they behave from default ones. CSS class is formed as block name plus two 'minus sign' plus element name.

  <div>
    <!-- default btn block -->
    <a href="#" class="btn">I'm OG</a>

    <!-- btn block modified by red modifer -->
    <a href="#" class="btn btn--red">I'm red</a>

    <!-- btn block modified by red and large modifer -->
    <a href="#" class="btn btn--red btn--large">I'm red and large</a>
  </div>

Also you can watch video here about BEM

Javascript variables - var, let and const.

Frugence Fidel — Tue, 27 Mar 2018 14:14:07 +0000

This post is originally posted to my blog and my youtube channel.

Javascript variables are containers that holding pieces of data.

There are three keywords used when declaring variable in Javascript, namely var, let and const. They follow this pattern or syntax var variableName = variableValue;.

Javascript variables are dynamic typing mean that they can change from one data type to another. Below, the variable fullName change from string to number and then boolean.

  var fullName = 'Frugence Fidel'; // Frugence Fidel
  fullName = 100; // 100
  fullName = false; // false

Temporal Dead Zone

You cannot access the variable before you define it.

  console.log(fullName); // Uncaught ReferenceError: fullName is not defined
  const fullName = 'Frugence Fidel';

Ways or styles for naming variables

snake_case

var full_name = 'Frugence Fidel';
camelCase

var fullName = 'Frugence Fidel';

It's recommanded to use camelCase.

Three ways of declaring variables

=> var

This was the only way to declare variable before ES6. Here you can declare the same variables more than one time and can be updated.

  var myFriend = 'Baraka';
  var myFriend = 'Peter';
  console.log(myFriend); // 'Peter'

If you declare variable inside the block statement, the variable will leak outside.

  var bodyWeight = 50;
  if (bodyWeight > 49) {
    var water = 1.4;
    console.log(`For body weight of ${bodyWeight}kg, you should drink water atleast ${water}litre`);
  }
  console.log(water); // 1.4

=> let and const

let and const are the new ways for declaring variables introduced in ES6. In let and const you cannot declare the variable twice.

  let myFriend = 'Baraka';
  let myFriend = 'Peter'; // Uncaught SyntaxError: Identifier 'myFriend' has already been declared

In most case let and const are almost same, the only difference I known, const cannot be updated but let can.

  // let can be updated
  let myFriend = 'Baraka';
  myFriend = 'Peter';
  console.log(myFriend); // Peter

  // const cannot be updated
  const otherFriend = 'Patrick';
  otherFriend = 'Raphael'; // Uncaught TypeError: Assignment to constant variable.

The variable is not leaked outside of the block statement if you use let or const.

  const bodyWeight = 50;
  if (bodyWeight > 49) {
    const water = 1.4;
    console.log(`For body weight of ${bodyWeight}kg, you should drink water atleast ${water}litre`);
  }
  console.log(water); // Uncaught ReferenceError: water is not defined

When to use var, let and const

Always use const when declaring variable, use only let when you want update the variable. var shouldn't be used in ES6 and above.

Here is video about the subject

What is the Web Stack!!!???

Frugence Fidel — Sat, 24 Mar 2018 12:50:16 +0000

This post is originally posted to my blog.

Someone can ask you, "What is your stack?"/ "Which stack used in your project?"/ Which stack does your company use?
In this post i share what I known about Web Stack.

Web stack is the collection of the technologies/tools used for web development.

There are three types of Web Stack, namely FrontEnd, BackEnd and Full Stack.

FrontEnd Stack - This stack work with languages that render with browser. It's also called client side. The developer who work with this stack is called FrontEnd Developer, and normally they work with HTML, CSS and JavaScript. It's called FrontEnd Stack because present stuff that you see on website and interact with. HTML is used for defines the structure of the webpage, CSS is used for style HTML document and JavaScript is used for adding logic and interactivity to the webpage.
BackEnd Stack - This stack work with languages that building the actual logic behind the application. It's also called server side. The developer who works with this stack is called BackEnd Developer. Often FrontEnd development work is more about creating user interfaces while BackEnd development implementing the actual business logic that makes the app work. In BackEnd Stack most of action is not happen in front of user but in the server and background. BackEnd Developer work with server side scripting languages and database languages. Server side scripting languages are languages that run on the server, example PHP, NodeJs, Python and ASP.NET. They used to create communication between user, server and database. Database languages are used for read, update, delete and create data in the database. There are two broad categories of database language, namely SQL(Relational Database) and NoSQL(Non-Relational Database).
Full Stack -This stack work with both FrontEnd and BackEnd stack. Being a Full Stack developer require you to know about all the FrontEnd and BackEnd technologies.