Forem: harleypadua

Quick Intro to Bootstrap

harleypadua — Mon, 01 Jun 2020 01:28:01 +0000

When it comes to styling the font end, there are a lot of options. Should you stick with CSS and HTML for full control and endless challenge or pick up a styling library for easy ebb and flow? If you're here, I'm guessing you picked the latter! Great choice, CSS can become extremely cumbersome. Let Bootstrap carry you to success! Installation is simple, just run

$ npm install bootstrap

Bootstrap is a very popular front-end design framework. Originally called Twitter Blueprint, it was designed by Mark Otto and Jacob Thornton over at Twitter. It is designed to be a responsive, mobile-first CSS framework. And although right now Bootstrap on its own depends on jQuery to power certain UI components, Bootstrap 5, which is the next version to be released, will be dropping jQuery entirely in favor of vanilla Javascript! A library that is not only kept up, but is also releasing new versions? A luxury.

Ignore for a second that I said Bootstrap still uses jQuery. Not only is Bootstrap free, but it also has some state-of-the-art features. According to wappalyzer, over 4,888,000 websites use it to design their interfaces, the most notable sites being companies such as:

NBA
Target
Bloomberg Business
and even Walmart!

And it is popular for a reason. The advantages include a responsive grid, a multitude of components, eloquent documentation, customization, and much more. As I stated before, diving into HTML and CSS can get real messy, real fast. Bootstrap has you covered.

<div class="container">
  <div class="row">
    <div class="col-sm">
      column 1
    </div>
    <div class="col-sm">
      column 2
    </div>
    <div class="col-sm">
      column 3
    </div>
  </div>
</div>

One thing I learned was that making a website look like a website is actually really quite tricky. Making columns and rows is a good place to start. And with Bootstraps flex grid capabilities, you can move your columns around to create the skeleton for your website easily. Paired with their readily available stylesheet, you can even let them handle the CSS.

If you are building your app with React (my favorite JavaScript library), you can install React-Bootstrap instead. React-bootstrap is probably the most popular library for adding Bootstrap components into React. There’s also reactstrap and React UI, but in my opinion it all boils down to what’s easiest to install and use! To set up React-Bootstrap run

$ npm install react-bootstrap bootstrap

Like most React elements, you'll need to import the components you wish to use like Button or Alert. They also provide CSS. To achieve the same column effect as before with HTML divs, instead you can use the Col component like so:

<Container>
  <Row>
    <Col>1 of 1</Col>
  </Row>
</Container>

Bootstrap can allow you to easily make something like my example quickly, without fighting with HTML for hours. Of course, this is just a small tease of what you can do with Bootstrap. Get started and see how creative you can be using this flexible library!

ReactJS vs React Native

harleypadua — Mon, 25 May 2020 06:06:09 +0000

When I first heard of React Native, I hardly new ReactJS. I remember thinking, "there's more than one?" The person who introduced it to me jumped right in, talking about how they were using it in their project and all of the features it came with. But it left me wondering how exactly it was different from what I'd learned in ReactJS. And now that I am actually working with it for my own project, the question came up again from one of my peers. So for anyone else wondering the difference between ReactJS and React Native, I am going to attempt to address the main distinctions.

ReactJS

Let's start with a brief touch up on ReactJS. React is a component-based JavaScript library for building user interfaces. Created by Facebook, it's meant to be an easy way to build single-page applications. ReactJS was open-sourced in May of 2013, making it 7 years old! Happy Birthday, React. How "easy" you are really is in the eye of the developer, though. Anyway, this is basically what a React component looks like:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Facebook</li>
        </ul>
      </div>
    );
  }
}
export default ShoppingList;

A standard shopping list component with some HTML elements we all know and love(?).

React Native

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. "Native" meaning web developers can write directly to the device using JavaScript. Normally, in order to write an iOS application, you'd have to learn Swift or Objective C. With Android, Kotlin or Java. I don't have time to be learning a whole new language right now, so React Native can be real beneficial.

So after that, it might seem like you would just naturally transition from ReactJS to React Native to shift from being a web browser developer to a mobile developer. But in actuality, you don't need to learn ReactJS at all before jumping into React-Native. It can help, but many developers skip it entirely (depending on what they plan on working on, like mobile vs browser).

Different Characteristics

Let's take a look at the main differences:

//ReactJS
<div style={{
  height: '25px',
  width: '100px',
  display: 'flex',
  flexDirection: 'column'
}}
>
  <h1>React</h1>
  <p>
    Hello!
  </p>
</div>

//React Native
import {View, Text} from 'react-native';

<View style={{height: 25, width: 100}}>
  <Text>React Native</Text>
  <Text>
    Hello!
  </Text>
</View>

These two examples show the same thing.

With react, you can pretty much use any HTML stuff in the components. Obviously the styling object is a little different, but you can also have a CSS file to style however you’re comfortable with. But basically all HTML will also be valid React code.

With React Native, you cannot use any HTML. Instead, we use a View. So while a div is a container that you can do whatever you want with in terms of styling, a View is that in React Native.

In HTML there are many ways to put text on the screen, header or p for example, that determines default styling or lets the browser know what kind of text it is.

React Native just has Text. And you need to import both View and Text because they are not available by default. This is because React Native is platform agnostic. It doesn't know if you're developing for iOS or Android (and it doesn't care). There’s no built in styling, so you would have to style Texts to differentiate them.

The styling is different as well. There’s no need for px and % for dimensions, for the value to be in a string, or anything like that, and by default React Native uses display flex and flexDirection column since it’s for a mobile screen. (ReactJS is by default flexDirection row for web browsers)

So to wrap it up, ReactJS is mainly used when you want to build a website that will run in a browser. React Native is used when you want to build something that runs on a mobile device. Technically you could use ReactJS for mobile development and vice-versa, but, like, don't do that to yourself.

Hope this cleared up any questions you had, and if you know something that I didn't add, make sure to tell me! I'm still learning as well, and thanks for reading!

Google Authentication with Expo and React-Native

harleypadua — Mon, 18 May 2020 07:11:32 +0000

I had to work with Expo's Google Authentication this week and I found a lot of outdated information while integrating it into my React Native app. So I thought I'd make an updated tutorial for anyone looking to use this Expo feature on future projects.

The Expo documentation is mostly good. I'll get into that in a bit, but first, the important stuff.

Sadly, Expo cannot handle the permissions with Google, so we'll need to do that ourselves. Head over to Google developers and create a new project. Give your project a name and click "create". Now we can get some credentials. From here, click Credentials on the side bar and then, at the top of the screen, Create Credentials. You'll want to select OAuth client ID, but when you do, you'll notice you won't be able to select your application type until you configure consent screen. Go ahead and click that. It'll bring you to the OAuth consent screen (duh) where you can choose user type. It feels like they try to scare you with these options, but I still chose External. Give the application a name, skip everything else (even that application logo. I know, it's so tempting), and hit Save.

Okay, now that we got that out of the way, back to credentials. You'll be able to select your application type now. For the purpose of this tutorial, I'll be using iOS, though the other types only require a few different steps. Google provides you with a name for the client ID which is fine to keep. For Bundle ID, make sure you put host.exp.exponent since we're using Expo. Once that's done you should get your client ID. Copy and paste it somewhere for safe keeping, we'll need this.

Time to code! And now I can touch on one small annoyance. You'll want to install expo-google-app-auth and import it like this:

import * as Google from 'expo-google-app-auth';

This is also in their docs, however, after we've got this authentication actually set up, you WILL get a warning telling you to

import * as Expo from 'expo';

instead. When I tried switching, the authentication did not work. So, I have a fix for this annoying yellow box. Simply add:

 console.ignoredYellowBox = ['Warning:'];

anywhere in your code (preferably the root of the app, like App.js or index.js) to hide the warning. Make sure to import react as well as View, StyleSheet, and Button from react-native.

To implement the Google Sign In, you can copy straight from the docs. Now is the time to add your iOS client ID (or whatever one you chose) to your code via .env or some way to keep it private. Your code should look something like this:

import 'react-native-gesture-handler';
import React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import * as Google from 'expo-google-app-auth'
import { IOS_CLIENT_ID, AND_CLIENT_ID } from 'react-native-dotenv';


