DEV Community: Miqotes

Switching up the switch statement

Miqotes — Tue, 01 Dec 2020 01:06:10 +0000

Let us talk a little about switch statements!

Switch statements can replace multiple if statements. You can compare values against multiple variants in a not as clunky-looking way as if statements.

You don't want to burn yourself out doing this:

When you can do this instead:

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Not enough.' );
  case 4:
    alert( 'Perfect!' );
  case 5:
    alert( 'No more, stop.' );
  default:
    alert( 'What even is this?' );
}

The value of a is being checked for strict equality against each case. case 3 would fail because 2 + 2 isn't equal to 4.
The switch statement will continue on until it hits a case that matches. Then it will execute the corresponding code until it hits a break or until the end of the switch.
If zero cases match, then the default code is executed instead.

This feels comfortable, right?

But did you know you could use objects?

let thing = {
    "abc": () => "meow",
    "chonk": () => "very angry",
    "littlecat": (how_many) => {
        if(how_many > 5) { return "MEGAMEOW" }
        else { return `${how_many}x meow/scream` }
    },
};

This is an object.

This object is the same as this switch statement.

switch("littlecat") {
    case "abc": () => "meow"
    break;

    case "chonk": () => "very angry"
    break;

    case "littlecat": (how_many) => {
        if(how_many > 5) { return "MEGAMEOW" }
        else { return `${how_many}x meow/scream` }
    }
    break;
}()

You can call one of the fields of this object like so.
thing.chonk()

Another way you can access it is by:
thing["chonk"]()

Calling thing["littlecat"](6) will return you "MEGAMEOW". If you change the input to 3, it will return "3x meow/scream"

This is how you can use an object like a switch statement!

What's the difference between Props and State?

Miqotes — Fri, 20 Nov 2020 00:23:56 +0000

Props and State within React can get kinda Funky upon first inspection. When I first started with react I was incredibly confused. I would attempt to use state where this.props should have gone and vice versa.

It wasn't until I was thrown into doing a project on my own that I finally got it down and realized the key differences between the two (aside from the obvious setup).

Props

Props and State are related. The state of one component can become the props of another child component. Props are passed through the render method of the parent.

For example, lets use JSX. <MyChild name={this.state.childsName} />

The parent's state value of the childsName becomes the child's this.props.name.

To simplify it a little more. Imagine there are you and a friend in a straight line. Your friend is tossed a few balls. The ball your friend is holding is blue. The other balls are on the ground. The current state of this ball is blue. In order for the ball to be passed down to you, you need its props (properties). Think of the color of the ball as its prop. In order for you to get the blue ball prop and not a red, yellow, or green ball, your friend (parent component) has to pass the ball down to you(child component).

Now coming back to our code, in order to access that state value in the child component. You're going to want to use this.props.name.

To me, this is React magic. There is a lot going on underneath that I am not capable of clarifying at this time but walk away knowing that in order to pass state to other components, it needs to be through props.

Now, is it possible to change your props? Yes and no.

Props are immutable. They do not change. During a component's life cycle, props should not change. If you're working with a component that does not incorporate state, then you can refer to that component as "pure." It will always render the same output given the same input.

Now is state always necessary?

Nope! If you don't have data that needs to be changed over time, then a pure (stateless) component is fine to use.

State

Now we will move onto state. State has a few key differences.

State is created in the component.
State can be changed!

A question I had, in the beginning, was " when should I use state?"

When a component needs to keep track of information between renderings the component itself can create, update, and use state.

State contains "private" information. Its set in the parent component for it to be initialized, changed and used on its own.

Props contain the information set within the parent component (default props can be set) and should not change.

Let's say we have a counter! We set the state of that counter.

state ={
count: 0
}

Now we want to create a method that updates the state every time you click a button.

updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1}
});
}

The prevState is what state was when declared. Even if you changed state somewhere else, it will reference the initial state set above (which is super magicalllllll).

