DEV Community: NFairbairn

Making your first npm!

NFairbairn — Thu, 08 Aug 2019 21:03:31 +0000

Since I've been working with javascript we’ve been using these crazy magical packages called npm that do things for me. Importing packages and getting new functions that allow me to do even cooler things in my programs is awesome, but as a programmer, I couldn't just accept that it was magic. So I set out to find out more about node packages and how they’re made, and how I could maybe make my own.

Throughout my time here at Flatiron, we’ve learned JavaScript ES6, and JSX to use in our various web applications. We use npm all the time but we can use the same code knowledge we have, to create our very own packages that we can share to making new and exciting applications.

To get started, we need to set up our directory to contain all of the files we're going to use for our package.

cd desktop
mkdir my-test-package
cd my-test-package
npm init

It will ask you a bunch of questions but after the init menu it will prompt you to choose different settings to generate a package.json file.

In your package.json you’ll specify the name and description of your package, and you’ll also specify the file that the package will get it’s code from.

There will be a key in the file called main and this points to the file that you’ll want to execute when using your package. By default it’s set to index.js

Now that your package.json knows where to look, it’s time to go into your index.js (or whatever file you set as main in your package.json). Here is where you’ll write the methods for your package.

For example, what if I wanted to make a package that contained the solution to a whiteboarding problem, and I wanted to be able to use those methods in another project.

In my index.js file, I’ll go ahead and add my function:

module.export = (string) => { return string.split('').reverse().join('')}

This module.export method allows us to import our function as a module, so that the other files in our app can use they methods if they require the file path.

Now we’ve got our package complete, and we can create a test app to see if our package imports correctly.

Go back out to your main directory and create a new project.

npm init -y

The -y flag just lets you skip all of the setup questions. After the directory is made, we want to npm install our newly created package!

npm install my-test-package

Since our package isn’t published, we’ll have to use the absolute file path of our package to tell our computer where to retrieve our files.

npm install User/desktop/test-package/npm/my-test-package

Now we need to link our imported package to our new app, we can do this by typing

npm link my-test-package

inside the console of our working directory.

Now that we’re set up, open up the app.js file and we can import out package to use in our current app!

const wordReverse = require(‘my-test-package’)
const input = “reverse me!”
const test = wordReverse(input)

console.log(test)

Now run

node app.js

in your current terminal and your output should be:

=> ‘!em esrever’

Huge! Now we can import any local package I want to use in my projects!

From here you can host it on GitHub and you can share your methods with everyone! Or you can start an open source library! The possibilities are endless!

After you’ve successfully created your package, you can publish your package to npm! After that you can just run

npm install <your-package>

from any machine and you can import your very own library!

Pretty Neat!

If you wanna read up more on node here are the docs

Here is a great guide to publishing npms by the npm docs

You can create an npm account here to start publishing all your amazing packages!

VR AKA Virtual Reality AKA The Matrix

NFairbairn — Thu, 25 Jul 2019 22:04:06 +0000

The goal of VR is really to create an entirely “new reality” you can enter and interact with.

VR Technology aims to utilize a combination of immersion and interaction to create a seemingly “real” experience for the user.

VR Tech is moving closer and closer to more realistic and immersive experiences, and while we aren’t quite on the level of the Matrix just yet, we’re certainly on our way.

I wanted to look into VR and what all it takes to pull something like this off, and how hard would it be to get into VR.

Here's a list of common things you'll need in order to play, and some options if you're feeling fancy.

VR set ups:

Headsets

-Oculus Rift
-HTC Vive
-Sony PlayStation VR
-Google Cardboard
-Samsung Gear VR

Controllers

-Samsung Gear VR Controller
-Oculus Rift
-HTC Vive
-HTC Steam Controller

Where to Play:

-Steam - a digital library and platform for video games for PC platforms.
-Oculus VR
-PlayStation VR

Notable Games

-Beat Saber - Guitar Hero with Lightsabers
-EVE Valkyrie: Warzone - Space Based Dog Fighting Game
-Keep Talking and Nobody Explodes - A Multiplayer Bomb Defuser Game with time limits
-Lone Echo - A Space Survival Game that takes place on a base orbiting Saturn
-Fruit Ninja - Hone your Samurai skills against impending bombardment from fruits

