Forem: Muriithi Gakuru

5 X 5 Chess board UI using CSS Grid

Muriithi Gakuru — Tue, 07 Jun 2022 11:06:58 +0000

Write articles using your voice using Bonga Editor.

Muriithi Gakuru — Thu, 31 Mar 2022 11:51:02 +0000

—

✨ Build Challenge ✨

Overview

This application is written using Nodejs and Express. It enables a user to have their speech transcribed using their microphone onto a rich text editor. They now have a choice between using spoken or written text and can interchange the two depending on how they would like their final product to be formatted.

Submission Category:

Accessibility Advocates

Link to Code on GitHub

Link
morehwachege / potential-memory

Bonga is Swahili slang for speak/talk. Bonga Editor is a JavaScript application that is primarily meant to turn speech into text in real time hence it can be used to write an article or produce transcripts while a podcast is running in the background.
Bonga Editor

Bonga is Swahili slang for speak/talk Bonga Editor is a JavaScript application that is primarily meant to turn speech into text in real time hence it can be used to write an article or produce transcripts while a podcast is running in the background.

Installation

A little intro about the installation.

Use the package manager npm to install Bonga.
$ git clone https://github.com/morehwachege/potential-memory.git $ cd ../path/to/the/folder $ npm install $ npm start
Usage

Start the server at port 3100
node index.js
Contributions & Collaborations

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Guidelines
- Be informative. Format your pull requests nicely. Include screenshots if applicable.
- Be a good citizen. Try your best to adhere to the established styles of the project. This doesn't mean that you shouldn't…
View on GitHub

Live Screen Editor Platform

—

Introduction

Deepgram's Speech to text technology presents endless possibilities. The scope of products you can produce using speech are endless.

I decided to enter this hackathon just to have a taste of automation and making work easier since tech mostly focuses on that.
Speech to text == commands is a logic that has changed the world.

My Deepgram Use-Case

A while back when I started out on writing articles. My goal was to document everything that I had learnt thus challenging me not to lag in my journey.

My problem was that sometimes after a long coding sessions and debugging my hands got too tired to type hence often opted to procrastinate on both the article and my personal standups till I had more time to spare.

Having that I can't cut out coding time I skipped most sessions.
I was so excited to start this project because it closely relates to a problem that I have faced and providing a solution to that is intriguing for me.
During this process I have encountered so many different technologies, most of which are new to me including Deepgram.

Challenges

I wanted to learn Nodejs and Express which I dedicated to this project. Integrating Deepgram was a breeze.

However, the editor has overall been the greatest challenge yet.
I went over very many rich text editors but I couldn't seem to understand how to get the transcribed text into the editor's inner frame.

Editor APIs considered in development:

CKEditor
TinyMCE
Joomla

None of these worked for me at the time so I ventured to find a way to create my own. I now prefer this version since I can build on it as I go. Languages used for the editor are html, css and javascript.

Deep Dive and Details

This application works for content creators or anyone who finds it easier to speak than type at any moment.

Using the wysiwyg editor you can get your speech transcribed and formatted and only copy when you are satisfied with the results.

For the most part Content Creators would benefit the most from this product.

Podcasts and radio sessions can instantly be turned into blogs.
Article writers can speed up their production since speech is faster than typing.
Users may use the product to transcribe meetings with plausible formatting to produce easily readable material through Voice Activity Detection. This is just like real time minute recording, only a lot less effort is involved.
Since you don't really need hands on this one, people with disabilities can now make a few more dollars on online content. It gives them a 'voice' in the industry.
Learning platforms - Teachers can publish academic papers off of material they teach. Learners can have a record of club proceedings.

I have learnt a lot in terms of speech-to-text technology and speech recognition AI.

Some of the problems such as the mic picking up ambient noise and surrounding sounds may sometimes distort a transcript. Deepgram has given me an in depth introduction and my research into natural language processing has been eye opening.

Some of the features offered help to separate between age groups. A younger age group will have enforced profanity filters whilst an adult age group will have a choice between activating the filters or not.

Conclusion

Participating in this Hackathon has been an amazing experience overall. Learning by doing increases retention rate and I appreciate this platform for such a chance.

—

Who do you ask?

Muriithi Gakuru — Thu, 03 Mar 2022 20:11:45 +0000

Do you have a person whom you reach out to to get honest opinions about your creations? Who are they to you?
Mine is my best friend Goretti who has had amazing input into my growth over the years.

Introduction to Data Structures and Algorithms with JavaScript.

Muriithi Gakuru — Mon, 21 Feb 2022 21:00:37 +0000

