DEV Community: Analogy | Absence | Example

My first significant refactoring of a project

Analogy | Absence | Example — Tue, 07 Sep 2021 05:55:40 +0000

I built QWERTYBall as a project in bootcamp. To make it work, I'd furiously google an example of the feature I wanted, then just as furiously I'd add whatever framework, css, and code used in that example to my codebase. The resulting game worked great, but under the hood it was a hot mess. I dreaded a potential employer taking a look at my github repo and seeing the slap-dash approach I took to make the game work.

Step 1: Organize it

The first step I took to refactor the game was just to organize it. It had been months since I wrote the code, and I wasn't sure how everything worked. I used on my all-time favorite VSCode extension, Fold Plus, to collapse all the code and just see which functions were called and in what order. Unsurprisingly, all the functions were out of order, but I moved everything around so that they were as sequential as possible.

Next, I commented out the code into sections. Because it's a game, I organized the code in the following manner:

Initialize Variables
Launch App
Start Game
Game Play
Game Over
Save Game

At this point, I found that I still didn't truly understand the structure well enough, so I decided to diagram it using LucidChart. Here's the diagram I created:

This was a total game-changer. I felt as though I finally had a bird's eye view on how the code was structured. Seeing it this way helped me realize what code was superfluous, and what code was not even used in the first place. I ended up making several successive versions of the diagram because I kept finding new ways to clean up the code.

This will be the first installment of a series devoted to this refactor. Next up, I'll detail how I reduced my CSS code from a ridiculous 8,053 lines to just ~~615~~ 252--and I have further to go!

What's the difference between CSS, SASS, and SCSS?

Analogy | Absence | Example — Tue, 31 Aug 2021 02:32:51 +0000

When I wrote QWERTYBall, I was especially eager to get it working and looking how I wanted. If I wanted a certain feature, I'd read a tutorial on how to add it, and do whatever the tutorial said to do. In the process, I ended up with a lot of extra files I didn't need.

In the interest of streamlining the app I wrote all those months ago, I recently revisited the code and found I had CSS files, SASS files, and SCSS files. The problem is that I had no idea what SASS or SCSS was, so I set out to learn. Here's what I found.

CSS

CSS stands for Cascading Style Sheets. Before CSS, there wasn't any formal separation between the code that defined how a webpage looked and the content featured on that webpage. This lack of separation made it laborious to update the look of a webpage because you had to hunt all over to find and change the fonts, colors, margins, and anything else.

SASS

SASS stands for Syntactically Awesome Style Sheets. In 2006, SASS was developed to solve the problem of excessive repetition in CSS by allowing for variables, nesting, and mixins (a pre-defined group of styles). SASS also added programmatic features such as arguments, loops, and conditional logic. The authors of SASS also decided to change the syntax a bit by eliminating the need for semicolons and curly braces. Instead, the syntax is "whitespace-sensitive" and must have proper indentation. SASS is a CSS "pre-processor" and outputs traditional CSS so any slightly modern browser can implement it.

SCSS

SCSS stands for Sassy CSS, and it's a newer syntax for SASS. It's simply CSS with the same featureset as SASS but requires semicolons and curly braces just like CSS. In fact, you can convert any CSS file to SCSS by changing the doc type from .css to .scss because SCSS is an extension of the syntax of CSS.

Examples

Here's some CSS for two buttons. Following is how you would accomplish the same goal using SASS and SCSS.

CSS


.button.danger {
  border: 1px solid black;
  background: hsl(0, 100%, 50%);
}

.button.warning {
  border: 1px solid black;
  background: hsl(60, 100%, 50%);
}

SASS

$red: hsl(0, 100%, 50%)
$yellow: hsl(60, 100%, 50%)
$neutral: hsl(0, 0%, 0%)

=myBtn($bdr, $bg) 
  border: 1 px solid $bdr
  background: $bg

button 
  danger 
    +myBtn($neutral, $red)

  warning 
    +myBtn($neutral, $yellow)

SCSS

$red: hsl(0, 100%, 50%);
$yellow: hsl(60, 100%, 50%);
$neutral: hsl(0, 0%, 0%);

@mixin myBtn($bdr, $bg) {
  border: 1 px solid $bdr;
  background: $bg;
}

