DEV Community: Megan Moulos

Ruby on Rails Naming Conventions

Megan Moulos — Wed, 12 Oct 2022 17:14:38 +0000

David Heinemeier Hansson, the creator of Ruby on Rails, believed in the importance of convention over configuration. In his own words:

Convention over configuration is the corner stone of Rails and a principle I hold dear. Stop wasting time configuring things where the differences do not matter. - from a 2013 interview

If you're new to Rails, the specific naming conventions at first can be difficult to memorize and understand. Naming conventions are crucial and an important part of how Rails decides how to link elements of your data.

Active Record Naming Conventions

Let's dive right in. From the Rails guides:

By default, Active Record uses some naming conventions to find out how the mapping between models and database tables should be created. Rails will pluralize your class names to find the respective database table. So, for a class Book, you should have a database table called books.

The model class name should use a singular word in the CamelCase form, while the table name must be pluralized and use the snake_case form. Active Record also recognizes irregular forms such as Person/people and Mouse/mice.

Model Class - Singular with the first letter of each word capitalized (e.g., BookClub).
Database Table - Plural with underscores separating words (e.g., book_clubs).

Note that Active Record Associations also follow convention: has_many is followed by a plural while belongs_to is followed by a singular.

Ruby Naming Conventions

Ruby naming conventions are as follows:

Rails Naming Conventions

Routes:
Routes should use lowercase, with underscores as needed between words.

resources :controller_name_plural (example - resources :books)
resource :controller_name_singluar (example - resource :author)

Controllers
Controllers should be CamelCase, plural, and append the word "Controller" at the end. From the Rails docs:

The naming convention of controllers in Rails favors pluralization of the last word in the controller's name, although it is not strictly required (e.g. ApplicationController). For example, ClientsController is preferable to ClientController, SiteAdminsController is preferable to SiteAdminController or SitesAdminsController, and so on.

Here is a quick cheat sheet of naming conventions:

Remember: Naming conventions in Rails are crucial to the language's inner workings. For more information on this topic, see the official guides: Rails Guides

Random Data - Lava Lamps, TRNGs and PRNGs

Megan Moulos — Fri, 07 Oct 2022 16:32:35 +0000

You may be wondering, what do these retro-looking lava lamps and random data have in common? Randomness in computing is notoriously difficult to achieve. Random numbers are not a new phenomenon, nor are they delegated to the tech domain. Ancient Sumerians and Egyptians used dice as RNGs for games of chance. The random falling patterns of yarrow stalks were used for divination in ancient Chinese religion. As recently as the 1900s scientists used coin tosses, dice rolls, and even picking numbers out of hats to get random numbers for their research. A sequence is considered random if no patterns can be recognized in it. When you flip a coin or roll a pair of dice, you are using randomness to get an outcome - whether it's who will start a football game or who will win the jackpot.

In the 1990s, the need for random numbers for computing exploded. Lavarand was designed by Silicon Graphics in 1996 to generate pseudorandom numbers. US Patent 5,732,138: "Method for seeding a pseudo-random number generator with a cryptographic hash of a digitization of a chaotic system." The idea was to take photos of patterns made by the floating material of numerous lava lamps, and extract random data from the pictures to seed a number generator. Since 2017, the Cloudflare office in San Francisco has been using a wall of lava lamps, which help to encrypt the requests that go through Cloudflare, which make up a whopping 10% of all internet requests. In Cloudflare's Singapore office, the company uses a pellet of uranium in a glass bell jar (they assure everyone that it is a safe amount), and measures the release of isotopes over time with a geiger counter. This unpredictable data is known as entropy.

Why are random numbers so important?

"Everything we do to achieve privacy and security in the computer age depends on random numbers." - Simon Cooper, an encryption expert and author of Building Internet Firewalls.

Random numbers are the crux of cryptography, and crucial to how we send and receive data on the internet. Random Number Generators or RNGs use physics, math, and the haphazard and irregular nature of the outside world to create sequences without recognizable patterns. As of 2003, the improved, open-source RNG called LavaRnd replaces the iconic lava lamps with a webcam with a lens cap on. This seems bizarre, but there is a thermal "noise" emitted by the webcam that "is digitized and put through a hash algorithm that churns the number set, stripping unwanted sections of predictability,"- Tom McNichol stated. What that boils down to is a sequence of numbers that can be used in cryptography.

