Forem: Mike Conner

Intro to Material-UI

Mike Conner — Tue, 17 Nov 2020 00:04:40 +0000

Material-UI is a very popular framework that is used in React apps to help style web apps. Having just "completed" a project using Material-UI, I find myself thinking about how every website I visit would have accomplished it's layout had they also used Material-UI. I feel like it's as good a time as any to have a quick discussion on a few of the basics that my team and I used frequently. I'm going to assume you can navigate the installation and just talk about several of the components that I found myself using a lot.

Box

The Box component can be thought of as a general-purpose replacement for

. In my experience, it's main purpose was to give you something to target with CSS to help style your app.

<Box>
  This is a box!
</Box>

You can also designate your Box to be something other than a

using the component tag. For example, if you want to create a , its as simple as:

<Box component="span">
  This is a box that acts like a span!
</Box>

Container

The Container component was my go-to when I was creating the main element that kicked off a new component. I like Container because it automatically centers in a page and it gives some white space off to either side of it. Another benefit of Material-UI is that it encourages mobile-first design, meaning that it encourages designing for mobile platforms and scaling up from there, rather than the other way around. Containers are really helpful for this mindset since they create a shape that's almost perfect for displaying information on a mobile device. Anyways, containers are created pretty much the same way boxes are:

<Container>
  Here is a container!
</Container>

The only other thing that I really used with containers is the disableGutters prop. Containers have padding on the left and right sides by default, and disableGutters removes that padding:

<Container disableGutters>
  Here is a container with no padding!
</Container>

Grid

In my experience, the Grid is generally going to be your most used component. Grid is based on the CSS FlexBox module, utilizing a 12-column grid-layout consisting of items and containers. So what this means is that a grid can be declared to be a container or an item. A container will hold other nested grids, and an item will go inside of a container. Grid items inside of a container can be assigned a size based on these 12 columns. As an example, lets look at something like this:

<Grid container>
  <Grid item xs={6}>
    Left!
  </Grid>
  <Grid item xs={6}>
    Right!
  </Grid>
</Grid

So this is a grid that contains two columns, a left column (Left!) and a right column (Right!). Each column will be exactly the same size, which is actually converted to a percent, or 50% and 50% in this case. Had it been four columns with xs={3}, each would be 25% of the total size. Had left been xs={9} while right was xs={3}, left would take up 75% of the container, with right taking up 25%. Theres one more thing going on here that we haven't talked about, and that is xs. This is part of the syntax that makes Material-UI a mobile-first framework. Specifically, it refers to the screen breakpoint, and it stands for extra small screen. xs is the lowest-priority breakpoint, and is followed by sm, md, lg, and xl. You can give an item multiple breakpoints. For example, if we change our code above to:

<Grid container>
  <Grid item xs={6} md={9}>
    Left!
  </Grid>
  <Grid item xs={6} md={3}>
    Right!
  </Grid>
</Grid

then that will change the sizing of our grids based on the width of the screen the user is viewing from. In our code above, left and right will be the same size as long as the users screen is 960px wide. At that point, the left grid item will take up 75% of the screen and the right grid item will take up 25% of the screen. This isn't a gradient, with the left slowly becoming larger. If a users screen is 959px wide, the left and the right grids will be the same size. Of course, you also don't have to declare a size for your grid components. If you choose to go this route, each grid item will take up the same amount of space. Alternatively, you can declare the size of only one (or any number) of grid items, and those that are undeclared will resize accordingly. For example:

<Grid container>
  <Grid item>
    Left!
  </Grid>
  <Grid item xs={6}>
    Middle!
  </Grid>
  <Grid item>
    Right!
  </Grid>
</Grid

In this code, our middle grid item will take up half of the possible space, leaving the other two to each take up 25%.

Conclusion

Material-UI is a powerful tool that can be used to style your React apps exactly the way you want them. The three main components are Box, Container, and Grid, but there are dozens of other components, such as buttons, forms, even avatar and navbar components. Hope you found this post helpful!

R and Visual Studio Code

Mike Conner — Mon, 09 Nov 2020 06:58:02 +0000

As I've mentioned several times before, I'm learning how to code in a program called Operation Spark. What I haven't mentioned before is what I did before I started Operation Spark. It turns out.... I coded! Sort of. A little. Occasionally. See, in a past life, I used a program called R. RStudio, to be exact. The point is that R is itself a programming language, and its mainly used for statistical computing. Imagine my surprise when worlds collided and I learned that there was an extension that allowed you to execute R code in VS Code. Today, I'm going to walk through the process of installing R and performing some simple statistical analysis.

Getting Started

Set-up is relatively simple. To start, you need to install R. I'm on Windows, so I run VS Code through an Ubuntu shell. Installing R is as simple as opening your terminal and running the following commands:

sudo apt-get update
sudo apt-get install r-base

After that, lets navigate to our extension window and run a search for R. The first package to come up should be the one we're looking for, simply titled "R", with a description of "R language support." Install that and you should be good to go. From there, we can create a new file with the .r file type. Lets do that and move on!

Running code

So remember, R is a completely different language. I have no idea if it's similar to anything out there, but I do know that it does NOT look like JavaScript. So lets go ahead and create a function, then tell R to print the results of that function to the terminal:

add <- function(x, y) {
  x + y
}

print(add(6, 10))

To see the results of our code, we need to run it. There should be a button at the top of your window that looks like this:

Hit that button to see the result of our function in the terminal. Alternatively, you could hit control + enter from anywhere in the code to execute it immediately. So this is pretty cool, if you're into statistics and feel like learning an entirely new language! Unfortunately, at the time of writing, I haven't found a simple way to implement R code into an already-existing JavaScript file and database. But what I have found, because the internet is a beautiful place, is an API that lets you query existing R libraries with your own data!

OpenCPU API

This amazing API is called openCPU and you should definitely read more about it here. In the meantime, lets just make a few simple calls to one of the many routes available to us. Say you needed ten random numbers. There's an easy way to do that in JavaScript, right? What if you need those 10 numbers to follow a normal distribution, assuming a mean of 100 and a standard deviation of 10. That's.... a little more complicated. Luckily, theres a route that can do that for you.

const getArray = (n, mean, sd) => {
  const params = { n, mean, sd }
  return axios.post(`https://cloud.opencpu.org/ocpu/library/stats/R/rnorm/json`, params)
    .then(({data}) => data);
}

The above function will return the desired array! If you're thinking about implementing this, be aware that these aren't truly random numbers, and requests with the same parameters will always yield the same results. This has to do with how R handles seeds, but thats a topic for another day. The cool thing here is that we're offloading data from our app, be it a database or user input or anything of that nature, to be analyzed in a legitimate statistical analysis package!
Lets look at an example applied to some information we might have stored in a database. Say we have test information for two schools stored somewhere and we'd like to know if the difference between these scores is statistically significant. We could perform a t-test on the means of the two schools' test scores and analyze the output. First, we'd need to make a request to our database to get back the scores as two different arrays, say "schoolOne" and "schoolTwo". From there, we can simply query the api as follows:

const getPValue = (schoolOne, schoolTwo) => {
  const params = { x: schoolOne, y: schoolTwo }
  return axios.post(`https://cloud.opencpu.org/ocpu/library/stats/R/t.test/print`, params)
    .then(({data}) => data);
}

This is going to return a string of something you might not be that familiar with:

For our purposes, the only thing we're worried about is the p-value. In this example, the p-value is less than 0.05, indicating that there is a difference in means between the two schools. You can add more parameters to test for the directionality of this difference as well.

Conclusion

R is a powerful statistical analysis tool. Using specific API calls, you can perform analysis on data stored in a database on your server. There are literally hundreds (maybe even thousands) of other uses for this tool, as R is an open-source software and is continually being developed.

Passing props in React using Typescript

Mike Conner — Wed, 04 Nov 2020 06:24:13 +0000

I've recently been working on a project and attempting to teach myself a bit of TypeScript as I go. It's been.... interesting, to say the least. As someone who only knows JavaScript, the idea of strictly-coded types seemed incredibly clunky and foreign to me. Something that I thought I had a very good grasp on, like passing props down in React, suddenly became incredibly difficult! So in this post, I just want to talk a bit about how I've been approaching this process.

Grabbing directly from props

Lets assume you're trying to pass a series of props down to a lower component in react, you're not going to do any kind of destructuring, and you're not passing any objects. So calling the lower-level component might look something like this:

<EditBio
  bio={bio}
  open={open}
/>

and creating it might look something like this:

const EditBio: FC = (props): JSX.Element => {
  <>
    {props.bio}
    <br />
    {props.open}
  </>
};

To make TypeScript happy, we need to tell it what to expect on that props object. To accomplish this, we need to create an interface. The interface will contain props that we're going to be referencing and their types. For our example, we might create something like this:

interface BioProps {
  bio: string,
  open: boolean,
}

And after that, we'll need to edit our component creation to include the interface like so:

const EditBio: FC<BioProps> = (props): JSX.Element => {
  <>
    {props.bio}
    <br />
    {props.open}
  </>
};

But what if our prop is an object itself? Lets take a look at that!

Dealing with objects

So in this example, we're going to destructure something out of our props, and that destructured item will also be an object. So our initial component creation might look something like this:

const UserProfile: FC = ({ user }): JSX.Element => {
  <>
    {user.firstName}
    <br />
    {user.dob}
    <br />
    {user.bio}
  </>
};

So we'll need to do two things here. First, we'll need to create a new type that defines the types of each property of the user object. That might look something like this:

 type UserType = {
    dob: string,
    firstName: string,
    userBio: string,
  };

After that, we'll need to define an interface just like we did previously, but we're going to want to use this type we just created to denote that we're expecting an object that matches this type. This is relatively simple:

interface UserProps {
  user: UserType,
}

And finally, we just pop that shiny, new interface in our component creation function and TypeScript should be happy!

const UserProfile: FC<UserProps > = ({ user }): JSX.Element => {
  <>
    {user.firstName}
    <br />
    {user.dob}
    <br />
    {user.bio}
  </>
};

Passing the same prop down to multiple components

There's one more scenario I'd like to talk about, and that is what to do when you need to pass down that same user object to multiple components. You could just declare the type and interface in every component. Or you could declare it once and export that declaration everywhere you need it. So lets take a look at that! First, you're going to want to make a folder in your src folder called "customTypings". If this is a large project and you have many different types/interfaces to declare, you might want to make sub-folders in this folder for each module you want to export, so we'll make one as an example and name it after the module you'll be exporting (myTypes in this example). Finally, we'll make a file called index.d.ts, and this is where all of our custom types will live. So in that file, lets declare the UserType type and UserProps interface we used in our previous example and export them:

declare module 'myTypes' {
  type UserType = {
    dob: string,
    firstName: string,
    userBio: string,
  };

  interface UserProps {
    user: UserType,
  }
}

module.exports = {
  UserType,
  UserProps,
};

After this, we'll need to head into our tsconfig.json, into the compiler options, and make a new option called typeRoots (or edit the existing one). That should look something like this:

 "compilerOptions": {
    "typeRoots": [
      "src/customTypings",
      "node_modules/@types"
    ]
  },

Now everywhere you want to use either our type or our interface, you just have to export it at the beginning of your component like you would anything else:

import { UserProps } from 'myTypes';

const UserProfile: FC<UserProps > = ({ user }): JSX.Element => {
  <>
    {user.firstName}
    <br />
    {user.dob}
    <br />
    {user.bio}
  </>
};

I hope this helped clear up some of the difficulty in passing props in React using TypeScript!

UXPin - A quick look at a useful prototyping tool

Mike Conner — Sun, 25 Oct 2020 21:30:34 +0000

As I've mentioned in some of my older posts, I'm learning to be a full-stack JavaScript developer through a New Orleans-based program called Operation Spark. I'm finally in the final stretch of this marathon, and as such, we've begun the process of designing and building a web application from scratch. This past week has been filled with team brainstorming sessions and and discussions around the purpose and scope of our application. As the vast majority of my time in the program has been spent... Well, programming... This week has felt like a something of a new beginning, with new phrases and tools, new expectations, and new responsibilities. One step of the design process has been the creation of prototype of our vision for our application. I'd like to talk a little bit about what I think is a pretty cool tool to help with the prototyping stage of development, UXPin.

Getting Started

I'd like to preface this by saying that UXPin is a paid service, and I've been working on a 2-week free trial that they offer to new users. That being said, I do think it's a service that I will pay to continue using after my trial has expired. So to start, you can navigate the uxpin.com and sign up for an account. After that, can either work in your browser of choice or download a desktop app. I'll be using the desktop app, but there is virtually no difference between the two. After you've registered and chosen what platform you want to work on, we can "create another prototype" and begin! The first interesting feature is the ability to choose your canvas size, with several notable size already programmed in.

For example, if you know you're developing a mobile app, you might choose to develop your prototype on a canvas size matching that of an iPhone 8. So lets do just that. Lets take a look at the left side of the page, which contains your pages, layers, and your tools. So lets go ahead and use the box tool to create a box with text in it. I would like to take a moment here to say that I am not designing an attractive app, merely trying to showcase some of the tools available to designers. I know its ugly!

You can give the box fill colors, change the font of the text with TONS of different choices, give it an outline, change the text color... Lots of ways to customize a simple box. Next, I'm going to use a combination of shape tools to create a "profile pic" box and group them all together.

So not only have I grouped them together (highlight, then ctrl + g) so they all move as a unit, I've also given that group a name so I can keep track of them in my "layers" column in the bottom left. Also in layers, I can drag the order of each individual item to rearrange its depth on the page. This is all pretty basic, so I'd like to talk a little bit about why I REALLY like UXPin as a prototyping tool: the preview feature.

