Chris LaBarge's Blog Posts on Chris LaBarge - Software Developer - Portfolio

Remote Mount an External Hard Drive with a Raspberry Pi

Fri, 05 Mar 2021 12:01:00 +0000

Required - The following will be needed to complete the tutorial

Computer with Linux/Unix OS
External storage device like a Hard Drive or USB
USB hub - A way to power the external storage device
Raspberry Pi - Any model

Preface

While relaxing after a long day, a great work idea pops into my head… I take out my personal computer, navigate to my cloned Documents/ folder, git pull origin master and open my file from work day.

Gasp!!…. It looks nothing like I remember. Oh shoot.. I didn’t push up todays recent changes on my work computer, and now I can’t use my notes from today to get context and help better flesh out my idea. The notes are stale. :(

A solution to this problem is to have my work computer and personal computer access to the same exact Documents/ folder, so that any change will be immediately be reflected on the device accessing the folder.

I could of course just set up a server/storage space in the cloud and have my Documents/ folder deployed there. However, I had a bunch of extra Raspberry Pi’s lying around and an external hard drive collecting dust. Might as well put them to good use.

Raspberry Pi Set Up

First you will need to make sure that the Pi has a Linux OS installed. You can follow a fairly old tutorial of mine SD OS Image Tutorial, or use the glorious UI Imager. I highly suggest using the Imager software as it as about as simple as it gets.

Next, you will need to be able to login to the Pi from a computer. For this, we will use ssh. In order for the Pi to accept ssh connections, you might have to enable it in the Pi’s configuration. Follow along with this tutorial.

After you have enabled ssh, and rebooted the Pi, make sure to check the local IP address of the device. Run hostname -I. The output will contain your full address Where 192.168.0.28 is the IP number we need.

Lets guarantee this will always be the IP address by appending it to a boot file by running:

Pi

sudo echo "ip=192.168.0.28" >> /boot/cmdline.txt

Now you will have everything you to remotely login to the Pi. From your computer run the following:

Computer

ssh pi@192.168.0.28

It should prompt you for a password. The default password is raspberry, it is advised to change it. ssh will allow us to login without having to enter a password every time. Run the following from your computer:

Computer

ssh-copy-id pi@192.168.0.28

It will prompt you for a password, and after successfully entering, you should no longer have to enter one when logging into your Pi through ssh.

Mounting the External Hard Drive

Now we must connect and mount the External Hard Drive.

Make sure that the external hard drive is formatted as ext4. (I attempted this with a drive formatted in vfat and I had user permission issues writing to the drive after mounting it.)

In order to ensure that your external hard drive has enough power, and it not pulling any from the Pi, we must use the powered USB hub. Think of this as a USB splitter for your Pi, with the added benefit of providing power to any plugged in device.

With the Pi powered down sudo shutdown -h now, hook up the USB Hub to the Pi, and plug the external hard drive into the USB Hub. Now, boot the Pi up and after logging in from your computer run the following:

Pi

sudo blkid

The output will look something similar to:

/dev/mmcblk0p1: LABEL_FATBOOT="boot" LABEL="boot" UUID="DV4E-E470" TYPE="vfat" PARTUUID="78daa907-01"
/dev/mmcblk0p2: LABEL="rootfs" UUID="a7adb26a-8b87-4729-88c8-9f5ac069d51e" TYPE="ext4" PARTUUID="78daa607-02"
/dev/sda1: LABEL="HDD-SEAGATE" UUID="6b6eb764-8a3b-44b1-aa5f-5214c94efed4" TYPE="ext4" PARTUUID="13f31b00-01"
/dev/mmcblk0: PTUUID="77daa907" PTTYPE="dos"

The following is the external Hard Drive connected to my Pi:

/dev/sda1: LABEL="HDD-SEAGATE" UUID="6b6eb764-8a3b-44b1-aa5f-5214c94efed4" TYPE="ext4" PARTUUID="13f31b00-01"

We will be using this information to mount the external drive on startup. So make sure to copy it down somewhere.

First we need to create a mount point. I like to have mine along side /home.But it does not really matter, you can create your mount point anywhere on the file system. Make sure you are still logged into the Pi and run:

Pi

sudo mkdir /HDD-SEAGATE # replace /HDD-SEAGATE with your mount point

Now we must tell the Pi to mount the external drive at this mount point on startup. In order to do this you will need to edit a file as your logged in. Run the following:

Pi

sudo vi /etc/fstab

# I am used to `vim` so I will be using `vi`, but most installations
# come with `nano`. Replace `vi` with `nano` if you prefer.

Append the following line to the file and save (be careful editing this file, only ADD to the file, DO NOT change the existing content):

/etc/fstab

 # Bottom of file, everything above was already in the file

 /dev/sda1    /HDD-SEAGATE    ext4    defaults    0   0

Where /dev/sda1 is the output path from blkid, and /HDD-SEAGATE is the path of the new mount point directory.

Now, lets make sure it will mount correctly. Run the following commands:

Pi

sudo mount -a
cd /HDD-SEAGATE # replace /HDD-SEAGATE with your mount point
echo "It works!" > permission_test
cat permission_test

You will know if you have successfully mounted the drive and have write permissions, if you see It works! in terminal output. Now we can reboot the Pi:

Pi

sudo reboot

Log back into the Pi and make sure the external drive is automatically mounted:

ls /HDD-SEAGATE # replace /HDD-SEAGATE with your mount point

This should output the contents of our external hard drive, including our permission_test. Which we can now remove rm /HDD-SEAGATE/permission test

Remotley Mount the External Hard Drive

Time to mount the External Hard Drive on our computer remotely. We will need to use sshfs. After installing, create the mount point on your computer(s).

Computer

sudo mkdir /HDD-REMOTE # replace /HDD-REMOTE to with any mount point

Now for the final test. Using sshfs to remotely mount the external hard drive (which is physically mounted to the Pi)

Computer

sshfs pi@192.168.0.28:/HDD-SEAGATE /HDD-REMOTE

# Obviously replace /HDD-SEAGATE with the mount point on your Pi
# and replace /HDD-REMOTE with the mount point on your computer

You should now have the External Hard Drive mounted at your new mount point.

Computer

ls /HDD-REMOTE

Once again, this should output the contents of our external hard drive, including our permission_test. Which we can now remove rm /HDD-REMOTE/permission test

We have successfully created a new storage drive on our computers that is not physically connected. Pretty cool!

Migrate Local Folders to Remote Drive

Alrighty now its time to start moving the folders we are having syncing issues with to the Raspberry Pi. In my case the Documents directory on my computer. Initialize the folder as a git directory (if you haven’t already). And push up to a private reposistory on a service like Github. (this is for back up purposes)

Clone the repo into the remote drive or move the folder.

Computer

mv ~/Documents /HDD-REMOTE/

You have successfully migrated your local folder to the remote drive. Doesn’t get much easier than that. Well, actually it does.

I don’t want to always have type the entire path /HDD-REMOTE/Documents. It should still just show up in my /home/chris directory like it did before.

Symlinks to the rescue.

Computer

ln -s /HDD-REMOTE/Documents /home/chris/Documents

There you have it! We can now edit files in our ~/Documents on any computer, and the changes will be immedietly written on the remote server, and availble to across all devices.

Alias the SSHFS command

No one wants to remember the entire command to mount the remote drive. Add the following to your .bashrc:

~/.bashrc

alias mount-remote='sshfs pi@192.168.0.28:/HDD-SEAGATE /HDD-REMOTE'

Now you can manually mount the drive with mount-remote (or whatever you prefer to name the alias)

Port Forward Postgres Docker Container to Localhost

Fri, 05 Feb 2021 18:30:21 -0500

Tools - Install the following

Docker - A platform to run isolated software packages called containers.
Docker Postgres Image - The instructions for building a postgres container. A container is an instance of a docker image.

Intro

I recently pruned my docker containers and images to free up some space on my local drive. In doing so, I was required to spin up some of the containers that I rely on for local development.

One of these containers is a instance of postgres docker image. I prefer using a docker container of this image in replace of local postgres installations, as it is much less of a headache.

I also like to treat the postgres database in the container as if it were installed locally by forwarding the container port to localhost.

I find this helps limit configuration issues when working on new projects. Now all I will have worry about is my database username and password.

Command

terminal

docker run --name localhost-postgres -p 5432:5432 -e POSTGRES_USER=some_user -e POSTGRES_PASSWORD=some_password -d postgres

This entire command is not specific to postgres. You run commands like this using most one off docker images. Lets break this command down.

docker run Run a command in a new container
--name the custom name of the container ( I prefer to prefix it with localhost in case I have other postgres docker containers, NOT binded to localhost)
-d Run container in background and print container ID
-e Set environment variables
POSTGRES_USER= fill this value with username for your projects database configuration/secret files. (do not include the ENV variable in the command if you prefer to use default postgres as your username)
POSTGRES_PASSWORD= fill this value with the password for your projects database configuration/secret files. (this ENV variable is required for the container)
-p Publish a container’s port(s) to the host
5432:5432 The default container postgres port mapped (fowarded) to the default localhost postgres port 5432
postgres The installed postgres docker image you are using for the container

Using

Now all you have to do is is use the value for POSTGRES_USER= as your database username and POSTGRES_PASSWORD= as your database password.

rails_project/.env

DB_USER=some_user
DB_PASSWORD=some_password

And that is typically all I need to get up an running on a new project and run a command such as rake db:setup This is how a typical database configuration file looks in rails:

rails_project/config/database.yml

production:
  url:  <%= ENV["DATABASE_URL"] %>
  pool: <%= ENV["DB_POOL"] || ENV['RAILS_MAX_THREADS'] || 5 %>

development:
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  adapter: postgresql
  encoding: unicode
  database: rails_project
  host: localhost
  username: <%= ENV['DB_USER'] %>
  password: <%= ENV['DB_PASSWORD'] %>

test:
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  adapter: postgresql
  encoding: unicode
  database: rails_project_test
  host: localhost
  username: <%= ENV['DB_USER'] %>
  password: <%= ENV['DB_PASSWORD'] %>

Configure (Neo)Vim for Unity Game Engine Development

Sun, 15 Nov 2020 18:30:21 -0500

Tools - Install the following

NeoVim - Open source fork of the Vim editor.
Neovim-CoC - Intellisense Engine - Make your Vim/Neovim as smart as VSCode.
OmniSharp-vim - A great vim plugin that installs omnisharp and integrates with mono/.NET and Coc.
Mono - Open Sourced version of the .NET software framework - Unity compiles c# code to c++. Only needed if you are developing on OSX/Linux
Unity - Game Development Engine.
Neovim-Remote - This is a python executable script that extends Neovim to allow for remote features that are available with regular vim.

Preface

Neovim-CoC is a very robust vim plugin which allows for numerous extensions and configurations. It is not really an “out of the box” solution, and you will have to get your hands dirty. Having said that, I really appreciate all of the work that is going into this plugin, and can’t imagine developing without it.

If you use a different Intellisense solution, just make sure OmniSharp-vim is compatible with it.

Tutorial

I LOVE editing code in Vim. Recently I decided to dabble with the Unity Game Engine. Unity has terrific built in integration with VScode, but not with Vim.

Luckily Unity allows for integrating any editor that can accept line and file arguments.

Open up your Unity game/project.

From the tool bar select:

edit > preferences > External Tools

As you can see there is a dropdown that allows for choosing a text editor executable file.

You must create the file first in order to choose it.

Utilities/neovim-unity

#!/bin/bash
gnome-terminal -- nvr --servername unity $@

Lets breakdown this simple file.

gnome-terminal is the executable command that opens a new terminal window on my machine. If you use a different terminal the command will be different.
nvr --servername unity $@ is the argument, which itself is a command.
nvr is the executable command for neovim-remote. This is needed because you are unable to pass server and remote options into neovim like you can for vim.
--servername unity is how we name the neovim server instance.
$@ allows the Unity Game Editor to pass in File arguments into the (executable) file.

Now you must make the file an executable.

Command Line

cd Utilities
chmod +x neovim-unity

Choose the newly created executable file in the Unity preferences. The external script editor arguments field will appear.

Add the following line:

External Script Editor Args

  --remote-silent +$(Line) $(File)

edit > preferences > External Tools

Now you can open/debug files within the Unity UI and it will automatically open the file in your Vim editor.

However you will notice that the intellisense is most likely not working.

First, we must edit the Neovim-CoC configuration file. Within vim enter the following command:

(Neo)Vim Command

:CocConfig

This will open you configuration file for Neovim-CoC. Add the following lines to the object:

CoC config.json

{
  //...
  "coc.source.OmniSharp.enable" : true,
  "coc.source.OmniSharp.triggerCharacters": ".",
}

Now you must generate the project files so that the OmniSharp server can analyze the project.

In order to do this, switch the External Text Editor option back to “Open by file extension”. (For some reason it will not allow for generating these files when the nvim-unity is selected) You will now have the options to regenerate project files. Make sure the following are checked before regenerating:

Embedded Packages
Registry Packages
Local Packages

edit > preferences > External Tools

Switch the External Text Editor option back to “neovim-unity”. Make sure that the argument field still has the following:

External Script Editor Args

--remote-silent +$(Line) $(File)

edit > preferences > External Tools

Now, upon opening any .cs file within the project, should open in vim, and your OmniSharp server should start up, analyze the project files, and provide you with an IDE like experience.

Side Note

If there are any issues with the OmniSharp server, make sure to follow ALL of the installation instructions at OmniSharp-vim. There are a few different caveats in regards to the operating system you are running.

Popup with Tippy.js, Ruby on Rails 6, Stimulus and Webpacker

Fri, 30 Oct 2020 18:30:21 -0500

Demo Application - Hosted on a Free dyno. (May take 10-20 seconds to wake up)

Github - Git repo for the hosted application.

Tools

Ruby on Rails 6.0.2.2 - Ruby Web Framework
StimulusJS - A minimal Javascript framework developed by Basecamp.
Webpacker - Rails gem for using Webpack to bundle assets including Javascript modules.
Tippy.js - Popup Javascript library.

Set Up

This tutorial assumes that you have a Rails application with webpacker and stimulus installed (along with some familiarity using each).

If you are using Rails >= 6.0 version, you can generate the application with the following command.

rails new sample_app --webpacker=stimulus

The model we will be working with from the demo is Fabric.

We have a typical index listing of the Fabric in the system:

app/views/fabrics/_fabric.html.haml

%li
  .avatar
    = img_pack_tag(fabric.image, class: "circular")
  .data
    = fabric.name

However, the avatar is too small for comparing fabrics, and it would be nice to have the image enlarged when hovering over it.

We will need to install a popup library to accomplish the desired feature.

Install with Yarn & Webpacker

Add the Tippy.js library using yarn

Command Line

yarn add tippy.js

Afterwords, create a scss file to load the module’s styles:

app/javascript/stylesheets/popup.scss

@import 'tippy.js/dist/tippy.css';

.popup {
  padding: 7px;

  .image {
    text-align: center;
    margin-bottom: 10px;

    img {
      height: 200px;
      width: 200px;
      border-radius: 5px;
    }
  }
}

NOTE: If you do not use a css style path such as app/javascripts/stylesheets/ in your build, you can load the the Tippy.js library styles in the packs file:

app/javascripts/packs/application.js
import 'tippy.js/dist/tippy.css';

Stimulus Integration

app/javascript/controllers/popup_controller.js

import { Controller } from "stimulus";
import tippy from 'tippy.js';
import "../stylesheets/popup.scss";

export default class extends Controller {
  static targets = ["trigger", "content"]

  initialize() {
    this.initPopup();

    this.contentTarget.style.display = "none";
  }

  initPopup() {
    tippy(this.triggerTarget, {
      content: this.contentTarget.innerHTML,
      allowHTML: true,
    });
  }
}

We load the tippy module at the top of the stimulus controller file along with the stylesheet:

NOTE: Do not load the stylesheet if already imported in app/javascript/packs/application.js

import tippy from 'tippy.js';
import "../stylesheets/popup.scss";

We have two stimulus targets:

static targets = ["trigger", "content"]

this.triggerTarget

This is the HTML element we will be passing into the tippy() function. It will turn the element into a trigger for the popup component.
this.contentTarget

This is the HTML content that the popup will contain.

We use the initialize() stimulus life-cycle function:

initialize() {
  this.initPopup();

  this.contentTarget.style.display = "none";
}

In the initPopup() method, we set this.popup to the return call of tippy() in order to access the popup:

initPopup() {
  this.popup = tippy(this.triggerTarget, {
    content: this.contentTarget.innerHTML,
    allowHTML: true,
  });
}

The first argument passed into the tippy() function is the element that will toggle the popup. In this case our this.triggerTarget.

The second argument is a options object.

this.contentTarget.innerHTML is set as the content option.
In order to allow for HTML rendering from Tippy.js we set the the allowHTML option to true.

Additional options can be found at Tippy.js README.

To prevent from the content from rendering outside the popup we hide it:

this.contentTarget.style.display = "none";

HAML View Changes

Now we have to update our fabric partial to utilize the popup controller:

app/views/fabrics/_fabric.html.haml

%li
  .avatar{ data: { controller: :popup, target: "popup.trigger" } }
    = image_pack_tag(fabric.image, class: "circular")

    %div{ data: { target: "popup.content" } }
      .popup
        .image
          = image_pack_tag(fabric.image)
        .data
          Created On:
          = display_date fabric.created_at

  .data
    = fabric.name.titleize

Looks Good!

Now lets do some refactoring to clean up our view and make the popup controller more modular.

app/javascript/controllers/popup_controller.js

import { Controller } from "stimulus";
import tippy from 'tippy.js';
import "../stylesheets/popup.scss";

export default class extends Controller {
  static targets = ["trigger", "content"]

  initialize() {
    this.trigger = this.getTrigger();
    this.content = this.getContent();

    this.initPopup();

    this.content.style.display = "none";
  }

  initPopup() {
    this.popup = tippy(this.trigger, {
      content: this.content.innerHTML,
      allowHTML: true,
    });
  }

  getContent() {
    if (this.hasContentTarget) {
      return this.contentTarget;
    } else {
      var content = document.createElement('div')
      content.innerHTML = this.data.get("content");

      return content
    }
  }

  getTrigger() {
    if (this.hasTriggerTarget) {
      return this.triggerTarget;
    } else {
      return this.element;
    }
  }
}

app/views/fabrics/_fabric.html.haml

%li
  .avatar{ data: { controller: :popup,
                   popup: { content: render("popup", fabric: fabric) } } }

    = image_pack_tag(fabric.image, class: "circular")

  .data
    = fabric.name.titleize

app/views/fabrics/_popup.html.haml

.popup
  .image
    = image_pack_tag(fabric.image)
  .data
    Created On:
    = display_date fabric.created_at

Color Picker with Ruby on Rails 6, Stimulus and Webpacker

Sun, 12 Apr 2020 18:30:21 -0500

Demo Application - Hosted on a Free dyno. (May take 10-20 seconds to wake up)

Github - Git repo for the hosted application.

Tools

Ruby on Rails 6.0.2.2 - Ruby Web Framework
StimulusJS - A minimal Javascript framework developed by Basecamp.
Webpacker - Rails gem for using Webpack to bundle assets including Javascript modules.
Pickr - Color Picker Javascript library.

Set Up

This tutorial assumes that you have a Rails application with webpacker and stimulus installed (along with some familiarity using each).

If you are using Rails >= 6.0 version, you can generate the application with the following command.

rails new sample_app --webpacker=stimulus

The demo model we working with is the ColorOption.

ColorOption(
  id: integer,
  font_color: string,
  background_color: string,
  created_at: datetime,
  updated_at: datetime
)

As you can see above the model has two string columns

font_color: string
background_color: string

These will be updated by the Color Picker. The columns can currently be updated using a regular rails form.

app/views/color_options/_form.html.haml

= form_with(model: local_assigns[:model], local: true) do |f|
  .field
    = f.text_field :font_color
    = f.label :font_color
  .field
    = f.text_field :background_color
    = f.label :background_color
  .field
    = f.submit

Pretty standard stuff, now lets get the Color Picker library installed.

Install with Yarn & Webpacker

Add the Pickr library using yarn

Command Line

yarn add @simonwep/pickr

Afterwords, create a css file to load the module’s styles.

app/javascript/stylesheets/color_picker.css

/*Change 'classic' to which ever theme you are using from Pickr*/
@import '@simonwep/pickr/dist/themes/classic.min.css';

/*Custom form field style*/
form .field .pickr {
  display: inline-block;
}

NOTE: If you do not use a css style path such as app/javascripts/stylesheets/ in your build, you can load the the Pickr library styles in the packs file.

app/javascripts/packs/application.js
import '@simonwep/pickr/dist/themes/classic.min.css';

Stimulus Integration

app/javascript/controllers/color_picker_controller.js

import { Controller } from "stimulus";
import Pickr from "@simonwep/pickr";
import "../stylesheets/color_picker.css";

export default class extends Controller {
  static targets = ["picker", "input"]

  initialize() {
    this.initPicker();
  }

  initPicker() {
    this.picker = Pickr.create({
      el: this.pickerTarget,
      theme: 'classic',
      default: this.inputTarget.value,

      components: {
        preview: true,
        opacity: true,
        hue: true,

        interaction: {
          hex: true,
          rgba: true,
          hsla: false,
          hsva: false,
          cmyk: false,
          input: true,
          clear: false,
          save: true,
        },
      },
    });

    this.picker.on('save', (color, _instance) => {
      this.inputTarget.value = color.toHEXA().toString();

      this.picker.hide();
    });
  }
}

We load the Pickr class from the node module at the top of the stimulus controller file along with the stylesheet.

NOTE: Do NOT load the stylesheet if already imported in app/javascript/packs/application.js

import Pickr from "@simonwep/pickr";
import "../stylesheets/color_picker.css";

We have two stimulus targets.

static targets = ["picker", "input"]

this.pickerTarget

This is the HTML element we will be using to initialize the Picker class with. It will turn the element into a Picker button.
this.inputTarget

This Is the HTML form input we will fill after a color has been selected/picked.

We use the initialize() stimulus lifecycle function:

initialize() {
  this.initPicker();
}

To call this.initPicker() which contains all of the logic to intialize the Pickr component.

We set an instance of the Pickr class to this.picker in order to use in the callback.

initPicker() {
  this.picker = Pickr.create(...)

  //ect...
}

The create settings were provided by the Picker README with the exception of setting el and default.

el: this.pickerTarget,
default: this.inputTarget.value,

This uses the controller’s this.pickerTarget to set the picker element, and the value of this.inputTarget to initialize the Picker with.

We then use the on save Pickr callback in order to:

Set the input field’s value
Hide the widget

After a user has clicked “Save” on the Color Picker.

this.picker.on("save", (color, _instance) => {
  this.inputTarget.value = color.toHEXA().toString();

  this.picker.hide();
});

Final Touches

Now all we have to do is update our form partial to utilize the color-picker controller.

app/views/color_options/_form.html.haml

= form_with(model: local_assigns[:model], local: true) do |f|

  .field{ data: { controller: "color-picker" } }
    = f.text_field :font_color, data: { target: "color-picker.input" }
    %div{ data: { target: "color-picker.picker" } }
    = f.label :font_color

  .field{ data: { controller: "color-picker" } }
    = f.text_field :background_color, data: { target: "color-picker.input" }
    %div{ data: { target: "color-picker.picker" } }
    = f.label :background_color

  .field
    = f.submit

Bold + Italic Font in TMUX

Sat, 28 Mar 2020 18:30:21 -0500

You have just installed a hip new font face for programming. It has the all of the bells and whistles including bold and italic font styles. 🤙

You configure your terminal to use the new font, and start typing away.

….WHAT???….Its not working….🙄

Has this happened to you before?

There is always some caveat when tweaking your work environment no matter how trivial.

This guide will briefly outline the solutions I came across to get bold and italic font styles working Vim/NeoVim running within a TMUX session, from a GNOME terminal shell.

The Problem

The bold and italic font faces were not properly working in a Tmux session. But they were working outside of Tmux in a gnome terminal.

I came across this Tutorial and it got me close to a solution. But there were issues.

Step 3 in the tutorial did not work for me, so I had to rely on exporting the TERM env variable previous to running tmux command. (Per the instructions)

env TERM=screen-256color tmux

This worked for me. The bold and italic fonts are now working within Tmux.
Add this to the .zhrc configuration file to make an alias to prevent from having to explicitly set the TERM environment variable.

~/.zhrc

alias tmux="env TERM=screen-256color tmux"

Cursor Issues

In Vim and NeoVim I have the options to allow for block cursor shape when in normal mode and line shape when in insert mode.

~/.config/nvim/init.vim

if &term =~ "screen."
   let &t_ti.="\eP\e[1 q\e\\"
   let &t_SI.="\eP\e[5 q\e\\"
   let &t_EI.="\eP\e[1 q\e\\"
   let &t_te.="\eP\e[0 q\e\\"
else
   let &t_ti.="\<Esc>[1 q"
   let &t_SI.="\<Esc>[5 q"
   let &t_EI.="\<Esc>[1 q"
   let &t_te.="\<Esc>[0 q"
endif

This code is for displaying the desired cursor dependent on being in a remote session or not.

Unfortunately the font solution broke the cursor shape for Vim, running in Tmux. The fix from above was only showing the line shape cursor.

I found this solution from a neovim document

Which instructed me to add an override to ~/.tmux.conf file

~/.tmux.conf

set -ga terminal-overrides '*:Ss=\E[%p1%d q:Se=\E[ q'

How to use Rails Active Record Relation method #delete_all

Wed, 23 May 2018 18:30:21 -0500

What You Will Learn

How to use ActiveRecord::Relation#delete_all - A fast way to delete a large batch of rows from a Database table
How to use ActiveRecord::Batches::BatchEnumerator#in_batches - To prevent from locking your Database

Who This Is For

Ruby on Rails developers who need to delete records more efficiently.

Requirements

Ruby on Rails >= 5.0
Relational Database like MySQL or PostgreSQL

Overview

I am currently working on a Rails project that deals with importing and exporting large amounts of data from excel sheets. The user is able to import and save the data into the application’s Database and also delete the data.

Because some of these deletions can consist of hundreds of thousands of rows, the removal feature must be developed a little differently.

Setup

When a User imports/uploads new data into the application, aDataUpload record is created, along with a new DataSet record, for every single row from the imported exec sheet.

The model DataSet has a belongs_to relationship to DataUpload.

app/models/data_set.rb

class DataSet < ApplicationRecord
  belongs_to :data_uploads
end

The model DataUpload has a has_many relationship to DataSet.

app/models/data_upload.rb

class DataUpload < ApplicationRecord
  has_many :data_sets, dependent: :destroy
end

Notice the dependent: :destroy. This means that when a DataUpload record gets deleted/destroyed, all of the associated DataSet records will be destroyed as well.

This also loads every associated DataSet model instance into memory as well. This will bog down the server if there is a very large association of thousands of DataSet records.

The way we solve this is to use the ActiveRecord::Relation#delete_all. This method performs a single SQL statement and efficiently deletes all of the records within the Relation.

Look at the example below.

upload = DataUpload.last
data_sets = upload.data_sets

data_sets.delete_all

WARNING

DO NOT use this method on more then 5,000 records in a Database table. It will lock the Database for the entire transaction.

#delete_all does not load the record, so any callbacks will not be fired. Make sure the application and/or model is not dependent on any pre/post delete processes.

Now we can implement the method in the in the DataUpload callback.

app/models/data_upload.rb

class DataUpload < ApplicationRecord
  has_many :data_sets, dependent: :delete_all
end

BUT WAIT!! If you were a good reader and saw the first WARNING above you will notice that if I left the code this way and a particular DataUpload instance had an association of more then 5,000 DataSet records… the Database will lock for the entire transaction. To prevent from this we must utilize one of the Ruby on Rails 5.0 methods #in_batches

If you are not use a Rails version that is >= 5.0 then check out the gem delete_in_batches

app/models/data_upload.rb

class DataUpload < ApplicationRecord
  has_many :data_sets

  before_destroy :destroy_data_sets

  private

  def destroy_data_sets
    data_sets.in_batches(of: 1000).delete_all
  end
end

First we remove the previous callback dependent: :delete_all, and replace it with before_destroy callback and pass in the new private method #destroy_data_sets.

You will notice that #in_batches takes an option :of set to 1000. This will limit the amount of records deleted in a single SQL transaction to 1,000. Thus preventing the Database from locking.

Using Chrome Driver For Headless Scraping and Downloading

Fri, 20 Apr 2018 18:30:21 -0500

What You Will Learn

How to use a non headless web driver on a headless server.
How to setup the Chrome Driver with Selenium and Capybara.
How to set up the driver to allow for automatic browser downloads.

Who This Is For

Ruby developers wanting to use the Chrome Driver for their browser automations.
Coders looking for a solution to headless file downloads using the browser.
Coders that need to run a non headless web driver in a headless environment.

Requirements

Ruby
Capybara and Selenium installed.
Framework(ex Rails) or program utilizing the above libraries.

Overview

Recently I was making some scrapers for a client who needed pdf’s downloaded. The program runs on a AWS Ubuntu server and is developed with the Ruby language and the Capybara library. Because this is running in a headless environment I decided to go with Phantom JS as my web driver using Poltergeist gem to integrate it with Ruby and Capybara. I use this driver for integration testing when developing in Rails and have found it accomplished most of what I asked of it, without having to rely on the Selenium Library

Most of the pdf’s I was scraping came from websites that would render them at URL endpoints. This allowed me to just scrape the URL string with Phantom JS and use the Ruby module open-uri to handle the downloading of the actual pdf document.

Well unfortunetly I ran into a situation where the website would only let the user download the pdf as a file-attachment. You cannot download files from the browser using Phantom JS. This makes sense considering the whole point of Phantom JS is that it is truley headless driver.

I would have to bring in Selenium after all. Selenium is the end all be all of automated browser interaction libraries. You can utilize several different web drivers with it, and integrate it with Capybara. This allowed me to use Selenium in replace of Poltergiest without having to change any of my code.

I decided to go with the Chrome Driver because I when I was researching how I could download the pdf’s using a headless driver someone suggested that the Chrome Driver had a new headless feature that would allow for downloading.(nope!)

I plugged it in and started running the headless feature as I would Phantom JS. I actually really enjoyed the speed and performance of the driver. I might start using it as my integration driver from now on. Unfortunetly, it would not allow for downloads using the browser while using headless mode.(at least at this point)

However, I was able to download the file using the non-headless mode of the Chrome Driver.

Code

The following is for installing the driver on Ubuntu

Make sure Chrome is installed. Install Options

Download and extract the Chrome Driver from the Download Link . Then move the extracted binary driver file to “/usr/local/bin”

There are some preferences and arguments you have to send/set in the Chrome Driver to be able to download files from the browser. These will allow the browser to immediately download the file without having to accept the save_as prompt that ususally pops up. You will also have to tell the driver what folder you would like the files to be downloaded to.

config or initializer file

def driver_options
  download_directory = './downloads/'

  { args: ['test-type', 'disable-extensions'],
    prefs: {
      plugins: { always_open_pdf_externally: true },
      savefile: { default_directory: download_directory },
      download: { prompt_for_download: false,
                  default_directory: download_directory }
    }
  }
end

Above I have wrapped the options within a ruby function. I will call this function when passing the parameter option [:chromeOptions] to the #chrome method for Remote::Capabilities. This takes place below when registering the driver with Capybara.

config or initializer file

Capybara.register_driver :chrome do |app|
  capabilities = Selenium::WebDriver::Remote::
    Capabilities.chrome(
      chromeOptions: driver_options
    )

  Capybara::Selenium::Driver.new(
    app,
    browser: :chrome,
    desired_capabilities: capabilities
  )
end

Capybara.ignore_hidden_elements = false

The hash from the function #driver_options() gets parsed by the Selenium Library and then passed to the chrome driver.

If you want to see a complete list of options that you can pass to the chrome driver check out this stacked overflow response

Now when I run the scraper locally using …

Command Line

bundle exec rake scrape_pdfs

The chrome browser window pops up and runs through the list of the Capybara session commands, navigating to the download link, and then clicking the link. This is where the driver options come to play and automatically save the file to the proper directory.

Great! But I need this same thing to happen on the AWS with no monitor. What am I to do?

Well that is where Xvfb comes it. It creates a virtual monitor and allows you to use non headless web drivers in headless environments.

Xvfb Tutorial

As long as Xvfb is properly installed all you need to do is pass the command that kicks off your Capybara Session to the “xvfb-run” command.

Command Line

xvfb-run bundle exec rake scrape_pdfs

I can no longer watch the scrape occur on my monitor, but after the program is done running, I can verify it worked by finding a freshly downloaded pdf in my “./downloads” folder.

And there you have it a simple way to run non headless Chrome Driver session in a headless server environment, in order to download files using the browser.

Notes

The default screen size for the “xfvb-run” command is fairly small. So if you are interacting with a responsive website and need you change the virtual screen dimensions run the command like so…

Command Line

xvfb-run --server-args='-screen 0 1024x768x24' bundle exec rake scrape_pdfs

Installing Raspberry Pi OS on SD card

Mon, 27 Feb 2017 18:30:21 -0500

Overview

A Raspberry Pi is an $35 dollar computer that is the size of a credit card. It can be utilized in everything from DIY home projects to missle guidence systems.

This tutorial will demonstrate the process of installing an operating system on the device. Although it is aimed at beginners, we will be using the command line. Don’t worry though, the goal is to ease newbies into command line, as you are sure to come across it again and again in future raspberry pi endeavers.

Items Needed

For this tutorial you will need the following items…

Computer with OSX (Unix) or Linux installed
Raspberry Pi
MicroSD card (4gb minimum)
SD adapter (comes with the microSD card)
SD card reader (internal or external)

Step 1. Choose an operating system

Although there are many different raspberry pi operating systems (aka distributions) that range in functionality, the installation process of these operating systems are for the most part, all the same.

For this tutorial we will be installing the RetroPi OS, which turns the Pi into a emulation station for gaming.

Step 2. Download and Extract the operating system

From your OSX or Linux computer, download and extract the .img file of the operating system you will be installing.

Step 3. Find the pathname of the extracted Image file.

Everything on a computer is a file. And all of these files have pathnames. One way to discover the pathname is as follows..

Right click on the extracted Image (.img) file from STEP 2 and select “Get Info” (OSX) or “Properties” (Linux). Within the window that pops up, under “Where:” for OSX you will see a pathname that looks similar to this

/Users/chris/Downloads/the_file_name.img

For Linux users, under “Location:” you will see a pathname that looks similar to this

/home/chris/Downloads/the_file_name.img

On your computer ‘chris’ will be replaced with your username, ‘Downloads’ will be replaced with whichever folder the .img file is contained in.

We will need this pathname later in the tutorial, so copy it down.

Step 4. Connect the microSD card to your computer

Insert the microSD card into the SD adapter. Plug the SD adapter card into the SD card reader. If the card reader is external, you may now plug the card reader into the computer.

Step 5. Find the SD card partition pathname

Now we must find the pathname of the SD card partition (aka region). So how would go about repeating process in Step 3 and right clicking the SD card reader file?

Well we could try sifting through system folders with the mouse to find the correct file, but that would take too long. The computer can just tell us the pathname if we ask it.

This is where the command line comes in. Now don’t be scared. Although the command line can be intimidating, it is fairly easy to use.

We can use the command line to tell the computer to do things. In this case, will will be entering a command that tells the computer to display information for us.

Open the Terminal application on your computer. Here is the command we are going to type into the terminal (aka command line)

sudo fdisk -l

Lets break down this command.

“sudo” stands for superuser, and it gives us “superuser” privileges in order to have access to the “fdisk” command.

“fdisk” stands for “fixed disks”.

The “-l” at the end of the command stands for “List”, and is a “fdisk” option flag.

If you want a closer look at the capabilities of the commands, you can type “man” (manual) + the command. For instance

man sudo

will show us all of the capabilities of “sudo” and how to use it. You can do the same for “fdisk”.

man fdisk

Do yourself a favor and scroll through the manual pages for each command and take note of the format similarities. All “man” (manual) pages for commands will be in this format. So if you are ever unsure of how a command works, just read up on it using “man”.

Alright so now that you know what the command is doing, type out the full command and press enter.

Because we used “sudo” (superuser) in this command, it will ask for a password. Type your username’s password and press enter. (The traditional dots or ‘*’ asterisk that appear when you type your password will not do so in the command line. This is normal.)

You should now see a list of columns. Look for the column with the header labeled “Size” and look the corresponding amount that your SD card has available on it. The size will usually be a couple hundred megabytes less then the full capacity of the card. So for instance I am formatting a 8gb SD card and it shows up in the size column as 7.2gb. The column with the header labled “Device” is the pathname of the card partition.

If the card reader is external the pathname should look similar to

/dev/sdc1

If it is internal the pathname should look similar to

/dev/mmcblk0p1

This is the file pathname for the partition on the SD card. Copy down this path name which will be used in the following step.

Step 6. Unmount the SD card

Before we can format the card in the next step, we must unmount it. This is accomplished by entering another command in the (not so scary) command line.

sudo umount the_pathname_from_step5

So the command for this demonstration will be

sudo umount /dev/mmcblk0p1

Step 7. Format the SD card

In order to format the SD card, we will need the pathname of the SD card reader. Fortunetly, this is as easy as modifying the pathname used in the last step. For external card readers remove the last character from the pathname.

/dev/sdc1

Turns into

/dev/sdc

For internal readers, remove the last 2 characters. ‘/dev/mmcblk0p1’ turns to ‘/dev/mmcblk0’.

/dev/mmcblk0p1

Turns into

/dev/mmcblk0

Now that we have the pathname of the SD card reader, it is time to format the card. The command is

sudo fdisk the_pathname

So for this demonstration I will enter

sudo fdisk /dev/mmcblk0

Once you enter the command it may ask for your password again (because we are using “sudo”).

You should now see a menu for “fdisk” within the command line. Now you can enter menu commands. As you can see, if we type and enter ‘m’, we will be shown the help menu. This displays all of the available commands we can enter within the “fdisk” menu. We first are going to delete any existing partitions on the SD card. We do this by entering the simple command

My card had 2 existing partitions so after I entered the above command I saw the below screen.

SCREEN HERE

It tells me there are 2 partitions on the card and the default partition is 2. It wants me to tell it which one to delete by entering either “1”, “2”, or nothing at all (since the default is 2). I will enter 2, although I could just press enter and I should see the same screen as below.

SCREEN

In order to delete the last partition enter the command

one more time. Since there is only one left we should automatically be presented with the prompt

Partition 1 has been deleted

We will now add a new partition to the SD card.

This is accomplished by entering the command

(Remember you can see where these commands are coming from by entering “m” for the help menu) We will now be presented with the following prompt

Partition type
 p   primary (0 primary, 0 extended, 4 free)
 e   extended (container for logical partitions)

The prompt asks for the “Partition Type” and the options are “p” for primary and “e” for extended. We want this new partition to be primary so enter the command

We will now be presented with following prompt

Partition number (1-4, default 1):

Enter

We will now be presented with following prompt

First sector (2048-15130623, default 2048):

Just press enter without typing anything else, for the default 2048 selection. We will now be presented with following prompt

Last sector, +sectors or +size{K,M,G,T,P} (2048-15130623, default 15130623):

Just press enter without typing anything else, for the default 15130623 selection. (Feel free to read up more on sectors)

We will be presented with following prompt

Created a new partition 1 of type 'Linux' and of size 7.2 GiB.

Beautiful! Except we want the partition type to be “FAT32” not “Linux”. We can do this by entering the command

We will be presented with following prompt

Selected partition 1
Partition type (type L to list all types):

Enter the command

We will be presented with all of the different foramt types. W95 FAT32 is the format we are looking for. On my machine it is toward the beginning of the list. Once you find it, take note of the code beside it (mine is “b”).

Type the code that was beside “W95 FAT32” and press enter. In my case

Now enter the command

We should see that the newly created partition has a type of “W95 FAT32”.

Now we must write all of our changed to the card in order to finalize the formatted partition. Enter the command

We will be presented with following prompt

The partition table has been altered.
Calling ioctl() to re-read partition table.
Syncing disks.

Success! It will exit out of the ‘fdisk’ program after writing. Now for the last step in formatting the card. We must create a file system on the new clean partition we just created on the SD card. This is accomplished with the commmand

sudo mkfs.vfat partition_pathname_from_step5

So the command I entered is

sudo mkfs.vfat /dev/mmcblk0p1

Step 8. Install the .img file onto the SD card

Now for the last and final step of the tutorial. To install the the operating system onto the SD card we will need the pathname of the Image (.img) file from step 3, and the pathname from the card reader (the modified partition pathname) from the beginning of step 7.

The command will be

sudo dd bs=1M if=image_pathname of=card_reader_device_pathname

Note, if you are on a OSX(Unix) computer, the above “M” command will need to be lowercase “m” instead.

This is the command I entered

sudo dd bs=1M if=home/chris/Downloads/retro_pi.img of=/dev/mmcblk0

Once you have entered the correct command, the installation will begin. This take a while and you will just see a blinking cursor. As long as it’s blinking that means it is writing the Image (.img) file to the SD card. On my machine it was almost 5 minutes per gigabyte. So just hang in there!!

Conclusion

Once the installation is complete, you can eject the SD card from your computer and insert the microSD card into your Raspberry Pi. And if everything goes well, you should witness your Pi boot up with installed operating system. Congradulations! You just installed a operating system using only the command line, that wasn’t so hard was it?

If you have any questions, issues, or advice, please send me an email and I will be more then happy to respond.

How I Made a Typing Speed Calculator

Thu, 26 Mar 2015 12:01:27 +0000

Overview

Volt is a new Ruby framework that allows your Ruby code to run on both the server and the client. It uses the opal gem to compile the Ruby code to Javascript.

I suggest watching the Intro to Volt video, that goes over how to set up a to-do list in under 20 minutes. It is very comprehensible and showcases the magic of Volt.

In this tutorial you will learn how to create a typing speed calculator that updates as the user types in real time (like this one).

We will cover how to:

Install the Volt Framework
Generate new Volt application
Use reactive form input
Create backend code for the typing calculator
Enable Bootstrap Animation

Installation

First we need to install the Volt framework:

gem install volt

Once installed, create a new Volt project:

volt new typing-calculator

cd typing-calculator

If you are using git for version control and plan on pushing your app up to github, you must get rid of your secret key. Just open up the app.rb in your applications config directory…

config/app.rb

And delete the string labeled config.app_secret

SetUp

Fire up the Volt server which automatically pushes any changes you save to anyone viewing the page.

bundle exec volt server

Open your browser and type “http://localhost:3000/” in the address bar. This will bring you to the homepage of your new app. The template already includes a login link for in the navigation. We won’t be needing users to sign up or log in for this project so go ahead open the project in your favorite editor and locate the main.html file.

app/main/views/main/main.html

And comment out the user templates

.
.
.
<:Body>
  <div class="container">
    <div class="header">
      <ul class="nav nav-pills pull-right">
        <:nav href="/" text="Home" />
        <:nav href="/about" text="About" />
    <!--    <:user-templates:menu /> COMMENT ME OUT -->
      </ul>
      <h3 class="text-muted">typing-calculator</h3>
    </div>
.
.
.

You can also comment out the routes for signing in and logging in as well.

app/main/config/routes.rb

# See https://github.com/voltrb/volt#routes for more info on routes

get '/about', _action: 'about'

# Routes for login and signup, provided by user-templates component gem
#get '/signup', _controller: 'user-templates', _action: 'signup'
#get '/login', _controller: 'user-templates', _action: 'login'

# The main route, this should be last. It will match any params not
# previously matched.
get '/', {}

Reactive Form Input

Locate the index.html file within views and add some content along with a form to get user input.

app/main/views/main/index.html

<:Title>
  Typing Calculator

<:Body>
  <h1>Words Per Minute Typing Calculator</h1>

  <form e-submit="complete" role="form">
    <div class="form-group">
     <label><h3>Begin Typing</h3></label>
     <input class="form-control submit-field" type="text"
            value=" {% raw html %}{{page._user_string}}{% endraw %}">
    </div>
  </form>

The input value for the form {% raw %}{{ page._user_string }}{% endraw %} is a piece of Ruby code. Anything within the double curly brackets {% raw %}{{ ruby_function }}{% endraw %} is executed as ruby code. In this case we are creating a page collection. In Volt, there are several types of collections to store data. Page collections are temporary, meaning they will lose their data once you refresh or visit a different page. We will not be using more that one page, so page collections are perfect for this project.

This form/input field is where the users will begin typing. The data we get from this form is how we will calculate the typing speed of the user.

Now we need sample text that the user will type. This can be any chunk of text you want to use. We will start by defining a function in the app controller that returns the text.

app/main/controllers/main_controller.rb

class MainController < Volt::ModelController
  def index
    # Add code for when the index view is loaded
  end

  def about
    # Add code for when the about view is loaded
  end

  def sample_text
   "In Volt, to simplify managing application state, all application state is kept in models that can optionally be persisted in different locations. By centralizing the application state, we reduce the amount of complex code needed to update a page. We can then build our page's html declaratively."
  end
end

Now add the newly defined method to the home-page

app/main/views/main/index.html

<:Title>
  Typing Calculator

<:Body>
 <h1>Words Per Minute Typing Calculator</h1>

 <h3>Sample Text</h3>
 <p>{%raw ruby%}{{sample_text}}{%endraw%}</p>
.
.
.

Words Per Minute(WPM) Calculations

Now we can work on the back end code. This will compare the users input with the sample text and calculate how much time has passed.

How to Calculate Typing Speed (WPM) and Accuracy is what I used to come up with the back end. Browse through the article in order to get a deeper understanding of the code.

In order to compare the sample text with the user input we must split the strings and put them into an array.

Create two functions in the controller that handle this task.

app/main/controllers/main_controller.rb

class MainController < Volt::ModelController
  .
  .
  .
  def sample_array
    sample_text.split
  end

  def user_array
    page._user_string.split
  end
  .
  .
  .

You can do this right on the home page for now in order to help you visualize.

app/main/views/index.html

<b>sample text array</b>
<p>{{sample_array}}</p>

<b>user text array</b>
<p>{{user_array}}</p>

Now we have to create a function that compares the two arrays, and gives us an array of user mistakes.

app/main/controllers/main_controller.rb

.
.
.
def mistakes_array
  popped_array = user_array
  popped_array.pop
  mistakes = popped_array - sample_array
end
.
.
.

The reason we set a new variable to the “user_array” and “pop” that new variable is because you do not want the current word that the user is typing to count as a mistake. You only want completed words to be considered.

Add the ‘mistakes_array’ function to the home page to get an idea of what I am talking about.

app/main/views/index.html

<b>mistakes array</b>
<p>{{mistakes_array}}</p>

As you can see in the photo above, the second mistake will not count until the user starts a new word following the mistake.

We can use the mistakes_array to find the users accuracy. But before writing the accuracy method, we must create one the finds the total number of characters in an array.

app/main/controllers/main_controller.rb

def character_length(array)
  array.join.length
end

def accuracy
  correct_characters = character_length(user_array) - character_length(mistakes_array)
  fraction = correct_characters/ character_length(user_array)
  accuracy_percentage = (fraction * 100).round
end

Dividing the total character length of the ‘user_array’ by only the ‘correct_word_length’ gives us a decimal/fraction that we multiply by 100 to get the accuracy percentage.

Per SpeedTypingOnline.com, when calculating a typing speed, a WORD is any “5 characters”. Lets create the function to find the number of words in the controller.

app/main/controllers/main_controller.rb

def word_num
 character_length(user_array) / 5
end

Feel free to add your new “word_num” and “accuracy” functions to the the home page if you want to see them in action.

app/main/views/index.html

<p>{{word_num}}</p>
<b>number of words</b>

<p>{{accuracy}}</p>
<b>accuracy</b>

Now it’s time to create the methods that will allow us to calculate how much time has passed.

app/main/controllers/main_controller.rb

def time_elapsed
  if page._user_string.length == 1
    @start_time = Time.new
  elsif page._user_string.length == 0
    @start_time = 0
  end

  minutes = (Time.now - @start_time).round / 60
end

The if-statement allows the timer to start only when the user starts typing. The function then returns the amount of time elapsed in minutes. The if-statement also allows the timer to restart once the user clears out the form.

By dividing the elapsed time in seconds by 60, the function returns the number of elapsed time in minutes.

Now that we have the time, we can find the gross words per minute.

app/main/controllers/main_controller.rb

def gross_wpm
  (word_num / time_elapsed).round
end

Using the ‘gross_wpm’ function we can find the net words per minute, which is what will give us our final words per minute calculation.

def net_wpm
  errors_per_min = (mistakes_array.count / time_elapsed).round
  gross_wpm - errors_per_min
end

Now that we have the net words per minute typed we can use that function in a bootstap progress bar. This is one of several ways you can use reactive form input to control real time animation on your page.

app/main/views/index.html

<div class="progress">
  <div class="progress-bar progress-bar-{{ if net_wpm > 60 }}success
                          {{elsif net_wpm > 31 }}warning
                          {{else}}danger{{end}}
              progress-bar-striped" role="progressbar"
              aria-valuenow="{{net_wpm}}"
              aria-valuemin="0"
              aria-valuemax="100"
              style="width: {{net_wpm}}%">

     <span class="sr-only">{{net_wpm}}%</span>
  </div>
</div>
.
.
.
<p>{{net_wpm}}<p>
<b>net wpm</b>

<p>{{gross_wpm}}<p>
<b>gross wpm</b>

ALL DONE

Now we have a working application, you can style and animate it how ever you’d like. This is your chance to be creative with new features. Leave a comment below and share with me what you’ve come up with.

Here is an example of my design.

The above site is hosted on Heroku @ https://typing-calculator.herokuapp.com/

You can view the code for this application on my Github

Code Newbie Podcast

Thu, 19 Mar 2015 12:01:27 +0000

Overview

The Code Newbie website and community are priceless tools for beginners. They offer several resources to help you along your programming journey.

My favorite of these resources is the podcast. The interviewer and founder of Code Newbie, Saron Yitbarek, does an absolutley fantastic job at keeping the podcast organic as well as informative.

There are plenty of podcasts I listen to that forget that not all listeners can keep up with pacing and terminology. Saron does a tremendous job of having herself and guests re-clarify things when they start to get abstract. Even the tone of her voice is very calm and reassuring which I think rubs off on the guests and allows them to be very natural during the interview.

Subject Matter

The shows them selves each feature one guest and range from subjects like…

This month Code Newbie is teaming up with another one of my favorite podcasts Hansel Minutes and doing March is for Makers. Each podcasts in the month of March involve hardware, and both shows have had really good content so far.

Bottom Line

You do not have to be a beginner to appreciate all of the amazing things Code Newbie has to offer. Go head over to the website now and become part of a wonderful community.

My first Pull Request

Wed, 18 Mar 2015 12:01:27 +0000

Overview

About a month ago I was searching for a local user-group of Ruby programmers, and luckily came across the Tech Valley Ruby Brigade. Even more lucky, their website needed a modern design update and they provided the repository on github for anyone to grab.

It was a perfect opportunity for me to learn how to submit a pull-request and at the same time a good ice-breaker for the first time I would attend the user-group meetup.

Things You Will Learn

Through my experience I will go over how to…..

Fork a repository
Clone a repository
Commit and push new branch with changes
Submit a Pull-Request

1. Fork the repository

I went to the github repository for the website that I wanted to work on. Once there, I clicked the “Fork” button in the top right corner.

This copies the entire repository of the website right onto my personal github account.

2. Clone the repository

Next I had to clone the forked repository from my github account to my local machine. By going to terminal and entering the following command.

	chrislabarge$ git clone https://github.com/chrislabarge/techvalleyrb.github.com.git

You can get the url path of the above command from the forked repository on your github account by copying from and pasting into the command-line.

3. Create a new branch

Once I had the repository cloned onto my machine, I created a new branch from the master and named it “updating-bootstrap”. Creating a new required in order to make changes.

	chrislabarge$ git checkout -b updating-bootstrap

At this point I was able to start making changes. I updated the css bootstrap framework for the website and took advantage of the responsive grid design.

Note

Normally you would not want want to perform any MAJOR adjustments on your contribution

4. Add and commit any changes

Once I was satisfied with my changes, I added all of the newly changed files…

   chrislabarge$ git add -A

And then made a commit.

	chrislabarge$ git commit -m "updated the bootstrap version and put the content into grid format"

5. Push the branch to Github

After I made the commit, it was time to push the branch up to my github.

	chrislabarge$ git push origin updating-bootstrap

6. Final- Submit a Pull-Request

It was finally time to show off my changes and submit a pull-request. I went back to the original repository of the website, the one I went to in step 1. And clicked the green button below.

Next, I selected my branch to compare, (updating-bootstrap) and clicked “Create pull request”. (The compare branch in the photo below says testing, it should be updating-bootstrap.)

Nightcrawler - Movie Review

Mon, 16 Mar 2015 12:01:27 +0000

Overview

This Dan Gilroy film (director and writer) starring Jake Gyllenhaal was the the first film I saw this year, and I couldn’t have been more pleased.

Not only is the acting, music and cinematography top notch but it gives an extraordinarly intimate view local news media. Which in my opinion is a very fascinating subject given thats almost everyone consumes. If you are familiar with the television show The Wire , each season examines a different part of the city of Baltimore. My favorite, season 5 which focus’s on the local newspaper, in particular, which articles made it to print.

This film follows that season’s same type of news transparency but instead, on the ground floor of a Los Angeles tv newsroom. As Wire fans might have guessed, it is all about ratings, bottom line. Morals and integrity gets thrown out the window when it all boils down to numbers.

Main Character

This is where the main character Louis (Gyllenhaal) comes in. Right off the bat, the director shows you what Louis is capable of…Anything. The first scene, very effectively, showcases his sociopathic behavior and sets up an infinite amount of suspense for the remainder of the movie.

Louis gives an amazing sense of robotic intellect. Not only is he highly educated, but he knows it. The only problem is he seems to be lacking a sort of organic human interaction/empathy.

He sees the system for what it is, to him its all numbers. He is capable and willing of anything as long as he is ahead in the system.

Plot

After capturing some very amateur video, Louis stumbles into the editing room of executive producer Nina Romina’s (Rene Russo) news station, attempting to sell his footage. Let’s just say he THRIVES in the environment.

He quickly evolves from an amateur to a professional free-lance video journalist in no time at all. Learning all the tricks of the trade, and understanding what sells, he begins to manipulate. Not only the people around him,(Nina as well as Louis’s new intern Rick) but the actual crime scenes he is filming.

By the time this manipulated footage makes it to air, Nina has added her own spin to give the local audience exactly what they want. The content being broadcasted is a mix between reality and a production. The lines are so far blurred, that it doesn’t even matter what is real or not, the only thing that matters is the ratings.

Conclusion

There is so much going on in this movie, I could write pages and pages. And in fact, my earlier drafts touched on many, many more elements. But I realized I wanted to do a movie review rather than an analyzation.

That is what is so awesome about this movie. It throws so much at you. There is so many artistically crafted scenes as well as ideas in this movie, I’m amazed the creator Dan Gilroy was able to fit in all in a cohesive and non-stop 117 minute ride.

The performances from the cast, especially Gyllenhaal and Russo, are fantastic. The music score compliments each scene perfectly. And the cinematography is so well choreographed, you feel as if you are right by Gyllenhaal’s side, capturing video with him.

If you haven’t yet, GO WATCH THIS FILM!!