Quick Start – Setting up Webpack for a static app

Happy Sunday folks!

When I was in elementary school, we had a worksheet game in one of my classes that secretly taught us algebra.  Today I am attempting to recreate it in a digital, playable format using React, Webpack, ES6, and yarn (which I used for the first time today rather than using npm) .

I personally found it a little tricky to set up Webpack 1.0 (I plan on replacing this with 2.0 soon, I just am more familiar with 1.0 at the moment).  All I wanted was to compile my files and have it hot reload for my static application, but it was surprisingly hard to find a simple example of this.

Here’s what I did.

Screen Shot 2017-05-14 at 4.57.29 PM

A screenshot of my project file structure.

My goal

All I wanted to do is compile everything in my root ./game.js to ./dist/game.js, and I wanted it so that anytime I made a change and saved my file it would reload on localhost.

Solution

Here is what my package.json and webpack.config.js looked like, so that whenever I ran the command yarn start, it would compile my files and serve my index.html file on my local server.

// package.json

{
 "name": "algebra-game",
 "version": "1.0.0",
 "main": "dist/game.js",
 "author": "Nidhi Reddy",
 "license": "MIT",
 "scripts": {
    "watch": "webpack --progress --colors --watch --config ./webpack.config.js",
    "start": "webpack-dev-server --progress --inline --hot",
    "build": "webpack --config ./webpack.config.js",
    "deploy": "gh-pages -d dist"
 },
 "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "gh-pages": "^1.0.0",
    "path": "^0.12.7",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
 },
 "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
 }
}

// webpack.config.js

var path = require('path');
var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");

const config = {
  context: __dirname, //current folder as the reference to the other paths
  entry: './game.js',
  output: {
     path: path.resolve(__dirname, 'dist'), //where the compiled JavaScript file should be saved
     filename: './game.js' //name of the compiled JavaScript file
  },
  module: {
  loaders: [
   {
     test: /\.js?$/, //translate and compile ES6 with JSX into ES5
     exclude: /node_modules/,
     loader: 'babel-loader',
     query: { //query configuration passed to the loader
         presets: ['react', 'es2015']
     }
    }
   ]
 },
  devServer: {
     hot: true,
     contentBase: './dist'
 }
};

module.exports = config;

Depending on your file structure, you might have to update the contentBase, entry, and output fields accordingly.

Serve and watch these files!

If you’re using yarn, run the command yarn start, and if you’re using good ol’ npm, you can similarly run the comamnd npm start.   You should see your application running on localhost:8080.

Hope this helps!  If you have any questions / grievances, get at me on Twitter @nerdyreddy.

Continue reading →

Advertisements

Plant AR experiment for iOS

Patrick (my boyfriend who does 3D modeling) and I recently decided to do a weekend “hackathon” AKA a hackathon where you don’t meet anybody new and everything is inside your own house.  I would argue that such a hackathon is THE BEST type of hackathon since the end goal is only learning 🙂

We wanted to make something simple since it was the first time we ever collaborated on a AR/VR project, we didn’t want it to be longer than a day’s worth of work, and we wanted to be able to create and deploy it on our own devices.

I used Vuforia for the image recognition (anytime it sees that particular image printed on the paper, our script and scene will execute), Unity, the iOS SDK for Unity, and XCode to compile the code. Patrick used Cinema 4D to create the plant and animation and imported his assets into Unity.

Here’s the “final” product on our iPad –

It was my first time to develop something that would be deployed to an Apple Device, so I had to go through signing up for a developer account, getting verified, and using XCode to actually deploy my code (rather than only using it for its iPhone emulator feature like I usually do at work).  Attempting to troubleshoot all the “Code Signing” errors in XCode was probably the hardest part of this process.