Preview

You may have noticed a few options in the right toolbar prefaced with "preview" - these refer to UXPins' preview feature. So since I've opted to develop on an iPhone 8 canvas, I'll select iPhone 8 from the device frame, choose a color, and then hit the preview button in the top right of the window to see something like:

Pretty cool, right? But wait, theres more! We can make this preview behave like you would want your actual app to behave. So lets go back to our editor and make some changes. I've added a "next" button to my app, and now I'm going to add the ability to "click" that button.

With our next button selected, click on the "Interactions" button in the top right corner of the app. From the new interaction tab, select Click as the trigger, go to page as the action, your desired page (page 2 which I created behind the scenes) as your page, and add it. Now if we go back to our preview, which we don't even have to refresh, and click on the button that I've added, we'll see:

Pretty cool, right? UXPin has several other cool features that I won't get into here (partly because I haven't used them enough myself), but that might still be useful, such as the ability to assign and toggle between states, and a the ability to use variables to control a prototypes behavior and appearance and pass data between pages. Cool!

Conclusion

UXPin is a useful tool to keep in mind when designing and prototyping an application. It has tools to help both web applications and mobile applications, and it's relatively easy and intuitive to use. At the same time, it has several powerful features that allow you to design with more nuance in mind.

Quick Guide to React Router 6.0 (Beta)

Mike Conner — Mon, 19 Oct 2020 02:36:33 +0000

React is one of the most commonly-used frameworks for designing webpages. However, it still has its flaws. One of these flaws is the lack of a built-in router. Enter React Router! As stated on their website, React Router is a collection of navigational components that allow you to compose declaratively within your application. For example, if you want to create a single-page application, but plan to incorporate multiple views, React Router will allow you to render those views without the need to refresh the entire page. Lets take a look at such an implementation using React Router version 6.0 (currently in beta).

Setup

The easiest way to start building a react app is to use the 'npx create-react-app' command from your terminal, so we'll assume you've done just that. From there, navigate into the root folder of your app and install react-router@next and react-router-dom@next. After that, navigate to the src/App.js file and add the following to the list of imports at the top of the page:

import { 
  BrowserRouter as 
    Router, 
    Routes, 
    Route, 
    Link, 
    Outlet, 
    useParams,
  } from 'react-router-dom';

As to what each of these does, I'll explain as we use them. From here, we're ready to start coding!

Getting Started

To begin, we'll render a React component inside of an element with the "Router" designation that we imported earlier. That should look something like this:

function App() {
  return (
    <Router>
      Hello!
    </Router>
  );
}

All of our routes will be declared in-between those two Router tags, which unsurprisingly handles the routing. Each individual route will be described using the "Route" tag, and stored in a component given the "Routes" tag. To that effect, "Routes" functions as the "Switch" component of older versions of React Router, providing relative routing and linking, automatic route ranking, and nested routes, while "Route" is responsible for actually rendering the UI of a given component. This will make a little more sense if we actually create a route and put it in its routes home, so lets go ahead and do that. Please bear in mind that everything we create from here on out will be either contained within the App function we created above or a modification of the return call of that same function:

const Home = () => {
  return (
    <div>
      <h1>
        Welcome Home!
      </h1>
      <p>This is where you live!</p>
    </div>
  )
};

return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );

So here you can see that we have created a component that we would like to display, Home. We have used the Route element with a path property to declare that when there is nothing else in the address bar following our default URL, we would like to render Home. And we have placed that Route in our list of Routes. Lets add another component so that we can see our routes in action:

const Whales = () => {
  return (
    <div>
      <h2>
        Whale Facts:
      </h2>
      <p>Whales are large mammals. Neat!</p>
    </div>
  )
};

return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/whales" element={<Whales />} />
      </Routes>
    </Router>
  );

After this, we have two possible routes. Assuming you haven't changed anything else, when you run "npm start" in the terminal, you should be directed to localhost:8000 and see something like this:

And if you navigate to the url localhost:8000/whales, you should see:

So this is pretty cool, but how are people supposed to know that they need to navigate to /whales to view your awesome whale info? The answer is they aren't, we'll use that Link variable that we imported earlier to send them there!

Link

Link allows you to navigate to a different view without having to refresh your page. We can use link to make a nav bar and switch between our different views using something similar to hyperlinks and buttons. Lets modify our code to accomplish this:

return (
    <Router>
      <nav>
        <Link
          to="/"
          style={{ padding: 10 }}
        >
          Home
        </Link>
        <Link
          to="whales"
          style={{padding: 10}}
        >
          Whales!
        </Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/whales" element={<Whales />} />
      </Routes>
    </Router>
  );

All we've done here is declare a nav element and add two links to it, the first of which (Home) will link to the path specified by '/' and the second of which (Whales!) will link to the path specified by "whales". Our home page now looks something like this:

Clicking the two links will change to the appropriate view. Neat! But theres still one more powerful tool I'd like to talk about and that is....

Nested Routes

A nested route occurs when one part of the webpage stays the same while some child component of the page changes. We use the Outlet parameter we imported to accomplish this. Lets do a little bit of set-up before we dive in. First we'll code out some information that we'd like to render:

const PorcupineFacts = [
  {
    num: 0,
    type: 'Old-world porcupines',
    desc: 'These are porcupines!'
  },
  {
    num: 1,
    type: 'New-world porcupines',
    desc: 'These are ALSO porcupines!'
  }
];

Next, we'll add a "parent component" that will allow you to select certain parts of our information to display:

const Porcupines = () => {
  return (
    <div>
      <h2>
        Porcupines
      </h2>
      <Outlet />
    </div>
  )
};

Notice that we have placed our Outlet element here. Any matching child components will be rendered in place of the outlet tag. So lets make our child component next, and we'll follow that with the final update to our render:

const PorcupineList = () => {
  return (
    <ul>
      {PorcupineFacts.map((porc) => (
        <li key={porc.num}>
          <Link to={`/porcupines/${porc.type}`}>
            {porc.type}
          </Link>
        </li>
      ))}
    </ul>
  )
}

const Facts = () => {
  const { porcs } = useParams();
  const info = PorcupineFacts.filter(porcupine => porcupine.type === porcs)[0];
  return (
    <div>
      <h3>{info.type}</h3>
      <p>{info.desc}</p>
    </div>
  );
}

return (
  <Router>
    <nav>
      <Link
        to="/"
        style={{ padding: 10 }}
      >
        Home
      </Link>
      <Link
        to="whales"
        style={{padding: 10}}
      >
        Whales!
      </Link>
      <Link
        to="porcupines"
        style={{padding: 10}}
      >
        Porcupines
      </Link>
    </nav>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/whales" element={<Whales />} />
      <Route path="porcupines" element={<Porcupines />} >
        <Route path="/" element={<PorcupineList />} />
        <Route path=":porcs" element={<Facts />} />
      </Route>
    </Routes>
  </Router>
);