In this post we're going to be looking into data structures and algorithms.
Hopefully this will help to improve your skills and understanding.
Let's start with a good old fashioned definition

Data Structures - this is an organization of data so that it can be used efficiently. It provides a way so that data can be stored, organized, retrieved and used efficiently.

This is an introduction to Data Structures(DS) so we'll get straight into it.

Arrays

Similar to other programming languages, array objects in JavaScript enable storing a collection of multiple items under a single variable name. One important factor about arrays in js are not primitives meaning that the data are not objects and have no underlying methods.
Examples of primitive types in js are; string, number, bigint, boolean, undefined, symbol, and null.
Let's give some characteristics of arrays.

JavaScript arrays are resizable and can contain a mix of different data types.
Arrays must be accessed using integer indices. Elements cannot be accessed using strings because they are not associative.
The first element of the array is always 0. One might think that this is common knowledge but in some languages the first element is 1.

- FORTRAN
- COBOL

Constructor
Array()
This creates a new Array object

// Initializing while declaring
// Creates an array having elements 10, 20, 30, 40, 50
var house = new Array(10, 20, 30, 40, 50);

//Creates an array of 5 undefined elements
var house1 = new Array(5);

//Creates an array with element 1BHK
var home = new Array("!BHK");

How to create and array

// 'fruits' array created using array literal notation.
const fruits = ['Apple', 'Banana'];
console.log(fruits);
// ['Apple', 'Banana']
console.log(fruits.length);
// 2

// 'fruits' array created using the Array() constructor.
const fruits = new Array('Apple', 'Banana');
console.log(fruits);
//  ['Apple', 'Banana']
console.log(fruits.length);
// 2

// 'fruits' array created using String.prototype.split().
const fruits = 'Apple, Banana'.split(', ');
console.log(fruits);
 ['Apple', 'Banana']
console.log(fruits.length);
// 2

The above example shows how to create an array from a string separated using a comma. We can also create a string from an array using the join() method and add a comma separator.

const fruits = ['Apple', 'Banana'];
const fruitsString = fruits.join(', ');
console.log(fruitsString);
// "Apple, Banana"

Functions to use with Array

Array.isArray()
Returns true if the argument is an array, or false otherwise.
Array.prototype.reverse()
Reverses the order of the elements of an array in place. (First becomes the last, last becomes first.)
Array.prototype.unshift()
Adds one or more elements to the front of an array, and returns the new length of the array.
Array.prototype.splice()
Adds and/or removes elements from an array.
This is just the tip of the iceberg. There is more to arrays and to their uses here.

Queue

Think of a queue in a bank. It's probably a 20th century example but applicable. The first person to join the queue gets served first and leaves. Only then do people who joined after are served, first one in first one out.

This data structure uses the First In First Out(FIFO) principle. Where the dequeue is the removal of the first element and the enqueue is the addition of an element onto the queue as shown below.

Queue has the following methods:

enqueue - adds an element at the end.

// enqueue function
enqueue(element)
{   
    // adding element to the queue
    this.items.push(element);
}

This function adds an element at the back of a queue. We have used push() method of array to add an element at the end of the queue.

dequeue - removes an element at the front of the queue.

// dequeue function
dequeue()
{
    // removing element from the queue
    // returns underflow when called
    // on empty queue
    if(this.isEmpty())
        return "Underflow";
    return this.items.shift();
}

This function removes an element from the front of a queue . We have used shift method of an array to remove an element from the queue.

front - this gets the first element.

// front function
front()
{
    // returns the Front element of
    // the queue without removing it.
    if(this.isEmpty())
        return "No elements in Queue";
    return this.items[0];
}

This function returns the front element of the queue. We simply return the 0th element of an array to get the front of a queue.

size - gets the number of elements in the queue
isEmpty - shows whether the queue is empty.

// isEmpty function
isEmpty()
{
    // return true if the queue is empty.
    return this.items.length == 0;
}

In this function we have used the length property and if the array length is 0 then the queue is empty.

Stack

The name stack comes from the analogy to a set of physical items. Let's use books for instance. I'll drop an image just for context.

We start by placing one book and then each consequent book is placed on top of the other. When we need to access the first book placed, we'll have to take each book out starting with the one that was placed last.
Some pancakes would suffice too! Let's stack them up ;)

This is the Last In First Out (LIFO) principle.

JavaScript Array type provides the push() and pop() methods that allow you to use an array as a stack.

push()
The push()method allows you to add one or more elements to the end of the array. The push() method returns the value of the length property that specifies the number of elements in the array.