If you’re curious, here is the tiny piece of code I used for the touch event –

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlantGrow : MonoBehaviour {
  Animation anim;

  // Use this for initialization
  void Start () {
    anim = GetComponent<Animation>();
    Debug.Log("Start");
  }

 // Update is called once per frame
  void Update () {
   if(Input.GetMouseButtonDown(0)){
     anim.Play("grow");
     Debug.Log("Your plant is growing!");
   }

  }
}

You might notice that Input.GetMouseButtonDown(0) is referring to a PC rather than a touch device,  but it still works!  I’m assuming it is similar to making a website mobile friendly, all the click events still typically work on touch devices.

I am curious how Unity deals with touch events (like swipes / drags / etc.), however, and that is something I am going to look up ….now 🙂

October Update: I got a new job, y’all

It’s been a while since my last post, so I wanted to post an update since a lot has changed in a few months.

After my time learning at General Assembly was over, I decided to do an apprenticeship program called Future Academy at AKQA, a global digital creative agency who works with clients like Audi, Nike, Activision, and some more that I think I’m not allowed to say.

In this 3-month program, artists/designers/techies come together and work on short sprints with AKQA employees to create new products or opportunities for clients.  One of my favorite projects was where we were given an open-ended prompt to create a product that we could concept, prototype, and pitch in a few days.  My team and I created a product that helps you never lose a shower thought again.  Here’s more-or-less how our pitch went:

Do you ever have brilliant ideas in the shower, but forget them as soon as you step on the bath mat? Introducing….STREAM, an Nest-type device that allows you to record a note and transcribes it to Evernote.

I was actually able to prototype this application using a Raspberry Pi (my first time using one!), the Google Cloud API, the Evernote API, a Flic Bluetooth button, and used Python as the language.  I have a presentation on my journey in creating it that I might put up.

Here are pictures of my cohort from my fellow future academist Yeoj’s camera.

futureacademy.jpgfutureacademy2.jpg

At the end of the program, I had an offer to stay on.  So since September, I’ve been working as an Associate Software Engineer!  Currently I’m working on the front-end of the Audi website. I work mostly with JavaScript and SASS at this point (omg, maybe too much SASS for me to handle *z-snap*).


Other happenings that aren’t job-related:

  • I live in Oakland now. Patrick and I have an apartment with a patio filled with succulents and flowers, and I’m about a five minute walk from my favorite bakery. Life ain’t too bad.
  • I joined a rock climbing gym. Here’s to getting ripped / ripped off soon since I am scared of my regular gym commitment.
  • Like most people here, I have the upcoming election in mind more often than I wish I did. I probably tweet about it more than I should. I actually think lately I have *only* been tweeting about it & it has consumed my brainspace.  I also have been watching more and more videos of baby animals lately in order to cope, so there is only nonsense in my mind right now.

TPFMIL (The Past Few Months I’ve Learned)

This blog has gotten dusty since I have been too busy finishing up my time at General Assembly.  I already miss going on the train to SF, drinking a variety of teas, and attempting to figure out how to use a new framework with my classmates (*nostalgic sigh*).

