KDC Menu

Wednesday, January 31, 2018

I··C··D··O··T··S (––and––lines––)

I··C··D··O··T··S··: A Web App Game

tl;dr - take me to the game already!

ICDots is a board game for 2-7 players who will take turns selecting lines to form boxes. Scoring is 1 point per box pinned. Line colors have no distinction other than one is horizontal and one is vertical, and the alternating colors felt visually appealing.

Game Reference

The Game:
  1. Board is between 2 and 7 (represented as 1 row of boxes).
  2. Number of players is between 2 and [Board] size.
  3. Players take turns.
  4. If a player pins a box, they go again.

Application URLs

Technology History

  • Inspired by a Codewars kata, the original kata solution was written with just JavaScript.
  • In making the game interactive, the first version of ICDots was written with JavaScript Prototypal Inheritance (e.g., let myGame = new Game() and Game.prototype.createBoard = function() { }). This was my first prototype-based coding project.
  • I then converted that version of the game to React with TypeScript. With this project, I added TypeScript alongside/during the conversion to React (as it should be done).

Tech Stack

Working on this project provided me a more in-depth look into
  • - JavaScript (ES5, ES2015 (ES6)) (+ downgrading ES7 .includes())
  • - React (16.2.0)
  • - TypeScript (2.13.0)
  • - Local component state and props


[JavaScript] [react] [reactjs] [typescript] [coding practice] [coding fun]

Tuesday, January 30, 2018

Dances with Vars

Dances with Vars:

Spans... Spans... Your name is Spans? Spans Div... Spans with Divs... Your name is "Spans with Divs"!?!

>Testing Dark Humor:

```describe(‘psychotic’, () => { 
    it(‘puts’, () => { 
        basket: “lotion” 

I had originally posted this on Google+, but thought it fitting for my blog as well. I would also share on Twitter, but you can't format Twitter messages, so it'd lose it's coded `unit testing` humor hook.

Tuesday, January 09, 2018

Foundation 6 Install - 2018-01

[2018-01-07 / 08 - Sun / Mon]

Setting up a new VirtualBox VM with Ubuntu 16.04.3 (guest) on a Windows 10 MSI laptop (host/parent).

I was recently reintroduced with Foundation 6, and I decided it would be a good opportunity for a little redesign of my portfolio. This guide became a byproduct of my setup process.

Note: In this guide, 'ubuntuuser' will be the local Ubuntu username you choose when creating your VirtualBox Ubuntu VM (bullet item #2). Also, I tried to put all the important commands to run in bold - hopefully this translates when I publish from Evernote to Blogger. :)

VM with Foundation 6 from Scratch:

     - Downloaded Ubuntu Server Latest (16.04.3) ISO

     - Created a new VirtualBox VM (named "F18").
          Apply the ISO, run through the Ubuntu installation (I accept near, if not all, defaults).
          LAMP server | Mail server | Samba file server | OpenSSH server | Basic Ubuntu server
               (names and passes are just suggestions; please don't use them verbatim.)
               Server Name: [myubuntu]
               Ubuntu Admin User & Pass: [ubuntuuser][aweSumPas^sW8rk]
               MySQL Root User: [giv#AGoodPawswd]
                    (^^^ watch this; it kind of looks like it wants a pass for
                    your Ubuntu root user, but it's for the MySQL root user.)
          sudo apt-get update
          sudo apt-get upgrade (new install; could take a little while)
          sudo apt-get update

     - We need Git
          sudo apt-get install git
          git config --global user.email "your@gitemail.com"
          git config --global user.name "Your GitHub or BitBucket or XyZ Name"

     - Created GitHub Public Repo
          No license (implied self-copyright)
          Updated Readme.md to reflect WIP

     - We need the framework
               - Didn't install Foundation CLI (just did the clone thing...)
          git clone https://github.com/zurb/foundation-zurb-template kdcF6
          Edited package.json to be my own name, Git location, etc.

     - Setup WinSCP connection
          [connect to SFTP:22 myubuntu|ubuntuuser]
          [chmod] (d-755/f-644) to all files/folders* inside kdcF6 (wherever you put your F6 files)
               *I left the .git folder alone.
               (Selective multi-file and folder selection inside GUI is easier than via cmd line.)

     - Ran through setting up 'nvm' and node

               nvm - creationix
               wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

               libssl-dev build-essential / build-essential
               sudo apt-get -y install libssl-dev build-essential
               sudo mkdir /tmp/node-install
               cd /tmp/node-install
               sudo wget {paste}

               node-install - Beware pipe ( | ) command separators | Inserted only for brevity.
               sudo tar -zxf {tab} | cd {tab} | sudo chmod -R 770 /tmp/node-install/{tab} |  
               sudo ./configure | sudo make (takes awhile) | sudo make install |  
               node -v | cd / | sudo rm -r /tmp/node-install/

          Current Node at time of downloading from "Source Code"

     - Ran: sudo npm install
          The moment we've all been waiting for...
          Failed! Permissions issue.

          First I found and tried:
               sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

          That condensed cmd did not behave well, so ended up doing them separately:
               sudo chown -R $(whoami) /usr/local/lib/node_modules/
               sudo chown -R $(whoami) /usr/local/bin/
               sudo chown -R $(whoami) /usr/local/share/

          Then I found and ran:
               sudo npm cache clear
               sudo npm cache verify
               sudo npm cache clear --force
               sudo chgrp -R root /home/ubuntuuser/.npm/
               sudo chown -R ubuntuuser /home/ubuntuuser/.npm/
               ll /home/ubuntuuser/.npm/

          Last thing, should go ahead and do before npm install...
               When [npm install] is run first, it will end with a message suggesting:
               sudo chown -R $USER:$(id -gn $USER) /home/ubuntuuser/.config

     npm start
          ^--- Look ma, no sudo!!!

We've got take-off!

Note: Because I did not install the Foundation-CLI, you may notice I'm not running "foundation watch", but "npm start". These are the same thing ('foundation watch' is an alias).

Note: In the 2+ years I've been running these Ubuntu setups, this is the first time in an Ubuntu environment I've been able to, (had to, in fact,) run 'npm' without 'sudo'.

Running in a server-only terminal.
     - Looking into turning off BrowserSync (or see if I can enable it to run outside of my headless server).
     - Or I can install Ubuntu Desktop as I did on my (old?) primary VM.
     Suggestion was to set: open = false

     Found it! (added open: false)
function server(done) {
server: PATHS.dist, port: PORT,
open: false

And we've got an even Better Take-Off !!! (ran this from my Win 10 host - BrowserSync connected!!!)

And we've got control over our take-offs !!!

Setup Samba Sharing:
     sudo vi /etc/samba/smb.conf
path = /var/www/html/
available = yes
valid users = ubuntuuser
read only = no
browsable = yes
public = no
writable = yes
     sudo smbpasswd -a ubuntuuser
     sudo service smbd restart

Initial Issues: I had major issues with my first VirtualBox VM (named "Foundation") whereby I set up the hard drive to be dynamic, but it set itself to 10GB. Even after updating it to 20GB via the VM Media Manager, Ubuntu would not see the changes.
     - Spent Sunday going over documentation, watched 6 videos, and got initial VM with Foundation 6 setup.
          Problem came when trying to setup a 2nd Foundation project.
     - Ran out of space on 2nd install of Foundation (tried 5+ times).
     - Spent most of Monday trying to get drive expanded in initial "Foundation" VM.
          Used often: sudo npm cache clear

Editors Note: You will see that I used multiple tenses, and I apologize for that, but I primarily just wanted to get the overall (but primary) gist of it all documented.

A little further: In addition to using Foundation 6, because React requires its own server, I may be introducing a little Vue into these otherwise static LAMP pages. Maybe... Hopefully...

Some References:

Warning: Please do not blindly copy and paste any of this code. Always know what you're entering, even if it means looking up every other word until you grasp it. Or, ask. Although I'm only a mid-level Front-End Engineer, comments and questions are still welcome.