Ok, so lets talk about what just happened. We created a child element that will render once for every item in our data list (notice the .map?). Every time it renders, it will itself make a new Link based on the type property of each data entry. Notice that that link is preceded by /porcupines/, which is what we've called the path in our list of routes. In our final new route (:porcs), we have made a render call to the last component we created, Facts. Facts uses useParams() to grab the parameters we pass it in the Link tag, in this case porc.type. We use that parameter to find the appropriate info in our data object, and render that info in. And in our routes, we've nested both Routes inside of the overarching porcupines Route. We've also added a convenient Porcupine link to our navbar! So lets review. Our home page now looks like:

Lets click on porcupine to see our Porcupines component rendered, as well as one rendering of our PorcupineList component for each object in our data.

Finally, lets click on Old-world porcupines to see our link in action and our facts component rendered, all without a single page refresh:

Conclusion

React Router is a great way to give you more control over page navigation and page refreshes. It addresses one of vanilla Reacts weaknesses, lack of a built-in router.

A brief introduction to Git

Mike Conner — Mon, 14 Sep 2020 03:29:24 +0000

As I'm sure you've been told repeatedly, programming is usually a team effort. Enter Git.

Version Control Systems and Distributed Version Control Systems

To allow programmers to work as a team, some sort of version control system, or VCS is typically used. A VCS tracks any changes made to a project and it allows users to recover any version of a project that they wish to view. Additionally, you can also typically see any changes that were made, who made them, when they were made, and hopefully why they were made. Git is not only a VCS, its a distributed version control system, or DVCS. This means that Git users have complete access to every branch, file, and iteration of any project they're working on, as well as a total history of all changes made to that project. In addition to this, DVCSs don't require constant connection to a central repository, meaning developers are free to work on projects wherever they have access to a computer! In addition to the regular benefits of a DVCS, Git has the added bonus of being extremely lightweight, allowing for easy creation and changes to branches. These traits combine to make Git incredibly ubiquitous, so much so that over 70% of developers use Git!

Git Basics

Git essentially creates whats known as a repository and tracks it. A repository is a collection of all files and folders associated with a project. From there, the file history is tracked as a linked-list through commits, with each development line known as a branch. Since Git is a DVCS, anybody with a copy of the repo is able to access not only the entire codebase, but also its history. There are three basic commands for updating your repository: add, commit, and push. Before performing an add, you can also use the status command to see any changes to your work. Checking the status on an unmodified repo should look something like this:

Note that all Git commands must be preceded by the phrase "git". After a change has been saved, it needs to be staged. The add command is used to stage changes:

You can add a single file like in my example, multiple files separated by a space, folders, the entire repo, or any combination in between! After staging a change using add, the commit command is used to actually save that snapshot to the project's history. Upon performing a commit, you will also typically be prompted to include a message along with your commit to describe your reason for performing the commit:

Finally, the push command is used to update a remote repository with any commits that you have made locally!

With those four commands you can begin editing a Git file!

When trouble rears its Head....

Sometimes, things get off track. One of the first problems I encountered while using Git was the ominous "detached HEAD" state. This happens when using the checkout command. Checkout can be used to view a branch or a specific commit. Its the latter use-case that causes the detached HEAD warning.

In Git, HEAD typically points to the revision that you're currently working on, and moves automatically with each new commit. However, this process is disrupted when checking out a commit hash. This happens because when you change to a commit, you are no longer pointing to a branch. This is the essence of a detached head: HEAD pointing directly to a commit instead of a branch. Because of this, changes that you make won't belong to any particular branch. This is a problem because you won't have an easy way to access any changes you make in this current environment.

From here, there are two scenarios: you've arrived here by choice and you want to keep any changes you make, or you've stumbled here by accident and want to get back to your main branch. If you're here by accident, its relatively simple to get back on track (assuming you just want to get back to the master). Simply checkout the master:

From there, you should be free to continue your work. If you want to keep working on this new line and make it a new branch, thats also pretty straightforward. simply create a branch and run checkout on that new branch:

I hope this article can help you out the next time you encounter a detached head!

Using Vue to build a... Wait for it... To do-List!

Mike Conner — Mon, 07 Sep 2020 00:50:45 +0000

As we work our way through the Operation Spark curriculum, we are taught several frameworks that can be used to implement the model-view-controller pattern (or something close to it), such as Backbone, Angular, and React. While researching MVC frameworks, I kept hearing about another one that we don't cover, Vue. I decided to do a little independent research on this framework, leading to this blog post, in which I'm going to walk through my attempt at building a to-do list using Vue.

What is Vue?

As mentioned earlier, Vue is just a framework that can be used to build out user interfaces. It specifically tries to handle an applications view, and it accomplishes this by binding to and controlling specific HTML elements. This binding means that when the bound object is change, the HTML element will also change. To get an idea of what this might look at, lets look at some HTML:

<div id="todoList">
  <h1>To Do List</h1>
</div>

as well as our Vue object:

const newTodoList = new Vue({
  el: '#todoList',
})

Notice that we create a new Vue, then assign it a key of el with a value of #todoList. This tells our view object that it wants to attach itself to the element in our HTML file that has an id of "todoList". Obviously, this binding means nothing without a little more info. We can assign our Vue a data property to pass some of that info along. Our HTML file and JS file now might look something like this:

<div id="todoList">
  <h1>{{title}}</h1>
</div>

const newTodoList = new Vue({
  el: '#todoList',
  data: {
    title: 'To-do List',
  },
})

We have declared our data object and created a "title" property. Notice that we have updated the h1 tag in our HTML file. Similarly to Angular, Vue uses double braces to access properties from our Vue object. In this case, we're accessing the title property from the data object. That's pretty cool, but it doesn't make this a working to do list! To accomplish that, lets add something to our data property that can hold everything we need to accomplish. While we're at it, lets go ahead and make an id property too, so that we can keep track of things on our list.

const newTodoList = new Vue({
  el: '#todoList',
  data: {
    title: 'To-do List',
    id: 0,
    taskList: [],
  },
})

So we've got something to hold our tasks in, but how can we add things to it? Lets go back to our html file and build out some functionality to allow that to happen. Maybe an input element and a button that adds the task to our array? Lets see how that might look:

<div id="todoList">
  <h1>{{title}}</h1>
  <ul>
    <input>
    <button>Add Task</button>
  </ul>
</div>

Here we've added a ul element, which will hold our list, an input form, and a button. But we're still not there yet, are we? We need to link that form and that button to some things on our Vue object. We also need to display our list somewhere, but we'll get to that later. For now, lets make some changes to our HTML and our code:

<div id="todoList">
  <h1>{{title}}</h1>
  <ul>
    <input v-model="newTask" placeholder='Task description'>
    <button v-on:click = "addTask">Add Task</button>
  </ul>