In true listicle fashion, here are things I’ve learned in the past few months, both technically and emotionally:

  1.  Learning to code web applications is *so* much more than just mastering the syntax and writing algorithms.  It’s also about the framework / other tech you’re using and understanding its documentation; it’s about data structures and the underlying computer science that helps you determine how things work; it’s about breaking down your problem into questions that you can Google/StackOverflow.  And much more than that, to be honest.  It’s a never-ending, but exciting rabbit hole to fall into.
  2. Growth mindset, y’all.  As an ex-Khan Academy employee who preached the growth mindset in classrooms (and even created a lesson plan for teachers on the topic),  I felt a deep empathy for my middle-school math students when I was going through this course. I kept having to tell myself:  Learning is hard, and if it’s not, you’re probably not doing it right.  My biggest stumbling block was with the implementation of the Model-View-Controller concept.  I realized that I had to be intensely resourceful and do additional homework to really understand it. It’s silly that even as an adult it’s easy to be discouraged by basic struggles in learning a new concept. However, being raised in an environment where I was programmed (pun intended) to think that natural intelligence was more valuable than effort, I have to regularly remind myself that learning is supposed to be difficult.
  3. Specificity is key.  I constantly think about a talk that one of my former coworkers  (Laura Savino) gave about the importance of specificity in both programming and life.  Once you narrow down your problem to its most detailed form, it becomes more manageable to tackle (both emotionally and mentally).
  4. Code with people and find communities that support you.  I’ve found that especially with coding, learning with others is so beneficial.  Even as an introvert,  simply talking my problem out loud with others can move me forward.  I also realized that when two different people are learning the same new technology, they find out totally different things about it and both of you learn twice as much.  As a new programmer, getting involved in a community with both experienced and junior level developers can open your eyes to new technology and/or different ways to do X (note: not the drug).  Just because there is an endless amount of information online about programming, it doesn’t necessarily help you in the same way that talking to actual humans can.
  5. Pseudocode. Draft.  Refactor.  Repeat.  (Isn’t it cute that this is a recursive function?)  This is true with any art, and just as true with coding.  Cowboy coding works for a little while, but it sucks in the long run.  It’s better to know what direction you’re going, systematically finding a way to get there, and then polishing it up in the end.

Next blog post to come…Probably something about MAPS! Be excited.

After two weeks

I naïvely thought that I would be able to keep up a blog during my time at General Assembly’s web dev bootcamp.

Oh, ignorant me.

This will be a quick update/re-cap, as I’m currently frustrated at CSS and JavaScript right now.

First week:

  • I met everyone! There’s a class of about thirty people and three instructors, and everyone has been very supportive and helpful.  All of us come from very different backgrounds, so it’s been exciting to see us all changing our careers at once.
  • I learned a little more about how the Internet works, though I could always learn more. We quickly went over HTML, CSS, and basic JavaScript DOM manipulation.
  • On the third day, I created this Resume/Portfolio site. Much of the information is false right now, but it’s more about the creation and less about the content….though I do wish I had 60 years of programming experience 🙂
  • Over the weekend, our project was to create a tic-tac-toe game, which felt somewhat advanced just for the first week. I have had practice with DOM manipulation and JavaScript in the past, so it was less steep of a learning curve though it was still a struggle.  Let’s just say I did not get much sleep the night before.

Second week:

  • We learned several different things this week.  We started out with more practice using Github, which was especially useful for me since it’s still not immediately intuitive for me.  We also learned more about functional programming, callbacks, forms, jQuery, Bootstrap, Prototypes, OOP, and Ajax. It’s such a large variety of things, yet I see how they can all be used together.  Again, I’ve had some experience with some of this before, but I definitely needed the refresher.
  • I created a website where you input a photo of a sloth and a caption, and it posts the two onto the blog.  It’s kind of great.

Okay, really need to go and do my homework. Will post links to my projects later if I get any time.

Onwards!

Class starts tomorrow!

In the past few months, I have been teaching myself how to web-develop part-time (Note: “to code” seemed like only a part of the puzzle, the verb “web-develop” felt like a more accurate description).  This has involved sitting alone in my apartment either obsessively watching videos of how the Internet and data structures and sorting algorithms work, successfully and unsuccessfully pushing things onto Github, trying to arbitrarily hack at CSS hoping that it will center my content, attempting to solve ridiculous Ruby problems, and pulling my hair out after realizing that the only error in my JavaScript was a missing semi-colon.  Also, it admittedly has involved a lot of getting side-tracked and watching YouTube videos of unlikely interspecies animal friendships and wondering where two hours of my day went.

It’s been exciting, and at times I have even surprised myself about how much I was addicted to fixing bugs or figuring out an algorithm that I was initially convinced I wasn’t capable of solving.  I sometimes visualize certain levels of my brain being unlocked whenever this happens (most likely a side-effect of downloading Monument Valley recently and the gamified design of many educational CS applications).

