Ruby is a programming language that focuses on simplicity and productivity. It can be said that Ruby is easier to read and write because it seems more “natural”.


first_name = John
last_name = Smith

The above example is how you would assign a value to a variable. There are also some other data types that can be seen below

# booleans
true_boolean = true
false_boolean = false
# string
new_string = "String Value"
# symbol
a_symbol = :symbol_here
# float
float_value = 1.99

Control Flow: Conditional Statements

if 1 < 2
puts "1 is less than 2"


Arrays can be manipulated with Ruby methods and some common ones are .length, . shift, .reverse, and .push. We’re going to go over a few unique methods that can be quite useful in certain situations.


The transpose method is quite unique in what it does. It essentially allows you to take rows and convert them into columns.

array = [
[ "a", "b", "c", "d", "e" ],
[ 1, 2, 3, 4, 5 ],
# => [
# ["a", 1, "red" ],
# ["b", 2, "blue" ],

In Ruby, arrays and hashes are collections. Then there are iterators, which are methods that can be used on a collection. We will look at a few of these iterators in this post.


The each method doesn’t modify the original collection and will always return the original collection.

pizza_toppings = [“cheese”, “pineapple”, “pepperoni”]pizza_toppings.each do |topping|
puts “I want #{topping} on my pizza.”

In the block of code above, we have a puts with a string and will print out each line with the topping.

I want cheese on my pizza.
I want pineapple on my pizza. …

The introduction of promises in ES6 was released to help work with callbacks. There is a term called, “callback hell”, that refers to a situation where you have nested callbacks to the point that it affects the readability of your code.

A JavaScript promise is an object that can be returned synchronously after the completion of a chain of asynchronous tasks. There are three states that the object can be in when returned.

  1. Pending: This is a state where the promise hasn’t returned a final value yet and can be transitioned into one of the other two states.
  2. Rejected: This…

What is Node?

Node is an asynchronous run-time JavaScript environment built on top of Chrome. It’s designed to build scalable network applications such as a web app, real-time chat app, REST API server, etc. Node is often used to build back-end services like APIs.

Sample code and explanation.

const http = require('http');

const hostname = '';
const port = 3000;

const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World');

server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);

This sample shows a server that responds with ‘Hello World’ if you connect to it…

A callback function is a function that is passed into another function as an argument, which is then invoked inside the outer function.

Let’s take a look at the print() function below.

function print(whoAmI) {

The print function takes a parameter called whoAmI, which is a function, and calls it inside. The whoAmI function is a callback function.

Let’s take a look at another example.

const message = function () {
console.log("message with 3 second delay")
setTimeout(message, 3000)//can also be written in ES6 with arrow functionsetTimeout(() => {
console.log("message with 3 second delay")
}, 3000)

What is destructuring?

Destructuring is JavaScript expression that allows you to assign properties of an array or object to variables using syntax that look similar to array or object literals.

Let’s look at a simple example below. We have a person with a first name, last name, and a birthday.

const person = {firstName: 'John',lastName: 'Smith',birthDate: '3/12/1950'}//if we wanted assign firstName to John, lastName to Smith, and birthDate to 3/12/1950 we would have to do so by assigning itconst firstName = person.firstNameconst lastName = person.lastNameconst birthDate = person.birthDate//output belowfirstName //…

GitHup Pages is a great place to host your app. People can go to a URL and have your active project running and they can test it and see how it works. This helps the users that don’t know how to pull your repo and run the app. It also makes it really easy for someone to see your app without any effort. Did I mention that it’s free?

First thing you’ll want to do is create your repo.

Next, you’ll want to create your React app and deploy it. You can run the commands in terminal/shell. …

Using CSS to build out modern layouts is way easier than you think. All you’ll need is a few lines of code to accomplish doing it. We’re going to go through a few examples to help get you started.

  1. Centered Layout. This will help in centering elements within elements.
centered.html<div class="parent" >
<div class="child" contenteditable>Centered</div>
centered.css.parent {
display: grid;
place-items: center;

background: lightblue;
width: 500px;
height: 500px;

resize: both;
overflow: auto;
.child {
// etc.
padding: 0.5rem;
border-radius: 10px;
border: 1px solid red;
background: lightpink;
font-size: 2rem;
text-align: center;
body {
font-family: system-ui, serif;

The idea of the React lifecycle is that a component has mainly 3 different parts.

  1. Mounting — In this phase, the component is created and inserted into the DOM
  2. Updating — The component changes by receiving new updates
  3. Unmounting — The component is no longer needed and gets unmounted

Part 1 — Mounting

There are a few methods that called on when the instance of a component is being created and inserted into the DOM:

//used to initialize state and bind event handler methods.
//returns an object containing the updated state. Allows a component //to update its internal state…

Richard Chea

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store