Counts prevState of zero is being updated by one, every time you click the button. On top of this, setState triggers a call to render()!

render() {
  return (<button onClick={() => this.updateCount()} >
            Clicked {this.state.count} times
         </button>);
  }

It will update in real-time without the need for a page refresh.

Hopefully, this is helpful!

5 starter friendly CSS libraries

Miqotes — Thu, 19 Nov 2020 22:14:01 +0000

Recently I had a project alongside my teammates where we ran into some issues and were able to finish it within the 2 last days of the 5 we had.

For a moment we thought we wouldn't have enough time to implement any decent CSS and so we would have been left with a page that looked like it came from the early 2000s.

Fortunately, with a little google fuu we came upon some wonderful libraries that were quick and easy to implement within our code.

Here are some example libraries that while we did not implement all of them, were amongst our choices.

Bulma CSS

One of Bulma's greatest features is its simple readable classes. The system for creating tiles is quick to be implemented and the code its self takes little time to understand.

Click here to be taken to Bulma's website.
Link to Github

Pure.CSS

Pure has small responsive CSS modules for whatever you could need. Layout and styling for your HTML elements are available. Its style is also minimal and has a very clean design. It is another perfect option for beginners.

Click here to be taken to Pure.CSS's website.
Link to Github

Animate.CSS

This is one of my favorites. It's simple and fast to incorporate within your HTML (or Javascript).

If you desire quick flashy fun on your webpage, Animate.CSS is perfect. Just remember to not overdo it(even though it may be fun).

Click here to be taken to Animate.CSS's website
Link to Github

Tailwind CSS

Tailwind has customizable building blocks. You won't have to worry about fighting set styles to override them. Instead of having predefined components, it gives you CSS helper classes to work. These classes allow you to create custom designs and in the end, you will have a much more personally designed website.

Click here to be taken to Tailwind CSS's website
Link to Github

Semantic UI

Semantic UI uses five descriptive categories for their re-usable UI components.

They are :

UI Element
UI Collection
UI View
UI Module
UI Behavior

Almost every component has types, states and variations. A button can vary in size and color and can be formatted as a basic, social, fluid, toggle, and more. This gives you a great amount of flexibility in a component’s appearance.

Click here to be taken to Semantic UI's website
Link to Github

Lets talk about Dynamic Programming

Miqotes — Tue, 13 Oct 2020 06:08:24 +0000

Last week, while working through labs, I had a question for my partner. I was confused about what Dynamic Programming is.

I kept hearing the term while watching others work on algorithm challenges during our meetups.

I thought I had understood it before, but realized I didn't exactly.

This led to a long tangent on the history of the term Dynamic Programming and of course what it is.

Eye of the hurricane

Richard Ernest Bellman was an applied mathematician, who introduced dynamic programming in 1953. Bellman died on March 19th, 1984, but he left behind a wonderful autobiography that has a pretty funny excerpt pertaining to where the term Dynamic Programming came from.

Before I learned about this, my partner taught me that the 1950s were hostile to programming and research. Our government didn't view it as something worth investing in nor paying attention to. Bellman knew this and figured his way around this problem.

Here is an excerpt from Eye of the Hurricane.

“I spent the Fall quarter (of 1950) at RAND. My first task
was to find a name for multistage decision processes.
“An interesting question is, ‘Where did the name,
dynamic programming, come from?’ The 1950s were not
good years for mathematical research. We had a very interesting gentleman in Washington named Wilson. He was
Secretary of Defense, and he actually had a pathological
fear and hatred of the word, research. I’m not using the
term lightly; I’m using it precisely. His face would suffuse,
he would turn red, and he would get violent if people used
the term, research, in his presence. You can imagine how he
felt, then, about the term, mathematical. The RAND Corporation was employed by the Air Force, and the Air Force
had Wilson as its boss, essentially. Hence, I felt I had to do
something to shield Wilson and the Air Force from the fact
that I was really doing mathematics inside the RAND Corporation. What title, what name, could I choose? In the first
place I was interested in planning, in decision making, in
thinking. But planning, is not a good word for various reasons. I decided therefore to use the word, ‘programming.’
I wanted to get across the idea that this was dynamic, this
was multistage, this was time-varying—I thought, let’s kill
two birds with one stone. Let’s take a word that has an
absolutely precise meaning, namely dynamic, in the classical physical sense. It also has a very interesting property
as an adjective, and that is it’s impossible to use the word,
dynamic, in a pejorative sense. Try thinking of some combination that will possibly give it a pejorative meaning.
It’s impossible. Thus, I thought dynamic programming was
a good name. It was something not even a Congressman
could object to. So I used it as an umbrella for my activities” (p. 159)