</div>

const newTodoList = new Vue({
  el: '#todoList',
  data: {
    title: 'To-do List',
    id: 0,
    taskList: [],
    newTask: '',
  },
  methods: {
    addTask() {
      const newTaskItem = {
        id: this.id,
        text: this.newTask,
      };
      this.taskList.push(newTaskItem);
      this.id++;
      this.newTask = '';
    }
  }
})

So here we have built out most of the functionality of our list. Notice that we have added a newTask property to our data object. We then created a two-way data binding to that object in our input form using the "v-model="newTask" directive. V-model is a bit of syntactical sugar that just knows how to update data concerning user events. In this case, as we type into our form, the newTask property will be reassigned to a string of whatever we're typing. We have also added a placeholder that will display when that string is empty. In our button element, we have used the v-on:click="addTask" directive to listen to the dom for a click on our button, and to run the addTask method when it hears that click. Back in our Vue object, we have declared a methods object, and began to define our methods inside of it. It should be no surprise that we have an addTask method. In short, this method creates an object using the newTask and id properties from our view, pushes that object into our taskList array, increments id, and empties the newTask string. So now we have a way to add tasks to our list of tasks, but we haven't started to display them yet. We can essentially think of each task as an individual element inside of our larger todoList element, so lets keep these two components separated using Vue.component. This will allow us to create a reusable vue instance for use inside of a root Vue instance that we created with new Vue, our newToDoList in this case. These next two instances of our HTML and JS will complete our to do list:

<div id="todoList">
  <h1>{{title}}</h1>
  <ul>
    <todo-item
      v-for="task in taskList"
      v-bind:task="task"
      ></todo-item>
    <input v-model="newTask" placeholder='Task description'>
    <button v-on:click = "addTask">Add Task</button>
  </ul>
</div>

Vue.component('todo-item', {
  props: ['task'],
  template: '<li>{{ task.text }}</li>'
})

Whoa, seems like there's a lot going on there! Lets walk through it. In our HTML, we've declared a todo-item element. We've also created a Vue.component and named it 'todo-item'. The fact that these two have the same name is what allows them to "talk" to each other. We are essentially plugging in as many instances of a vue component as we need to complete our to do list. We use the v-for command in our HTML file to render multiple components. It can almost be though of like a for..of loop, as we loop over our taskList array (again, notice that we have used the phrase 'taskList' in our HTML and JS files to make this link) and refer to each element as a "task". We will render a new component for each "task" in "taskList". Next, we use v-bind:task="task" to bind a value that we're passing through to our component. We combine this with the props:['task'] line to allow us to reference the properties of each task object in our component rendering. Note that the use of task in v-bind:task is completely arbitrary. We could have used v-bind:elephants="task" in our HTML and as long as we set props: ['elephants'] and referenced using elephants.text in our JS, we would have got the same results. Finally, in our component, we have a template property. this is interpreted as HTML and rendered to our DOM once for every element in our taskList. With this, we should have a working to do list!

Conclusion

Vue is a framework that can be used to control the view of an application. It has some similarities to React and some similarities to Angular, but is not quite the same as either.

Regular Expressions - Grouping and string methods

Mike Conner — Mon, 31 Aug 2020 00:06:35 +0000

In my last post, I talked about how to construct and use regular expressions. In this post, I'm going to go a little more in-depth and hopefully demonstrate how powerful regular expressions can be!

Grouping

The ability to use special operators is one of the reasons regular expression are so powerful. Combine that with the fact that regular expressions allow you to group several characters together and use operators on those entire groups and you have the ability to formulate much more specific search patterns than could be achieved with strings alone. Surrounding characters by parentheses, then following those parentheses with an operator applies that operator to the entire group. For example:

const waluigi = /wa+(ha+)+/;

waluigi.test('waha');  // returns true
waluigi.test('waaaahaaaaha');  // returns true
waluigi.test('waahahaahahaa');  // returns true

In the above regexp, We have several "+" operators, as well as a parentheses group. Notice that we have surrounded "ha+" in parentheses, then followed those parentheses by a "+" operator. This means that the string of "ha" can occur any number of times, with any number of "a"s trailing the "h". We can also combine parenthesis with the pipe operator "|", which functions similarly to the Javascript "or" operator. This operator denotes that the choice on either side of the operator will produce a match:

const animals = /(cat|dog|turtle)s/;
animals.test('I like cats');  // returns true
animals.test('I like dogs');  // returns true
animals.test('I like turtles');  // returns true
animals.test('I like squids');  // returns false

Note that the pipe operator will also work outside of parentheses.

Boundaries

The "^" symbol and the "$" symbol specifically refer to the start and the end of a string, respectively:

const carat = /^\d/;

carat.test('5 time 5 is 25');  // returns true
carat.test('Five time five is 25');  // returns false

const dollar = /\d$/;

dollar.test('five times five is 25')  // returns true
dollar.test('five times five is twenty-five')  // returns false

const caratDollar = /^\d.+\d$/;
caratDollar.test('5 times 5 is 25')  // returns true
caratDollar.test('5 times 5 is twenty-five')  // returns false
caratDollar.test('Five times 5 is 25')  // returns false
caratDollar.test('Five times 5 is twenty-five')  // returns false

In the above example, we see that we start our carat regexp with "^", followed by "\d". This means that the first character of our string must be a number. Similarly, in the dollar regexp, we use the "$" symbol to denote that our string must end with a number. We combine the two in caratDollar, with ".+" in the middle to test that our string starts and ends with any number, and can have anything else (except a newline character!) in between the two. We can use the "\b" marker similarly. It denotes a word boundary, meaning that the spot where "\b" is found can be the start or end of the string, or any non-alphanumeric character.

const spaceFirst = /\bcat/;
spaceFirst.test('I like cats');  // returns true
spaceFirst.test('.cats');  // returns true
spaceFirst.test('9cats');  // returns false
spaceFirst.test('concat');  // returns false


const spaceLast = /cat\b/;
spaceLast.test('I like cats');  // returns false
spaceLast.test('I have a cat');  // returns true
spaceLast.test('I have a cat.');  // returns true
spaceLast.test('concatenate');  // returns false

const allAlone = /\bcat\b/;
allAlone.test('I like cats');  // returns false
allAlone.test('I have a cat');  // returns true
allAlone.test('My cat is friendly');  // returns true
allAlone.test('I have a cat.');  // returns true
allAlone.test('concatenate');  // returns false

With string methods

Finally, regular expressions can be used with several string methods to return more than just true or false. First, lets talk about search. While you can't use a regexp with the .indexOf method, you can use it with .search. This will return the first index of a match, or a -1 if no match was found, just like .indexOf. For example:

const searchExp = /chicken/;
const searchString= `Don't count your chickens before they hatch`;

searchString.search(searchExp);  // returns 17

