DEV Community: Matthew Shin

Basic Javascript: Removing Elements from an Array

Matthew Shin — Tue, 10 Sep 2019 23:44:53 +0000

I am back again this week to cover another fundamental topic on Javascript. I will be going over various ways to remove elements from an array. Although the topic is simple enough, I often find myself mixing up certain methods and what each of them actually do. By writing this guide, hopefully I will be able to further solidify my knowledge on these methods and help anyone else out who might be in the same situation.

1. shift()

let breads = [wheat, ciabatta, sourdough, brioche]
breads.shift() // returns wheat
console.log(breads) // [ciabatta, sourdough, brioche]

Using the shift method removes the first element in an array. It returns the first element and completely modifies the original array.

2. pop()

let fruits = [apple, banana, kiwi, orange]
fruits.pop() // returns orange
console.log(fruits) // [apple, banana, kiwi]

Using the pop method removes the last element in an array. It returns the last element and completely modifies the original array.

3. splice()

let cars = [Toyota, Ford, Jeep, BMW]
cars.splice(1, 1) // returns [Ford]
console.log(cars) // [Toyota, Jeep, BMW]

The splice method can be used to remove or add elements in an array. The first argument is the index location at which elements are to be removed or added. The second argument is the number of elements to be removed from the array. In the example above, the arguments call for one element at index one to be removed. This method returns a new array with the removed element and modifies the original array.

Using this method, you can remove a range of elements from an array.

let heroes = [Superman, Batman, Spiderman, Ironman, Thor, Hulk, Flash]
heroes.splice(2, 4) // returns [Spiderman, Ironman, Thor, Hulk]
console.log(heroes) // [Superman, Batman, Flash]

4. slice()

let shoes = [Nike, Adidas, Reebok, Jordan, Vans]
shoes.slice(1, 4) // returns [Adidas, Reebok, Jordan]
console.log(shoes) // [Nike, Adidas, Reebok, Jordan, Vans]

The slice method can be used to remove elements from an array without modifying the original array. The first argument specifies the starting index location and the second argument specifies the ending index location(the end is not included). A new array object will be created using the elements within the range of those indexes.

I hope this was helpful to anyone just starting to learn Javascript or to those who needed a refresher on a simple, but important topic. Let me know if there are any other methods that I missed out on. Thanks for reading!

Basic Javascript: Removing Duplicates from an Array

Matthew Shin — Wed, 04 Sep 2019 02:45:02 +0000

As someone who is currently looking for a software developer job, I know just how important it is to have a solid foundation when it comes to coding. Although practicing for coding challenges that test these fundamentals might not be the most exciting, they are definitely practical by making your brain think in different ways. I thought that it would be helpful for me personally and for anyone reviewing for those technical interviews to go back to the basics and touch on some core topics. For this week, I wanted to come up with multiple ways to remove duplicates within an array.

1. filter()

function removeDuplicates(array) {
  return array.filter((a, b) => array.indexOf(a) === b)
};

2. forEach()

function removeDuplicates(array) {
  let x = {};
  array.forEach(function(i) {
    if(!x[i]) {
      x[i] = true
    }
  })
  return Object.keys(x)
};

Checks to see if each element in the array is unique.

3. Set

function removeDuplicates(array) {
  array.splice(0, array.length, ...(new Set(array)))
};

Creating a new Set stores unique elements from the array. The easiest way in my opinion

4. map()

