DEV Community: Maasa Kono

Git and GitHub

Maasa Kono — Sun, 24 Jan 2021 19:22:08 +0000

As I prepare for my first ever collaboration project with an old boot camp cohort-mate (so excited!), one of the first steps to take is to understand best practices for sharing code with each other through GitHub.

I was so grateful to finally have a good excuse to set aside projects and algorithm challenges for a minute to give my full attention to properly learning the basics of version control, as it had been an area I didn't fully understand. I mean, sure, I've entered git commands before because that's what the past lessons and tutorials told me to do, but what do they mean?

So, after listening to some awesome explanations by Colt Steele and getting tips from Allison Weins and Leslie Richardson at a recent hackathon workshop, here is a breakdown of what I've learned on the topic!

What is Git?

There is a common confusion that Git and GitHub are the same thing, so let's first clear that up.

Git is a distributed version control system that is free and open-source. Its purpose is to allow developers track any changes made to the code being worked on.

In order to use Git on a project, a repository for it is needed. A repository is just a container for Git.

Basic Git Commands

Initialize (Create)

To initialize (create) a repository so that Git can be used on a project, we run the following in the terminal:

$  git init

This command will create some new folders, including a .git folder.

Status (Current State)

We can check on the status of a repository to see any modifications to a file or untracked files that were newly created. To see this, we run the following:

$  git status

Commits (Checkpoints)

It is very important to place checkpoints on changes made to a file with a brief description of what was done. These are called commits, and it is generally encouraged to create many small commits in order to make it easier to review a repository. The Git command to do this is as follows:

First, we want to tell Git which file we are adding a commit to. If it is for one specific file, then we want to run:

$  git add fileBeingChanged.html

or we can chain multiple files:

$  git add fileBeingChanged.html anotherFile.html hereIsOneMore.js

or we can add everything that has been changed with:

$  git add .

Then, we add a commit message:

$  git commit -m "Some description of what was changed"

Log (History)

To see a history of commits that have been made, we enter:

$  git log

and we should see something like this for each past commit:

The long string of numbers and letters following the word commit at the top is called a commit hash, which we'll get to next.

Checkout (Time Traveling)

The beautiful thing about version control is the ability to hop around to different points in time in our code/repository (basically time traveling). Say we're working but then want to start over from a previous point. First, we would pull up a log of previous commits so that we can find and copy the commit hash of the point where we want to go back to and insert it here:

$  git checkout <paste commit hash here>

Branch (Safe Place to Try New Stuff)

When working in a repository, we start out from one main branch that is called the master branch by default. What if there's a new feature that we want to work on, but want to keep it separate from the main branch to avoid any potential problems it may cause? That is where branching comes in! When working on a new feature, or if working with a team, we can actually create a separate branch that diverges from the main one.

To create a new branch, we run the following:

$  git branch <name of new branch goes here>

and then to navigate over to that newly created branch, we run:

$  git checkout <whatever we named our new branch goes here>

To see a list of all existing branches in our repository, we run:

$  git branch

Whatever branch we are currently on will be highlighted in green with an asterisk next to it.

Again, we can do some time traveling here. If we want to go back to our main branch, we would run the following:

$  git checkout master

Merge (Fuuuuusion, HA!!)

Once we are happy with our new feature on a separate branch, we can then join it back to the main/master branch. To do this, we'll first need to make sure that we are on the master branch, and then run this command:

$  git merge <name of branch to be merged goes here>

Now that we've got some better understanding of Git, let's move onto GitHub.

GitHub

😆Referring to a funny explanation of the difference between Git and GitHub that was found on the internet.😆

Git, as we have learned, is a version control system, and it can be used on its own.

GitHub is a place to share repositories with team members, and to publish and contribute to open source projects.

Pushing Local Repository/Project to GitHub

To use GitHub, we'll need to first register for an account.

When we have some code on our machine that we want to put up on GitHut to share or collaborate on, we'll take the following steps:

Make a local repository with Git (which we just learned how to do in the section above).
In GitHub.com, find the green "New" button to create a new repository. Follow the prompts to initialize it with an optional README, .gitignore, and/or license file.
Click on the green "Code" button to get the URL for this new repository and copy it.
Go back to the repository on our machine that we want to connect to the new GitHub repository and run the following:

$  git remote add origin <paste in that URL here>

This is a way to tell Git that there is this remote place where we want to push our code up to (or retrieve code from).
The `origin` part of this line is just the conventional name/label for the remote location, but it can be named anything.

Finally, to push our local repository up to GitHub, we run the following:

$  git push -u origin master

Origin needs to match the name of the name of the remote.

Cloning a Repository

We can get a copy of an existing GitHub repository onto our own local device by cloning it:

Copy the URL from the original GitHub repository
Make a new directory locally where we want to place this clone
Enter the following command in the terminal once in that directory:

$  git clone <paste the GitHub url here>

This will fetch all the files, Git history including commits, and put everything into a folder in our machine.