However, unlike .indexOf, there is no way to start from a specific index. Next, you have .match, which actually requires a regular expression. .match will return an array of all the matches in a string (or just one if the 'g' flag isn't used). This is useful when you remember that regular expressions can be more specific than strings. Lets see an example:

const matchExp = /\d+/g;
const matchString = 'I had a 10, 9, 4, 2, and ace.'
matchString.match(matchExp);  // returns ["10", "9", "4", "2"]

And finally, we have .replace! We can use it identically to the way it would be used with a string, just with a regexp (and all of the operators available to it), but there are some other interesting use cases for regular expressions and .replace. For one, we can use the g flag to indicate that we wish to replace EVERY occurance of the match in the string (There is a replaceAll that does the same thing, but at the time of this writing, it wasn't fully functional in all browsers, and .replace with regular expressions is).

const replaceAllExp = /(cat|dog|fish)/g;
const replaceAllString = 'cat dog fish'
replaceAllString.replace(replaceAllExp, 'turkey');  // returns 'turkey turkey turkey'

We can also refer to group matches in the replacement string. This is much easier to think about after you see it happen:

const namesExp = /(\w+), (\w+)/g
const names = 'Potter, Harry, Weasley, Ronald, Granger, Hermione';
names.replace(namesExp, "$2 $1");  // returns "Harry Potter, Ronald Weasley, Hermione Granger"

In our regular expression, we have two groups, denoted by the parentheses. In our call to the .replace method, notice that our string has $2 and $1 in it. This format refers to the groups of regular expressions. We are essentially placing anything found by the second expression in front of anything found by the first expression, with a space in between the two. A final use of regular expression with .replace is using it with a function to perform some action on your string. This is also possible when .replace is used with two strings, but again, a regular expression allows us to be more specific with our search pattern:

const funcExp = /\b(jfk|fdr)\b/g
const presidents = "I prefer jfk to fdr";
presidents.replace(funcExp, str => str.toUpperCase());  // returns "I prefer JFK to FDR"

Conclusion

When working with strings, regular expressions are a powerful tool to keep in mind. They can be used to beef up our string methods, or allow us to perform actions that would normally take multiple lines of code with a single expression.

Regular Expressions

Mike Conner — Mon, 24 Aug 2020 02:06:22 +0000

Working with strings is one of those things that seems really simple, until you encounter a problem that isn't. Regular expressions are another tool that you can use along with string methods that allow you to be much more specific in your queries! Lets learn how to use regular expressions!

Regular expressions

A regular expression, also known as a regex or regexp, is simply a pattern that you can use to match a distinct and often specific combination of characters. We can use these patterns to inspect and process strings. For example, the regular expression of /cat/ is equivalent to the exact sequence of "cat" in a string. I know what you're thinking. "How is that useful? Why not just use a string?" We'll get there! Lets talk a bit about how to build a regular expression first. A regular expression is an object that we create using either regular expression literals (//) or invoking the RegExp constructor function using the new keyword. Creating and assigning a regular expression might look something like this:

let rat;
rat = /rat/;
rat = new RegExp("rat");

Both of the above examples are equivalent ways to create the same regexp. So we've made some regular expressions. What can we do with them? Regular expressions have their own methods available to them, and they can also be used in certain string methods. For example, .test is a method that is available to regular expressions. It returns a boolean of whether the regexp was found in the string or not:

let rat = /rat/;
rat.test('I saw a rat!');  // returns true
/rat/.test('I saw a rat!');  // returns true

Both of the above patterns of calling .test are equivalent: that is, it can be called with a variable assigned to a regexp, or using the regexp directly. This is true for any use of regular expressions. Its important to note that regular expression matches must be EXACT, including any line breaks, capitalization, and white space. For example:

/rat/.test('I saw some rats!');  // returns true
/rat/.test('Meet at the bar at 9');  // returns false
/rat/.test('Rats and cats are not friends');  // returns false

But that still doesn't explain why you would use a regular expression. You could accomplish the same thing with existing string methods and regular strings, right? That's where special characters come in!

Special characters

Special characters are characters that modify or specify the character combination of a regexp. These are where regular expressions get their super powers from! One of the most useful special characters are brackets. Brackets allow you to denote that a character in your target string can be any number of characters! Lets see them in action:

const bt = /b[aeiou]t/;
bt.test('bat');  // returns true
bt.test('bet');  // returns true
bt.test('bit');  // returns true
bt.test('bot');  // returns true
bt.test('but');  // returns true
bt.test('bpt');  // returns false

Think of everything in the brackets corresponding to a single character in the string you're searching. On top of this useful ability, we can designate a specific range of characters using the "-" character!

const nums = /[0-5]/;
nums.test('0');  //  returns true
nums.test('3');  //  returns true
nums.test('7');  //  returns false

This method uses a characters Unicode number, so be careful when using this approach with alphabetical characters, as there is a small gap between lowercase and uppercase characters that contains several characters you might not be interested in. To designate all letters, you would do something like:

const letters = /[A-Za-z]/;
letters.test('M');  // returns true
letters.test('y');  // returns true
letters.test('5');  // returns false

Another special character to keep in mind is the '+' character. This indicates that a specific element may be repeated any number of times. Lets see it in action:

const bomb = /boo+m/;  
bomb.test('boom!');  // returns true
bomb.test('Boom!');  // returns false
bomb.test('boooooooooooom!');  // returns true

Now lets combine the above code with an option. Options follow your regular expression and allow you to further tweak your search pattern. We'll throw an "i" after our last regexp literal to denote that we're not worried about case.

const bomb = /boo+m/i;  
bomb.test('boom!');  // returns true
bomb.test('Boom!');  // returns true
bomb.test('boooooooooooom!');  // returns true
bomb.test('BOOOOOOOOOOOOM!');  // returns true

The "?" character is also a useful special character. This character denotes that the preceding character may or may not be included.

const color = /colou?r/; 
color.test('color');  // returns true
color.test('colour');  // returns true

The last special character I want to talk about is the "." character. This is the wildcard character. A "." can mean any other character, excluding newline.

const anything = /./; 
anything.test('a');  // returns true
anything.test('1');  // returns true
anything.test('[');  // returns true

Shortcuts

There are also several build-in shortcuts that can be used to similarly to the "[-]" combination. The "\d" shortcut can be used to denote any digit. Similarly, the "\D" shortcut refers to any character that is NOT a digit.

const digit = /\d/;  
digit.test('a');  // returns false
digit.test('1');  // returns true
digit.test('&');  // returns false

const notDigit = /\D/;  
notDigit.test('a');  // returns true
notDigit.test('1');  // returns false
notDigit.test('&');  // returns true

The "\w" character refers to any alphanumeric character. Its opposite, "\W", refers to any nonalphanumeric character.

const alphaNumber = /\w/;  
alphaNumber.test('a');  // returns true
alphaNumber.test('1');  // returns true
alphaNumber.test('&');  // returns false

const notAlphaNumber = /\W/; 
notAlphaNumber.test('a');  // returns false
notAlphaNumber.test('1');  // returns false
notAlphaNumber.test('&');  // returns true

Similarly, the "\s" character refers to any whitespace character, while the "\S" character refers to any nonwhitespace character.

const whitespace = /\s/;  
whitespace.test('a');  // returns false
whitespace.test('1');  // returns false
whitespace.test('&');  // returns false
whitespace.test(' ');  // returns true
whitespace.test('\n');  // returns true

const notWhitespace = /\S/; 
notWhitespace.test('a');  // returns true
notWhitespace.test('1');  // returns true
notWhitespace.test('&');  // returns true
notWhitespace.test(' ');  // returns false
notWhitespace.test('\n');  // returns false

Conclusion

By no means has this been a complete discussion of regular expressions. But I have hopefully conveyed how they can be more useful than using a string and string methods. You can use special characters and containers, such as brackets, to make your searches much more specific. Next time, I'll go over how to use these regular expressions with string methods to supercharge your code!

Using Inner Joins in SQL

Mike Conner — Sun, 19 Jul 2020 20:54:18 +0000

Sometimes, arrays and objects just aren't what you need to store data. If you find yourself in such a situation, it might be time to consider using a database management system, such as MySql. MySql is a database management system that is accessed using a standardized language, Structured Query Language. MySql is relational, meaning that it stores data in several tables, instead of one big table. This allows for a more flexible programming environment, where users are able to "make their own rules" about how the data in these tables relate to each other. In this post, I'm going to talk a little bit about using a feature of SQL known as "joins" to better visualize (and utilize!) these relationships. I'm also going to assume that you have a basic understanding of SQL, at least to the point that you can create tables. Lets get started!

Why?

As previously mentioned, MySql is relational, meaning that data is stored in different tables. If we want to link these tables together, we need to use something known as "foreign key columns". These are columns that tell one table exactly where to reference another table for the associated value they're looking for. Storing data this way means that values only have to be updated once. Lets assume we've got two tables, one that has some information about hospitals, and another that has some information about doctors. Lets look at the (extremely simplified) schema for these tables might look something like this, as well as the data contained in each:

In a practical application, it would be assumed that each table would have several more rows and columns in addition to the ones listed here. If we wanted to know what hospital each doctor worked at, we simply use the link we've created between doctors and hospitals using the id_hospital variable. To accomplish this, we can use an inner join!

Inner Joins

In MySql, the inner join clause can be used to conditionally join two tables together based on some criteria, known as a join predicate. To accomplish this, each row from the first table is sequentially compared to each row from the second table, and if the join predicate evaluates to true for both of them, then the requested columns from the two tables for both rows are used to form a new row and placed in the final set. Lets look at a join statement for our sample data:

select 
  d.name, 
  h.name 
from 
  doctors d 
inner join hospitals h 
  on d.id_hospital = h.id_hospital;

In the above code, we're asking for the name column from doctors and hospitals for all entries in both tables where the id_hospital column matches. A quick note on one of the useful shortcuts we've used above: while you normally would ask for the name column from the doctors table like "doctors.name", we have done the same thing using d.name. We are able to do this because after we asked for the doctors table in the from block, we told SQL that "d" can be used anywhere in our code to refer to the doctors table. Note that we did the same thing using "h" and the hospitals table in the inner join block. Our output should look something like this:

If the two columns you're using to join on happen to share the same name, you can shorten your code even further by using "where (columnname)" instead of the "on" line, although this only works when using the equality operator. You can also use all of the other mathematical operators, such as > and < to create your join predicate. You can even use inner join on three or more tables! Lets take a look!

Three or more tables

Lets assume we have another table of patients that has foreign keys denoting the doctors they're being treated by and the hospitals they're being treated at. Lets also assume that our doctors table no longer has a foreign key for hospital. We can still draw information from all three of these tables using just the foreign keys in the patients table and inner join commands!

select 
  p.patientname, 
  d.doctorname, 
  h.hospitalname 
from 
  patients p 
inner join doctors d 
  on p.id_doctor = d.id_doctor 
inner join hospitals h 
  on p.id_hospital = h.id_hospital;

Here we have followed almost the exact same syntax, only we have tacked on another inner join at the end. Notice how both inner joins are joined using one of the foreign id keys in the patients table, which allows us to tie together two tables that might not share a foreign key to a third table. We might expect the following results from the above code:

Conclusion

Relational databases can be used to store data in multiple tables. These tables can still reference each other using foreign keys. These foreign keys, combined with the inner join command, allow you to view tables using data from different tables!

Destructuring Arrays and Objects in ES6

Mike Conner — Sun, 12 Jul 2020 21:11:21 +0000

There are already so many ways to navigate, modify, create, and otherwise interact with arrays and objects. Its only natural that some of them might slip your mind from time to time. Destructuring is one such method that, while not exactly hard or complicated, might not be your first thought when you're thinking of ways to interact with an object or array. Today, I'm going to go over exactly what destructuring is and how to do it, and hopefully, you'll be able to implement destructuring to write cleaner, more concise code in the future!

What is destructuring?

In the simplest terms, destructuring is just a way to assign values to new variables. The beauty of destructuring is that this assignment very closely mimics the data structure that the values are being grabbed from. Confused? It'll all make sense once we look at some examples.

Arrays

We'll start by looking at some different ways to use destructuring on arrays.

let hobbitses = ['Frodo', 'Sam', 'Merry', 'Pippin'];

Here, we have created an array. Suppose we want to create new variables with values equal to each one of the elements of the array. In traditional JavaScript, that could look something like this:

let baggins = hobbitses[0], gamgee = hobbitses[1], 
    brandybuck = hobbitses[2], took = hobbitses[3];

Not exactly hard, but not very elegant. Lets see how that would look using destructuring assignment:

let [baggins, gamgee, brandybuck, took] = hobbitses;
console.log(baggins); // prints 'Frodo'
console.log(brandybuck); // prints 'Merry'

Much simpler, right? We can see that the the variable names to be assigned are now encased in array literals to the left of the equal sign, with the array containing the values on the right. I can already hear you asking "but what if I don't want to assign variables to every element of the array?" Don't worry, destructuring has you covered there too. Say you only want to assign values to the first two elements:

[baggins, gamgee] = hobbitses;
console.log(gamgee); // prints 'Sam'

Easy! Just declare two variables, and only two will be assigned. The rest of the array will be ignored. Also, notice that in the example above, we didn't ACTUALLY declare any variables, we just reassigned already-existing ones. Destructuring can handle that too! Thats all well and good, but what if you wanted to skip over some of the elements? We can do that too:

[baggins,, brandybuck] = hobbitses;
console.log(baggins); // prints 'Frodo'
console.log(brandybuck); // prints 'Merry'

[baggins,,, took] = hobbitses;
console.log(took); // prints 'Pippin'

[,,,took] = hobbitses;
console.log(took); // prints 'Pippin'

Notice that for each additional comma after the first comma, we skip an element of the array. If nothing precedes the first comma, as in the final example above, we start off skipping elements. Theres one more destructuring trick you can add to your array arsenal, declaring trailing items:

let [mordor1, mordor2, ...isengard] = hobbitses;
console.log(isengard); // prints '["Merry", "Pippin"]

In the above example, we've assigned the first two variables normally. However, The third variable is preceded by the spread operator. This means that everything else in the hobbitses array that hasn't yet been assigned will be put in an array with the name "isengard". Handy! Now lets take a look at how we can use destructuring with objects.

Objects

When we destructure objects, we're typically trying to bind variables to the values associated with properties of said object. Again, we'll start by creating an object, then we'll do some destructuring:

let wizards = {
  gryffindor: 'Potter',
  slytherin: 'Malfoy',
  hufflepuff: 'Diggory',
  ravenclaw: 'Chang'
};

let {gryffindor: harry} = wizards;
let {slytherin: draco} = wizards;
console.log(harry); // prints 'Potter'
console.log(draco); // prints 'Malfoy'

Here, we have created an object, then created two variables (harry and draco) and assigned values to those variables based on keys in that object (gryffindor and slytherin). You can also do this all in one declaration, like so:

let {hufflepuff: cedric, ravenclaw: cho} = wizards;
console.log(cedric); // prints 'Diggory'
console.log(cho); // prints 'Chang'

Theres another useful shortcut we can take when destructuring objects. Lets look:

let {gryffindor} = wizards;
console.log(gryffindor); // prints 'Potter'

let {slytherin, hufflepuff} = wizards;
console.log(slytherin); // prints 'Malfoy'
console.log(hufflepuff); // prints 'Diggory'

In the above example, I have both referenced the key of an object AND created a variable with the same name as that key, then assigned the value associated with that key to the new variable. In short, if you want to keep the key as the name of the variable, all you have to do is type the key. And you can also do this for multiple variables in one assignment. Theres one more thing to keep in mind when reassigning variables this way: if you arent declaring the variable (using var, let, or const), then you must wrap the entire expression in parentheses. Easy enough:

({gryffindor, slytherin}) = wizards;
console.log(gryffindor); // prints 'Potter'
console.log(slytherin); // prints 'Malfoy'

Conclusion

Although destructuring isn't a game-changing weapon, it can still be a useful tool for you to employ. Use destructuring to write cleaner, more concise code, and to deftly navigate assignment within arrays and objects!

Creating Child Classes Using Super and Extends

Mike Conner — Sun, 05 Jul 2020 19:11:04 +0000

In my last post, I talked about instantiation patterns in JavaScript. This time, I'm going to go a little more in-depth on the ES6 pseudoclassical pattern, especially the process of creating child classes.

Child class?

Right, what exactly does that mean? Well, in JavaScript, a child class is a class that extends another class. Extends? Basically, a child class will have all the methods of its parent class available to it, as well as any methods that you specifically give the child class! This can be useful if you're going to create a bunch of similar objects that may have one or two slight differences. Lets take a look at an example. Just in case you forgot, we'll start with pseudoclassical instantiation using ES6 syntax.

// ES6 pseudoclassical instantiation
class Country {
  constructor(continent, capital) {
    this.continent = continent;
    this.capital = capital;
  }

  whereAt() {
    return `is located in ${this.continent}`;
  }

  capitalIs() {
    return `has a capital of ${this.capital}`;
  }
};

So lets assume that we're trying to make a bunch of objects that correspond to different countries around the world. They're all going to share SOME basic properties, right? In the code above, we're laying out the skeleton for each of our country objects. That is, every child of this Country class will at least have these methods available to them. Now lets look at how we make a child class:

// ES6 child class
class Italy extends Country {
  constructor(country, continent, capital) {
    super(continent, capital);
    this.country = country;
  }

  colosseum() {
    return 'Lions and tigers and bears, oh my!'
  }

  summary() {
    return `The country of ${this.country} ${super.whereAt()} and ${super.capitalIs()}`;
  }
};

const italy = new Italy('Italy', 'Europe', 'Rome');
italy.capital; // returns 'Rome'
italy.colosseum(); // returns 'Lions and tigers and bears, oh my!'
italy.summary(); // returns 'The country of Italy is located in Europe and has a capital of Rome'

So here we've made a child class, Italy, that has all the methods of its parent class, Country, available to it, as well as several new methods. But there's some stuff in there that we've never seen before, right? What's that "extends" keyword mean? What about that "super" method? Glad you asked!

Extends

The first thing you probably noticed is the word "extends". This just tells us that the class we're creating, Italy, is a child class of the class that follows it, Country. Again, this just means that all of the methods that were created in the Country class are available to the Italy class as well, without having to create or declare them again, which is a good example of making our code reusable.

Before we talk about super, lets go over the constructor method a bit. This a a special method that's used when objects are created and initialized in ES6 syntax. It basically allows you to assign properties to your object before you begin creating methods. Even if you don't create one, it will be called automatically for you, but it will be blank. In short, constructor is used to attach properties to your object.

Super

Back to our Italy example, you may notice that we invoke a second function in our constructor method, super(). When used this way, super calls the constructor method of the parent class, basically creating identical properties using the parameters of our child class. If you're reading closely you may notice that we use super a second, and even a third time in our code. In the summary method, we use super to call the methods of the parent object in the child object. Although this isn't extremely useful in our code, that doesn't mean that there aren't any uses for it!

You can also overwrite properties and methods passed in by the super method. Lets take a look at some more code:

// overwriting properties and methods
class Egypt extends Country {
  constructor(country, continent, capital) {
    super(continent, capital);
    this.country = country;
    this.continent = 'Its in Africa';
  }

  whereAt() {
    return this.continent;
  }

  summary() {
    return `The country of ${this.country} ${super.capitalIs()} and ${this.whereAt()}`;
  }
};

const egypt = new Egypt('Egypt', 'Africa', 'Cairo');
egypt.continent; // returns 'Its in Africa';
egypt.summary(); // returns "The country of Egypt has a capital of Cairo and Its in Africa"

In the above code, you can see that we've overwritten the continent property of the parent class, as well as the whereAt method. Our Egypt object also has a slightly different summary method than our Italy object.

One final thing that might be worth remembering: if no parameters are passed to the constructor call or super call, it will generate the keys, but they will have values of undefined. As usual, I have an example for you:

// empty constructor functions
class Sweden extends Country {
  constructor() {
    super();
  }
};

const sweden = new Sweden('Europe', 'Stockholm');
console.log(sweden); // returns Sweden {continent: undefined, capital: undefined}

In conclusion, extends and super allow you to easily create child classes from a parent class. Extends is used to denote the parent class that the child class will inherit its methods from, and super is used to reference the parent classes constructor method.