If you consider an array as a stack, the push() method adds one or more element at the top of the stack. The following example creates an empty array named stack and adds five numbers, one by one, at the end of the stack array. It is like to push each number into the top of the stack.


    
let stack = [];

stack.push(1);
console.log(stack); // [1]

stack.push(2);
console.log(stack); // [1,2]

stack.push(3);
console.log(stack); // [1,2,3]

stack.push(4);
console.log(stack); // [1,2,3,4]

stack.push(5);
console.log(stack); // [1,2,3,4,5]

Try it out.

pop()
The pop() method removes the element at the end of the array and returns the element to the caller. If the array is empty, the pop() method returns undefined.

The following example shows how to pop elements from the top of the stack using the pop() method.


    
console.log(stack.pop()); //  5
console.log(stack); // [1,2,3,4];

console.log(stack.pop()); //  4
console.log(stack); // [1,2,3];

console.log(stack.pop()); //  3
console.log(stack); // [1,2];

console.log(stack.pop()); //  2
console.log(stack); // [1];

console.log(stack.pop()); //  1
console.log(stack); // []; -> empty

console.log(stack.pop()); //  undefined

Linked List

A linked list or a singly linked list is a representation of a list of values like an array, but each item in the list consists of a single object that has two properties:

The value property stored inside the object
The next property(node) that points to the next object
It is a collection of nodes in which each node is pointing to next node and last node points to null.

The linked list data structure value can be of any valid JavaScript data types (string, number, boolean, object, etc)

Declaration of type node for Linked List
We have to create a data structure or Node which contains two parts i.e, first part will contain the data to be stored and second will store address of next such node. We can create this by using user defined data type.


    
class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

Linked lists is a more superior data structure. I'll update this post once my understanding is good enough to give conclusive information.

Conclusion
"Data structures is fun" may be a statement you may not want to hear but they are very interesting. The have grown on me, to be honest.
If you're one for solving puzzles I may, or may not have a challenge for you ;)
Let me not go there though.
Please don't google the Tower of Hanoi challenge. It's too easy for your level.
Coffee break!!
Cheers!

BC30420 'Sub Main' was not found error in a Windows Form app: Quick Fix.

Muriithi Gakuru — Sat, 19 Feb 2022 17:57:20 +0000

It's safe to say that Visual Basic has become one of the hardest languages to find content about online ever since Microsoft announced that there won't be any more features added to it in .NET CORE/ .NET 5.

“ Going forward, we do not plan to evolve Visual Basic as a language ”
.NET Team

That explained a lot when I tried to troubleshoot an error I'd gotten and the whole of the internet was almost blank, for an error I'd call trivial and noob level. I've recreated the above error so as to show you how to solve it. Save you time.

Every time I tried the compile and run the project, i got and error that the Sub Main()

was not found.
The solution to this is to check that the startup form isn't referencing to an old method. You can find that in your project properties.

All you have to do is right-click on your main project in the top-right area of the visual basic working area.

Scroll to the bottom and click on properties.

On the new window right at the Startup Project section is where you're going to change from
Sub Main

to the name of your Form.

Once you're done, you can exit that tab and re-run your project.

Everything should be working fine and you can notice that the error is gone.

Conclusion

Every day is a coding challenge. If you feel that the content was inadequate please comment about it or contact me. Keep coding. Cheers !!

JS 101:Introduction to modern JavaScript.

Muriithi Gakuru — Mon, 14 Feb 2022 16:49:40 +0000

JavaScript is the most used programming language. It is used alongside HTML(Hypertext Markup Language) and CSS(Cascading Stylesheet) on the World Wide Web. It is used on the client side to manipulate webpage behavior.
JavaScript is Multi-paradigm. This means that it is event-driven, functional, imperative and incorporates object-oriented programming.

Getting Started.

We're going to print a Hello World statement. JavaScript uses the console on the browser to print statements. You don't need to install JavaScript since it is interpreted by the browser. We just have to write code on a file with a dot js extension as such;
myFile.js

On your browser, navigate to the location of your project. Right-click and select inspect. Click on the console tab to get your console.
We can achieve the same result using an Integrated Development Environment.
We just have to write code on a file with a dot js extension as such;
myFile.js

We get the same print statement when we refresh the browser.

The hello world statement is a bit distorted to show the difference.
Comments

// This is a single line comment
/* This
    is
    a multi-line
    comment
*/

Variables