button {
  danger {
    @include myBtn($neutral, $red);
  }
  warning {
    @include myBtn($neutral, $yellow);
  }
}

The 6 VSCode Extensions I couldn't live without

Analogy | Absence | Example — Tue, 24 Aug 2021 04:49:37 +0000

The geniuses behind VSCode can't think of everything, so it's absolutely wonderful that any programmer with a great idea can create an extension that we can all benefit from. We all have our favorites, and these are mine.

Fold Plus
- What: Allows you to collapse every nested block of code
- Why: Collapsing all your code blocks makes your code so much easier to understand
- How much: Free
Git Graph
- What: A visualization of your git history
- Why: Your git history is confusing as fuck, admit it
- How much: Free
Monokai Pro
- What: Color scheme for code
- Why: It's just how code should be colored. Prove me wrong.
- How much: Free evaluation copy, then €9.95 to buy it (I did. It's worth it)
Rainbow Brackets
- What: Colors opening and closing bracket pairs the same color
- Why: Makes it 1000 times easier to understand which opening and closing brackets are paired because they are the same color
- How much: Free
Prettier Code Formatter
- What: It formats and indents your code so it's much easier to parse
- Why: It's much easier than trying to understand a giant block of spaghetti code.
- How much: Free
Spell Right
- What: A spellchecker for VSCode
- Why: You're still lousy at spelling and need a spellchecker
- How much: Free

Those are my favey-faves, what are yours? Please add them in the comments below, I am always hungry for a new clever extension to make writing code easier!

What I DIDN'T learn from Flexbox Froggy

Analogy | Absence | Example — Tue, 17 Aug 2021 01:11:04 +0000

In the interest of learning Flexbox during bootcamp, I tried my hand at the brilliant Flexbox Froggy challenge. I completed all 24 levels, but in a pattern-matching, brute-force kinda way. By the end, I felt like I had learned nothing.

Months later, I decided to try my hand again at Flexbox Froggy. There's a lot that I learned about container properties and item properties, but I found there's a few commands that aren't included in Flexbox Froggy, and I'm gonna go over them in this post!

flex-grow

Imagine that you have three children you're driving to the park. Two are babies, and one is a toddler. Since the toddler is twice as big as the babies, he'll need a car seat that is twice as big, too. If each baby gets a space, the toddler will need a space that's twice as big. flex-grow allows you to designate a multiple of space for any element that you want. In this example, it would work like this:

.baby {
  flex-grow: 1; 
}
.toddler {
  flex-grow: 2; 
}

flex-shrink

flex-shrink is like the inverse of flex-grow. The example above, where I need right-sized car seats for two babies and a toddler. Instead of giving each baby a space set to 1 and the toddler gets a space set to 2, I can give the toddler a space set to 1 and the babies get a space set to 0.5, like this:

.toddler {
  flex-grow: 1; 
}
.baby {
  flex-grow: 0.5; 
}

flex-basis

flex-basis is a little tricky to explain without an example, so here's an example (based on this good article from [mastery.games]9https://mastery.games/post/the-difference-between-width-and-flex-basis/)): Imagine you have an 1000px wide container and you have four 200px items you want to put inside the container. 1000px minus (4 * 200px) = 800px, so there will be an extra 200px of empty space. If you want those four items to stretch to fit nicely into that 1000px container, you can dictate the basis of the item to 250px (because you know 1000px ÷ 4 = 250px).

.container {
  display: flex;
  width: 1000px;
}
.item {
  flex-basis: 250px; 
}

What I learned from Flexbox Froggy: Item Properties

Analogy | Absence | Example — Tue, 10 Aug 2021 02:13:41 +0000

Today, months later, I decided to try my hand again at Flexbox Froggy. Here's what I learned about item properties (to see what I learned about children properties, click here. (Spoiler: it's all about overriding the settings of the container)

Override the container's order

We use flex-direction to define the main axis and thus the order of a container. That should be good enough, right? Well, if for some reason you want to define the order of your items as distinct from the defined order of the parent container, here's an example:

Example: Before

#pond {
  display: flex;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  flex-direction: column;
}

Override the container's vertical alignment

We use align-items to specify the alignment of the contents of a container along the cross-axis. If you want to override that, you can use align-self like we do here:

Example: Before

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  align-self: flex-end;
}

Options

