Forem: mrwolferinc

Introducing: montyhallsim!

mrwolferinc — Thu, 07 Jul 2022 17:30:25 +0000

I am proud to announce that I have created my first Python package and uploaded it to PyPI. It's called montyhallsim, and it serves as a command-line interface for simulating the Monty Hall problem.

The package consists of only one Python module, so it's easy to copy the source code into a project. It also only occupies about 4 kilobytes of disk space, so it's not as big as compared to other Python command-line interface packages.

The current version of montyhallsim as of July 7, 2022 is v1.0.1. I am looking forward to having more contributors to work with, as I am unfortunately the only contributor on the montyhallsim GitHub repository right now. Hopefully, this post will make more people want to contribute to montyhallsim. 😔

The PyPI page for this project can be found here, and the GitHub repository for this project can be found here.

I want this Python package to become popular, as it is my very first one. I also think that it can sometimes be useful when you want to try a test scenario of the Monty Hall problem. I want it to become widely installed and used around the world both personally and commercially, making me famous.

Anyways, that's all for now, and I hope you guys like my project!

Calculating the Mean of an Array in JavaScript

mrwolferinc — Wed, 06 Jul 2022 19:31:37 +0000

Calculating the mean of a list isn't an easy task in JavaScript. The programming language does not have its built-in feature that allows you to find the mean of an array. This can be frustrating especially when you have to work with statistics. Fortunately, I have created two simple workarounds that make this process easier. They aren't too complicated and can be added to any JavaScript project without having to install external/third-party libraries. Let's take a look at them, shall we?

What is mean?

Before we look at the workarounds, you first need to know what the mean of a list is. The arithmetic mean, more commonly known as the mean or average, is the sum of the values of a data set divided by the number of values in the data set. For example, if we have a data set $X={1,2,3,4,5}X=\lbrace 1,2,3,4,5\rbrace$ , then the mean of $X$ would be 3, because

1+2+3+4+55=155=3.\frac{1+2+3+4+5}{5}=\frac{15}{5}=3.

The arithmetic mean is the most common measure of central tendency, and is used in many diverse fields such as economics, anthropology, and history. It is also used in almost every academic field to some extent.

Using `reduce()`

The first method of calculating the mean of an array in JavaScript is by using the reduce() method:

const mean = data => {
  if (data.length < 1) {
    return;
  }
  return data.reduce((prev, current) => prev + current) / data.length;
};

const array = [1, 2, 3, 4, 5];
console.log(mean(array)); // Output: 3

The reduce() method executes a user-supplied "reducer" callback function on each element of an array, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

In this workaround, the array (as a function parameter named data) is first checked to see if it has at least 1 element. If data does not meet this requirement, then the function returns nothing. Otherwise, the reduce() method is used on data to find the sum of its elements, and then divides the result by data's length.

This is the most straightforward workaround that exists, but it only works on arrays containing numbers. If you need to find the mean of an array containing strings as numbers, then check out the next workaround.

Using `map()` and `reduce()`

This method works on arrays containing strings as numbers. It is similar to the previous workaround, but it uses the map() method to convert the elements to numbers:

const mean = (data, asString) => {
  if (data.length < 1) {
    return;
  }
  if (asString && asString === true) {
    return String(data.map(elem => Number(elem)).reduce((prev, current) => prev + current) / data.length);
  } else {
    return data.map(elem => Number(elem)).reduce((prev, current) => prev + current) / data.length;
  }
};

const array1 = ['2', '4', '6', '8', '10'];
const array2 = ['3', '6', '9', '12', '15'];
console.log(mean(array1));       // Output: 6
console.log(mean(array2, true)); // Output: "9"

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. In this workaround, the map() method is called on data, the reduce() method is called on the result, and the sum is divided by data's length. The function also takes an asString parameter to optionally return the mean as a string.

That's it for today's post! I hope you guys enjoyed it!

p5.js Sine Wave

mrwolferinc — Tue, 05 Jul 2022 15:29:23 +0000