He was correct that even a congressman couldn't reject this name.

I was under the impression that Dynamic Programming was something much more than it was. I was shown a simple to understand diagram and realized it wasn't something to be apprehensive of.

My understanding is you break down a problem into simpler, smaller problems. You store the solution to each sub-problem so that they are each only solved once.

The act of storing solutions to our sub-problems in dynamic programming is known as a technique called memoization.

For a better understanding of how to break a problem into sub-problems and go on to solve them, click here.

Thank you for reading!

Why SQLite is simple to use!

Miqotes — Thu, 13 Aug 2020 04:24:20 +0000

Coding can be frustrating. There are some parts that will come easily to you. You'll catch on fast and maybe even question if it was really that simple. SQLite may at first seem complicated upon your first glance, but it is truly a simple tool you can learn to read and play with.

What is SQLite?

SQLite (Structured Query Language) is a relational database management system (RDBMS).
Relational database management systems allow us to store records of information we desire and want to connect. The information we want to store is recorded within large tables.

Storing your data within SQLite gives you a large number of options to choose from to manage your data in the way you want. Database engines process query commands (sometimes very complex) that can take in data from many tables to generate, for example, reports and or data summaries.

SQLite's name comes from the fact that it is simpler to use and easy to read for new developers and or someone who just loves tables.

Using SQLite within the terminal

You can create tables, access the data within, modify data, along with dropping tables right from your terminal. You can even view your desired table as well.

If you want to create an SQLite database file, run:

sqlite3 new_sqlite.db

Now you're within the SQLite prompt. Next, run:

create table new_table(id);

This will create a table called new_table.

To check if your table was created, type:
.tables

To exit simply type:

.quit

SQLite Query Commands ex.

Let us go over some SQL statements first!

SELECT - returns desired data from a database

"SELECT name, age FROM people WHERE gender = 'F' "

INSERT INTO - inserts new data into the table

INSERT INTO people (name, age, gender) VALUES ('sam', 28, 'F');

DROP TABLE - deletes the table

DROP TABLE people;

CREATE TABLE - creates a new table

CREATE TABLE cats ( FurColor string, Loud boolean, ToeBeans integer )

ALTER TABLE - changes table columns, add, drop, or modify

1 . Add column

ALTER TABLE cats
ADD Fluffy boolean;

2 . Drop column

ALTER TABLE cats
DROP COLUMN Fluffy;

3 . Modify column

ALTER TABLE cats
ALTER COLUMN Fluffy string;

These statements are very straightforward and quick to pick up. There are many more statements to use. You can find more here.

SQLite Functions ex.

These functions return a value calculated from columns

AVG()

SELECT AVG(column_name) FROM table_name

COUNT()

SELECT COUNT(column_name) FROM table_name;

FIRST()

SELECT FIRST(column_name) FROM table_name;

There are so many more. You can find them here with many examples.

DB Browser

The DB Browser tool enables you to view your tables, check the data seeded, and update data. There are many more options available as well to engage with your data and tables.

This is also a better visual depiction of your tables than what you will see within your terminal.

Download DB Browser here.

End

SQLite has a multitude of uses. You'll find it within Active Record, Ruby on Rails, and amongst other use cases. It is a wonderful tool to learn.

Thanks for reading!