export default function LoginScreen () {

  async function signInWithGoogleAsync() {
    try {
      const result = await Google.logInAsync({
        behavior: 'web',
        iosClientId: IOS_CLIENT_ID,
        //androidClientId: AND_CLIENT_ID,
        scopes: ['profile', 'email'],
      });

      if (result.type === 'success') {
        return result.accessToken;
      } else {
        return { cancelled: true };
      }
    } catch (e) {
      return { error: true };
    }
  }

Next annoyance: You may have noticed that this function is a promise, and therefore won't be able to be passed to a button just yet. Alter it for that purpose or, for a lazy fix, pass it to another function to then pass to a button.

    const signInWithGoogle = () => {
    signInWithGoogleAsync()
    }

    return (
      <View style={styles.container}>
        <Button onPress={() => signInWithGoogle()} title="Sign in with Google" />
      </View>
    )
}

And we're done! All that's left is to add a little style and your app has functioning Google Authentication. Hope this helps and thanks for reading!

Web Design Basics

harleypadua — Mon, 11 May 2020 04:29:39 +0000

On a recent social app I worked on with my peers, we were a bit chewed out for our rather bright colors and design. Described as "hard on the eyes" and "inconsistent", I have been reflecting. What makes a good website? Looking at the most popular social media apps like Facebook and Twitter, maybe it is the color blue? So let's get to the basics.

Font

Ah, typography. Since reading is a huge part of user interaction online, it is arguably the most important part of web design. Choosing a font might seem pretty straightforward, but lets touch on a few things. First, Sans Serif. Sans Serif fonts (left T in picture) are contemporary fonts without decorative finishes. They are easier to read online than the flashy stuff. If you think being creative with a loopy font will make you stick out, think again. Ultimately, you should be putting the user first. The average person spends about 40 hours a week online, but if your website is an eyesore, they'll be clicking away.

Which brings me to my next point: font size. Body fonts should be at least 16px, but of course some fonts may appear smaller even at the same size. This is a good place to start, however, leaving adjustments up to you; keep in mind that reading something on your phone should be as readable as the text in a well-printed book. Secondary font can be smaller, but I don't recommend going lower than 13px.

Color

This is my favorite one. You probably already know what colors not to pick, like bright, neon colors that are hard on the eyes. But did you know colors can actually invoke feelings? Color Psychology is immensely interesting. The way people react to color is closely interwoven with subconsciousness. Maybe you had an accident and now find you dislike the color red? Or how you might associate one shade of green with illness and another with nature. (Try this website for picking color straight from an image to avoid shooting in the dark)

Studies have shown that the younger a person is, the more likely they will prefer more saturated colors, while older people prefer less saturated, lighter colors. I find this particularly fascinating when considering major brands. Of course, there's no need to stick to one color. Complementary colors create balance and harmony. Using contrasting colors for text and background make it easier to read. Even white space can be effective for giving a website a sleek, modern look.

"F" Pattern

Most people read from left to right. However, when it comes to the internet, it's more likely that people are "scanning" rather than "reading". Because of this reading behavior, it's good practice to build your website in a visual hierarchy: conventionally, the "F" shape. Most of what people see is in the top left of the screen; the right side is rarely "seen". Work with their natural disposition and display information in order of importance: Left to right, and top to bottom.

And that's the basics! Remember these principles when you get started and you should have a pleasing site! If you like laughing at bad design like I do, check out Crappy Design on Reddit!

The impact on Big Tech by COVID-19

harleypadua — Sun, 03 May 2020 23:36:01 +0000