We assign variables using various keywords such as var, let or const
Var - var is used to declare variables. It is flexible in that the data can be reassigned later in the code. Var is functional scoped It is able to run in the older browser versions.
Let - it's used to declare variables much like var. The difference is let can not be redeclared later on. Let has a block scope. Get more information here.
Const - These are constant that are block scoped much like let declared variables. Values cannot be reassigned but the can be redeclared through variable declaration. However, if a constant is an object or array its properties or items can be updated or removed.

Data Types

**
Strings - Js support string assignment. This is used to print statements and store words or variables that are required to be processed as strings.

let name = "Muriithi Gakuru";

The value is enclosed by quotation marks and the end of the statement has to be a semi-colon.

Integers - These are assigned decimal numbers

let b = 210;

Extra large or extra small numbers can be written with scientific (exponential) notation

let a = 123e5;      // 12300000
let d = 123e-5;     // 0.00123

Floating Point numbers - These are declared much like integers only that these have decimal points.

const temperature = 13.4;

Boolean Values - These are assigned values that show whether a condition or values is true or false.

let isAlive = true;
// reassign to false
isAlive = false;

BigInt - Used to represent an manipulate primitive bigint values which are too big to be represented by a number.

const MaxSafeInteger = 9007199254740991n

const alsoHuge = BigInt(9007199254740991)

Arithmetics - JavaScript supports all mathematical arithmethic and logical operations.

Arrays

An array is a special variable, which can hold more than one value. The values are enclosed in square brackets.

const cars = ["volvo", "mercedes", "Rolls Royce"]
// They can contain different data types
let details = ["Muriithi Gakuru", 23, "Wisconsin", 72.4 ]

Syntax for an array is

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

Objects

JavaScript objects are containers for named values called properties.
These store values that can be accessed using name:value pairs. They are variables enclosed using curly braces.

const car = {
   type:"Fiat", 
   model:"500", 
   color:"white"
};
// You can access the value by using the key ie. property name `car.key`
console.log(car.type) // this will print Fiat

Conditional Statements

Conditional statements are used to perform different actions based on different conditions.
Use if to specify a block of code to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false

if (condition) {
  //   executed if the condition is true
}else if(condition){
 //    executed if the first condition failed
}
else{
  // executed if the previous conditions failed
}

Loops

JavaScript supports different kinds of loops:

for - loops through a block of code a number of times

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

for/in - loops through the properties of an object

for (key in object) {
  // code block to be executed
}

for/of - loops through the values of an iterable object

for (variable of iterable) {
  // code block to be executed
}

while - loops through a block of code while a specified condition is true

while (condition) {
  // code block to be executed
}

do/while - also loops through a block of code while a specified condition is true

do {
  // code block to be executed
}
while (condition);

More information on the loops is shared here

Functions

A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it). It is called using the function name, either to print or to return a value.

function printName(){
   name = "Muriithi Gakuru";
   console.log("My name is", name);
}
//call the function
printName()

A function may take arguments making calling JS functions more dynamic.

function printName(name){
   console.log("My name is", name)
}
// call the function using an argument
printName("Muriithi Gakuru")

This is just an introduction into the vastness of JavaScript. It is a very robust language hence its uses both in the client side and the server side. Keeplearning and Follow for more content. Cheers!!
credits
w3schools
mozilla

Introduction To Modern Python

Muriithi Gakuru — Mon, 14 Feb 2022 07:32:18 +0000

What is Python

Python is an interpreted high-level general-purpose programming language. Its design philosophy emphasizes code readability with its use of significant indentation. Its language constructs as well as its object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects. That's according to our good friend Wikipedia.
Python is best used for automation. It's uses extend to Web, Mobile and Game Development, Machine Learning and Data Science. This is because python can be ran on multiple platforms; windows, linus and mac os.

Getting Started

First things first.
We'll start by downloading a python interpreter for our machine by navigating to here. Funny story, I had written down how to configure your development environment and installation process but decided it wasn't comprehensive enough and would make this lengthy. Please refer here then come back for an in depth introduction.

Writing your first program

We'll start with the ceremonial starter program, Hello World.
You should be able to work on the command prompt REPL(Read–eval–print loop) environment
This is what I mean.

If you can get that on cmd then we're ready to go, Hurray!

Hello World

Type a print statement to print.

print('Hello World')
# This is a comment

Python is simple like that.

Comments

# This is a single line comment
"""
    This is a multi-line comment
"""

Variable declaration

We declare variables to reuse them later right? Python requires us to assign a value to the variable. You don't need a type identifier since python detects it right away.

my_name = "Muriithi Gakuru"

The snake case is more preferred. This is done by joining variables with an undercase as done above.

Variable types in python

Strings - Strings in python are surrounded by either single quotation marks, or double quotation marks. 'hello world' is the same as "hello world"