Random number generation is an enormous industry and touches most parts of our internet-connected lives. Banking apps, online shopping, credit card encryption - all of these rely on random numbers. Even gambling has had a major upgrade by using better and longer sequences of numbers to improve win to loss randomness. Because of their nature, computers are terrible at coming up with random numbers by themselves. “Computers from the beginning have been designed to very reliable, very predictable,” says Cloudflare’s CEO Matthew Prince. “When you turn them on, they always do exactly the same thing and what they’re told to do."

TRNGs and PRNGs

There are True Random Number Generators, or TRNGs, and Pseudo-Random Number Generators, most commonly known as PRNGs. TRNGs rely on outside, physical, real-world phenomena to determine a number (like the radioactive isotopes or lava lamps above). Switzerland’s FourmiLab invented a HotBits generator which uses radioactive decay and the "quantum mechanical laws of nature" - from their webpage: "HotBits is an Internet resource that brings genuine random numbers, generated by a process fundamentally governed by the inherent uncertainty in the quantum mechanical laws of nature, directly to your computer in a variety of forms. HotBits are generated by timing successive pairs of radioactive decays detected by a Geiger-Müller tube interfaced to a computer." Other companies use things like atmospheric noise levels, weather and wind data, and other "truly" random natural phenomena.

According to Synopsys: "True random numbers are at the heart of any secure system and their quality contributes to the security strength of designs. Weak or predictable random numbers open the door for attacks that can compromise keys, intercept data, and ultimately hack devices and their communication." TRNGs are a necessary part of our growing reliance on big data and cryptography in general. Synopsys goes on to say:

True random numbers are required in a variety of security scenarios:

Key generation for various algorithms (symmetric, asymmetric, MACs) and protocols (SSL/TLH, SSH, WiFi, LTE, IPsec, etc.)
Chip manufacturing (seeding device unique and platform keys)
Initial values (for encryption and MAC algorithms, TCP packet values, etc.)
Nonce generation and initial counter values for various cryptographic functions
Challenges used for protocol authentication exchanges
Randomization input for side channel countermeasure solutions for protecting against physical attacks

There are standards that TRNGs must meet before being considered random enough for cryptographic applications. The US National Institute of Standards and Technology (NIST) agency has developed a set of NIST SP 800-90A/B/c standards and the German standards body, Bundesamt für Sicherheit in der Informationstechnik (BSI), has long had a separate set of RNG standards (AIS 20/31).

PRNGs do not offer absolute randomness. They are computer programs with algorithms which create seemingly random sequences, which appear random to humans. PRNGs can be faster, and are still widely used in many industries for things like simulation and modeling applications. TRNGs are usually less efficient and not always necessary for simple applications, although they are crucial for data encryption (and, arguably, gambling).

Read more about RNGs and randomness in general:

Ruby & Active Record Associations

Megan Moulos — Mon, 03 Oct 2022 16:52:08 +0000

In this guide you will learn:

How to declare associations between models using Active Record
How to understand the different types of associations available with Active Record
How to use the methods automatically added to your models after creating these associations

Using associations with Active Record is very powerful and an important part of using Ruby with databases. An association is a connection between two Active Record models. These associations provide built-in methods to make your databases easier to work with. This walkthrough assumes that you already understand how to create migrations and models.

There are 6 types of associations:

belongs_to
has_one
has_many
has_many :through
has_one :through
has_and_belongs_to_many

To figure out which type of association that fits your needs, it is helpful to create an ** Entity Relationship Diagram (ERD)**. There are helpful tools online to create your own ERD quickly and easily, but you can also use pen and paper!

For this walkthrough, we will use dbdiagram.io.

belongs_to, has_many

The belongs_to association sets up a connection between two models, where the instance of one model "belongs to" the second model. In this example we have one author who has written many books. In this case, each book belongs_to an author. This association is made through the foreign key.

Note: From Flatiron School docs - "Foreign keys are columns that refer to the primary key of another table. Conventionally, foreign keys in Active Record are comprised of the name of the model you're referencing, and _id. So for example if the foreign key was for a posts table it would be post_id." Read more about foreign keys at The Odin Project.

Here is the corresponding code:

class Book < ActiveRecord::Base
  belongs_to :author