(We won't have permission to push changes to the original GitHub repository at this point. You can find a link to an explanation on GitHub pull request etiquette at the end of this blog.)

Thanks for reading, I hope this is helpful!

( ^_____^ )

Helpful Links

Git Documentation

GitHub Website

Learn Git in 15 Minutes by Colt Steele

Learn GitHub in 20 Minutes by Colt Steele

GitHub Pull Request Etiquette

React's useEffect Hook

Maasa Kono — Mon, 18 Jan 2021 04:35:25 +0000

One of the built-in hooks in React is the useEffect hook. This is a function that runs upon every rendering of a component, starting from the initial rendering when the component first loads to any changes to the component's state. This can be useful for tasks like fetching data or manipulating the DOM, amongst other things.

Note: There will be references to the useState hook here, so if a quick review would be helpful, you can check out my prior blog on useState. I will also put a link at the end for The Net Ninja's tutorial video on this topic as well.

Usage

In order to begin using the useEffect hook, we will need to first import it from the React library into the component at the top:

import { useState, useEffect } from 'react';

And now we can use this hook somewhere above the return statement. Since this function won't return anything to us, we will not be storing it in a variable.

const SomeComponent = () => {
  useEffect(() => {
    console.log('useEffect hook just ran because this component rendered');
  });

  return (
    // Whatever this component is returning
  );

Avoid the Endless Render-Loop

Beware of changing state inside the useEffect hook because we could end up in an endless render-loop.

Here is a step-by-step of what would happen if we include a function that changes state inside useEffect:

Initial render of the component occurs
useEffect is triggered
State is updated
Component re-renders due to change in state
The re-render triggers useEffect again
Back to #3, and so on and so forth...

We can remedy this issue by passing in a dependency array as a second argument to the useEffect hook.

If we pass in an empty (dependency) array as a second argument to useEffect, this function will only run after the initial render, and it won't be triggered even if the component's state changes.

  useEffect(() => {
    console.log('useEffect hook ran on initial render of the component, but no more!');
  }, [] // All we're doing is adding this empty array here);

Now, let's say we want useEffect to run at the initial render and only whenever a certain value (meaning, a specific property of state) changes. We can pass the reference to that value inside the dependency array (so there can be multiple ones), and useEffect will now know to watch that state, only triggering if any changes are made to that specific state value.

Here is what it could look like if we have a component with a useEffect hook that only gets triggered when there's any change made to its number state, ignoring any other state changes:

const ExampleComponent = () => {
  // We are setting the initial state of `letter` and `number` using the useState hook
  const [letter, setLetter] = useState('A');
  const [number, setNumber] = useState(1);

  useEffect(() => {
    // We are logging this message to the console only at the first render of this component and when the `number` value changes
    console.log('useEffect only runs at initial render and when the `number` state changes/updates');
  // useEffect knows to watch for changes in the `number` value because we are passing it as a second argument here as a dependency 
  }, [number]);

  return (
    <div>
      // This button changes the `letter` state from `A` to `B`, but will not result in a trigger of useEffect
      <button onClick={() => setLetter('B')}>Will Not Trigger useEffect</button>
      // This button WILL trigger the useEffect hook because it is effecting the state change we are specifically listening for
      <button onClick={() => setNumber(number + 1)}>Will Trigger useEffect</button>
    </div>
  );
}

Thanks for reading, and Happy Coding! 😄

Helpful Links

React's documentation on the useEffect Hook

The Net Ninja's tutorial going over the useEffect Hook

The Net Ninja's tutorial on the useState Hook

VS Code Extensions and Shortcuts

Maasa Kono — Mon, 11 Jan 2021 02:26:56 +0000

Visual Studio Code comes with a bunch of built-in tools that make coding life much easier, as well as a whole array of extensions that you can install according to your needs.

Extensions

VS Code seems to have a solution to just about every coding challenge, but here are the ones I use:

Live Server

Use Live Server to get live reloads in the browser of your local development server! This is great for not having to constantly hit the refresh button to view any changes made to your project. As soon as you save changes, the browser will be updated automatically.

Bracket Pair Colorizer

Do you lose track of where your closing brackets are? Bracket Pair Colorizer will show you where it is by connecting a line from the bracket where your cursor is on to the end point.

Prettier

Prettier is a nice code formatter you can use to keep your code looking consistent and, well, pretty! This is particularly handy for languages like JavaScript, where you need to add the ending semi-colon. Prettier takes that ask off of our hands.

VSCode Ruby

If you're learning to code in Ruby, VSCode Ruby provides elegant syntax highlighting as well as snippets.

JS JSX Snippets

This extension is fantastic when working in React. JS JSX Snippets will save you a ton of time by giving you keyboard shortcuts to create a skeletal React component, whether it's a class component or functional component.

EJS Language Support

I've only just started using a bit of EJS for some Node projects, but EJS Language Support is tremendously helpful to get better syntax highlighting, making your code more readable.

Keyboard Shortcuts

Aside from the general keyboard shortcuts like ctrl + s for saving a document, here are some VS Code keyboard shortcuts that I have come to use regularly:

toggle word wrap:
alt + z
duplicate a line of code:
shift + alt + up/down
move a line of code up or down:
alt + up/down
duplicate cursor:
hold shift + click
toggle commenting a line of code:
ctrl + /

Here is a complete list of VS Code keyboard shortcuts.

Happy Coding!

Learning Express.js

Maasa Kono — Mon, 04 Jan 2021 02:22:46 +0000

As developers, we use all sorts of frameworks to speed up the process of building web applications, reducing time spent on writing repetitive code. Express is one such handy framework.

Per the Express JS website, it is a "fast, unopinionated, minimalist web framework for Node.js."

I like the sound of that!

Here's what The Net Ninja has taught me about it.

What is Express?

Express is a web application framework for Node.js that has several benefits, including:

easy and flexible routing system
integrates with many templating engines
contains its own middleware modules for additional functionalities on requests and responses
easily serve static files and resources of the application
easily connect with databases

Installation

To install Express, run the following in the terminal (assuming we already have Node.js installed):

$ npm install express

Once the installation is complete, let's require the Express module in our main app.js file, set a variable (in this case we will set it as app), and fire express(). We will also need to set up a port, which we can listen to. For our purposes, we'll use the commonly used port 3000.

app.js

// Require the Express module
const express = require('express');

// Fire Express and set it to a variable
const app = express();

// Listen to port 3000
app.listen(3000);

Now we have access to the functionalities offered by Express!

Routing

As we know, we make various HTTP requests to determine how our application responds. The HTTP verbs with the corresponding Express functionalities are as follows:

// GET 
app.get('route', fn);

// POST
app.post('route', fn);

// PUT
app.put('route', fn);

// DELETE
app.delete('route', fn);

Pretty straightforward!

The function that gets passed into the above HTTP request methods take two parameters: a request object and a response object. The response object has a property of send, wherein we can specify what we want to send back.

The following is a very basic example of a GET request for the root path ('/') with a simple string response:

app.get('/', function(request, response) {
  response.send('This is the root page');
});

This, however, is not typically how we would send responses - instead, we would be sending back various files. The response object also has access to a function sendFile() which takes a parameter of the file name we want to respond with.

If we take the example above and instead want to send the actual index.html root file, then we would code it as follows:

app.get('/', function(request, response) {
  response.sendFile(__dirname + '/index.html');
});

Route Parameters

To dynamically access certain parameters in the route, we can use the params property of the request object.

Let's say we are on a Dragon Ball Z website, looking at a directory of Saiyans. We could pass in a parameter of :name to identify which Saiyan's page we want to request, and have access to it through the request object as follows:

app.get('/saiyan/:name', function(request, response) {
  res.send('The Saiyan you are currently viewing is ' + req.params.name);
});

So if our URL is localhost:3000/saiyan/goku, req.params.name will equal goku.

Template Engines

Template engines allow us to use static template files in our application, replacing variables with values at runtime, and making the template into an HTML file that can be sent to and read by the client.

With a JavaScript template engine, we can embed JavaScript code into HTML files, dynamically injecting content.

EJS is one such template engine. It is just like ERB in Ruby (for those of you who may be a Rubyist).

To install the EJS package, run:

$ npm install ejs

Then we need to let Express know that we want to use EJS as our view engine:

app.set('view engine', 'ejs');

By default, when making a request for views/templates, EJS will look in the views folder, so we will need to create this directory and put all views/templates inside here.

All EJS file names must end with .ejs in order for the engine to recognize it.

When we want to respond with an EJS file, we use the render method on the response object, instead of sendFile(). This takes a parameter of the EJS file name, but we can exclude the .ejs part.

Let's say that, instead of sending the index.html file, we are now going to send an index.ejs file (which is inside the views folder). Our code would now look like this:

app.get('/', function(request, response) {
  response.render('index');
});

We can pass data to a view by passing an object as a second parameter to the render() function.

Let's take a prior GET request for a particular Saiyan's web page. In this example, we'll create a data object with properties of level and job. Then, we will call the render() function, passing in the saiyan EJS file (which we will get to in just a second), along with a second parameter of an object:

app.get('/saiyan/:name, function(request, response) {
  const data = {level: 3, job: 'hero', friends: ['Krillin', 'Bulma', 'Muten Roshi']};
  response.render('saiyan', {warrior: req.params.name, data: data});
});

Now let's create a saiyan.ejs file under the views directory. This will look mostly like an HTML file, but wherever we are embedding data, we will use <%= %>:

views/saiyan.ejs

<!DOCTYPE html>
<html>
<head>
  // We won't worry about this section for now
</head>
<body>
  <h1>Saiyan's Name: <%= warrior %></h1>
  <h2>Level: <%= data.level %></h2>
  <h2>Job: <%= data.job %></h2>
</body>
</html>

We can also output JavaScript with data:

  <% data.friends.forEach(friend => { %>
    <li><%= friend %></li>
  <% }); %>

Notice that we are not using the equal sign where we're not actually rendering data.

Partial Views

Partial templates are for parts of a page that can be used across multiple views, such as a navigation bar. The benefits of using partial templates include:

eliminating repetitive code
any change that needs to be made only need to be made once in a partial view

Under the views directory, we can create another directory called partials, and in here we can create partial template files (views/partials/navbar.ejs). All we need to do to include a partial template in another view file is to use the following syntax:

<html>
<body>
  // Include the navbar partial template here
  <%-include('partials/navbar.ejs') %>

  // The rest of the body content
</body>
</html>

There's much more to Express, but that's about it for this little introduction. I hope it helps!

Happy coding~~~ 😄

Helpful Link

The Net Ninja's Express tutorial videos

Intro to Node.js (Part 2)

Maasa Kono — Mon, 28 Dec 2020 04:20:38 +0000

Here is part 2 to what I've been learning about Node.js through The Net Ninja!

Creating a Node Server

If you have a basic understanding of how computers and the internet work, you know that it's a cycle of a client/browser making requests for pieces of information and receiving it from a local server/web server. With Node, we have the ability to create our own server!

We first need to require one of Node's core modules, the HTTP module, to gain access to its built-in createServer() method. This function accepts two parameters: a request object and a response object.

The request object has a property of url, which we can later use to differentiate what type of response would be appropriate for each request.

The response object has a function writeHead() that is used to specify what we are actually sending back as a response to the client. This function accepts two parameters: the HTTP status code (i.e., 200 - Accepted, 404 - Not Found, 500 - Server Error, etc.) and the Content-Type to tell the browser what media type we are sending back (i.e., plain text, HTML, JSON). Finally, we will complete the response process with the end() function, signaling to the server that all of the response headers and body have been sent.

To see the response in the browser, we need to listen for the port, and pass in the IP address as well. For our purposes, we'll use the commonly used port 3000, and the local IP address (127.0.0.1).

In the following code, we are simply creating a Node server that responds with plain text when we make the URL request through the browser.

app.js

// First, we'll require the HTTP module and save it to a variable
const http = require('http');

// Next we'll call the createServer() function, which will also be saved to a variable, and then call the writeHead() function to respond with a 200 HTTP status code and plain text
const server = http.createServer(function(request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Here is the plain text you requested');
});

// Let's listen to the port so we can view our response in the browser
server.listen(3000, '127.0.0.1');
// Let's also confirm that we are indeed listening to the port by logging a message in the console
console.log('You are currently listening to port 3000');

Now we can run Node in the terminal:

$ node app

and we should see the message in the terminal confirming that we are listening to the port. Go to the browser and enter the IP address and port (127.0.0.1:3000 or localhost:3000), and we should now see our plain text message. It looks like our Node server is up and running properly!

You may notice that we will continue receiving the same response no matter what we enter following the port number in the URL. This is because we have not yet dealt with routes to differentiate between requests (we'll get to that shortly).

The Node Stream

Let's say we wanted to watch The Umbrella Academy through Netflix (seriously, you should check it out if you haven't yet). Our user experience wouldn't be too great if we had to wait for an entire episode to load before being able to even begin watching it. That is why streaming is so amazing when it comes to requests and responses that deal with a ton of data!

When we stream a show, movie, music, etc., we are getting bits of data at a time that is being sent from one end to another. These bits of data fill what's called a buffer, where pieces of data are temporarily stored. Once the buffer is full, it gets sent off to be consumed.

In this way, instead of having to wait who-knows-for-how-long to consume data, it can be fed to us pieces at a time! Bottom line, we get better performance.

Node provides us with some cool tools to create our own data streams!

Readable Stream

Let's say we want to create a stream to read a large piece of data. First, we'll need to require the File System core module to access its built-in function createReadStream(). This function accepts the name of the file we are trying to read, and we'll also pass in the character encoding UTF-8 (if we don't add the character encoding, the response will just be the buffer, instead of the actual contents of the file we are trying to read).

createReadStream() inherits functionalities from the EventEmitter module (this is one of the core modules I went over in the last blog post), so we can listen for the data event to actually see how the chunks of data are coming in by logging it into the console.

app.js

// We will first require the FS core module
const fs = require('fs');

// Now we can call the createReadStream() function and store it in a variable
const newReadStream = fs.createReadStream(__dirname + '/readFile.txt', 'utf8');

// To see how the chunks of data are coming in, we'll listen to the data event and log each chunk in the console
newReadStream.on('data', function(chunk) {
  console.log('Here is a chunk of data:');
  console.log(chunk);
});

Writable Stream

A stream for writing data in Node is very similar to a stream for reading data. After requiring the File System module, we have access to another intuitively-named method, createWriteStream(), which accepts a parameter for the location and name of the file where we will be writing data to.

If we combine createReadStream() with createWriteStream(), it would look something like this:

app.js

// You know the drill - gotta require the module first
const fs = require('fs');

// Let's take the same createReadStream() we made earlier
const newReadStream = fs.createReadStream(__dirname + '/readFile.txt', 'utf8');

// This time, instead of logging in the console the chunks of data we are reading, we will utilize the createWriteStream() method to write the chunks of data we are reading into a new file
const newWriteStream = fs.createWriteStream(__dirname + '/writeFile.txt');

newReadStream.on('data', function(chunk){
  newWriteStream.write(chunk);
});

Once we run node in the terminal, we should see a new text file (writeFile.txt) in our current directory, and inside that file we'll now see the data from the readFile.txt file.

Pipes

It is very common to read data from a read stream and to write data to a write stream. Instead of having to do all this manually every time, Node has a nice shortcut that takes care of this job for us, in the form of a pipe.

A pipe simply let's us skip the steps of having to listen for data events and manually writing data to the write stream by doing all that on its own.

We could revise our previous code above to be shorter with the help of a pipe:

app.js

const fs = require('fs');

const newReadStream = fs.createReadStream(__dirname + '/readFile.txt', 'utf8');
const newWriteStream = fs.createWriteStream(__dirname + '/writeFile.txt');

// Instead of listening for the data event and manually writing the data to the write stream, we can replace it with the pipe() function
myReadStream.pipe(myWriteStream);

The above code will function the same way as the previous code we had, but this looks much cleaner!

Putting it Together

Now let's put together everything we've learned here so far to send data to a user through the browser.

In the following example, there are various route requests. We have one for the root/home route, an about page, an API (made-up), and for anything else an 404 error page. Let's pretend that these HTML files have already been created separately.

We'll have conditional statements to check the requests's url property, and send responses accordingly.

app.js

const http = require('http');
const fs = require('fs');

const server = http.createServer(function(request, response) {
  if (request.url === '/home' || request.url === '/') {
    response.writeHead(200, {'Content-Type': 'text/html'});
    fs.createReadStream(__dirname + '/index.html').pipe(response);
  } else if (request.url === '/about') {
    response.writeHead(200, {'Content-Type': 'text/html'});
    fs.createReadStream(__dirname + '/about.html').pipe(response);
  } else if (request.url === '/api/umbrellaacademy') {
    response.writeHead(200, {'Content-Type': 'application/json'});
    response.end(JSON.stringify(badasses);
  } else {
    response.writeHead(404, {'Content-Type': 'text/html'});
    fs.createReadStream(__dirname + '/404.html').pipe(response);
  }
});

server.listen(3000, '127.0.0.1');
console.log('You are currently listening to port 3000')

Aaaaaaand that's about it for now. Feel free to comment below, I'd love to hear your thoughts!

'Til next time~~~!

Helpful Links

The Net Ninja's Node.js Tutorial Videos

Node.js Documentation

Intro to Node.js (Part 1)

Maasa Kono — Mon, 21 Dec 2020 03:20:49 +0000

It's time to start learning Node.js! I'll share what I'm learning with the help of the amazing Net Ninja's tutorial on this topic.

What is Node.js?

Node.js is an open-source platform that runs JavaScript on a computer or server outside of the web browser. It allows for easy communication with the database with functionalities for reading, deleting and updating files.

Node.js is itself written in C++, but as a program it allows us to write in JavaScript. It runs fast thanks to the embedded V8 engine (an engine which takes JavaScript and converts it to machine code for the computer to run).

It also comes with a ton of open source packages - npm (Node Package Manager).

Installation and Usage

Node.js can be downloaded from their website: https://nodejs.org/en/.

You have the option of downloading the latest stable version or the latest version with more features but unstable.

To check if you have it installed, run the following in the terminal:

$ node -v

This will give you the version of Node.js that's installed in your device, assuming it's there.

Everything in Node is run through the terminal. In order to run a file in Node, first be sure that you're in the directory of that specific file, and in the terminal run node followed by the name of the file:

$ node nameOfFile.js

Global Objects

Node.js global objects are available in all modules (which are JavaScript files), which gives us access to various methods.

For those of us who use JavaScript, these global functions should look familiar:

console.log()
setTimeout()
setInterval()
clearTimeout()

Some global objects include:

__dirname
This tells us what directory we are in.

__filename
This gives us the file name as well as the directory it's in.

Function Expressions

A common pattern in Node.js is function expressions written in the following way:

const greeting = function() {
  console.log('Greetings, Earthlings.');
};
greeting();

Modules and How to Use Them

In Node.js, we split code into logical modules - which are simply JavaScript files - and then call upon those modules when we need them. This helps with organization and results in code that is easier to understand and debug.

Let's create a module called greeting that accepts a parameter for a name to include in the greeting message. You'll notice that at the bottom we are exporting this module. We need to do this in order for other files to be able to use this module:

greeting.js

//  Here we write the function of this model:
const greeting = function(name) {
  return `Greetings, ${name}!`
}

// This export line must be included in order to make it available for use in other files
module.exports = greeting;

Now, let's say we want to use the greeting module in the main app.js file. we'll first need to require the module that is going to be used and assign it to a variable so that we can utilize its function:

app.js

const greeting = require('./greeting');

console.log(greeting('Goku'));

Multiple Functions in a Module

When a module has multiple functions, the export line at the bottom is what looks a little different.

Let's go back to our original module and add another function to it:

greeting.js

const greeting = function(name) {
  return `Greetings, ${name}!`
}

const casualGreeting = function(name) {
  return 'What's up, ${name}!'
}

// The greeting property of the exports object is equal to the function
module.exports.greeting = greeting;
module.exports.casualGreeting = casualGreeting;

Again, we just need to require the module inside of the file that we want to use, and in this way we export multiple functions from one module.

Alternatively, the same thing can be done by writing the module as follows:

greeting.js

module.exports.greeting = function(name) {
  return `Greetings, ${name}!`
}

module.exports.casualGreeting = function(name) {
  return 'What's up, ${name}!'
}

Here is a third way to write the module performing the exact same functionalities:

greeting.js

const greeting = function(name) {
  return `Greetings, ${name}!`
}

const casualGreeting = function(name) {
  return 'What's up, ${name}!'
}

// We are creating an exports object
module.exports = {
  greeting: greeting,
  casualGreeting: casualGreeting
};

Built-In Modules

There are several built-in core modules that can be required the same way custom modules are required.

Events Module

One such module is the Events module, which allows us to create, invoke and listen for custom events we create.

battleMode.js

// First, we require the Events module and assign it to a variable.  Node recognizes the module name because it is already built in.
const events = require('events');

// Now we can create an EventEmitter object:
const emitEvent = new events.EventEmitter();

// Create a function that will be executed when the event we created is fired:
emitEvent.on('threatened', function(fight) {
  console.log(fight);
});

// Here we are firing the event and passing in the function that is to be executed: 
myEmitter.emit('threatened', 'Ka~me~ha~me~HAAAAA!!!');

File System Module

Another core built-in module is the File System module, which allows us to interact with with the file system on our computers. For example, we can read and write files by utilizing this module:

app.js

// As always, we are requiring the module at the top:
const fs = require('fs');

// Synchronous method for reading:
const readThis = fs.readFileSync('readThis.text', 'utf8');
  // The first parameter takes the name of the file we want to read
  // The second parameter is the character encoding so that the computer understands the JavaScript code being run

// Synchronous method for writing:
fs.writeFileSync('writeThis.txt', 'readThis');
  // The first parameter takes the file that we want to write to
  // The second parameter takes the data we want written to that file
  // If the file we are writing to does not yet exist, this line of code will create it

// Asynchronous method for reading:
fs.readFile('readThis.text', 'utf8', function(err, data) {
  fs.writeThis('writeThis.txt', data);
});
  // The first parameter takes the file we want to read
  // The second parameter is the character encoding
  // The third parameter is the callback function to fire when the process is complete
    // The callback function takes two parameters:
    // 1) Error if there is a problem with the method
    // 2) The data we are retrieving

If we want to delete a file, simply run:

fs.unlink('fileToBeDeleted.txt')

We can also create and remove directories with this module.

app.js

// You probably get it by now that we need to require the module first
const fs = require('fs');

// Synchronously create and remove directories:
fs.mkdirSync('someDirectory');
  // Pass in the directory name we want to create

fs.rmdirSync('someDirectory');
  // Pass in the directory we want to delete

// Asynchronously create and remove directories:
fs.mkdir('someDirectory', function(){
  fs.readFile('readThis.txt', 'utf8', function(err, data){
    fs.writeThis('./someDirectory/writeThis.txt', data);
  })
});
  // Since this is asynchronous, it takes a callback function where we read and write the file inside the newly created directory

fs.unlink('./someDirectory/writeThis.txt', function(){
  fs.rmdir('someDirectory');
});
  // Again, this is asynchronous so it takes a callback function that deletes the directory
  // In order to delete a directory, it must be empty, so we would first need to remove any file inside of it

I hope this helps. I'm looking forward to learning more about Node.js!

Helpful Links

Deploy with Firebase Hosting

Maasa Kono — Mon, 14 Dec 2020 04:40:02 +0000

It's been a lot of fun learning how to use the various tools that Firebase offers. Now we're moving onto the deployment stage! Firebase Hosting is wonderfully easy to use to deploy your website. Here is a quick walk-through!

This walk-through will assume that you already have a Firebase project for the backend. For some guidance on setting that up, please see the "Getting started with Firebase" section in my previous blog.

Installation

To get started, we need to have Firebase Tools installed locally on our computer. You will need to have Node.js installed before proceeding. Assuming we are good to go on that end, run the following in the terminal:

$ npm install -g firebase-tools

Next, we'll log into our Firebase account by running the following in the terminal:

$ firebase login

Initialize

Move into the directory of the project that is going to be deployed, and then run the following to initialize Firebase in that project:

$ firebase init

Follow the prompt to proceed, and then we'll see a list of Firebase services to select from to use for this project. Make sure to select the Firebase Hosting service before continuing.

We can then link a project from the backend (remember, we're logged into Firebase now so we can see a list of all existing Firebase projects). After selecting the appropriate project, you can go with the default option for the public directory. The next configuration will be a yes or no depending on whether or not your web app is a single page application (SPA).

Once the initialization is complete, we should see some new files created within our project directory. Let's just focus on the public folder. There should be a dummy index.html file that got created with it. This can be deleted and replaced by the existing index.html file from your project, along with css styling files and anything else from the project that you want deployed.

Testing

We might want to test out our site before deploying it. Firebase Tools includes a local development server that we can use to view and test our website in the browser. Simply run the following in the terminal:

$ firebase serve

We should then see the local server start and a link that can be followed to open up our website.

Deploy

Once we are ready to present our website, all we need to do is run this in the terminal:

$ firebase deploy

That. Is. It.

So simple, right??

Okay, so now for the exciting part! Go ahead and click on the url that's been provided for your project in the terminal (this can also be found back in the Firebase Console). Woohoo!

Now you can share your web app with the world!

🌏 🌍 🌎

Getting Started with Materialize's CSS Tools

Maasa Kono — Sun, 06 Dec 2020 06:52:39 +0000

I've just begun learning about Materialize through The Net Ninja (you'll find a link for his videos on this topic below). It's a responsive CSS framework for websites, and I'm finding it pretty fun to work with. I've only used Bootstrap up to this point, and I find it refreshing to try out something a little different (though there are similarities).

Here is a quick overview to get started with Materialize's CSS tools.

Setup

The Materialize library can be directly downloaded from the website. Alternatively, you can run the following in the command line:

npm install materialize-css@next

bower install materialize

Another option is to copy-paste the CDN into the main index.html file:

<html>
  <header>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  </header>
  <body>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

Now we have access to the Materialize tools! All we have to do is pass in certain (wonderfully intuitive) class names within the html tags that we are working with.

Formatting Text

For elements that you want to align vertically, add the class valign-wrapper:

<div class="valign-wrapper">
  <p>Vertically aligned text</p>
</div>

When aligning text, the following classes are used:

<p class="center-align">centered text</p>

<p class="left-align">left aligned text</p>

<p class="right-align">right aligned text</p>

If you have text that is long and you want to shorten it on the page, the truncate class is used:

<p class="truncate">{insert some extremely long passage here}</p>

This will shorten the text to one line, with ... at the end.

Hiding/Showing Content Based on Screen Size

One of the things you probably notice in a responsive website is how certain elements appear or disappear based on your screen size. This is achieved by adding the class name "hide" to the content. The following are some of its usages:

<p class="hide">This will be hidden on all screen sizes</p>

<p class="hide-on-small-only">This will be hidden only on small screen sizes></p>

<p class="hide-on-med-only">This will be hidden only on medium screen sizes></p>

<p class="hide-on-large-only">This will be hidden only on large screen sizes></p>

<p class="hide-on-med-and-down">This will be hidden on screen sizes from medium to smaller</p>

<p class="hide-on-med-and-up">This will be hidden on screen sizes from medium to bigger</p>

Colors

You will find a whole range of colors on Materialize's color palette. They list the basic colors with the option to lighten or darken them up to four levels.

<p class="green">regular green</p>

<p class="green darken-1">green darkened by 1 level</p>

<p class="green lighten-1">green lightened by 1 level</p>

The above code affects the color of the element's background only. If we were to change the color of text, the name of the color would be followed by "text" in the class:

<p class="green-text">green text</p>

Both the background color and text color can be changed in this way:

<p class="green yellow-text">green background with yellow text</p>

<p class="green darken-2 yellow-text text-lighten-3">green background darkened by 2 levels with yellow text lightened by 3 levels</p>

Shadow

Adding a shadow to an element helps make the image pop out more and give it depth. With Materialize, this is achieved with the class "z-depth" followed by the number 1, 2, 3, 4 or 5 to determine how the depth (1 being the closest and 5 being the farthest):

<div class="z-depth-1">closest shadow</div>

<div class="z-depth-5">farthest shadow</div>

These are just a few of the basics. You can check out the documentation to play around with more of Materialize's tools, which I'll be doing as well!

Helpful Link

The Net Ninja's Tutorial on Materialize

Materialize's documentation

Changing the Frontend based on Authentication State

Maasa Kono — Mon, 30 Nov 2020 02:46:16 +0000

In my last post, we went over the basic authentication setup through Firebase for the backend. Now, let's take that information to change what is displayed on the frontend, based on the authentication state of the user.

To keep this very simple, we'll just focus on how and when to display the buttons for Login, Sign Up and Logout, which we created previously.

The way we had left things off, all three buttons would always stay visible on the web page, but it doesn't make sense for a user who is not logged in to see a Logout button, just as it doesn't make much sense for a logged in user to still see the buttons for Login and Sign Up.

Let's start off by using simple HTML class names to help us out here. What we can do is add a class name of "logged-out" for the button elements that we would want displayed when a user is logged out, and a class name of "logged-in" for the elements we want displayed when a user is logged in. We'll also add an inline style attribute set to "display: none;" by default. The form in our index.html file should look something like this:

<form>
  <input type="email" id="email" />
  <label for="email">Email</label>
  <br>
  <input type="password" id="password" />
  <label for="password">Password</label>
  <br>
  // Below is where we'll add the class names and inline default styling
  <button class="logged-out" style="display: none;" id="signup-btn">Sign Up</button>
  <button class="logged-out" style="display: none;" id="login-btn">Login</button>
  <button class="logged-in" style="display: none;" id="logout-btn">Logout</button>
</form>

Now, let's navigate over to our main.js file where we are calling the onAuthStateChanged Firebase method to check the authentication state of a user. This function returns a callback of user, so let's add in a conditional statement to check whether or not a user exists.

We'll first query the button elements and save the ones with a class of "logged-out" to a const loggedOutBtns (there's only one right now, but this can become handy if we decide to add other buttons or links that we want for a logged out user), and the ones with a class of "logged-in" to a const loggedInBtns.

const loggedOutBtns = document.querySelectorAll('.logged-out');
const loggedInBtns = document.querySelectorAll('.logged-in');

Now, inside the onAuthStateChanged function, if there is a user, we'll iterate over the button elements, and for each one change the inline style display to block for those that we want to be visible, and none for the ones that we want to keep hidden (remember, these were set to none by default). If there is no user, then we'll just do the opposite.

auth.onAuthStateChanged(user => {
  if (user) {
    loggedInBtns.forEach(link => link.style.display = 'block');
    loggedOutBtns.forEach(link => link.style.display = 'none');

    // We can add more functions here to display the data that can be made available to a logged in user

  } else {
    loggedInBtns.forEach(link => link.style.display = 'none');
    loggedOutBtns.forEach(link => link.style.display = 'block');
  }
});

Securing the Data

I know this post is supposed to be about changes to the frontend, but it's important to note that our app at this point is not secure - meaning, someone could still manipulate the HTML through the browser inspector to login and access data that should be hidden from an unauthorized user. In order to make sure that only users have access to read and write data, we need to update our security rules through the Firebase Console.

We will need to add in a line under the "Rules" tab in the Firebase Console (whichever Firebase database tool you're using) and add in a line to allow users with a uid (unique I.D.) that is not equal to null, to be allowed to read and write data.

Once the changes have been made, we can now click on "Publish" and we're good to go! d( ^.^ )b

Helpful Links

🔥 The Net Ninja's Firebase Auth Tutorial 🔥
Going to link this here again. The Net Ninja is amazing at breaking down concepts into short videos at a time, with easy-to-follow explanations. I would highly recommend checking it out!

Firebase Authentication Documentation

Sign Up, Login & Logout Users with Firebase Authentication

Maasa Kono — Mon, 23 Nov 2020 00:09:39 +0000

Most apps these days require creation of a user to login and logout for access to the tools that they offer. Let's go over the basics of implementing these functionalities through Firebase Authentication with a user's email and password!

Setting Up

First, let's grab the Firebase SDK snippet from our project's settings in the Firebase Console, and paste it into the bottom of our main index.html file's <body> tag so that we can use the Firebase functions in our app. We will also add a script tag specifically for Firebase Authentication, and call firebase.auth() set it to a const variable auth for its service interface.

And, of course, let's remember to also include the script for the main index.js file.

All together, it should look something like this:

<html>
  <header></header>
  <body>
    <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
    <!-- Below is the additional script for Firebase Auth -->
    <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-auth.js"></script>

    <script>
      var firebaseConfig = {
        apiKey: "AIzaSyDP5OCeuEQD3IJXI252-fa3atPKhPaxPOl",
        authDomain: "your-project-name.firebaseapp.com",
        databaseURL: "https://your-project-name.firebaseio.com",
        projectId: "your-project-name"
      };
      firebase.initializeApp(firebaseConfig);

      const auth = firebase.auth();
    </script>

    <script src="scripts/index.js"></script>
  </body>
</html>

Now let's make a basic form with input fields for email and password, as well as buttons for Sign Up, Login and Logout that will go inside the <body> of our index.html file above the script tags:

<form>
  <input type="email" id="email" />
  <label for="email">Email</label>
  <br>
  <input type="password" id="password" />
  <label for="password">Password</label>
  <br>
  <button id="signup-btn">Sign Up</button>
  <button id="login-btn">Login</button>
  <button id="logout-btn">Logout</button>
</form>

Great! Now let's add an index.js file in the same directory and start building the functions.

Sign Up

Since we have a Sign Up button, we will start off by querying it by the button's ID (in this case it is "signup-btn") and store this in a variable signupBtn. Upon a click event on this DOM element, we'll next want to grab the password and email values, and save them into variables to pass into the Firebase function createUserWithEmailAndPassword. This is an asynchronous operation that returns a Promise, so let's tag on a .then(), which takes a callback function (for our purposes, it will be cred for "credentials"), and let us know in the browser console that the user has signed up.

  const signupBtn = document.querySelector('#signup-btn');
    signupBtn.addEventListener('click', e => {
    e.preventDefault();

    const email = document.querySelector('#email').value;
    const password = document.querySelector('#password').value;

    auth.createUserWithEmailAndPassword(email, password).then(cred => {
    console.log('User signed up!');
  });
});

Let's test it out now in the browser. After entering an email and password and clicking the Sign Up button, let's navigate over to our Firebase Console and refresh it to see the new user that has been added:

It works! You'll notice that Firebase also automatically generates a UID for the user as well.

Login

We'll now set up our login function and add an event listener on that Login button. It's going to look pretty similar to what we've done with the sign-up function above, but the main difference here is the Firebase function we'll be using to sign in, which is signInWithEmailAndPassword. This also returns a Promise, so we'll add a .then to log in the browser console a little message if we successfully sign in, and a .catch to show an error message if we don't.

  const loginBtn = document.querySelector('#login-btn');
  loginBtn.addEventListener('click', e => {
  e.preventDefault();

  const email = document.querySelector('#email').value;
  const password = document.querySelector('#password').value;

  auth.signInWithEmailAndPassword(email, password)
    .then(cred => {
      console.log('Logged in user!');
    })
    .catch(error => {
      console.log(error.message);
    })
});

Logout

This will be the quickest function to build, as all we need to call here is Firebase's signOut function. Again, we'll use the browser console to just make sure this is working.

const logoutBtn = document.querySelector('#logout-btn');
logoutBtn.addEventListener('click', e => {
  e.preventDefault();
  auth.signOut();
  console.log('User signed out!');
})

Keeping Track of Auth State

With the above three functions, a user can now sign up, login and logout of our app, but we also need to keep track of the sign-in state of the user in order to determine when to show certain data. To do this, we will use Firebase's onAuthStateChanged method, which returns either the signed in Firebase user, or null if not signed in. When calling this function, we'll first check to see if the user exists, and if so then put in the console that they are logged in. Let's reference the user by user.email so that we will see their actual email address; else, when the user is not signed in, we will simply log a message indicating that the user is logged out.

auth.onAuthStateChanged(user => {
  if (user) {
    console.log(user.email + " is logged in!");
  } else {
    console.log('User is logged out!');
  }
});

Once we've got these working, we can then put additional functionalities to read data only when the user is logged in, show a signup page when logged out, etc.

Helpful Link

🔥 The Net Ninja's Firebase Auth Tutorial 🔥
I cannot say enough how helpful I found these tutorial videos. The Net Ninja is amazing at breaking down concepts into short videos at a time, and I had such a great time following along because his explanations are easy to understand. I would highly recommend checking it out!

Firebase Authentication Documentation

Refactor to Reduce Repetitive Code

Maasa Kono — Mon, 16 Nov 2020 03:57:31 +0000

One of the principles of software development I've been taught is to keep your code DRY. DRY stands for "Don't Repeat Yourself", and the idea is to minimize repetitive lines of code.

The Clunky Code

In my previous post, we added a feature to our bug tracking app to filter our list of issues by priority level. Here is what I coded to get this initially working:

document.getElementById('all').addEventListener('click', e => {
  renderCurrentData();
})

document.getElementById('low').addEventListener('click', e => {
  document.getElementById('issuesList').innerHTML = "";
  readFilteredIssues(e);
})

document.getElementById('medium').addEventListener('click', e => {
  document.getElementById('issuesList').innerHTML = "";
  readFilteredIssues(e);
})

document.getElementById('high').addEventListener('click', e => {
  document.getElementById('issuesList').innerHTML = "";
  readFilteredIssues(e);
})

function readFilteredIssues(e) {    

 issuesRef.orderByChild('priority').equalTo(e.target.innerHTML).on("value", function(snapshot) {
    snapshot.forEach(snap => {
      const issue = snap.val();

      document.getElementById("issuesList").innerHTML +=
      //  HTML code for each issue element
    })
  }
)}

As you can see, this is extremely repetitive! Whenever you notice repeated lines of code, you'll know that it's time to do some refactoring, which is what we'll do here now.

The Cleaner Code

The first thing I notice here is that we are firing off the same function with the same click event. The only difference is the priority level (or filter option) that is being passed into the readFilteredIssues() function. We will want to query the div that holds all the buttons for filtering options, grab the value of the innerHTML, and pass that through to readFilteredIssues():

const filterButtons = document.querySelector('.filterButtons');

filterButtons.addEventListener('click', filterIssues);

function filterIssues(e) {
  document.getElementById('issuesList').innerHTML = "";
  const priorityLevel = e.target.innerHTML;
  readFilteredIssues(priorityLevel);
}

That alone has already reduced our lines of code significantly! Now we just need to make minor changes to the readFilteredIssues() function.

First, instead of passing e.targetinnerHTML to the equalTo Firebase method, since we're already getting the innerHTML from the previous filterIssues() function, we just need to pass in the same argument being passed into the function itself (which can be named anything). For our purposes, I will rename it to filterOption, just because it would make a little more sense.

The other change we will make is to add a conditional statement for the filter option of "All", which isn't a priority level. This is just an option to show all issues in our database. Before doing anything else in this function, we will check to see if the parameter passed in is equal to "All", and if it is then we will just render all data (which is a function we already have). Otherwise, we will get the filtered data to render.

The code will look like this:

function readFilteredIssues(filterOption) { 
  if (filterOption === "All") renderCurrentData();

 issuesRef.orderByChild('priority').equalTo(filterOption).on("value", function(snapshot) {
    snapshot.forEach(snap => {
      const issue = snap.val();

      document.getElementById("issuesList").innerHTML +=
      //  HTML code for each issue element
    })
  }
)}

And that's it! Our filtering function is working just as it was before, and we aren't repeating lines of code unnecessarily.

Sorting and Filtering Data with Firebase Realtime Database

Maasa Kono — Mon, 09 Nov 2020 03:12:19 +0000

We are continuing on with the bug tracking app we've been building! Today, we will go through sorting and filtering data with Firebase, but I will also share with you a simple workaround to sort the data.

A couple of notes:

I did make a few changes since my last post, where I replaced the assignedTo attribute of an issue with date, as this bug tracker is supposed to be for personal use, not with a whole team, and I'd also like to know when the date was first created in order to keep track of things better.

Additionally, I decided to discontinue the use of chance.guid() to generate a string of random numbers and letters to assign as the id number of an issue. I instead created a function using the date and time of an issue to formulate its id number:

function generateId() {
  const newDate = new Date();

  const date = newDate.toLocaleDateString("en-US", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  }).replace(/[^0-9]/g, "");

  const time = newDate.getTime().toString();

  return date + time;
}

Sorting Data with Firebase Realtime Database

For this bug tracking app, ideally we would probably want the issue tickets to be in chronological order, with oldest at the top and newest at the bottom.

Firebase has the following methods that can be used to determine what order results are rendered in (straight from the documentation):

In our case, we can use orderByChild() and pass in "date" so that the issues will render in date order:

function readIssues() {
  issuesRef.orderByChild("date").on("value", function(snapshot) {
    snapshot.forEach(snap => {
      const issue = snap.val();
  // More code but we don't need to see it here
}

Please keep in mind that we can only use one order-by method at a time, or else we will get an error.

Filtering Data

Firebase Realtime Database offers the following methods that can be constructed with an order-by method:

For our purposes, we will focus on the equalTo() method.

In our bug tracker, we assign a priority level for each new issue: "Low", "Medium" or "High". Let's say we want to filter the issues to render those of one priority level, such as if we want to only focus on the most pressing, high-priority tasks at hand.

To get started, we can create buttons to click for each priority level, so in our index.html file it would look something like this:

<div>
  <button id="all" class="btn btn-primary">All</button>
  <button id="low" class="btn btn-info">Low</button>
  <button id="medium" class="btn btn-warning">Medium</button>
  <button id="high" class="btn btn-danger">High</button>
</div>

Now going into the main.js file, we can create an event listener on the button that is being clicked to trigger a function that will utilize the equalTo() method and pass in the priority level. If we were going to filter for only high priority issues, the code could look something like this:

document.getElementById('high').addEventListener('click', e => {
  document.getElementById('issuesList').innerHTML = "";
  readFilteredIssues(e);
})

function readFilteredIssues(e) { 

 issuesRef.orderByChild('priority').equalTo(e.target.innerHTML).on("value", function(snapshot) {
  snapshot.forEach(snap => {
    const issue = snap.val();

  // The rest of the code is the construction of the HTML elements we want rendered on the DOM
)}

Helpful Links

How query data is ordered

Sorting and filtering data