With the announcement that General Electric Co. is closing its New Orleans location, sending over 100 people into unemployment during the pandemic, I have been feeling a little apprehensive about the future of the tech industry as a whole. It is easy to feel uncertain about how the world is changing. The emergence of "essential" vs "non-essential" workers may be leaving many people unsure of where their skills will be needed any time soon. So to my fellow developers, I decided to check in on how Big Tech will be coming out of this crisis. (And it's looking good!)

Since this is meant to be uplifting, I wanted to start with, what is in my opinion, the most exiting turn of events. Technological advancements in the last 10 years have always been met with widespread backlash in one way or another, whether it be from people refusing to adapt to those changes, feel they are being left behind, upset over how their work life has been altered, or any combination of these things. However, because of social distancing and stay-at-home ordinances, many people are picking up tech they never used before, resulting in an overhaul of opinion. Ah, to see my parents finally admit that being on my phone all the time doesn't mean I'm being antisocial! Not really, but maybe some day real soon!

With millions of people on semi-enforced lock down, we've also seen a boom in video chatting services. Social interactions like business meetings, classroom learning or even chatting with in-laws have been completely transformed into virtual settings. According to Bernstein Research and Apptopia, the daily downloads of Zoom alone have increased 30x, shooting to 200 million daily users in March, up from 10 million just this last December. I can't help but think about all the issues this could solve once we've come out on the other end of this pandemic: people who don't have access to transportation now able to work at home, children too far from any good schools able to tune in long-distance style, or maybe even a program that allows elders in care facilities to interact with people online. Because these online video services have become "essential", I am excited to see how that translates into the future.

The changes in consumer behavior don't stop there. Amazon's grocery delivery service is one thing in particular that has become increasingly popular. As more customers try different Amazon services, they may create permanent shifts in buying habits, said Guru Hariharan, a former Amazon employee and the founder of CommerceIQ, a company whose automation software is used by major brands like Kellogg’s and Kimberly-Clark. I've mentioned before I worked at Target prior to pursuing programming, and I have personally seen disapproval for services such as this. Target has ownership of a company called Shipt, which has people in the store shopping from a virtual grocery list sent in via their app from Target shoppers. Both employees and shoppers alike had their fair share of negative opinions on the service, but now? People are hesitant to shop in person due to the risk and now such services are life-savors.

Another stay-at-home service that has seen an increase, unsurprisingly, is Netflix. A 9 percent bump, in fact. YouTube has seen some influx of viewership as well with people looking to be productive in quarantine. According to YouTube, they have experienced a 210% increase in average daily views of videos with “home office” in the title since March 15. Cooking videos have had a 100% increase, and work out and self improvement videos have seen a 515% increase. So many people using tech to pick up new skills is certainly cool to see.

Many people turn to Facebook for news in times of crisis and as a distraction while working from home. Mark Zuckerberg has reported voice calling on Facebook's WhatsApp and Facebook Messenger have doubled in use. And interestingly enough, he is looking for ways to connect people even more efficiently. Facebook, wanting to add to the virtual presence market, plans on releasing Messenger Rooms, which allows you to create a room in Facebook or Facebook Messenger and invite up to 50 people to join, even if they do not have a Facebook account.

With the shift to virtual and so many people using these services for the first time, I find that the need for programmers will most likely increase as a result. Developing new technology or maintaining what has become an essential part of business falls to us! So, despite how rocky many of your situations have become, hang in there, and look forward to a changed world!

[Detrimental] Mindset

harleypadua — Mon, 06 Apr 2020 04:29:08 +0000

When I was young, I was told that if I went to college, I'd get a good job. Like it was a vending machine: put in a degree and money will fall out. This wasn't really the case for me. Half of that reason being that the industry I studied died out in my hometown and I didn't have the financial ability to chase it. But mostly because I didn't know a college degree didn't guarantee success.

This left me feeling very stuck, and I had to do some serious self reflecting to figure out where exactly I wanted to go in life (huge existential crisis, I know). I was working in retail and I hated it. I knew I couldn't allow myself to just settle, there had to be something else I could pursue.

The tech field is guaranteed employment, right?

I've always known that I've wanted to work with technology, but that's such a broad term that I couldn't really pin down a place to even start looking. I toyed with the idea of going back to college to study computer science, but the idea of spending another 4+ years to get a completely different degree felt like a huge setback.

Then I heard about a coding boot camp called Operation Spark. I had zero experience with anything coding related, unless playing around with HTML on Myspace counts, so I didn't really know what I was getting into.

I don't want to say it was Hell, but...

In my educational career, I guess you could say learning came easy. I made good grades without having to pull all-nighters, hardly ever needed study sessions, and went into exams with utmost confidence.

Going through this program was like a slap in the face. Coding is hard. And it was both in the way I anticipated (learning, essentially, a new language) and in a way I didn't (doing the work won't be enough to get by). Granted, most people study and practice for years and I've only been in this program a few months, but that's not what I think about everyday.

Let's talk impostor syndrome

There are 5 types:

The perfectionist
The superwoman/man
The natural genius
The soloist
The expert

Which one are you? I fall into that natural genius category. I thought I could just go with the flow (as per my usual attitude) and find I'm pretty good at this along the way. That never happened. Not once did I feel like I had a solid understanding on any topic, regardless of what my instructors and peers would tell me. It's like being in a perpetual state of tip of the tongue. The information is there, but doesn't come easy.

Coding is a constant challenge that I have to push myself to face, and it's hard not to think, wow, I'm so stupid, how did I even get this far. Despite my success in the program, every time I stare at my screen in tearful frustration, completely lost because I don't know what to do, it's difficult not to feel like I should just give up entirely.