function removeDuplicates(array) {
  let a = []
  array.map(x => 
    if(!a.includes(x) {
      a.push(x)
    })
  return a
};

Maps through the array and adds unique elements to a new array.

I hope some people found this helpful! What are some other solutions that you guys can think of?

A Basic Introduction to APIs

Matthew Shin — Wed, 15 May 2019 00:10:27 +0000

Ever since I started coding a few months ago, I have heard the three letters API being thrown around. For those who have experience with programming, it is a very familiar term, but what exactly is it? My first experience with an API actually came from my very first coding project. For this project, my partner and I were given the task of building a CLI application. The application utilized a NBA stats API and would return the stats of any player that a user would input in the terminal. At this point in time, I thought APIs were simply databases that you could pull information from. This is a common misconception for new users considering APIs are regularly used to fetch data. However, the API is not where the actual data is coming from.

What is an API?

API is an acronym that stands for Application Programming Interface. More specifically, the definition is "a set of functions and procedures allowing the creation of applications that access the features or data of an operating system, application, or other service". It isn't actually a database, but rather a part of the server that allows different applications to communicate with one another. APIs act as a middle man with the responsibility of receiving requests and returning responses. An easy way to think about this is to imagine the flow in a restaurant. You the customer(your application) orders a meal through the waiter(API), who then relays your order to the kitchen(the system). The kitchen makes the food(response) and the waiter brings it back to you. It is important to point out that these responses are not strictly limited to just data and that different APIs can be used for various purposes.

Flow of using an API

Common Types of APIs

One of the most commonly used types of APIs are web APIs. Web APIs allow different applications to communicate and connect with each other through the Internet. Many of these are based around the HTTP protocol, which means they can be accessed by almost all programming languages. Web APIs can further be categorized into public and private. Public APIs are generally available to anybody who wants to use them. Private APIs, however, restrict their access to the general public. These APIs are usually used by companies and require a key for access. Access can be bought depending on the API. Another type is library-based APIs. Like the name states, this type references a library of code or functions that can be used to create connections between different applications.

Why use an API?

One reason that APIs should be used is, because they makes applications more efficient. When considering just data, rather than having your application collect data on its own, using an API that has already collected the data you are looking for and retrieving it saves a lot of time and effort. APIs are also useful when you want to use preexisting functionalities within your application rather than creating them from scratch. Other than streamlining your applications, APIs provide another layer of security by acting as a gate when information is being passed.

Takeaways

Taking into account all the benefits of using APIs, I highly recommend using them whenever you get the chance to. However, not all APIs work in the same way. From personal experience, I can confidently say that some are better than others. Before using a specific API, I would definitely look over it to see if it will actually be beneficial to whatever you are planning to use it for. Thanks for reading!

Making a Video Game Using Phaser

Matthew Shin — Wed, 01 May 2019 22:08:58 +0000

Last week I was given the task of creating a single page application for a class project using a Javascript frontend with a Rails backend. After some brainstorming on what exactly I could build, I decided to attempt to create a video game. Ever since I could remember I was playing video games, whether they were simple flash games on websites or bigger ones on specific consoles. I have always wanted to learn about how these games were made, but had no knowledge on the subject for the longest time. Now that I had a couple months of coding experience under my belt, I thought that it was a good time to explore the surface of video game development.

What is Phaser?

While researching how to actually create a video game using Javascript, I found that there were various ways to do so. One of the more popular methods was to use the canvas that was provided in Javascript to act as the window for the game itself. I also learned that the whole process behind writing code to deal with the physics aspect of the game was tedious and quite difficult to do, especially in a week. This is when one of my fellow classmates suggested using something called Phaser to lighten the burden on my end during this whole process. Phaser is a free, open-source framework that uses Javascript and specifically caters to video game development. It is data-oriented and provides users with a full body physics system, so that they don't have to code that part themselves. It also comes with essential elements needed to create a functional game such as input control and a mechanism to animate images whether they are static or dynamic.

Conceptualization

To begin the project, I first had to come up with an idea of what the game should actually be about and how it should function. As some of you may know, there is a hidden game on Google Chrome when there is no connection to the Internet. It is an infinite scroller where users control a dinosaur and try to avoid obstacles while earning points the longer they stay alive. I decided to take this concept and make my own version of it called Dino Dash. As a single page application, I wanted users to be able to enter their name when they first visited the site, transition to the actual game after, and finally have their scores saved to a table once they were finished.

Frontend

Included in the frontend is an index.html file which is used to render the initial page that users see to input their names. It also has all the Javascript files for the entire game. I decided to organize the game into three key files title.js, game.js, and main.js.

title.js

Starting with title.js, like the name states, this file is responsible for the opening scene of the game. It renders a play button that once pressed moves on to the next scene in game.js.

game.js

Within game.js is where the essential code that makes the game actually function is located. The code within this file is split up into three components that Phaser gives us. These components are preload, create, and update, which run in that exact order when initialized. The preload part of this file is responsible for loading in all the assets that the game will utilize. These include anything from images, spritesheets, and sounds.

Spritesheet for character

The create component is where the assets that got loaded are actually rendered and displayed to be seen. It is also where the logic behind the game is programmed, such as what position the player should start at, what objects should be able to collide with one another, or what event is triggered upon certain objects colliding. Moving on, the update component includes the functionality of the game. An action caused by the player will trigger an event associated with that action and update. The most common example of this functionality would be if a player pressed down on the right arrow key, the action will trigger an event that updates the position of the character to the right. Including animations for this event will make the position updating even more seamless.

#Preload
this.load.spritesheet('doux', 'assets/sprites/doux.png', {frameWidth: 23.8, frameHeight: 17})
#Create
this.player = this.physics.add.sprite(100, 450, 'doux')
#Update
let cursors = this.input.keyboard.createCursorKeys()
    this.player.anims.play('run', true)
      if (cursors.right.isDown) {
        this.player.setVelocityX(200)
        this.player.flipX = false
      }

Preload, create, and update for character

main.js

The final file main.js is what brings everything together. It is where the entire game is initialized in an html canvas using the two files above. Both title.js and game.js are imported as two separate scenes then combined. This is also where I decided to write my fetch requests. One of them gets existing usernames and their scores from the database in the backend and sorts for the top ten scores to display on the table. The other fetch posts a new user with a score of 0 to the database when they initially enter their name on the home page. Within game.js is another fetch request that posts a user's new score to the database once they restart the game upon death.

[Left] Title Scene, [Right] Game Scene

Backend

Working on the backend was a lot simpler and more straightforward than working on the frontend. It was made using Rails with the sole purpose of creating users and saving them and their scores to the database. The backend was deployed using Heroku and the frontend fetches data using the provided url.

Final Thoughts

Overall, I had a great time finishing this project and learning more about game development. Although I used Phaser for a lot of the heavy lifting, I still felt that my knowledge of Javascript improved. I started to learn React earlier this week and I was pleasantly surprised to find that my experience using Phaser was somewhat applicable, especially in the importing and exporting of files. The preload, create, and update functions that Phaser give are also similar to how lifecycle methods work in React. Moving forward, I definitely want to try making different types of video games using Javascript.

Check out my code:
https://github.com/mshin1995/DinoDash

Play the game:
https://mshin1995.github.io/DinoDash/

How to play:
-Use arrow keys to move/jump
-Eat meat for extra points
-Avoid bombs
-Stay alive

Piracy on the Web

Matthew Shin — Mon, 08 Apr 2019 20:04:04 +0000

My Experience

Ever since I started using computers and the internet, I can clearly remember knowing about this thing called piracy. My initial experiences with it came as a child using LimeWire to download music for free without knowing that what I was doing was illegal and had dangerous consequences. Luckily, my journey as an online pirate came to an abrupt end after being grounded for loading the family computer full of viruses. Thinking back on that time, I knew that I was downloading files through the internet, but I had no idea what exactly was happening in the background. I do know now of certain key words related to piracy like "torrent" and "p2p", but my knowledge on the topic is still very minimal, which is why I wanted to explore it a bit more.

What is Online Piracy?

Online piracy is essentially the unauthorized copying, distributing, and selling of licensed and copyrighted materials from the Internet. Whether you are the one who is uploading this type of material or the one who is downloading it, anyone that participates in this action is at fault and liable for their actions. The three most common forms of online piracy are music, software, and movie. For the majority of people who partake in online piracy, their main goal is to obtain goods that they would usually pay money for for free. One piece of information to consider is if it is a digital file, it can be pirated.

How Does it Work?

So how exactly does pirating work? There are actually a couple different methods, but the most popular involve what is known as peer-to-peer(p2p) file sharing. A peer is anyone that is involved in the sharing of files between one another. LimeWire was an example of a traditional p2p program. Like the name states, these programs allow users to share their files with other users. In the case of LimeWire, users would upload and download full files through digital transmission, which were oftentimes full of viruses (I wish I've known about this sooner). Nowadays, these traditional programs have been deprecated for the use of torrents and BitTorrent.

p2p file sharing is much faster without the need to go through a server

What is a Torrent?

I guess the next step is to elaborate on what a torrent is. Unlike traditional programs where you would share full files, you can now create a torrent file which stores metadata or pieces of those files. These torrents can be considered as the keys to initiating the download of the actual content. By using a BitTorrent client, users are able to then unpack the pieces of data included in the torrent file, which are then reassembled to create the original file.

BitTorrent

The sharing of information between individuals also becomes much faster with the introduction of torrents and the BitTorrent protocol. When creating a torrent, a tracker is added along with the file. This tracker acts as a server that provides new peers with a list of peers that have already downloaded or are downloading individuals files included in the torrent file. The BitTorrent client then uses the tracker as a server to talk to those peers in the list and begins to download pieces of the torrent file through multiple people at once. Simply speaking, torrent files include separate parts that make up the whole content. Users are able to download the parts that they don't have through those that do, while simultaneously sharing the parts that they do have with other peers, making the process much faster and more efficient. Common terminology used for peers are seeders, those that are uploading data, and leechers, those that are downloading data. People using this method to pirate will most likely be doing both actions at the same time. The image below illustrates this whole process. Individual members of the Beatles(peers) each have parts of a song(parts of a torrent file) that are downloaded and then put together to produce the full song(torrent file). It is really interesting to read about all the negative connotations surrounding torrenting, since it is mainly used for piracy. However, not all torrents are illegal and I do see the benefits of using p2p file sharing for legal purposes.

Dangers

After doing research on this topic, I can see why online piracy might be appealing to some, because in all honesty, it isn't very hard to do. Although I wouldn't recommend it, because there are actual dangers and consequences associated with partaking in piracy. Not only can it get you into a lot of legal trouble, but the act of sharing data across the internet with unknown peers puts you at risk for getting personal information about you stolen. Despite these risks, if you still want to dabble in file sharing, I would recommend learning more about it and probably using a VPN to have some sort of security.

A First Attempt at Making Art with Code

Matthew Shin — Thu, 21 Mar 2019 04:19:15 +0000

To follow up on my first blog post, I wanted to learn about how to actually produce some sort of visual arts through a coding language. After doing some research on the subject, I discovered a program called Processing, which allows its users to do exactly that. This is by no means an in-depth tutorial, but rather my experience exploring this topic.

What is Processing?

Processing is an open-source software program created by MIT graduate students, Ben Fry and Casey Reas, initially designed around learning to code within the context of the visual arts. The program provides an Integrated Development Environment(IDE) that is able to run code and display the outcomes on a digital sketchbook. Although Processing can be considered on its own as a programming language, it uses the Java language for the most part. However, the program allows users to change the mode to different languages, such as Javascript or Python.

The Canvas

An important detail to consider before starting a project is getting to know your canvas. The canvas on the computer is essentially a coordinate system with the points being assigned to a pixel on the screen. However, unlike a traditional coordinate system, this one begins at (0, 0) from the top left corner. To set the size of this canvas, the function size(x, y) is used, easy enough right?

A regular coordinate system and a computer coordinate system

Basic Shapes

I found that a good starting point for making art with code was to get familiar with four basic shapes. These are a point, line, rectangle, and ellipse. Although that doesn't seem like a lot, I was pleasantly surprised at how much you can actually do by using just these four shapes. There are functions for each of these shapes that take in the coordinate points of the canvas as an argument to specify where they will appear. Those functions are:

point(x, y)
line(x1, y1, x2, y2)
rect(x, y, width, height)
ellipse(x, y, width, height)

Static vs. Interactive

There are two types of sketches you can make through coding. One is static and the other is interactive. Static sketches are made through a series of functions that create one individual, still image. There is no animation associated with this type and it does not require any interactivity with the viewer. Interactive sketches, on the other hand, are made through a series of frames and like the name states, allow viewers to interact with it. These are animated most of the time.

This is an example of a static sketch that I modeled after a painting by Piet Mondrian along with its code.

On the left is the code version, on the right is the real one

size(500, 500);
background(255);

fill(255, 0, 0);
strokeWeight(6);
rect(0, 0, 215, 215);

fill(255);
strokeWeight(6);
rect(215, 0, 285, 215);

fill(255);
strokeWeight(8);
rect(0, 215, 215, 110);

fill(255);
strokeWeight(8);
rect(215, 215, 285, 110);

fill(255, 255, 0);
strokeWeight(6);
rect(0, 325, 50, 175);

fill(255);
strokeWeight(6);
rect(50, 325, 165, 175);

fill(0, 0, 255);
strokeWeight(6);
rect(215, 325, 150, 150);

fill(255);
strokeWeight(6);
rect(215, 475, 150, 25);

fill(255);
strokeWeight(6);
rect(365, 325, 135, 175);

Setup and Draw

Coding a static sketch is pretty straight forward in that you can simply write lines of code that will run once and produce a still image. Interactive sketches require a little bit more organization. This is where void setup() and void draw() come into play. Like the name states, void setup is where you write the code that sets everything up, like the size of the canvas for example. Every piece of code within the setup block only runs once at the very beginning. As for all the code in the draw block, those get continuously looped resulting in animations.

These next two images are examples of interactive sketches that I made along with the code used to create them.

void setup() {
  size(750, 750);
  background(0);
}

void draw() {
  if (mousePressed) {
    background(0);
  } 
  stroke(random(0,255), random(0,255), random(0,255));
  line(mouseX, mouseY, 375, 375);
}

void mousePressed(){
  saveFrame();
}

The above images are obviously different, but they were made using the same code. By setting the x and y coordinates of the line to wherever my mouse cursor was, I was able to interact with the program and produce different results based on how I moved my mouse. I also added functions for a mouse click that would reset the canvas to a blank slate as well as capture the image right before it was erased.

Takeaways

Interacting with this program, I really enjoyed the fact that it didn't take all that much in order to produce a visible result on the screen. It was interesting to see how the code I had written was translated into a visual image. Although I had a great experience with this topic, seeing other people's works made me realize that I had only scratched the surface. Going forward, I hope that I will be able to learn more about coding as a whole, so that I can eventually apply that knowledge towards making more complex works.

Resources

https://processing.org/

Finding the Art in Code

Matthew Shin — Wed, 13 Mar 2019 07:34:41 +0000

To begin I wanted to give a brief introduction to who I am. My name is Matthew Shin and I reside in Seattle, Washington. I am a recent graduate from the University of Washington and am currently a software engineering student at Flatiron School.

For my first blog post, I wanted to write about my experiences with learning to code as someone who comes from an art background. When I graduated from college with a degree in drawing and painting, like many people in my position, I didn’t really know where to take my career. After some deep reflection with myself and family, I decided that it wasn’t necessarily the right time to pursue a career in the arts just yet. Although making that decision was definitely hard, I was optimistic about what was to come next.

This is where my journey into coding began. A couple of my friends suggested learning it, so I decided to try it out. And to be completely honest, I was very skeptical at first. Most people would never associate coding and painting together, including myself. Not only was it intimidating for me to start learning about something completely new, but my initial thoughts about not being able to apply and utilize the knowledge that I already had became a source for additional pressure. However, after starting my time at Flatiron and being exposed to coding everyday, I realized that coding and painting are actually similar in many ways.

One reason that I fell in love with art is that there are many ways to do a single thing. Take for example the task of drawing a face. One person could start with the eyes while another starts with the head’s shape, but the end product in this case is always a face; no matter how different it looks from one another. Some may argue that there is a “correct” way to draw a face, but in the end, the artist is the one in control of how they want to come up with a solution.

Coding is similar in this aspect of having various ways to go about solving a specific problem. Two individuals could be be given the task of creating an application that does the exact same thing, but their codes can (and probably will) look completely different.

array = [1, 2, 3]

def square(array)
  new_array = []
  array.each do |x|
    new array << (x ** 2)
  end
  new_array
end

def square(array)
  array.map do |x|
    x ** 2
  end 
end

The above Ruby code is just a very simple and straightforward way to illustrate this idea that an individual can complete the same task with different lines of code. In this example, there are two methods that take in an argument of an array, written differently, but both squaring each number in the array and returning them.

Realizing that I was still able to exercise my creativity while coding by having the freedom to solve problems in my own way definitely drew me into it the same way that creating art did. Coding being able to stimulate creativity became even more apparent as I started to work on labs/projects that required greater critical thinking and problem solving.

Another similarity between coding and painting/drawing that I found interesting was the whole process behind actually creating something. I was able to see this connection by working through my first big project at Flatiron, which was to make a command line database application using Ruby. (I won’t go into depth about this particular project, but feel free to visit https://github.com/njenga-kariuki/module-one-final-project-guidelines-seattle-web-career-021819 if interested in seeing what it was.)

A piece of advice from one of my art instructors in college that really stuck with me when considering starting a new project was to think about artworks as an accumulation of smaller shapes and forms. You don’t immediately paint a masterpiece, you slowly build up to it. These smaller things create the foundation and eventually come together to produce the final result. An easy way to visualize this is through the characters in “The Simpsons”.

Looking at the above image, individual shapes are first drawn and put together to create what we see as Bart Simpson.

The process behind creating a command line application was very similar to the steps I would have taken for a painting. Like starting a new painting on blank canvas, this project started with a text editor devoid of any lines of code. Beginning with the conceptualization of an idea to slowly building up the program with lines of code, I began to consider coding as an art form of its own. For me personally, I also think that there is something aesthetic about lines of code when it is presented in front of you.

If I had to literally compare making a program to making a painting, each individual line of code is like a brush stroke or line drawn. The individual files that consist of these lines of code are like the shapes and forms created by those very strokes or lines. All the files then come together to create the entire program much like the shapes and forms do in a painting. And when all is said and done, the feeling of gratification you get from finishing a coding project you spent hours on is exactly the same as when you finish a painting.