align-self: flex-start: vertically align items to the top of the container
align-self: flex-end: vertically align items to the bottom of the container
align-self: center: vertically align items to the center of the container
align-self: stretch: vertically stretch items from the top of the container to the bottom of the container
align-self: baseline: vertically center each item to the baseline of the container that text sits upon

Next up: What I DIDN'T learn from Flexbox Froggy!

What I learned from Flexbox Froggy: Container Properties

Analogy | Absence | Example — Tue, 03 Aug 2021 06:19:13 +0000

Today, months later, I decided to try my hand again at Flexbox Froggy. Here's what I learned.

Define your container and set the `display` property to `flex`

.myContainer {
  display: flex;
  // everything else goes here
}

Define the main axis of (the contents of) your container

Most often, you'll want your items to be ordered from first to last. But should they be laid out from left-to-right, or from top-to-bottom?

Example: Before

#pond {
  display: flex;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  flex-direction: column;
}

Options

Left-to-right: flex-direction: row (if you want it right-to-left, choose flex-direction: row-reverse)
Top-to-bottom: flex-direction: column (if you want it bottom-to-top, choose flex-direction: column-reverse)

Let your items wrap (or don't)

By default, all your items to be confined to a single row (or a single column, if you chose flex-direction: column above). If you want your items to wrap to the next line once they run out of space, choose flex-direction: wrap. Lastly, if for some reason you want the wrapping to be reversed, choose flex-direction: wrap-reverse

Example: Before

#pond {
  display: flex;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  flex-wrap: wrap;
}

Horizontally align your items

You're probably already familiar with text layout that is left-aligned, right-aligned, and center-aligned. You can, of course, align your items the same way, using justify-content.

Example: Before

#pond {
  display: flex;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  justify-content: flex-end;
}

Options

left align: justify-content: flex-start
right align: justify-content: flex-end
center align: justify-content: center

Vertically align your items

justify-content concerns alignment along the "main axis" (aka the horizontal axis). align-items concerns alignment along the "cross axis" (aka the vertical axis).

Example: Before

#pond {
  display: flex;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  align-items: flex-end
}

Options

align-items: flex-start: vertically align items to the top of the container
align-items: flex-end: vertically align items to the bottom of the container
align-items: center: vertically align items to the center of the container
align-items: stretch: vertically stretch items from the top of the container to the bottom of the container
align-items: baseline: vertically center each item to the baseline of the container that text sits upon

Distribute your items

The more interesting settings for justify-content are space-between, space-around, and space-evenly:

Example: Before

#pond {
  display: flex;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  justify-content: space-around;
}

Options

justify-content: space-between: put all the space between your items, like x---x---x
justify-content: space-around: surround each item with the same amount of space on either side of that item, like -x--x--x-
justify-content: space-evenly: divide up all the available space before and after each item, like -x-x-x-x-

Distribute your whitespace

Imagine that you have a notebook-sized sheet of lined writing paper. Now, imagine that you only have 3 lines of text to write on that sheet of paper. You could start at the top of the page, which would leave the rest of the page below the text empty. You could put the text at the bottom of the page, leaving the top of the page empty. This is what align-content controls.

Example: Before

#pond {
  display: flex;
  flex-wrap: wrap;
  // nothing here yet
}

Example: After

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

Options

align-content: flex-start: rows of items are clustered at the top of the container, leaving whitespace below
align-content: flex-end: rows of items are clustered at the bottom of the container, leaving whitespace above
align-content: center: rows of items are clustered at the center of the page, leaving whitespace above and below
align-content: space-between: items are distributed so that any available whitespace is between rows of items, but never above the first row of items or below the last row of items.
align-content: space-around: items are distributed so that any available whitespace is between rows of items, including above the first row of items and below the last row of items.
align-content: stretch: the items are stretched to fill all available space so there is no whitespace above or below a row of items.

Next: What I learned from Flexbox Froggy: Item properties!

Understanding "truthiness" by comparing it to "falsiness"

Analogy | Absence | Example — Mon, 26 Jul 2021 22:08:40 +0000

What is truthiness?

If you write a statement where you are testing if something is true or not--like an if statement that uses a logical operator like ||, !, or &&--you expect that statement to return a boolean value of true or false. Sometimes it doesn't resolve to a boolean value--true or false--yet, nevertheless, it gets interpreted like a boolean value. We call those values "truthy" or "falsey".