In the end

It doesn't even matter. The anxiety I feel, the uncertainty I can't shake? Everyone has been there. Part of my struggle has been to remind myself that I'm not alone. That I have only been learning this for a short while and it's going to take a lot more time for me to stop feeling so lost all the time.

Hopefully, in sharing my frustrations, you will benefit from it and recognize when impostor syndrome might be settling in. It's going to be an uphill battle, especially when starting out, but fight it all the same.

Need to Make a Simple List? Try Backbone!

harleypadua — Mon, 30 Mar 2020 00:33:50 +0000

Last week I talked about separation of concerns and why it's important when you start building apps. One way this is achieved is by using frameworks, like Backbone. Backbone is basically a lightweight framework that allows you to structure your JavaScript code in a Model View fashion where:

Model is an object that represents the data and associated methods.
View is responsible for rendering data to the user and has event handling.

To get started, any organized coder would set up their main file with the data that will make up the list. Usually I call this file app. For this example we're going to make a list of cakes!

//here is our cake data
var cakes = [
  {
    name: 'Strawberry Shortcake',
     /* some info here */
  },
  {
    name: 'Gentilly Cake',
     /* cake info here */
  },
  {
    name: 'Tiramisu',
     /* some more info here */
  },
];

So rendering a list refers to taking a collection of data and displaying that info on the DOM of an application. Inside this file, we'll need to do three things:

// 1. instantiate collection based on the Cakes model
var myBakery = new Backbone.Collection(cakes, { model: Cakes });
// 2. instantiate the collection view based on the collection myBakery
var cakeView = new CakeView({ collection: myBakery });
// 3. append the bakeryView to the body of the HTML page you definitely made
$('body').append(cakeView.$el);

You'll notice in step 1 I refer to a model called cakes but we haven't made that yet! That's the next step: set up a file that will be your model, which in this case will control the data for a single cake. That will look something like this:

var Cake = Backbone.Model.extend({
// default cake info
  defaults: {
    name: 'Strawberry Shortcake',
    image: 'strawberry-shortcake-cake-thumb.jpg',
    Ingredients: `1 1/2 pounds strawberries, stemmed and quartered,
                  5 tablespoons sugar,
                  2 cups all-purpose flour,
                  2 teaspoons baking powder,
                  1/4 teaspoon baking soda,
                  2 tablespoons sugar,
                  3/4 teaspoon salt,
                  1 1/2 cups heavy cream,
                  Whipped Cream`,
  }, // hungry? i am...

});

Finally, create the view file (I called this cakeView in step 2). The cakeView controls the rendering of the entire bakery collection. So you start by creating a property that will handle the rendering of data to the DOM. For each new item, a new single cakeView is being instantiated based on the cakeModel. Then call the render function when this gets initialized to render it to the page.

var CakeView = Backbone.View.extend({
  tagName: 'table',

  //renders each cake in our bakery collection on the cakeView
  render: function() {
    this.$el.html('');
    //looping through the cake data
    this.collection.each(function(cakeModel) {
      /* for each piece of data, passing the model containing the current cake's data
      to the cake view and appending to the table */
      this.$el.append(new CakeView({model: cakeModel}).$el);
    }, this);

    return this;
  },
  // on initialize, the view will render
  initialize: function() {
    this.render();
  },
});