Numbers - There are three numeric types in python;

Integer - is a whole number, positive or negative, without decimals.

a = 251

Float - is a number, negative or positive containing one or more decimal points.

b = 19.5

Complex - these are written with a "j" as the imaginary part.

c = 15j

Booleans - These store an output of either True or False.

Lists

Python lists are used to store data in array format. Different data types can be stored in the same list.

my_list = ['name', 210, 'age', 33.5]

You can call a list's contents using their indices
my_list[0] will give an output of the string 'name' at index 0.
You can use the slicing operation [:] to get an item or a range of items. Example:

name = [120, 'savor', 32.4, 'title']
# if we want to access items from index 1 to the end of the list 
print(name[1:]

this will give an out put of a list;
['savor',32.4, 'title']
if we want to access all items in the list non-inclusive of the last item, we add a negative sign to the slice.

print(name[:-1]

this will give an out put of a list;
[120, 'savor', 32.4]

Tuples

Tuples store data much like lists only that values in a tuple are unchangeable. A tuple is ordered and enclosed in round brackets. They are mostly used to store sensitive data that should not be reassigned later in the program such as user information.

my_tuple = ("Ken", 23)
print(my_tuple)

Sets

They are used to store multiple items in a single variable. Sets contain unique items and there cannot be any duplicates or else they will be eliminated.
Set contents are unchangeable but you can remove or add items to the set. They are enclosed by curly braces.

my_set = {"apple", "banana", "cherry"}
print(my_set)

Dictionaries

Dictionaries store data in key:value pairs. They are enclosed in curly braces. They do not allow duplicates since a value can only be accessed using a single, distinct key. dict is a keyword that refers to a dictionary.

my_dict = {
  "brand": "Ford",
  "model": "Mustang",
  "year": 1964
}
print(my_dict)
print(my_dict.keys())
print(my_dict.values())
print(my_dict.items())
# try these out

Loops

Loops take care of indentation according to PEP8

If - Else Python supports all logical operations in mathematics Equals: a == b Not Equals: a != b Less than: a < b Less than or equal to: a <= b Greater than: a > b Greater than or equal to: a >= b

b = 13
c = 300
if c > b:
  print("c is greater than b")
else:
    print("The else clause was called")

While Loop This executes a list of statements provided the condition is true.

i = 1
while i < 6:
  print(i)
  i += 1
# Note: if i is not incremented, the loop will continue infinitely.

For Loop For loops are used for iterationg through a sequence. This may be a list, dictionary, set or tuple.

fruits = ["apple", "banana", "cherry"]
for x in fruits:
  print(x)

This prints the contents of fruits one after the other.
You may also iterate through a string.

Functions

A function is a block of code that only runs when it's called.
Functions enable the resuse of repetitive parts of the program.
Below is a function to print a user's name.

def print_name():
    my_name = "Muriithi Gakuru"
    print('My name is ', my_name)

# functions are called by typing the function name and parentheses

print_name()

A function can take an argument or two so as to receive data dynamically later in the program.

def print_name(my_name):
    print('My name is ', my_name)
# the argument is placed between the parentheses

# call the function by adding the argument in the function
print_name("Muriithi Gakuru")

All these take practice to have them at your fingertips. These are the fundamentals of modern python. I hope you had fun in the journey of being a techie.
credits to w3schools and Unsplash
Cheers

Forem: Muriithi Gakuru

5 X 5 Chess board UI using CSS Grid

Write articles using your voice using Bonga Editor.

✨ Build Challenge ✨

Overview

Submission Category:

Link to Code on GitHub

morehwachege / potential-memory

Bonga is Swahili slang for speak/talk. Bonga Editor is a JavaScript application that is primarily meant to turn speech into text in real time hence it can be used to write an article or produce transcripts while a podcast is running in the background.

Bonga Editor

Installation

Usage

Contributions & Collaborations

Guidelines

Live Screen Editor Platform

Introduction

My Deepgram Use-Case

Challenges

Deep Dive and Details

Conclusion

Who do you ask?

Introduction to Data Structures and Algorithms with JavaScript.

Arrays

Queue

Stack

Linked List

BC30420 'Sub Main' was not found error in a Windows Form app: Quick Fix.

Conclusion

JS 101:Introduction to modern JavaScript.

Getting Started.

Variables

Data Types

Arrays

Objects

Conditional Statements

Loops

Functions

Introduction To Modern Python

What is Python

Getting Started

Writing your first program

Hello World

Comments

Variable declaration

Variable types in python

Lists

Tuples

Sets

Dictionaries

Loops

Functions