In Javascript, we can list all the falsy values. They are:

null
undefined
NaN (Not a Number)
"" (empty string)
false
0

There is not a corresponding list of "truthy" values, because all values are truthy unless they are defined as fasly or are one of the examples listed above.

We can, however, demonstrate "truthiness" by showing examples of if statements that resolve to truthy values. Let's start!

An empty string is falsy, but an empty array or empty object is truthy

This is because an empty string is nothingness, but an empty array is still a container and an empty object is still a container. The array and object can be filled with content at a later point.

if ("") {
  console.log("hello") // (nothing)
}

if ({}){
  console.log("hello") // hello
}
if ([]){
  console.log("hello") // hello
}

`0` is falsy, but `"0"` is truthy

This is because the value of 0 is zero, and therefore nothing, but "0" is a string with a single character that looks like a zero.

if (0){
  console.log("hello") // (nothing)
}

if ("0") {
  console.log("hello") // hello
}

`false` is falsy, but `true` is truthy

I can't explain why this is, I just accept it.

if (false){
  console.log("hello") // (nothing)
}

if (true) {
  console.log("hello") // hello
}

Let's talk about "falsiness"

Analogy | Absence | Example — Tue, 20 Jul 2021 03:57:39 +0000

What is falsiness?

In Javascript, examples of falsy values are:

null
undefined
NaN (Not a Number)
"" (empty string)
false
0

Every other value--every value that is not one of the above--will evaluate to true in a Boolean evaluation in Javascript.

Let's go through them one by one. First, I'll demonstrate a variable assignment to each falsy value. Next, I'll show how that falsy value is is interpreted as false using the Boolean() function, which takes a value or expression and always returns either true or false.

`null`

A variable that resolves to null is a variable that has been deliberately assigned an empty value

let foo = null
console.log(foo) // null

`undefined`

An undefined variable is a variable that has not yet been assigned a value.

let foo
console.log(foo) // undefined
console.log(Boolean(foo)) // false

`NaN`

A variable that resolves to NaN can be the result of an invalid math operation, such as 0/0 or sqrt(-1). A number is expected from a math operation, but the expression is invalid, so the result is not a (valid) number.

let foo = 0/0
console.log(foo) // undefined 
console.log(Boolean(foo)) // false

`""` (empty string)

Just what it sounds like: a variable that has been assigned to a string with no content.

let foo = ""
console.log(foo) // (actually, nothing shows up)
console.log(Boolean(foo)) // false

`false`

Just what it sounds like: a variable that has been assigned to a the boolean value false.

let foo = false
console.log(foo) // false
console.log(Boolean(foo)) // false

`0`

Just what it sounds like: a variable that has been assigned to 0 or that resolves to 0.

let foo = 5 - 5
console.log(foo) // 0
console.log(Boolean(foo)) // false

How I set up a brand-new React app

Analogy | Absence | Example — Mon, 12 Jul 2021 23:11:52 +0000

Create your first branch and push it the right way

The first thing I do with a new app is to create a new git branch to work on so I'm not pushing to main. I never know what I'm going to do first, so I just call it "first". Yes, I know that's basic of me. Type the following into your terminal: git checkout -b first or git checkout -b whateveryouwannacallit.

Ok, so you've checked out a new branch called first. Once you're ready to make your initial push of the branch first to git, make sure you use the command git push -u origin first. The added u sets up tracking information so that during future pushes, you can do git pull without having to specify the remote or the branch.

Remove Unnecessary Cruft

There's a bunch of files in your automatically-created new app that you don't necessarily need. Some people delete them but I just move them to a new folder I create called "DELETE" juuuuust in case I need them at some point down the road. They include the following:

remove from public directory:

favicon.ico
logo192.png
logo512.png
manifest.json
robots.txt

remove from src directory:

App.test.js
logo.svg
reportWebVitals.js
setupTests.js

Once I'm done, my directory looks like this:

Helpful Dependencies

React-Bootstrap makes it super easy to build screen layouts with their Grid System of Containers, Rows, and Columns. It also has a ton of components for common UI widgets like Alerts, Breadcrumbs, Buttons, Forms, Modals, Navbars, and on and on. Install it with

npm install react-bootstrap bootstrap@4.6.0