Skills to become a VR developer
-Languages Like C/C++/C#
-3D Modeling and Rendering Experience

Popular Game Engines
-Unity - uses C#
-Unreal Engine - Uses C++ and a node-based language called Blueprints Visual Scripting

Useful 3D Modeling Software

-Blender - Open Source 3D modeling software
-Autodesk Maya - Computer Animation Software
-Autodesk 3Ds Max - 3D Modeling Software catered more for games and visualization

Interesting 3D Scanning Softwares

-Structure Sense - used for 3D Scanning and Mixed Reality on Ipad

Places to get 3D Models
-TurboSquid - Library of already 3D modeled objects
-Free3D - 3D model library

How can I take my web knowledge to VR???
-WebVR is an open standard with a JavaScript API that makes VR in your browser possible
-A-frame. A framework for building virtual reality experiences with HTML and an Entity-Component-System approach. It was developed by the Mozilla VR team and provides one of the most powerful ways to develop WebVR content.
-React 360 - a React framework built to render 3D experiences in Browser
-Three.js - a javascript library used for rendering 3d objects in browser

Resources
Here is a great tutorial on making a real-time VR React APP
This is a Udemy Course on intro to VR, always a good place to start
Here is the link to the Unreal Engine documentation

Events You Say? I'm Listening...

NFairbairn — Thu, 11 Jul 2019 19:48:52 +0000

HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events.

Its like a Call and Response, or an Action and Reaction.

Event listeners are just stated responses to a stated action.

You can attach event listeners to HTML elements to perform certain actions when necessary.

Common event listeners

DOM Content Loaded - waits to run the script until the page loads
On click - performs a function when the user clicks an element
Submit - performs a function when a user submits a form

Event listeners can be written like so:

Element.addEventListener ( event , function )
Element.addEventListener(event, () => {} )

Event Listeners can be really helpful with simple UI/UX tasks such as clicking on elements, scrolling over or submitting a form!

Event Listeners allow you to not only change the color of a button when you click it, they have the power to handle and execute functions behind the scenes.

For Example, when creating a JavaScript in browser game, how are you gonna get the user input to actually control anything?

You use event listeners! You can use keyup keydown keyleft and keyright to execute functions when a user hits the arrow keys!