And that makes a list showing some cakes and how to make ‘em using Backbone. Pretty simple. In essence, Backbone provides comfortable options to structure code better. It’s simply about that.(And has great docs, can't fight me there!)

For anyone who wants to say backbone is totally irrelevant here is a list of sites still using it!

Separate them concerns

harleypadua — Mon, 23 Mar 2020 02:17:00 +0000

What is separation of concerns? And why should you concern yourself with separation? Well, I am going to try to break this concept down a bit. Separation of concerns is the (really great) idea that each module in a computer program should deal with only one feature or behavior and should not contain code that deals with other things.

Realistically speaking, this makes total since. When working at your job, you are not expected to know every single thing about the company. Instead, you are solely responsible for your own role, the one you were hired for. In this way, it is easy to keep track of who is doing what to make the whole place run, right?

You can think of your code in the same way. If your entire project is stored in a single file, how easy would it be to find out what each function is doing? The answer is that it would not be easy at all. It's hard enough to catch spelling errors, but to figure out which part of this massive file is doing the thing that might not be working now? This could generate some (more than some) frustration.

The solution is to break down the application into smaller units of encapsulated functionality. You've probably done this already without realizing it. The most classic example of separation of concerns is having an HTML, CSS, and JavaScript file. These things all relate to each other, but often times having them all together in one file is clunky. It's so much easier divvying them up into their own files.

But that JavaScript file by itself can get pretty ridiculous in length once you start laying down the blueprints for your amazing app. That's where design patterns come in. A design pattern is just a way of separating these files, and you can choose Model View Controller, Model View Adapter, or Model-View-ViewModel, just to name a few. Which one is best to use? That depends on you!

Now, you might be thinking, "Why bother?" It's true that you can code away in a single file and get a fully functional app working. My point isn't really about functionality, though. This is more about organization, and what that means for the people you'll be working with, and the clients you'll be dealing with.

When working on an application with a team, wouldn't you be frustrated if they had everything just thrown together willy-nilly, and you had to figure out what's going on and what each part of the code is doing? Most likely. In fact, I think we can agree no one would appreciate this scenario.

A job in coding is complicated and stressful in its own right, there's no reason to make it harder for yourself. Let's think about this in a Model View Controller point of view for a second.

If a user clicks a button on your app and nothing happens, we can pretty easily narrow down the problem, yes? A button a user can see and interact with in MVC is called a controller. So we can pretty confidently assume the button created in the controller file is where the problem is. The ease in which you can then debug the error is clear. And even if that wasn't where the problem was, following the trail from the controller to the view or to the model is just as simple. Staring at an all encompassing file to figure out where the button was defined and what it's supposed to be interacting with to make a change is in comparison, much less practical.

So, do this for your own sake, and in doing so, the sake of everyone you will ever work with. It's a great practice for efficient coding, and will help cut your work in half when it comes to making changes and debugging.

Recursion Recursion Recursion

harleypadua — Mon, 16 Mar 2020 00:27:00 +0000

Coding has been a challenging journey, and in the beginning I really struggled with understanding this concept called Recursion. My name is Harley Padua, and I will attempt to unpack it a bit. But before I talk about what Recursion is, I recommend you read my first blog about Recursion here.

Fell for that? Then you've had your first taste of Recursion!

When I was introduced to this topic, I couldn't help but link it to one of my favorite movies: Inception. The film dealt with this idea of dream traversal, or more specifically, traversing a dream within a dream within a dream in order to retrieve information, with a kick to break out of the dream.

Recursion is a function that calls itself to accomplish some goal, with a base case to break the loop. See the similarities? And much like Inception, this concept can be very confusing the first time around. So let's take a look at an example:

function shootGun(sound, num) {};

Here we have a function called shootGun that takes two parameters: a string that represents a sound the gun makes and a number of times we want to shoot.

So first things first: a base case. I mentioned that a base case is what will end the recursive function. Without a thorough one, the function will run on forever and nobody wants that. So, let's think on it. We know a gun will only fire as many times as the trigger is pulled. So if there are no more pulls to the trigger, the gun will stop firing. Since num represents this concept, our code should look like this:

if (num <= 0) {
return "";
}

When we have no more shots, we want to return an empty string, since there is no sound to account for. Next is the recursive case. We know we need to have a return statement because functions default to undefined without one. Call the function with it's parameters. Since our base case checks for when num is less than or equal to 0 in order to make sure our function doesn't run on forever, we have to make sure we decrease num so that it will reach that qualification.

return shootGun(sound, num - 1);
}

Okay, great! But we are missing something. As it is now, this function isn't doing anything with the sound parameter. Each time the function is called, it just decreases the number, but we want it to print the sound the gun makes as many times as we fire. In order for that to happen, we have to save sound, and add it to each function call. Put it all together and it should look like this:

function shootGun(sound, num) {
   if (num <= 0) {
   return "";
  }
 return sound + ' ' + shootGun(sound, num - 1);
}

Now we have a rootin', tootin', gun shootin' recursive function! If we call the function with 'bang' for the sound and '3' for the number, the function will return 'bang bang bang'! And I'll impart some knowledge that helped me a lot when it came to building more complicated recursive functions: just assume your function is working. As long as your base case is thorough enough to reach a conclusion, play around with your code and see what recursion can do.

Hopefully this has helped shed a little light on what recursion is, and thank you for reading my very first blog!