end

Note that the belongs_to association must use the singular term ("author"). From the official docs: "This is because Rails automatically infers the class name from the association name. If the association name is wrongly pluralized, then the inferred class will be wrongly pluralized too."

The other side of the coin for this particular example, the author's has_many relationship, would look like this:

  class Author < ActiveRecord::Base
    has_many :books
  end

belongs_to, has_one

If we changed our example above so that each author only wrote a single book, we could use the has_one association:

  class Author < ActiveRecord::Base
    has_one :book
  end

Notice that book is singular. This may seem intuitive, but it is very important to note when to use singular or plural cases when writing your associations. The Book model would remain the same in this case, reading belongs_to: author in the singular.

has_many, through:

This association is often used to set up a many-to-many connection with another model. The declaring model can be matched with instances of another model through a third, connecting model. For example, imagine a hospital with doctors that see many patients through the patients' appointments. The diagram would look like this:

Each doctor has many patients through the appointments table. The patient also has many doctors through the appointments table. Here is the corresponding association code:

  class Doctor < ActiveRecord::Base
    has_many :appointments
    has_many :patients, through: :appointments
  end

  class Appointment < ActiveRecord::Base
    belongs_to :doctor
    belongs_to :appointment
  end

  class Patient < ActiveRecord::Base
    has_many :appointments
    has_many :doctors, through: :appointments
  end

Then new join models are automatically created for the newly associated objects.

has_one, through:

The has_one, through: association is similar to the has_many, through: association because they both create join models automatically. The difference is in the syntax, and that there is a one to many relationship. In our example above, imagine a patient only had one doctor, through the patient's appointments:

  class Doctor < ActiveRecord::Base
    has_many :appointments
    has_many :patients, through: :appointments
  end

  class Appointment < ActiveRecord::Base
    belongs_to :doctor
    belongs_to :appointment
  end

  class Patient < ActiveRecord::Base
    has_many :appointments
    has_one :doctor, through: :appointments
  end

has_and_belongs_to_many

This association is rarely used, and there is a blog post titled "Why You Don’t Need Has_and_belongs_to_many Relationships explaining why. From the Rails docs:

The simplest rule of thumb is that you should set up a has_many :through relationship if you need to work with the relationship model as an independent entity. If you don't need to do anything with the relationship model, it may be simpler to set up a has_and_belongs_to_many relationship (though you'll need to remember to create the joining table in the database).

Bonus: Polymorphic Association

Polymorphic association allows us to connect a model to multiple other models on a single association. Look at this table provided by the Rails Active Record documentation:

A polymorphic belongs_to declaration sets up an interface that any other model can use. For example, from an instance of an Employee model, a collection of pictures can be retrieved using @employee.pictures. You could also retrieve @product.pictures by the same logic.

Find more information, as well as helpful tips and tricks, in the official documentation here.

React Hooks

Megan Moulos — Wed, 14 Sep 2022 16:47:58 +0000

Hooks were introduced to React 16.8. Hooks allow you to use things like state without writing a class-based component. In essence, Hooks are JavaScript functions that allow you to "hook into" React state and lifecycle features from function components. There are a number of built-in Hooks as well as the ability to write your own custom Hooks.

Note: It's important to remember that Hooks are backwards compatible, so you can use them with class components without a problem.

All React Hook names are prefixed with the word "use," like useState or useEffect. To use Hooks, you must import them first. You can enter any number of Hooks at the top of the file like so:

import React, { useState, useEffect } from "react";

Why use hooks?

When compared to class components, hooks reduces the amount of code we need to write (and read). Take a look at this example:

// Detect dark theme var iframe = document.getElementById('tweet-1056594421079261185-1'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1056594421079261185&theme=dark" }

With Hooks we can organize logic inside of a component. These units can be reusable, helping us avoid duplicated logic. Dan Abramov writes that "Hooks apply the React philosophy (explicit data flow and composition) inside a component, rather than just between the components." Hooks are fully encapsulated, and are a way to share stateful logic.

// Detect dark theme var iframe = document.getElementById('tweet-1057030555202535424-258'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1057030555202535424&theme=dark" }

Here are some reasons to use Hooks from Shedrack Akintayo

Improved code reuse
Better code composition
Better defaults
Sharing non-visual logic with the use of custom Hooks
Flexibility in moving up and down the components tree