React Router Dom makes it easy to create static and dynamic (and bookmarkable) pages. Install it with

npm install react-router-dom

Easy-Peasy ReadMe

At some point, fill that README with useful content by visiting MakeAReadMe.com which provides handy Read Me templates.

Props vs. State

Analogy | Absence | Example — Tue, 06 Jul 2021 05:05:37 +0000

props and state are extremely useful ways to store information in React. That said, they can be easily confused. Here's a basic primer that I wrote for myself to better understand both how they are different and how they can be used together.

Props

Props are to components as parameters are to functions. Let's say you have a simple program to create a shopping list. You have a List component that shows all the items and a Form component where you can enter an item from scratch or edit an item that already exists. In the circumstance where you want to edit an item that already exists, you want to present the user with the Form component already populated with the item so that they can edit it from, say, "Milk" to "Soy Milk". In that case, you would call the Form component with the item as the parameter, like <Form item="Milk">.

...
<Form item = "Milk" />
...

The Form component would reference that parameter as a prop like so:

const Form = (props) => {
  return(
    <div>
      <input 
        type="text" 
        value={props.item} 
        onChange={(e) => handleInputChange(e.currentTarget.value)} />
    </div>
  )
}

The important thing to remember about props is that props are read-only inside the component they are passed into. They must originate from outside the component, and they can only be updated outside the component.

State

State, by contrast, is initialized inside the component and can be updated inside the component.

A common and useful way to use state with props is to create a state variable from the passed-in prop. Then you can update the state variable however you want. Using the example above, you would do the following:

const Form = (props) => {
  const [item, setItem] = useState(props.item);
  return(
    <div>
      <input 
        type="text" 
        value={item} 
        onChange={(e) => handleInputChange(e.currentTarget.value)} />
    </div>
  )
}

What to use for what

Remember the following:

If you have a value that will be created (and possibly updated) from inside that component, you need to use state.
If you have a value that will be used inside a component that was created outside the component, just use props.
If you have a value that may be updated inside a component that was created outside the component, create a state variable that is set to that prop and update the state variable as you wish.

How to create a new React app from scratch

Analogy | Absence | Example — Tue, 29 Jun 2021 02:03:12 +0000

Note: I have been battle-testing this and reading similar blog posts about how to accomplish the same thing. If you have feedback, I want to hear it! Please comment if you disagree with anything or have a better way.

Since I spend a lot more of my time working on existing apps, I ~~often~~ always forget how to properly create a React app from scratch that is (1) Properly tied to a git repository, and (2) has a proper .gitignore file. So, I'm kinda making this post for myself, but since you somehow landed on this post, I bet it will help you too!

Decide what you're gonna call it. It doesn't matter that much because the you can call the resulting webapp something totally different later. For this post, let's call our app my-foo (no spaces are allowed, thus the hyphen).
In VSCode, from the top menu, select File > New Window. Once the new window opens, select Terminal > New Terminal from the top menu or just type ^~. In the resulting terminal window, type npx create-react-app my-foo. npx stands for Node Package Executer. We use npx instead of npm (Node Package Manager) because npm requires you to already have npm installed, which may not be the case.
Once it's done creating the react app you just told it to create, change directories into the new my-foo folder by typing cd my-foo.
Now that you're in your new directory, it's time to initialize your remote git repository.
Go to your github page, which should be something like github.com/yourname (mine is github.com/mathlete01), click on the Repositories like at the top, click the green new button and create a new repo(sitory) called my-foo. LEAVE ALL THE BOXES UNCHECKED.

Yay! Now you have a repo for my-foo.

On the next screen, it will show three different options. We want the first one, pictured below. Github makes it easy by providing all the commands you need. They make it even easier by providing a button that will copy all those commands to your clipboard. Click that button, then return to your terminal window and paste. Voila!

Now you have created a brand-new react app with a both a .gitignore and a README file that were created by the create-react-app command.

Now go build something great!

Are you a console.log addict? Add this snippet to make it faster, easier, and clearer to use.

Analogy | Absence | Example — Mon, 21 Jun 2021 19:04:53 +0000

Our first debugging friend, the humble `console.log`

One of the first things you learn when programming javascript is how to print a value to the output window. Let's say you declare a variable called myVar, and your code has a statement like myVar = 1+1. When you want to make sure that your code is doing what you expect-- 1 + 1 = 2, so myVar should equal 2--you write console.log(myVar). When the interpreter reaches that line of code, you will miraculously see 2 appear in the output window.