When making my Rock, Paper, Scissors app last month, I felt a compulsion that I hadn’t felt in a while.  I was enjoying this work and felt confident in my ability to get better in the future.  I also realized how fun it could be to both design & develop your own application.

Tomorrow, I will finally be able to do all of these things with the guidance of mentors and the camaraderie of about twenty-five of my classmates.  I’m pretty psyched, for lack of a term that doesn’t make me sound like a SoCal surfer dude.  If it’s not apparent already, I am one of the annoying adults who always loved school, and thrive in a learning environment (Yeah, I always got invited to parties too….).

And of course, perhaps above feeling excited, I am scared. Anxious. Fearful.  Changing or developing a new career path is not the easiest thing to do, especially when you know that you’ll eventually have to compete for positions with people who are younger and more experienced than you.

However, I’m starting to see this as a positive, and I’m not only telling myself this repeatedly to quell any irrational anxiety of failure.

From afar, the tech industry seems intimidating and filled with precocious twenty year-old boys with glasses who build ‘disruptive,’ ‘innovative’ apps.  But from my experience dipping my toes into the water, my toes and sole/soul are still intact, for lack of a better metaphor.  I’ve noticed that for the most part, experienced techies are friendly and happy to share their knowledge with aspiring techies.  I’ve realized that the tech landscape is changing daily, which makes learning a new constant for the industry as a whole.  As long as you know the basics and are willing to work hard and learn,  it can be a friendly environment for newcomers (obviously some MAJOR caveats included depending on who these newcomers are).

Okay, I should go to sleep now rather than continuing this digression.  I’ll try and update tomorrow.

P.S. Happy MLK Day to everyone!  Without his leadership, I would not be the person I am today.  I will end with a quote that is mildly ironic to attach to this blog post, but is a good reminder that communicating with people is more important than communicating with computers.

“We must rapidly begin the shift from a “thing-oriented” society to a “person-oriented” society. When machines and computers, profit motives and property rights are considered more important than people, the giant triplets of racism, materialism, and militarism are incapable of being conquered.”
― Martin Luther King Jr.

Tutorial: How to make a snazzy Rock, Paper, Scissors game

Introduction

I recently made a Rock, Paper, Scissors game using HTML, CSS, and JavaScript/jQuery.  Some of my basic logic was based off some pre-work I completed for GA, but even some of my previous code had to be scrapped for it to work effectively.

I decided to do this since it was a simpler project that felt doable, which I realized was far more effective for learning than taking on a huge project that I may never finish. Who knew?

It took me ~2 days to complete (though I had some of the structure figured out before that as pre-work from General Assembly).  Rather than writing a post about the things I learned, I feel like it’s more useful for me (and maybe some others) to write about how I made it.

*You can play around with the finished version HERE.*

For those who don’t know the rules of the game for some reason, here they are.  It’s still unclear why exactly paper beats rock. So it goes.


 Pre-requisites

Though in this tutorial, I’ll be providing code snippets and you can virtually build it with little knowledge of programming whatsoever,  BUT it’s much more helpful to learn from the ground up.  If you have a basic understanding of the syntax and abilities of HTML, CSS, JavaScript, jQuery, and you have some knowledge about the DOM then feel free to skip this part. 

I’m a huge fan of Codecademy, Khan Academy, and Dash (General Assembly’s HTML/CSS/JavaScript tutorials).  All of these are free.  Here’s a rundown of each:

  • Codecademy:  What’s great about these tutorials is the structure.  It really allows you to tackle a tiny piece at a time when learning syntax, terminology, and basic logic.
  • Khan Academy:  The thing I like most about KA’s platform is that it utilizes a mix of interactive videos and short challenges.   You can scrub through the video, and manipulate the code at any point.  It also encourages creativity and tinkering, and even has a strong community built in (hats off to my former coworker, Pamela for her work creating these!)
    • Check these out: HTML/CSS: Making webpages, HTML/JS: Making webpages interactive with JavaScript, HTML/JS: Making webpages interactive with jQuery
  • Dash
    • Before being interviewed for General Assembly’s WDI program, I completed all five of the tutorials.  What sets Dash apart from the two above is that it combines a lot of bits and pieces of knowledge from before into a few mini-projects that you can show off to your friends.  The slideshows and interactive programming environment are also helpful when self-teaching.