Element.addEventListener("keyup", () => { jump() };

This alone opens up browser pages to a whole new list of possibilities of interactivity! All without refreshing the page!

Other more complex event listeners can be used for anything from finding the coordinates of your cursor on the page, seeing if a user is holding down a key, to finding out how many times you clicked the mouse in a certain area.

Event Listeners have great features too like:

You can add many events to the same element without overriding existing events

 let box = document.getElementById("test-box");

box.addEventListener("click", () => {
 box.textContent = "I Just Got Clicked!";
});

box.addEventListener("mouseover", () => {
 box.style.color = "red";
});

You can fire off a function when a user resizes their window

window.addEventListener("resize", () => {
  document.getElementById("box").textContent = "I'm getting claustrophobic already!";
});

You can pass parameters to functions called in event listeners for more specific reactions or if the action requires input

function sum(a, b) {
 return a + b;
}

let a = 2
let b = 3

box.addEventListener("submit", () => {
 sum(a,b)
});

Theres also an optional third argument when creating an event listener called useCapture. Its a boolean value referring to the hierarchy of events for elements within the same parent element.

Element.addEventListener(event, function, true);
Element.addEventListener(event, function, useCapture);

By default this is false, and uses bubbling to state that the inner most element's event is handled first and then the outer.

capturing is the opposite, the outer most element's event is handled first and then the inner

These Event Listeners open up so many doors to interactivity with a site. Without the Action and Reaction of Listeners, we’d all just be maneuvering static pages or refreshing the page every time you like a post!

JavaScript Superpowers!

Anyone Can Code

NFairbairn — Tue, 25 Jun 2019 20:07:23 +0000

Over the last year, I've been learning to code, and more so, learning about the community. What does it take to be a programmer? What qualities to programmers have? What do I need to focus on so that I can be a good coder?

With all these questions in mind, I've done a bit of research and it boils down to this…

There is no secret formula.

Programming is just like anything, it comes more naturally for some than others, but at the end of the day it's just like any skill, you have to just do it and learn how you learn best.

I boiled it down to really 3 major concepts that I think will help any new programmer start approaching the world of software in a much more positive light.

Problem Solving

Programming is all about problem solving.

Engineering is all about taking an idea, and make it in real life with the tools you have at your disposal.

When you approach a project or an idea, often times the first step in creating this is planning.

Breaking down an idea into smaller pieces to start to work to figure out how to actually create and implement those pieces.

Programmers are just like craftsmen. A carpenter has saws, hammers, rulers, sanders, or whatever tools they may use to create everything from a fine table or rocking chair, to massive ships to sail the seas.

Programmers use different languages, frameworks, algorithms, and whatever problem solving they can harness to create a piece of software capable of dazzling audiences.

Just as a craftsman table is sold for a high price for having the time, effort and attention they put into the detail of the table. From picking the very tree that will become the table, to making the cuts, and finishing off the exterior to make it picture perfect to be displayed in someone's home.

Programmers, (at least the good ones) give their code the same level of attention to detail as any other craftsman would. With extensive planning, drawing out designs, choosing languages and frameworks best suited for the project. And like a craftsman has an image in their head for what their piece will look like for the customer, a programmer has a finished product they have in mind, and develop a user experience that a customer would enjoy.

The attention to detail with a user/consumer in mind, coupled with the extreme attention to detail and a pursuit of excellence for the project all mark the traits of a craftsman.

Curiosity

Mastering a trade takes a certain determination and curiosity to pursue a trade to its fullest extent. A desire to learn not just what, but why and how.

Curiosity is what ignites the fire for discovery, innovation, and determination.

Combining the micro and macro

Micro being semantics, syntax, and actual building blocks that create the larger picture or program.

Macro being all of the more abstract concepts that relate to one another. They all add up to create the project itself, it contains features, interactivity, a uniform body or concept containing all of the smaller pieces that all work together to create a larger thing that performs tasks.

Think about it like a clock. Inside you have all the tiny gears turning and using one another, together, to achieve a larger task. Without the proper planning, and without each piece working simultaneously, the integrity of the whole is compromised.

The same could be said about programming. Programmers take all their time and effort into making sure each one of those cogs is in place and functioning properly just like a master clock-worker would focus on the gears to make sure the clock functioned properly and efficiently.

Creativity

Creativity is what inspires us to pursue or create something greater than what already exists. Creativity is what sets people apart in how the approach these skills. From artists, craftsmen, writers, painters, photographers, and many more.

Creativity is how we think outside the box, how we create new ideas, how we find new ways to approach problems, and how we find new ways to solve those problems.

Programmers are creative too, just like a painter chooses which colors to convey their message on a canvas, a programmer chooses their tools, strengths, and weaknesses to convey their message into software.

In the movie Ratatouille, a famous line states that “Anyone Can Cook”. The misconception that cooking is exclusively meant for people with “god given talent” or “prodigies” or the idea that any skill or trade is exclusive to a particular group is completely false.

In programming, a huge misconception exists that all programmers have to be geniuses, that just spew out algorithms and math all day, and are somehow super smart and stand out from the rest.

The fact is that programmers are people too. With strengths, and weaknesses, and we all use those strengths and weaknesses to help us learn how to do a thing. We just happened to pick programming.

I think we need to start believing the phrase “Anyone Can Code” just as much as we can believe that a rat can believe that “Anyone Can Cook”.

The misconceptions about programming are just that, misconceptions.

Great chefs standout for not only cooking, but taking food to its farthest stretches, and creating divine dishes that blow the human mind. Great painters don’t just throw paint on a canvas, they work hard to perfect their craft and they try and pursue a vision beyond just the canvas.

This being said, programmers can be the same way. Not every programmer is going to build the next big social media app or online streaming service, just as not every painter is working to paint the next Mona Lisa.

That doesn’t stop people from painting, cooking, or programming.

The misconception that a programmer has to be a genius is about as true as every painter has to be a visionary, or that every chef has to be a 5 star chef with insane never before seen dishes.

We’re all just people exploring trades, skills, and learning more about the tools we have at our disposal as humans.

Programming takes problem solving, curiosity, and creativity just like any other trade or skill. It takes practice and there’s definitely gonna be plenty of people “better” than you. But has a 5 star chef ever scared you into not cooking food for yourself? Or an exhibit at the museum suddenly make you never pick up the brush again?

You don't have to be a genius to program, you just have to start.

Time for a Change

NFairbairn — Tue, 11 Jun 2019 05:53:01 +0000

The realization I wanted something different to happen...

I think for me, it was when I felt stuck. When I realized that I didn’t like the job I had but didn't know what else I'd do. I was in and out of college for a few semesters, nothing was sticking. I loved to learn but I couldn’t stand to be in lecture all day.

Then What…?

If I wasn’t going to go to school, then I'd definitely have to work. In the age old feud between “Experience Required” on every job description and not being able to get a job to get experience, I got a job at a car dealership selling parts. It was really fun for the first few months! I got to learn an entire part number system, a computer system for repair orders and invoices, catalogs and rooms full of parts to discover.

The harsh reality...

After a year of that I was on the verge of a meltdown if I had to wake up at 7am again and stock parts all day. I had learned so much and was addicted to asking questions, but after I had reached the peak of my current job description, I was left craving more. Once I finally saved up enough to buy myself some time, I left my job to go serve full time at a restaurant.

Sweet Sweet Overtime

Restaurants are some of the most dynamic, versatile, and incredible work environments I’ve ever had the pleasure of being a part of. I absolutely loved going to work every day. I loved meeting the customers, learning about food, wine and cocktails, and being a part of a team that really relied on each other. My lovely coworkers quickly reminded me how hard they work outside of work as well. Most people I found were trying to put themselves through college, or saving up for their band, or are trying to fund their art! Whatever it is, I’ve learned so much from them and it made me think to myself, “What am I working for, not just now, but 5 years from now.?”.

Maybe lets try programming?

My dad and my uncle are both developers and, while I had been preexposed to programming and the fact that it existed, I had never really looked into it. I started out with the free CodeCademy courses in HTML and CSS. I said “Hey, maybe you can build a website, people need websites, and you could do that from your laptop!”. Once I finished those languages, I was prompted to begin the JavaScript course. I was quickly reminded that this was a completely different beast of a language, but pressed on to find out just what programming was all about.

He’s got an Idea

There was always a buzz about the tech industry being the fastest growing industry in the world, but I didn’t realize that it was a much more accessible trade than I thought. I didn’t have the time, money, or attention span to sit through 4-6 years of college to get a CS degree. But when I heard about bootcamps, I thought “Man this is my ticket. I’m going to learn as much as I can, as fast as possible, and I’m gonna do it in Seattle.”. I started looking into how I could get myself into the tech industry as quickly as possible, and what better way to do it than to pack up and move across the country to Seattle and enroll in a bootcamp. Six months later I packed up one suitcase, one carry on and a backpack, and moved out to Seattle to pursue my crazy idea to become a Software Engineer.

If only I could’ve recognized this sooner!

The constant throughout all these experiences is that I could never shake my desire to learn (sometimes despite all my best efforts to). The hardest part for me about making a career change, or going back to school, is to start. I like to say now that “The hardest part of any process is going from 0 to 1.”. I mean it as in “once you take that first step, you’ve got momentum behind you.”. It’s a snowball effect, once you put the right actions into place, and you continue to strive for those same goals, it all starts to come together. I’ve found that so much more gets done with passion, because it’s so much harder to convince myself out of passion than anything else.

The Gist

I think what I'm trying to say is that it can be scary to make a life move and not know what’s gonna happen on the other side. I just want anyone who reads this to know that it is very possible, and it is very worth it. If you can find your passion to learn, and reinforce the drive to pursue that knowledge, whatever it may be, anything is possible. It takes a lot of work, and it can seem scary, but do your research, learn as much as you can about what it is you want to do, and make the best of what you have. You got this! From the random stranger behind the keyboard to you, you got this!