...but it doesn't scale

The problem is, once you are peppering your code with console.log statements, it's hard to remember what all the values appearing in the output window refer to. The solution is to write a more verbose console.log statement, like

console.log(`myVar = $myVar`)

but that can be cumbersome after a while.

My solution

My solution was to create a snippet in VSCode so that when I type a shortcut--mine is consolel (like typing console.log without the period--I get the following statement:

console.log(`foo = `, foo)

I then double-click foo, type ⌘d to select the other foo, then type in myVar to replace both foos with myVar. The result is the following:

console.log(`myVar = `, myVar)

...and when you run the code, what you see in the output window is:

myVar = 2

...instead of just

Isn't that nice?

Here's how to create a snippet to quickly and easily add descriptive `console.log` statements

In VSCode, at the top menu, select Code > Preferences > User Snippets
The Command Palette will open. Select "New Global Snippets File" and type in the name you want to use. Mine was consolelog, so it created a file titled consolelog.code-snippets
Your new code-snippet file will have a bunch of commented-out text inside a set of curly braces explaining how to use it. At the bottom of the text, but inside the last curly brace, add the following code:

"consolelog":{
    "prefix": ["consolelog"],
    "body": ["console.log(`foo = `, foo)"],
    "description": ["Shortcut for a descriptive console.log statement"]

    },

When you're finished, the code should look like this:

{
    // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    //  "scope": "javascript,typescript",
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "consolelog":{
        "prefix": ["consolelog"],
        "body": ["console.log(`foo = `, foo)"],
                "description": ["Shortcut for a descriptive console.log statement"]

Here's what's going on in the code. As it says in the commented-out text, "Each snippet is defined under a snippet name and has a scope, prefix, body and description." In this case, they are:

Snippet Name: consolelog
Scope: (I skipped scope to make this global)
Prefix: The shortcut you choose to summon this snippet, I chose consolelog
Body: The text you want the snippet to create, wrapped in brackets and quotes
Description: Whatever you think best explains your snippet. I wrote "Shortcut for a descriptive console.log statement"

I hope this helps!

DEV Community: Analogy | Absence | Example

My first significant refactoring of a project

Step 1: Organize it

What's the difference between CSS, SASS, and SCSS?

CSS

SASS

SCSS

Examples

The 6 VSCode Extensions I couldn't live without

What I DIDN'T learn from Flexbox Froggy

flex-grow

flex-shrink

flex-basis

What I learned from Flexbox Froggy: Item Properties

Override the container's order

Example: Before

Example: After

Override the container's vertical alignment

Example: Before

Example: After

Options

What I learned from Flexbox Froggy: Container Properties

Define your container and set the display property to flex

Define the main axis of (the contents of) your container

Example: Before

Example: After

Options

Let your items wrap (or don't)

Example: Before

Example: After

Horizontally align your items

Example: Before

Example: After

Options

Vertically align your items

Example: Before

Example: After

Options

Distribute your items

Example: Before

Example: After

Options

Distribute your whitespace

Example: Before

Example: After

Options

Understanding "truthiness" by comparing it to "falsiness"

What is truthiness?

An empty string is falsy, but an empty array or empty object is truthy

0 is falsy, but "0" is truthy

false is falsy, but true is truthy

Let's talk about "falsiness"

What is falsiness?

null

undefined

NaN

"" (empty string)

false

0

How I set up a brand-new React app

Create your first branch and push it the right way

Remove Unnecessary Cruft

Helpful Dependencies

Easy-Peasy ReadMe

Props vs. State

Props

State

What to use for what

How to create a new React app from scratch

Are you a console.log addict? Add this snippet to make it faster, easier, and clearer to use.

Our first debugging friend, the humble console.log

...but it doesn't scale

My solution

Here's how to create a snippet to quickly and easily add descriptive console.log statements

Define your container and set the `display` property to `flex`

`0` is falsy, but `"0"` is truthy

`false` is falsy, but `true` is truthy

`null`

`undefined`

`NaN`

`""` (empty string)

`false`

`0`

Our first debugging friend, the humble `console.log`

Here's how to create a snippet to quickly and easily add descriptive `console.log` statements