Now that we are somewhat comfortable with the syntax and whatnot…let’s set up our files and host it on a local server!


Set up your file structure

Here is what my file structure looked like:

Screen Shot 2015-12-18 at 10.56.27 AM

Right now, let’s just set up all of our directories so that we won’t have to worry about that later.  Let’s do this via our command line (just for learnin’s sake)!

Within your command line, navigate to a directory of your choice (i.e. “Web Projects”).   I chose my “General Assembly” folder to be my parent directory.  Here is a screenshot of the commands I used to create my file structure:

Screen Shot 2016-01-12 at 2.28.42 PM

Images!

I quickly whipped up these graphics in Illustrator using vector shapes and the pen tool.  For the sake of time, I won’t go into the details in how to make cool geometric shapes. But…here is a folder of them for your own purposes! Yay! Download and move them into your images folder.


Set up your local server

In order to test your full application, you’ll need to host it on your local web server.   Here’s one way to do this:

  1. Navigate to your rockpaperscissors directory in your command line.
  2. Follow these instructions.  For the part that tells you to type in  “http-server [path] [options]”, I typed in:
http-server -p 8080 &

in my command line, which essentially allows me to view my app in my browser using the URL:

localhost:8080

For the sake of consistency, let’s use Google Chrome and type our URL (above) into the browser.  Do you get a blank page? If so, great!  Right click and click “Inspect” then go to the tab “Sources” – Do you see your beautiful rockpaperscissors directory complete with your beautiful files?  If not, make sure that you navigated to your directory before setting up your http server.   OKAY, ENOUGH SET UP ALREADY! Let’s start OMG.


HTML: the bare bones

As you may know, HTML is a mark up language to let your browser understand your document structure.  It is the skeleton of your entire project, and what you will be manipulating with both your CSS and JavaScript (I guess with this metaphor, CSS is the skin and clothing, and for this project, JS is the actual functionality of your body).

Open a new document in the text editor of your choice (I use Atom – it’s free and beautiful), and save the file as index.html in your rockpaperscissors folder.

Let’s first start with the typical structure of any HTML document. You need to declare the !DOCTYPE, create the head with a title, and create the body. Like so:

Screen Shot 2016-01-12 at 3.22.48 PM.png

Refresh your Google Chrome page where you accessed it last.  You’ll see a blank page, but hopefully you’ll notice the title that shows up on the tab is what’s between those <title> tags!

Linking CSS and JS within your HTML

In order to make your CSS and JS interact with your bare bones HTML, we’ll need to link them within the <head></head> !

First, let’s include links for jQuery (the library we’ll use in our JavaScript file), and for our ‘main.js‘ file where almost all of the functionality and logic of the game will go. Copy/paste this into your <head> tags:

http://code.jquery.com/jquery-2.1.4.js
 http://js/main.js

Next, let’s include links for our CSS files in the head:

 <link href="css/style.css" rel="stylesheet" type="text/css">
 <link href="css/shake.css" rel="stylesheet" type="text/css">

Let’s now move on to the main blueprint of our site.

Divs, divs, divs

How do we know what to do!?  Let’s look at the end product that we want.  Though there are better methods of designing this game (and I urge you to reformat to enhance its usability), this will be our “mockup” page to model our app on:

Screen Shot 2016-01-12 at 2.35.48 PM

If you break this up into sections, you can see three main segments:

  • The entire header box
    • (with the heading and scoreboard inside)
  • The selection of weaponry section
    • (rock, paper, scissors images)
  • The result message box
    • (the white block at the bottom that says who won)