Rules

There are two important rules for using Hooks:

Only call Hooks at the top level. Don't call Hooks inside of loops, conditions, or nested functions.
Only call Hooks from React functions. Do not call Hooks from regular JavaScript functions. You can and should call Hooks from React function components. You may also call Hooks from other custom Hooks.

There is a plug-in called esLint which will enforce the rules of Hooks. Find and install it here!

You can use multiple Hooks in a single component, and React will rely on the order in which Hooks are called. Dan Abramov also states:

The ability to pass data between Hooks make them a great fit for expressing animations, data subscriptions, form management, and other stateful abstractions. Unlike render props or higher-order components, Hooks don’t create a “false hierarchy” in your render tree. They’re more like a flat list of “memory cells” attached to a component. No extra layers.

Built-in Hooks

React has 10 built-in Hooks, here are some of the more commonly used ones:

useState

The useState Hook is called inside of a function component to add local state to it. It allows you to create, update, and manipulate state inside the functional component it is used in. useState returns a destructured array containing two values: the first is the current state; the second is a setter function used to update the state. useState takes a single argument, which is it's initial state.

const [state, setState] = useState(initialState);

Here is an example of a simple counter:

import React, { useState } from "react";

function Counter(){
    // The new state variable is called "count" here, and the initial value will be 0 since the counter will begin at 0.
    const [count, setCount] = useState(0);

    return (
       <div>
          <p>The button was clicked {count} times!</p>
          <button onClick={() => setCount(count + 1)}>
               Click to Count
          </button>
       </div>
    );
}

The new state variable is called count, and the setter function is called setCount. You can call these two variables anything you'd like, but this is the typical naming convention: use "set" concatenated with the variable name. The initial state is set to 0 since we want the counter to begin at 0. The setCount function will be called each time the button is clicked, and update the count variable by 1. React will remember the current value of count between re-renders, and provide the most recent one to the function component. If we want to update it, we just call setCount again.

As you can see, setCount was called inside of the function's return, namely in the JSX code of the button's onClick. This is perfectly fine!

You can use the state
Hook multiple times in a single function component:

function ManyStatesExample() {
    const [name, setName] = useState("Jimmy");
    const [age, setAge] = useState(35);
    const [favoriteColors, setFavoriteColors] = useState(["red", "blue"]);

Note: Updating a state variable replaces it's contents.

useEffect

The useEffect Hook replicates React's lifecycle methods, but inside of a functional component. The official React documentation states: "If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined." The useEffect Hook lets you perform side effects (such as external API interactions and data fetching). useEffect accepts two arguments:

A function with the code to run
A dependency array, which tells the Hook how many times to run. If this is left out, the Hook will run after every render. Be careful, leaving out the dependency array can cause infinite loops!

If you only want to run the useEffect Hook when certain values in your function have changed, you must pass the variables as dependencies into the array. If you supply an empty array, the Hook will only run once. This can be very useful for things such as fetch requests:

useEffect(() => {
    fetch("http://somelink.com");
}, []);

The dependency array is empty because we only need to GET our data once.

Sometimes the useEffect Hook can require cleanup, which is written about in some detail in the React docs.

useContext

The useContext Hook allows you to make particular data accessible to all components throughout the whole of the application (consider it "global" in scope for a tree of React components). It works with the React Context API. This Hook is powerful because data can be passed across all components in an app, rather than having to manually pass a prop down through various levels to get data to a child.

For example, let's say you have an array of objects, and would like to pass that information down to a child function.

const menuItems = [
{ 
   dish: "spaghetti and meatballs",
   price: "$12.99",
},
{  
   dish: "steak and potatoes",
   price: "$29.99",
},
];

export const MenuContext = React.createContext(menuItems);

We are creating a context object using React.createContext and now can pass menuItems to any components in the app. Each context needs to be enclosed in a Provider wrapper, like so:

function Menu() {
    return (
    <MenuContext.Provider value={menuItems}> 
        <DinnerMenu />
    </MenuContext.Provider>
);
}

Now DinnerMenu becomes the consuming component of the context, and can use the objects stored in the MenuItems array. When the Provider updates, the Hook will trigger a rerender with the latest context value. See React's advanced Context guide here.

useReducer

useReducer can be thought of as an alternative to the useState Hook. The useReducer Hook can work with more complex logic, and lets you rerender the UI whenever values change within the Hook. It accepts two arguments: a reducer function and an initial state.

useReducer(reducerFunction, initialState);

Much like useState, useReducer returns an array of two values, which can be destructured to: the current value of the state; and a dispatch function.

const [state, dispatchFunction] = useReducer(reducerFunction, initialState);

state is the current value of the initialState passed to the Hook. The reducerFunction accepts the state and an action. These two arguments will determine how the value of the state will change. The dispatchFunction is how an action is passed to the reducerFunction. There is usually a switch statement with a number of cases to determine how the value of state will change. Here is an example of a simple counter from the official documentation:

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Note: React guarantees that dispatch function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.

useRef

The useRef Hook allows you to persist values between renders. You can store a mutable value that does not cause a re-render when updated. useRef returns an Object called current. Consider useRef like a "box" that can hole a mutable value in this current property.

You can use this Hook to keep track of previous state values, because useRef persists it's values between renders. Consider the following example from W3Schools:

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

See this blog post by Dmitri Pavlutin for more information and use cases of useRef.

Other Built-in Hooks

useCallback
useMemo
useImperativeHandle
useLayoutEffect
useDebugValue

Build Your Own Hooks

Along with these Hooks you can write your own custom Hooks that let you extract component logic into reusable, sharable functions. Because both components and Hooks are functions, you can extract the logic to a third, shared function (a new Hook!). A custom Hook is a JavaScript function whose name starts with "use" and that may call other Hooks. It still follows the rules of built-in Hooks, but you get to decide which arguments it will take and what it should return.

For more information on building custom Hooks, see: Building Your Own Hooks.

React - Introducing JSX

Megan Moulos — Wed, 07 Sep 2022 02:26:52 +0000

What is JSX?

Take a look at the example below:

import React from "react";

function App(){
    return (
       <div> 
          <Nav />
          <h3>This is a header</h3>
          <p>This is some text</p>
       </div>
    );
};

export default App;

JSX stands for 'JavaScript XML' and is a syntax extension for JavaScript. It is used to create DOM elements that are then rendered in the React DOM. Although it looks like HTML, it is actually an XML-like syntax specifically written for use in React. Interestingly, JSX is not valid JavaScript either. JSX needs to be compiled by a tool like Babel to be translated into regular JavaScript that a browser can understand. Put simply, JSX describes what the UI should look like, and React takes care of properly rendering it.

But this looks like HTML!

You can use all of the elements you would find in an HTML document in JSX, including <div>, <span>, <h1> - <h6>, <p>, <a> and many more. You can also add JSX attributes such as id and className (watch out, it's className rather than just class!). It's important to remember that this is not HTML and cannot be read as HTML by your browser.

Key Concepts

Top-level Elements and React Fragments

In the code example above, you may notice that a <div> encloses a number of child elements. JSX can only return one top-level element. The top-level element can be anything from a <div>, a <span>, an <a> tag, or even what is known as a react fragment. With a fragment, you simply enclose what you'd like to return in empty opening <> and closing tags </>. Fragments allow you to group a list of children without adding unnecessary nodes to the DOM.

We could refactor our example above to use a fragment:

import React from "react";

function App(){
    return (
       <> 
          <Nav />
          <h3 id="example">This is a header</h3>
          <p className="shortP">This is some text</p>
       </>
    );
};

export default App;

This will render the same elements to the DOM as the example above, but without an overarching <div> node.

JavaScript and JSX

JavaScript expressions can be embedded within JSX expressions, and must be places between { curly braces }. For example:

let sum = <p>{20 + 20}</p>;

All JavaScript code needs to be inside of curly braces. This is known as JSX Expression Syntax. Here are some valid things you can have inside of a JSX Expression:

A string
A number
An array
An object property that will evaluate to some value
A map method (which will return a new array)
More JSX

And there are things you cannot have in a JSX Expression:

Any loop
A variable declaration
A function declaration
If/else conditionals

JSX Conditionals

You cannot use if/else syntax in embedded JavaScript. You can express conditionals in other ways:

A ternary within curly braces
An if statement outside of a JSX element
Logical short circuit && operator

// Using a ternary operator

const toggleMode = (
   <button> 
        { isDarkMode ? 'Set Light Mode' : 'Set Dark Mode' }
   </button>
);

// Using an if statement outside of the JSX element

let option;

if (isDarkMode) { option = 'Set Light Mode' }
else { option = 'Set Dark Mode' }

const toggleMode = <button>{ option }</button>

// Using the && operator
<p>{isTrue && "This is also true"}</p>

Function Components & JSX

A function component must return JSX. Every function component in your React app must return one JSX element. This is where the single top-level element (or fragment) come into play.

Why use JSX?

JSX allows developers to write cleaner, easier to read code. You don't strictly need to use JSX, but it makes creating React applications easier by allowing programmers to use HTML-like syntax to describe what the UI should look like.

JSX represents objects. The React docs provide two examples, both of which will render identically:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

This is going to have exactly the same output as:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

In my opinion, JSX is easier to write and easier to read. JSX uses a declarative style of programming, which abstracts what Vanilla JavaScript takes a number of steps to do into a simple JSX expression of what we want to render. React then figures things out behind the scenes (with a little help from Babel, as I mentioned above).

For more information, try these links:
React Docs
Why use className instead of class?

Beginner's Guide to String Methods in JavaScript

Megan Moulos — Thu, 25 Aug 2022 14:21:31 +0000

First, a quick overview: In JavaScript, a string object is used to represent a sequence of one or more characters. A string can contain any number of letters, numbers, or symbols.

Strings can be created by using single quotes, double quotes, or template literals (backticks).

'This is a string.' "This is also a string."

Strings are an immutable (unchanging), primitive data type. It is important to remember that string indexes are zero-based: this means that the first character is in position 0, the second in 1, and so on. Because JavaScript treats strings as objects, they also have a number of built-in methods, some of which we will be covering in this blog post. You can try any of these examples in your browser's console.

charAt()

Returns the character at a specific index. As mentioned above, all strings have zero-based indices. In the string hello for example, h is at index 0, e is at index 1, l at index 2, and so on. We can access each character in two ways. One is using the charAt() method:

'hello'.charAt(0); // gives value "h"

Because strings can be treated like arrays, you can access the same value by using the index number in square brackets:

'hello'[0];  // also gives value "h"

concat()

Combines the text of multiple strings and returns a new string. This method does not change the original strings.

let str1 = 'Hello, ';
let str2 = 'World.';
let result = str1.concat(str2); // returns 'Hello, World."

There is a second way to easily concatenate strings in JavaScript: use the + concatenation operator.

'race' + 'car' // returns 'racecar'

Interestingly, if you concatenate non-string variables, JavaScript will type-convert them into strings. For example:

console.log('huge' + 100 + false); // logs 'huge100false'

includes()

This method will return true if the string it's called on contains a specified string. It is case sensitive.

let text = 'I am the best at coding.';
let doesItInclude = text.includes('best'); // returns 'true'

indexOf()

This method will return the position of the first occurrence of a specified value in a string. It will return -1 if the value isn't found at all. Like includes(), it is case sensitive.

let text = 'I love to code!';
let result = text.indexOf('love'); // returns '2'

You can add an optional second argument: the position to start from (the default is 0).

length

Quite simply, this will return the length of the string it's called on.

'Amazing!'.length; // returns 8

repeat()

This method returns a new string with copies of a string, the number of which is specified in the parenthesis. The original string is not modified.

'I love JavaScript!'.repeat(4); // returns 'I love JavaScript!I love JavaScript!I love JavaScript!I love JavaScript!'

slice()

Slice extracts a part of the string, specified by one or two parameters: The first is the start position, the second is where to end (up to, but not including) the slice. If no second argument is provided, the default is the entire string length. This method returns a new string. A negative number will select from the end of the string.

let sentence = 'Hello, World!';
let result = sentence.slice(7, 12); // returns 'World'

let result2 = sentence.slice(7); // returns 'World!'

split()

This method takes a string and splits it into an array containing substrings. It will return the new array without changing the original string. This is particularly useful if you'd like to split a sentence into a number of separate words.

let sentence = 'An array would be nice!';
const myArray = sentence.split(' ');

myArray; // returns ['An', 'array', 'would', 'be', 'nice!']

toLowerCase() and toUpperCase()

This simple method returns a new string with the letters of the original string converted to lowercase letters. toUpperCase() takes a string and converts all the letters to uppercase.

let text = 'I am the greatest!';
text.toUpperCase(); // returns 'I AM THE GREATEST!'

toString()

This method is a bit different from the others because it turns other data types in JavaScript into a string. You can convert numbers, booleans, or even objects to strings.

(15).toString(); // returns '15'
(false).toString(); // returns 'false'

This has been an overview of common string methods used in JavaScript. A more comprehensive list can be found on MDN Web Docs.

Thanks for reading!

Markdown for Beginners - Create a Better Readme

Megan Moulos — Wed, 24 Aug 2022 20:37:53 +0000

What is Markdown?

Markdown is one of the most popular markup languages. Developed by John Gruber in 2004, it's a simple and lightweight way to add formatting (and pizazz) to plaintext documents. In Gruber's words:

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

While many of us are used to Rich Text Editors like Microsoft Word, where changes are visible immediately, Markdown uses unique plaintext syntax to change how text appears. This guide will go over commonly used Markdown syntax, so you can create a better GitHub README!

You can add Markdown using any text editor application. There are also Markdown applications, some of which allow you to preview your document in real time. For our purposes, you can follow along in Dillinger, so that you can see the changes immediately.

Headings

There are 6 headers available, H1 through H6.

Here is the Markdown syntax:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Adding emphasis to your text

Here is the Markdown syntax for making text bold, italic, and underlined. You can also ~~strike through~~, or 'cross out,' text using the strikethrough method.

**bold**
_italic_
<u>underlined</u>
~~strike through~~

BONUS: Subscripts and Superscripts

Sometimes we may want to use superscripts for things like chemical notation H20 or exponents x². With Markdown, it's simple:

H<sub>2</sub>0
x<sup>2</sup>

For superscripts, you surround the element you want to make a subscript with the 'sub' tag. For subscripts, you surround the element with the 'sup' tag.

Highlighting Syntax & Code Blocks

Using a single backtick will highlight a word or piece of code. You can see it in the following example below:

In this sentence, the word hello will be highlighted.

Using three backticks will create a code block. If you add a language identifier directly after the backticks you will have more colorful, readable code. Here is an example using JavaScript:

const makeAVariable = 'Hello'

// This will show different colors 
console.log(makeAVariable)

Quotes

To show a quote, use a greater than symbol. Quotes are extremely useful for when you are referencing someone else's work. It is important to credit where credit is due.

"Make sure to save your code!" - Megan

Lists

To create an ordered list, begin from 1 and count upwards.

Item one
Item two
Item three

You can also create sub-items on your list and even include bullet points:

Item one
1. Sub-item one
2. Sub-item two
Item two
- Sub-item three
Item three

Unordered lists are created using a minus sign before each item. See below:

Shopping List:

cereal
eggs
cheese

Images & Emojis

To add an image, use an exclamation point followed by square brackets containing your alt text, followed by your html link in parentheses like so: ![alt text](url)

You can also use emojis in Markdown. There is a complete list of emojis recognized here.

😍👍🐰

Links

To create a link, simply put the link text in square brackets and then parentheses enclosing the URL you'd like to point to. The syntax looks like this: [](url)

Check out some great links below!
My GitHub
My LinkedIn

This has been a quick guide to making your README files more beautiful using Markdown. Show me your new README in the comments below!

Beginner's Guide to Array Methods in JavaScript

Megan Moulos — Mon, 22 Aug 2022 17:11:03 +0000

JavaScript has a number of helpful array methods integrated into the language. This guide will cover a few of the methods I use the most. It's helpful to note that arrays are JavaScript objects, and can contain a mix of different data types. You can recognize an array in JavaScript by the use of square brackets [ ]

Here is an example of an array with multiple elements:

const myNewArray = [30, 40, true, 'Megan'];

Each element in an array has an index beginning at [0]. In our example above, the element 30 is at myNewArray[0], 40 is at myNewArray[1], and so on. This is very important information when you are working with JavaScript methods. This will become more apparent as we work through the examples. Now, on to the methods!

Array.length()

The length property returns the number of elements in an array. Let's call it on our array:

const myNewArray = [30, 40, true, 'Megan'];

let arrayLength = myNewArray.length;
console.log(arrayLength);

// Output: 4

As you can see the syntax to access the length property is yourArray.length. This property becomes very useful in things like for loops.

Array.push()

The push method adds any number of items to the end of an array. It will return the new length of the array. This is considered a destructive method because it changes the original array. Let's see how it works with an example:

const animals = ['cat', 'dog', 'horse'];

// add 'pig' to the array
animals.push('pig');

console.log(animals);

// Output: ['cat', 'dog', 'horse', 'pig']

Now we have our 'pig' added to the end of the original animals array!

Array.pop()

The pop method removes a single item from the end of an array. Let's say we want to remove the pig from our animals array above. We simply use the following syntax:

animals.pop();

console.log(animals);

// Output: ['cat', 'dog', 'horse']

Our pig is gone. This method, like push, is destructive because it removes the element from our original array. It also returns the removed element.

Array.shift()

The shift method removes the first element of an array. Let's see how it works on our original animals array:

const animals = ['cat', 'dog', 'horse'];

// Remove the first element from the array
animals.shift();

console.log(animals);

// Output: ['dog', 'horse']

The shift method is also destructive because it removes the element from the original array.

Array.unshift()

The unshift method will add any number of items to the beginning of an array. Much like push, this method is destructive and makes changes to the original array. Let's try a new example using the unshift syntax:

const colors = ['blue', 'red', 'green'];

// Add two new colors to the beginning of the array
colors.unshift('purple', 'yellow');

// Output: ['purple', 'yellow', 'blue', 'red', 'green']

We've added our two new colors to the original array! As you can see they've been added in the original order that we passed them in.

Array.slice()

You may be thinking to yourself that all of these destructive methods seem a little, well, destructive! There are array methods that are nondestructive and return a new array that is a copy or a section of the original. Slice is one such method. When passed no arguments, slice will return a new shallow copy of the original array.

const colors = ['blue', 'red', 'green'];

// Make a copy 
const colorsCopy = colors.slice();

console.log(colorsCopy);

// Output: ['blue', 'red', 'green']

This can be a very useful tool for when we don't want to change our original array. Slice can be used to copy a portion of an array when passed additional arguments. Slice takes in a start and an end so that JavaScript knows what portion of the array you'd like to copy. The syntax looks like this:

arr.slice(start, end);

'Start' being the index of the element you want to start the 'copy' from, and 'end' being the index of the last element you want to include. If you do not provide an end, the selection will end at the index of the last array element. For example:

const iceCream = ['chocolate', 'vanilla', 'rocky road', 'mint'];

// Slice only the elements we want to copy to our new array
let newArray = iceCream.slice(1, 3);

console.log(newArray);

// Output: ['vanilla', 'rocky road']

// Remember, our original array will be untouched
console.log(iceCream);

// Output: ['chocolate', 'vanilla', 'rocky road', 'mint']

Array.splice()

The splice method is perhaps the most confusing on this list, but is super useful for adding, updating, or removing elements in an array. It is destructive and does modify the original array. It also returns a new array of the deleted elements (if you did so). Let's take a look at the syntax first:

splice(start, deleteCount, item1, item2...)

start is the index at which to start changing the array. If your start number is greater than the length of your array, no elements will be deleted. Instead it will add the elements you provide as arguments.
deleteCount is an optional parameter, and is an integer indicating the number of elements that should be removed.
item1, item2, etc. are the elements you want added to the array, beginning from start. If you don't add these elements, splice will only remove things from the array.

Although it seems like a lot of information, let's see it in action with our iceCream array:

const iceCream = ['chocolate', 'vanilla', 'rocky road', 'mint'];

// Starting at array index 1 we are deleting one element and then adding a new element
iceCream.splice(1, 1, 'coffee');

console.log(iceCream);

// Output: ['chocolate', 'coffee', 'rocky road', 'mint']

What would happen if we don't delete any elements? We would have the following output!

iceCream.splice(1, 0, 'coffee');

console.log(iceCream);

// Output: ['chocolate', 'coffee', 'vanilla', 'rocky road', 'mint']

As you can see nothing has been deleted, but 'coffee' has been inserted where our start indicated.

As you can see, array methods are crucial to any programmer's skillset. JavaScript has many more built-in methods, a list of which can be found on MDN's Web Docs:
MDN's Array Information

Let me know in the comments below if there are more array methods you'd like explained!