A simple sine wave with p5.js. This pen was inspired by an example created by Daniel Shiffman for the official p5.js website. My version has a few other features added such as support for dark mode.

p5.js Loading Spinner

mrwolferinc — Mon, 04 Jul 2022 16:08:40 +0000

A loading spinner with p5.js.

I Have a GitHub Resume!

mrwolferinc — Sun, 03 Jul 2022 15:08:29 +0000

I am proud to announce that not only this is my first post on this blog, but I have created my first resume on GitHub! I also decided to make the README.md file for the repository as my profile README!

I give my location, email address, summary, professional history, educational history, and skills in the resume. I decided not to give my phone number because I didn't want to have any random people call me. I also decided to have a gh-pages branch as the main branch because I also wanted my resume to be in the form of a website.

You can find the website for the resume here and the repository for it here.

I hope that people think my resume looks nice because I just created it yesterday and it still may look a bit off given the fact that I used Bootstrap to make the website, but honestly, I think that my resume is worth it!

What are you guys thankful for?

mrwolferinc — Thu, 25 Nov 2021 21:15:52 +0000

Welcome back to another post! Today is Thanksgiving, which means that it's time to reflect on the programming resources that you are thankful for. Your response can include:

Programming languages (Python, JavaScript, Java, etc.)
Programming tools (GitHub, Stack Overflow, Docker, etc.)
Your favorite feature of a specific programming language (variables, functions, modules, keywords, etc.)
Your projects

Enter your response in the comments section below.

Anyways, that's all I have for now, and I hope you guys have a safe and happy thanksgiving!

CSS Graph Paper

mrwolferinc — Sun, 15 Aug 2021 20:56:30 +0000

A graph paper pattern with HTML and CSS. I decided to make this CSS design because my previous design became extremely successful.

CSS Ruled Paper

mrwolferinc — Wed, 04 Aug 2021 22:02:46 +0000

A ruled paper pattern with HTML and CSS.

Holy Grail Layout

mrwolferinc — Mon, 14 Jun 2021 17:09:02 +0000

The Holy Grail Layout with CSS grid.

Dark Mode Toggle Switch

mrwolferinc — Sat, 12 Jun 2021 19:30:08 +0000

An extension to Gaurav's custom toggle switch. I modified it so that users can switch between light and dark modes.

Pure CSS Tabs

mrwolferinc — Tue, 08 Jun 2021 17:49:04 +0000

An example of some tabs created using HTML and CSS. I tried to make it as modern and mobile-friendly as possible. I hope you enjoy it!

React Without JSX

mrwolferinc — Mon, 10 May 2021 18:11:16 +0000

JSX is not a requirement for React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment.

This tutorial will show you how to use React without JSX. It will also show you how code written in JSX is converted to plain JavaScript.

What is JSX?

Consider the following variable decleration:

const element = <h1>Hello, world!</h1>;

This strange tag syntax is neither a string nor HTML.

It is called JSX, and it is a syntax extension to JavaScript. It is commonly used with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

Converting to JavaScript

Each JSX element is actually syntactic sugar for calling the React.createElement() method. This means that any code that is written in JSX can also be written in plain JavaScript.

For example, this code is written in JSX:

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.toWhat}!</h1>;
  }
}

ReactDOM.render(
  <Hello toWhat="world" />,
  document.getElementById("root")
);

It can be compiled to this code that doesn't use JSX:

class Hello extends React.Component {
  render() {
    return React.createElement("h1", null, `Hello, ${this.props.toWhat}!`);
  }
}

ReactDOM.render(
  React.createElement(Hello, { toWhat: "world" }, null),
  document.getElementById("root")
);

This happens because the JSX code is converted to JavaScript using the package Babel during compilation. If you're curious to see more examples of how this works, you can try out Babel's online compiler.

Shorthands

If you get tired of typing React.createElement so much, one common pattern is to assign a shorthand:

const e = React.createElement;

ReactDOM.render(
  e("h1", null, "Hello, world!"),
  document.getElementById("root")
);

If you use this shorthand form for React.createElement, it can be almost as convenient to use React without JSX.