You can think of each of these as a “div,” or container.  These containers help us organize our site into several sections.

Let’s code these divs within our HTML file now.  I named them “header-container”, “option-container”, and “winner.” Within these main divs, I

 

Screen Shot 2016-01-13 at 12.55.26 PM

Continue this pattern of finding out what sub-containers you could include within these larger containers (Remember the heading, scoreboard, etc.?).

Check out my final HTML here: https://github.com/nreddy216/rockpaperscissors/blob/master/index.html


CSS

Full disclosure: I kind of hate CSS. So far, at least.  As a designer,  I *love* what CSS can do, but I *hate* how it doesn’t always do what I think I tell it to do. It’s complicated.

For this reason, some of my CSS in this might be a byproduct of me doing hacky things to make something look right.  Use at your own risk, and modify until it makes the most sense to you.

Though I think it’s better to tinker around and figure out how you personally want the page to look (this will also help you learn better),  I’ll just supply my hacky CSS file for the sake of speed.  You’ll want to copy/paste this into your style.css file (also available here on Github):


For the shaky movement, I downloaded code from this beautiful site with a variety of CSS shakes: https://elrumordelaluz.github.io/csshake/

You can choose the shake you like the most, and copy/paste it into your “shake.css” file.


JavaScript/jQuery

Finally! The main functionality of it all.

In terms of the overall logic of Rock, Paper, Scissors.  Think about who the players are of this game and how they each make their decision.  You, as the player, have to provide input through clicking on an image.  The computer, however, makes a random decision (unless you are a pro at machine learning, in which case you would not be reading this tutorial).   Try to write down some pseudocode on how this would work – AKA the algorithm you would use to create this program in plain, human language.

Before taking a peek at my own code, try to come up with an overarching logical structure of your own, just for the game’s sake.  Test it out in repl.it or JSFiddle with simple return statements.

Then, play the web game and note down all interactions that occur.

Here are some questions that might help. Try to answer them as specifically as possible, and think about how you could potentially improve on the entire design:

  1. What is the user presented with initially?
  2. How does the user know what’s clickable?
  3. What happens when a user clicks an option (rock, paper, scissors)?
    • NOTE: Think about ALL of the interactions. How does the score change? What happens to the sign at the bottom? What do the colors signify?
  4. What happens when the user clicks/hovers the refresh button near the scoreboard?
  5. What happens when a user clicks the bottom white box (the “winner” div)?  Is this intuitive to you? If not, what would you do instead?

You can write down these interactions in pseudocode.  For example, “if a user hovers over an option, the image shakes.” Or “if a user clicks on an option, the text within the result div changes to reveal the winner.”  Each of these interactions can then be entered into the code.

For the sake of time and clarity, here’s my code with the comments included.  Unfortunately WordPress isn’t the best for copying/pasting all of my JS code (something I can hopefully troubleshoot later)!  But fortunately there is Github : https://github.com/nreddy216/rockpaperscissors


GitHub & GitHub pages

This is something I’ll actually come back to in the future.  You should be able to view your application on your browser at your local server, but I KNOW you want to show it off to your mom.  For now, this is a very helpful way to learn how to push it up onto your github pages: pages.github.com


Learnings

  • After making this small project, I realized how much more effective it was to make mini-projects vs. a giant undertaking (like a ~totally new app that revolutionizes the way we live and disrupts the universe~).
  • Actually designing the UX before just coding what I imagined at the top of my head would be a better plan next time. This was a very obvious misstep that I was aware I was doing, but I honestly just wanted to code and not worry too much about the usability.
  • Coding is fun! I started to form a slight addiction when iterating on the app. I’m pretty excited for GA to start soon.
  • Tutorials are difficult and take a long time to write, even for simple programs like this.  I’d love feedback on this particular tutorial (Was it even helpful?!) I’ll be experimenting with different types of tutorials along the way…Stay tuned.

Okay, I’m going to go before I risk making this blog ever longer. Later, y’all!