Sayanee

Web control panel for Neopixel

2016-11-03T00:00:00+00:00

Recently, I fell in love with the simple RGB LED 💡

I love connecting physical things and displaying them on a web browser! So I thought of getting the Neopixel ring and displaying different colored lights and patterns through the control of the web interface. Here are some steps to make that...

What we need

60 LED Neopixel ring + USB cable
Arduino + USB cable for power
Jumper wires
470Ω resistor
1000uF capacitor

Assemble the Neopixel Ring

Get the 60 LED Neopixel ring as 4 pieces of 15-pixel quarters
Refer to the detailed Adafruit's guide on Neopixel
Solder 3 out of the 4 joints from GND to GND, DIN to DOUT, 5V to 5V
Solder GND, DIN and 5V to 3 wires at the 4th (last) joint
Create a USB cable with 2 wires sticking out at the other end by striping of the wires at the end. This will provide +5V DC from a power supply to the Neopixel.
Wire up with an Arduino's digital pin PIN 6, 470Ω resistor and 1000uF capacitor. Source: Adafruit Neopixel Uberguide - basic connectors

Blinky with Arduino

Open up the Arduino IDE
Install Adafruit's Neopixel library from Sketch > Include Library > Manage Library
Create new neopixel project with neopixel.ino file
Write some code to blink the LED10 and LED11 every 1 second in red color

  #include <Adafruit_NeoPixel.h>

  #define PIN 6 // Arduino's PIN 6
  #define N_LEDS 60 // 60 pixel

  Adafruit_NeoPixel strip = Adafruit_NeoPixel(N_LEDS, PIN, NEO_GRB + NEO_KHZ800);

  void setup() {
    strip.begin();
  }

  void loop() {
    // LED ON in red
    strip.setPixelColor(10, strip.Color(255, 0, 0));
    strip.setPixelColor(11, strip.Color(255, 0, 0));
    strip.show();
    delay(1000);

    // LED OFF
    strip.setPixelColor(10, 0);
    strip.setPixelColor(11, 0);
    strip.show();

    delay(1000);
  }

Compile and upload to see the red led blinking every 1 second!

Control via the Web

Instead of using Arduino code, we will now flash firmata to the Arduino so that Johnny-Five JavaScript framework can talk to the Arduino. Using the same JavaScript code, we can also insert the code for a web server and serve an html page to control the LED light patterns.

Install some node.js dependancies like express, johnny-five, neopixel and interchange

  npm i express johnny-five node-pixel nodebots-interchange

Ensure the Arduino is connected to your computer
Flash the firmata to the Arduino using interchange

  interchange install git+https://github.com/ajfisher/node-pixel -a uno --firmata

Create a node.js file index.js

  var five = require('johnny-five')
  var pixel = require('node-pixel')
  var express = require('express')
  var app = express()
  var board = new five.Board({
    port: process.argv[2] || ''
  })
  var strip = null
  var blinker

  app.use(express.static(__dirname))

  var server = app.listen(3000, function () {
    console.log(`Example app listening at http://localhost:${server.address().port}`)
  })

  board.on('ready', function() {
    strip = new pixel.Strip({
      data: 6,
      length: 60,
      color_order: pixel.COLOR_ORDER.GRB,
      board: this,
      controller: 'FIRMATA',
    })

    strip.on('ready', function() {
      strip.off()

      // add routes for different LED patterns
      // extend to add http routes...
    })
  })

Extend index.js to add http routes for various LED controls

  app.get('/red', function(req, res) {
    clearTimeout(blinker)
    strip.color('#100')
    strip.show()
    res.redirect('/')
  })

  app.get('/green', function(req, res) {
    clearTimeout(blinker)
    strip.color('#010')
    strip.show()
    res.redirect('/')
  })

  app.get('/blue', function(req, res) {
    clearTimeout(blinker)
    strip.color('#001')
    strip.show()
    res.redirect('/')
  })

  app.get('/clear', function(req, res) {
    clearTimeout(blinker)
    strip.off()
    res.redirect('/')
  })

  app.get('/panel', function(req, res) {
    var colors = ['red', 'green', 'blue', "yellow", "cyan", "magenta", "white"]
    var current_colors = 0

    blinker = setInterval(function() {
      if (++current_colors >= colors.length) current_colors = 0
      strip.color(colors[current_colors])
      strip.show();
    }, 1000)

    res.redirect('/')
  })

  app.get('/breathe', function(req, res) {
    var color = 0
    var rising = true
    var max = 50
    var min = 0

    blinker = setInterval(function() {
      if (rising) {
        color++
        if (color >= max) {
          rising = false
          color = max
        }
      } else {
        color--
        if (color <= min) {
          rising = true
          color = min
        }
      }

      strip.color('rgba(' + color + ',' + color + ',' + color + ')')
      strip.show();
    }, 20)

    res.redirect('/')
  })

Add index.html in the same folder as index.js

  <ul>
    <li><a href="/red">red</a></li>
    <li><a href="/green">green</a></li>
    <li><a href="/blue">blue</a></li>
    <li><a href="/clear">clear</a></li>
    <li><a href="/panel">panel</a></li>
    <li><a href="/breathe">breathe</a></li>
  </ul>

Plug in the Arduino to the laptop, plug in the neopixel to USB power and start the node server

  node index

Visit the browser at localhost:3000
Click the web controls and see the colors and patterns on the LED

This is just the simplest example case to get started with the Neopixel ring, but the combinations and patterns can be limitless!

Beaglebone and Go

2016-10-02T00:00:00+00:00

I have been busy learning 2 new things: Beaglebone, a single board computer and Go, a programming language. It was especially fun running a compiled Go script and playing with the GPIO pins of the Beaglebone. In this blog, I wanna share how to run a simple digital write with a blinky LED and read analog values from a potentiometer.

Pre-requisites

Install Debian Linux for Beaglebone with an SD card.
SSH into the Beaglebone with IP address 192.168.7.2
Install Go programming language with brew install go in your development machine (local machine)
Familiarise with the Beaglebone's GPIO pin layout Source: Beaglebone.org

Digital write

Wire up a super simple LED circuit with 1kΩ resistor and Beaglebone's P8 pin 2 DGND and P8 pin 10 GPIO_68
SSH into the BBB with ssh root@192.168.7.2
Turn on and off the LED in the command line with

  echo high > /sys/class/gpio/gpio68/direction # LED ON
  echo low > /sys/class/gpio/gpio68/direction # LED OFF

Wondering what does Linux file systems's /sys do?

sysfs is a virtual file system provided by Linux. sysfs provides a set of virtual files by exporting information about various kernel subsystems, hardware devices and associated device drivers from the kernel's device model to user space.

Write high or low to the /sys/class pin files to turn on and off the LED in Go programming language

  // blinky.go
  package main

  import "fmt"
  import "io/ioutil"
  import "time"

  func check(e error) {
    if e != nil {
      panic(e)
    }
  }

  func main() {
    var status bool = false
    high := []byte("high")
    low := []byte("low")
    var gpio string = "/sys/class/gpio/gpio68/direction"
    for range time.Tick(time.Second \*1) {
      if status {
        status = false
        err := ioutil.WriteFile(gpio, high, 0644)
        check(err)
        fmt.Println("high")
      } else {
        status = true
        err := ioutil.WriteFile(gpio, low, 0644)
        check(err)
        fmt.Println("low")
      }
    }
  }

Compile on OSX for Beaglebone

  GOARM=7 GOARCH=arm GOOS=linux go build blinky.go

Transfer the executable file blinky via ssh

  scp blinky root@192.168.7.2:/root

Run the binary blinky in Beaglebone and see the LED turn on and off 💥

  ./blinky

Analog read

Wire up a potentiometer to P9_32 for VDD (1.8V), P9_34 for GND and P9_33 for analog input pin
SSH into the BBB with ssh root@192.168.7.2
Setup the GPIO pins by adding the device

  echo "BB-ADC" >> /sys/devices/platform/bone_capemgr/slots

Turn the potentiometer knob and read the 12-bit ADC values from 0 to 4095

  cat /sys/bus/iio/devices/iio:device0/in_voltage4_raw

Read file to get the analog sensor values in Go

  // analogread.go
  package main

  import "fmt"
  import "io/ioutil"
  import "time"

  func check(e error) {
    if e != nil {
      panic(e)
    }
  }

  func main() {
    ticker := time.NewTicker(time.Millisecond * 500)
    var gpio string = "/sys/bus/iio/devices/iio:device0/in_voltage4_raw"

    go func() {
      for t := range ticker.C {
        b, err := ioutil.ReadFile(gpio)
        if err != nil {
          fmt.Print(err)
        }

        str := string(b)
        fmt.Println(str)
        fmt.Println("Tick at", t)
      }
    }()

    time.Sleep(time.Millisecond * 60000) // run for 1 minute
    ticker.Stop()
    fmt.Println("Ticker stopped")
  }

Compile on OSX for Beaglebone

  GOARM=7 GOARCH=arm GOOS=linux go build analogread.go

Transfer the executable analogread via SSH

  scp analogread root@192.168.7.2:/root

Run in Beaglebone ./analogread
Turn the potentiometer knob to see its ADC values change 💥

Conclusion

As one of the feature of Unix, Everything is a file, it was fun to read or write to extract the values and interact with simple sensors and the Beaglebone. And because we are running the digital write and analog read programs on Linux, we can also use other programming language frameworks like Adafruit's Beaglebone IO Python library or Bonescript with Node.js.

Starting commands for DevOps

2014-02-10T00:00:00+00:00

In the past month, I was immersed in DevOps starting up various EC2 and RDS instances in AWS, trying to deploy my app consisting of Rails API server, AngularJS frontend and PostgreSQL database in various environments such as staging or production.

It was a challenging time for me as I needed to have a systems view instead of just a single application. Yet, firing up some instances in different operating systems also gave me a slight insight to their similarities and differences.

Below are the list of 20 most used commands. Why is noticing the most used commands important? Because ultimately, we can include them in a script and build automation for various tasks in DevOps.

Here we start!

Logging into the Server

1. `ssh-keygen` generate ssh keys

Even before we log in to the remote server, we generate a pair of public and private ssh keys. Ultimately, the contents of the public key *.pub can go into Github SSH keys or the remote computer's ~/.ssh/authorized_keys file.

$ ssh-keygen -t rsa -f project-name -C "name@email.com"

2. `ssh` secure shell

Next, to login there are various ways of using the ssh command. The 3 common ways that I have used are:

with a config file at ~/.ssh/config

Host projectname
      HostName website.com
      Port 8000
      IdentityFile ~/.ssh/sshkey
      IdentitiesOnly=yes
      User username

And now we can ssh into the server with a much simpler command

$ ssh projectname

ssh with a username and a public key

<!--emailoff-->$ ssh -i mykey.pem username@server.com<!--/emailoff-->

ssh directly into a particular directory

$ ssh projectname -t "cd /path/to/app ; /bin/bash"

Transferring files

3. `scp` secure copy

Secure copy scp comes in handy for transferring files from the local machine to the remote machine and vice versa.

from local to remote

<!--emailoff-->$ scp -i /path/to/key.pem /path/to/file username@server.com<!--/emailoff-->

from remote to local

<!--emailoff-->$ scp -i ~/.ssh/key.pem  /path/to/source/file username@server.com:~/path/to/destination/file<!--/emailoff-->

4. `cp` copy

To copy files or entire folder:

$ cp /path/to/source-folder/filename /path/to/destination-folder
$ cp -r /path/to/source-folder/folder /path/to/destination
$ cp /path/to/source-folder/filename /path/to/destination . # dot: destination is current folder

5. `mv` move

To move files/folders is also the same as renaming.

$ mv /path/to/source-folder/filename . # move file to current directory
$ mv /path/to/source-folder . # move folder to current directory

6. `echo` output

To print out simple commands and piping the output to a new file.

$ echo hello
$ echo `date` >> currentime.txt # copy to file
$ echo `date` > currentime.txt # append

7. `touch` update a file

When used without any arguments, touch will simply create a file.

$ touch filename1 filename2 filename3

8. `ln` symlink

Symbolic links for files are useful when we want the exact file contents in 2 different places to be synced up. This can be handy for doing so with executable files if needed.

$ ln -s /path/to/source/filename /path/to/destination/filename

File contents

9. `head` top of a file

head is very useful to quickly view a certain first few lines of a file with an option -n to specify how many lines from the top.

$ head -n 5 /path/to/filename

10. `tail` end of a file

tail as the name goes, is the opposite of the command head and this gives the content of the last lines of a file. Using with the option -f, the output is appended as the file grows and this is used to continuously view server log files while changes are happening.

$ tail -n 5 /path/to/filename
$ tail -f log/production.log

11. `cat` see the contents of a file

cat is a simple way to view the file contents, but it can also be used to concatenate a few files into a new file.

$ cat /path/to/filename
$ cat file1 file2 >> newfile # newfile has contents of file1 and file2

Permissions

12. `chmod` change permissions

File permissions include the ability to read, write or execute the file for users owner, group or others. chmod can change these permissions with either a number or expression.

$ chmod u+x /path/to/script # user can execute
$ chmod 600 ~/.ssh/authorized_keys # user can read, write

13. `sudo` act as root

sudo gives the permission to run commands as the root user. It can be used for a single command or a series of commands. This command should definitely be used with caution as root user will have permissions to execute things a normal user might not.

$ sudo !! # execute the previous command with sudo
$ sudo cp /path/to/source /path/to/destination # execute as root
$ sudo su # switches from current user to root

14. `chown` own the folder/file

To quickly change the owner of a folder or file chown comes in handy in various situations.

$ sudo chown -R username:username ~/path/to/folder

Monitoring processes

17. `ps` running processes

Knowing the current processes running is another useful command through ps. Often, the list will be long. In this case piping the answer to a search terms is useful.

$ ps aux | grep unicorn # find all unicorn processes

The command ps aux will give a long list of useful information about the processes including the user, CPU usage, path to the command as well as the Process ID (PID) which will come in handy if we want to stop that particular process.

18. `kill` terminate a process

Often, we want to find that particular process and kill/stop it so that we can make some change and then run it again. Coupled with the previous command ps which will give the PID number, we can kill that particular process with a Unix signal 9. Here's an example:

$ ps aux | grep jekyll
$ sayanee  1835   0.0  0.8  2509028  68756 s003  S+    7:59PM   1:00.64 ruby /Users/command
$ kill -9 1835

19. `lsof`

At other times, knowing which process is running in a particular port is also useful. For this lsof comes in handy!

$ sudo lsof -i:8080 # complete info on the process
$ sudo lsof -t -i:8080 # just the PID of the process
$ kill -9 `sudo lsof -t -i:8080` # put the PID to kill it

20. `crontab` cron jobs for scheduling

Scheduling scripts to run at a certain time or an interval is helpful through CRON jobs. Sometimes CRON jobs are created through a backend application using the application specific variables. To see the output, listing the cron job is useful.

$ crontab -l

Getting started with DevOps

Noticing the most used commands is the first steps towards automation/shortcuts which can be done in the following ways:

write the commands in a bash script
include commands in a CRON job
including commonly used commands as aliases for shorthands

There are also frameworks such as Chef and Puppet which will help to kick start a list of commands that makes starting a production/staging environments easy with just one command or a click.

I have also come to realize that there is a change in thought processes when I'm doing development versus devops. But in the end, it was rather rewarding to get to understand the file systems in various linux distributions or operating systems.

What common commands are you using? How do you automate your DevOps processes?

Updates: Some useful tools were suggested:

UX Patterns with Code

2014-02-03T00:00:00+00:00

The coolest thing about being a full-stack engineer is that I get to dabble in all parts of development including ux, frontend, backend and devops. While I love the coding aspect, the real test of the software comes when the user ultimately gets to interact with it.

My current project's tech stack included Rails as a pure api server, along with AngularJS as a stand-alone frontend and AWS for deployment. In terms of user interaction, I had 2 main challenges:

Querying from large volume of data
Displaying the right amount of data to the user

As I was displaying the query results from the backend to the frontend, I realised I kept using these 6 patterns. They were implemented in AngularJS, but in terms of user interaction the tool is of course flexible.

1. auto complete search

Users love it when they come to a clean page with a big focus on just the search bar. Yes, a very Google-like clean design. In the following demo, the user already knows the search term e.g. a serial number, name of person, etc. As the typing progresses, the search result becomes narrower quickly reducing to just the right number of info required by the user.

code

{{planet.name}} at {{planet.distance}} AU

2. search within

In the following search pattern, a certain number of possible results are already displayed for the user to see and then search within them. This is because, the user is yet to know what is available. The use case can be banking transactions or incoming donation amounts. Also, the user can type in any search terms apart from the main item. For example, in the demo below apart from the book name, the user can also search by author or year.

Another interesting pattern is the sorting order of the displayed list. If there is a date and oldest item should be processed first (FIFO), then the list should be chronological (oldest is the first item). If the list is for activity monitoring e.g. transactions, then the order becomes reverse chronological (newest is the first item).

code

{{book.name}} by {{book.author}} [{{book.published}}]

3. emphasized selected item

This is a common pattern to emphasize the chosen item among a list. The subtle visual cue helps in pointing out the selection from a large data set. In the following demo, the entire row becomes colored when the user selects the checkbox.

code

Select	Book name	Author
	{{book.name}}	{{book.author}}

4. sequential steps

If the user has to perform some sequential steps and the answer to the current step depends on the previous one, then the following patterns aid the user in focusing on the current step:

Hide all future steps
Reveal one step at a time
Disable input/action buttons to all previous steps
Display input/action buttons for the current action only

code

Pick a number from 1-10
Multiply that number by 9
Add up the digits to the previous answer
Subtract 5 from that number
Find the alphabet that corresponds to the number
Think of a country whose name starts with that letter
Take the 2nd alphabet of that country and think of an animal
Think of the color of that animal
Sadly, grey elephants aren't found in Denmark :-)

5. disabled action button

The following ux pattern helps the user keep a track while the selection is being made and guides the user upon each selection. Certain elements are also disabled so that the interface itself acts to allow only valid inputs.

The implementation can be summarised as:

Guiding words change as the user selects
Upon selecting all the required items:
- the final action button appears
- selection/input buttons for unselected items are disabled

In the following demo, upon choosing any 3 books, not only the action button appears, but the checkboxes for the unselected items are also disabled.

code

Choose {{count}} more books

6. more info on demand

Finally, in this ux pattern the user has the choice of displaying more information upon selecting an individual item. Often, we can query the server for all the information related to an individual item, but viewing them at one go might be too overwhelming for the user. In this case, only the most asked information is displayed first, leaving it to the user's discretion to reveal more information.

Often, I love to style these checkboxes as switches or push button to give a more visual context on what the user can see upon clicking it.

code

More	Book name
	{{book.name}} {{book.summary}}

Learning about UX

I found the following resources on common patterns as well as good examples of ux implementations for both web and mobile apps.

As I am getting to work with larger and larger data set, I'm actually enjoying going through the thinking of what will ease the user into finding the right information and making a clear decision. As much as possible, these can be built into the interface. And I would love to know more know how we can do them so as it make it as intuitive as possible to the user.

What are other UX patterns that can aid the user in info search and decision making?

Update: More resource on UX - Search Patterns.

Open sourced: Angular PDF

2014-01-16T00:00:00+00:00

Angular-pdf is an AngularJS directive based on Mozilla's PDFJS. With this directive, a pdf file can be embedded into a web page with simple controls such as next/previous page, zooming, rotation and jump to a page.

Install it for current projects with bower or simply git clone:

bower install angular-pdf
# or
git clone git@github.com:sayanee/angularjs-pdf.git

And once the file dist/angular-pdf.js is integrated as a directive <ng-pdf> in the application, some simple navigations can be done to the pdf file.

<div class="container" ng-controller="DocCtrl">
  <ng-pdf template-url="viewer.html"></ng-pdf>
</div>

The idea

I had the challenge to integrate over a thousand pdf files into a web application. This was a great idea as it was part of an effort to totally eliminate paper printing. Along with the ability to view and manipulate each pdf file with simple controls, there should also be a unique url for each pdf so that it can be bookmarked in the browser for future reference.

Hence, I used the $routeParams service to get the current route parameters. With some simple string concatenation, the path to the pdf is stored in the scope variable $scope.pdfUrl under the controller DocCtrl, which then can be used by the Angular-pdf directive to render the file.

app.controller('DocCtrl', function($scope) {
  $scope.pdfUrl = '/path/to/all/pdf/' + $routeParams.pdfname + '.pdf';
});

Learning to open source

I'm still quite a newbie to open sourcing my code. As I build more and more software, I'm finding that open source is a great way to learn. Finding ways to modularize and releasing it as a package can not only decouple our code base, but it's also a fantastic way to give back to the very community I benefit from everyday.

Here are some links I found about why and how to open source:

I would love to have feedback on what are the elements of a good open source project and how I can integrate them into Angular-PDF or even future ones.

What are some good practices to incorporate when open sourcing?

Quick start projects

2014-01-12T00:00:00+00:00

Let's say we have 3 to 4 active projects at any one time. These projects might include, a couple of client projects, a side project or even a blog. Every time when starting each of these projects, typically the following applications need to be opened:

Text editor with different folder paths
Command line with various panes and tabs
Some native applications
Browser with various tabs

For each of the projects, the exact requirements to the above 4 applications definitely differs. For example, the browser needs to be opened in a different localhost port for different projects along with links to Github or Trello.

For the past few months, I have been automating the opening up of various project related elements with a single command - the project name itself. Here's how the effect looks like when I open up various application with a single command to work on my blog:

What you need

Alfred app (optional) for launching a shell command
Simple Bash scripting to create a script project-name
Tmux and Tmuxinator installation to create a tmuxinator project file project-name.yml
```
brew install tmux
gem install tmuxinator
```

With AlfredApp, we can call the shell command without launching any command line application with a simple prefix of >. The bash script that we will create will open up various applications, url and paths in the Finder. Tmux is a terminal multiplexer and I use it more oten to layout the arrangement of windows and panes that are running different commands.

Let's take the example of this blog itself and create the 2 files:

blog (bash script)
blog.yml (tmuxinator project file)

Create the script file

Usually, I just name the file as the project. In this case, it will be simply blog. As this file needs to be an executable, we will also change the file permission with the command chmod. Lastly, we will symlink this file to a file in a directory where all such automated scripts are stored. This directory has to be found in your path variable $PATH. Now, this script can be run from any location.

$ touch blog

$ ls -al blog
-rw-r--r--  1 sayanee  staff  0 Jan 11 22:24 blog

$ chmod u+x blog

$ ls -al blog
-rwxr--r--  1 sayanee  staff  0 Jan 11 22:24 blog

$ ln -s blog /current/path/blog

The exact contents of the script file will vary project to project, but it generally consists of the following:

path to the source code is defined
open the source code in window and text editor
open some native applications and they might include:
- version control
- database visualiser
- graphic editing software
open project management tools or remote repository in browser. I have used the following:
- Pivotal Tracker
- Github with link to the open issues assigned to me
- Trello board of the project
open the project url in the browser
- production url
- development url - might include admin / testing / documentation url
open the tmuxinator project

Here is an example of the blog script file.

#!/bin/bash

# USAGE in the command line:
# blog

app="/Users/sayanee/Sites/blog/app" # path to source code

open $app # open in Finder
subl $app # open in text editor
cd _posts && open `ls -tr | tail -1` # open last modified file (latest post)

open /Applications/Tower.app # open version control visualiser

open https://github.com/sayanee/blog/issues/assigned/sayanee?state=open # open git remote repo assigned to me

open http://localhost:4000 # open in development
open http://blog.sayan.ee # open in production

tmuxinator blog # open tmuxinator project

Create the tmuxinator project

Next, we will create the tmuxinator project file that will define the various window, panes and commands to fire when starting the project. Let's first create the file blog.yml and create a symlink to the ~/.tmuxinator folder.

$ touch blog.yml

$ ln -s blog.yml ~/.tmuxinator/blog.yml

In the Tmuxinator project, I will define various windows for the following purpose depending on the project:

frontend server e.g. sudo nginx with Nginx
backend server e.g. rails server for Rails
automated testing
continuous build tool e.g grunt for GruntJS
ssh into the production server e.g. ssh production && cd path/to/source
repl e.g. node for NodeJS or irb for Ruby

For this blog, the Tmuxinator project is pretty simple consisting of 1 window with 3 panes.

name: blog
root: /Users/username/path/to/blog
windows:
  - blog:
      layout: main-vertical
      panes:
        - git pull origin gh-pages && clear && ls
        - jekyll serve --watch --config _dev_config.yml
        - grunt

With the command tmuxinator blog, a tmux session will be started that will look like this:

And that's all! With these 2 simple files, now whenever we trigger the command blog all the project related elements will open up within seconds!

Another example

The blog command is pretty simple, so I thought of giving another example for a project called todo. This project consists of full stack development with frontend and backend.

Here's the content of the bash script todo:

#!/bin/bash

# USAGE in the command line:
# todo

app="/Users/sayanee/Workspace/todo"
backend="/backend"
frontend="/frontend"
apidocs="/apidocs"

open $app
subl $app$backend
subl $app$frontend
subl $app$apidocs

open /Applications/Postgres93.app # db
open /Applications/Tower.app # git management

open http://localhost:8000 # frontend
open http://localhost:4000 # api documentation
open http://localhost:3000 # backend

open https://github.com/username/todo-frontend/issues/assigned/sayanee?state=open
open https://github.com/username/todo-backend/issues/assigned/sayanee?state=open

open https://trello.com/b/xxxxxxx/todo-board-overview # trello tasks

tmuxinator todo

And here is the tmuxinator project file todo.yml with 4 windows opening up the development for frontend, backend or api documentation and lastly even the production server. When starting to code, I usually like to do a git pull to sync my code base with the remote repository. Also, when logging into the production server with ssh, I directly cd into the direcotry required.

name: todo
root: /Users/sayanee/Workspace/todo
windows:
  - backend:
      layout: main-vertical
      panes:
        - cd backend && git pull
        - cd backend && rails console
        - cd backend && rails server
  - frontend:
      layout: main-vertical
      panes:
        - cd frontend && git pull
        - cd frontend && grunt
        - cd frontend && sudo nginx
  - apidocs:
      layout: main-vertical
      panes:
        - cd apidocs
        - cd apidocs && npm start
        - cd apidocs && redis-server
  - production:
      layout: even-vertical
      panes:
        - ssh production -t "cd /path/to/backend ; /bin/zsh"
        - ssh production -t "cd /path/to/frontend ; /bin/zsh"

Fast context switching

One of the challenges of getting into the zone of creativity is how fast and easily we can launch the various applications and commands to get started, especially if we are spending some time launching them often. Here are some other projects that I found that helps in launching current projects fast:

Would love to know if there is a better or alternative way to launching applications other the current method that I am using. What are your thoughts?

How do you quick launch your various active projects?

Update: You can also follow this discussion on Hacker News with more ideas on how others are implementing this.

Setting up my new MacBook

2014-01-04T00:00:00+00:00

Having a brand new computer is like having a chance to sharpen your tool so that when we work with it, we are in a flow. I took about 7-8 hours in total to get everything working!

Model Name:    MacBook Pro
Model Identifier:   MacBookPro11,2
Processor Name: Intel Core i7
Processor Speed:    2 GHz
Number of Processors:   1
Total Number of Cores:  4
L2 Cache (per Core):    256 KB
L3 Cache:   6 MB
Memory: 8 GB

Before the setup

Apart from any data, in terms of settings, a few things came in really handy as I had them either as a user account or the configurations stored as a Github repository:

Chrome's user login - useful for all bookmarks and recent browsing history
Dotfiles - useful to keep a list of frequently used config files
Sublime Text settings - any text editor is a major tool and its handy to keep its settings
Apple account - useful to download apps that I already had before
Setapp as a reference to all the tools and apps I use

Apps to download

I started setting up the MacBook with the installation of the Chrome browser and then some apps from the App Store. XCode with Command Line Tools are almost always needed as they install GCC, Clang-LLVM and many other developer tools.

From the App Store

XCode and its Command Line Tools
LiveReload
Dash for easy documentation reference while programming
Codebox for storing quick code snippets
Sketch for making simple vector graphics for favicons or logos
Skitch for quick annotation of screenshots

Other apps

Sublime Text 3 as my main text editor
iTerm2 as a replacement for Terminal
Applets for Finder toolbar to quickly open the folder in Iterm2 or Sublime Text
AlfredApp as a quick launcher with Minimal theme
Caffeine to prevent sleeping
App Cleaner
Mou App for writing my markdown for readme.md files
ShiftIt for Finder window positioning with shortcut keys
Tower to quickly see my version changes with git
Postgres.app for database

Finder, Display, Keyboard and Files

The thing about configuring a brand new machine is that you become aware of the little settings that you are always used to. Here are my settings for the Finder:

Show Path Bar, Sidebar, Status Bar. Finder > View > Show Path Bar/Status bar/Side bar
Search in Current Folder and show file extensions. Finder > Preferences > Advanced
Applets for Finder toolbar to quickly open the folder in iTerm2 or Sublime Text

I also like to have Hot Corners for easy access to the Desktop and have a snap shot of all the running application windows. Setting: System Preferences > Desktop & Screen Saver > Screen Saver > Hot Corners

I have remapped my almost-never-used Caps Lock key to Control key. This comes in really handy when using with Tmux key bindings as ctrl-a is just 2 keys side by side. Setting: System Preferences > Keyboard > Modifier Keys > Caps Lock Key

In terms of hidden or dotfiles, I like to show them. The following command in the Terminal will enable them:

defaults write com.apple.finder AppleShowAllFiles -boolean true ; killall Finder

Installed packages

The final step was to install the various packages that I use when I am programming. I started by installing the package manager brew and then updating and upgrading brew itself. I installed some packages like wget, autojump and tree - useful when working in the command line, jumping from one folder to another or displaying the contents of the folder.

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

brew update
brew upgrade

brew install wget
brew install autojump
brew install tree
brew install terminal-notifier
brew install tmux

Next I installed packages that I use while programming in the Ruby ecosystem. I started with RVM, then Ruby itself, Git and RubyGems. Setting up Git and then generating SSH Keys had me setup my Github as well.

\curl https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer | bash -s stable

rvm get stable

brew install git

Next, I installed Node releated packages. The main installer on the Node website comes with both Node as well as NPM, so I downloaded that. Also, just like Ruby's RVM, I use Node's NVM for managing Node versions. Finally, I installed some commonly used global packages like Grunt and Bower. Here are the steps:

curl https://raw.github.com/creationix/nvm/master/install.sh | sh

npm install -g grunt
npm install -g grunt-cli

npm install -g bower

Sharpening the Tools

I've known people who have not mastered their tools who are good programmers, but not a tool master who remained a mediocre programmer. ~ Kent Beck

Recently, I listened to a lovely episode from the RubyRogues on Sharpening the Tools. Couldn't agree more with the fact that as we are making and creating stuff, we will have to continuously keep note of steps that we are repeating or steps that are mildly erking us.

Can we do it smaller number of steps or in an easier way? I'm keeping a little scratch note of this and every few weeks I go back to it and find ways to improve. Whether it's amending my bash prompt to contain more information or linting while coding in my text editor - all these tiny steps add up to ease me into the flow of creativity every time I get down to work.

I would love to hear from you too!

What apps or packages do you use very often? How do you keep sharpening your tools?

Update: After getting some more tips, I have also install:

FileZilla for ftp
Kindle app to read *.mobi format Kindle eBooks
QuickLook plugins
Sequel Pro for MySQL db management

On web and iot, minimalism, space

2014-01-01T00:00:00+00:00

2013

This was an intense and vibrant year of sharing for me! And I absolutely loved it.

As I immersed myself in the world of web technologies, I found myself taking the route of writing, screencasting and podcasting to further strengthen the understanding of my work. After all, teaching and sharing is learning for myself as well. Through this I also made so many wonderful conversations from fellow developers all around the world!

After focusing on the "hows" of making things with the web, I have realised I need to scratch deeper to understand the "whys" and pen down my reflections and explorations. Writing seems to be the perfect reflective process to do so and bring clarity to that thinking.

I will specifically write on 3 things that have come to define my "what", "how" and "why".

The What - Web & IOT

The web still excites me so much because of its democratic power to put ones creation at an instant to every single person anywhere in the world. In the coming decade, potentially 5 billion more will be coming online.

Along with the world of bits and bytes, I also discovered that I can make cool things to connect the physical world to this web. Sensors are becoming cheaper and the hardware movement is becoming exciting for beginners with projects like Arduino and RasberryPI.

In the coming year, I want to pen down my journey into the world of web that I fell in love few years back as well as a new field for me - hardware, sensors and the Internet of Things. These are some interesting links I found on the Web and IOT...

The How - Minimalism

In almost everything I do, I'm finding a bliss in simplicity. Whether it is applying the DRY principle in programming, traveling light or keeping an uncluttered home, I have fallen in love with minimalism as a way of doing anything.

In the coming year, I will have the chance to apply minimalism into more areas such as designing my upcoming home, applying test-driven development or understanding the principles of minimal design.

I have come to draw inspiration for minimalism from some these links...

The Why - Space

Big topic to comprehend is the very space, the universe we are all engulfed in.

Over the years, the amateur study of the universe has not only brought me back to the fundamentals of mathematics and physics, but also given me huge inspiration to why we must deny our boundaries of country, race, religion and unite to do great work that will pass on after we leave this world. I had an amazing time in Chile this year experiencing some aspects of astronomy. I hope to consistently remind myself of the much bigger universe we all live in to give a bigger perspective as we live through the days.

These links might interest anyone keen to take a peek into the current work of humanity into understanding space:

What's next

I'm really looking forward to 2014! I'm excited on what's to come and the things I'm gonna make :) And yes, keep writing!

I would love to know your thoughts too!

Do you know of other cool projects on web, internet of things, simplicity and space exploration?

Sayanee

Web control panel for Neopixel

What we need

Assemble the Neopixel Ring

Blinky with Arduino

Control via the Web

Beaglebone and Go

Pre-requisites

Digital write

Analog read

Conclusion

Starting commands for DevOps

Logging into the Server

1. ssh-keygen generate ssh keys

2. ssh secure shell

Transferring files

3. scp secure copy

4. cp copy

5. mv move

6. echo output

7. touch update a file

8. ln symlink

File contents

9. head top of a file

10. tail end of a file

11. cat see the contents of a file

Permissions

12. chmod change permissions

13. sudo act as root

14. chown own the folder/file

Directory

15. cd change directory

16. ls list files/folders

Monitoring processes

17. ps running processes

18. kill terminate a process

19. lsof

20. crontab cron jobs for scheduling

Getting started with DevOps

UX Patterns with Code

1. auto complete search

2. search within

3. emphasized selected item

4. sequential steps

5. disabled action button

6. more info on demand

Learning about UX

Open sourced: Angular PDF

The idea

Learning to open source

Quick start projects

What you need

Create the script file

Create the tmuxinator project

Another example

Fast context switching

Setting up my new MacBook

Before the setup

Apps to download

From the App Store

Other apps

Finder, Display, Keyboard and Files

Installed packages

Sharpening the Tools

On web and iot, minimalism, space

2013

The What - Web & IOT

The How - Minimalism

The Why - Space

What's next

1. `ssh-keygen` generate ssh keys

2. `ssh` secure shell

3. `scp` secure copy

4. `cp` copy

5. `mv` move

6. `echo` output

7. `touch` update a file

8. `ln` symlink

9. `head` top of a file

10. `tail` end of a file

11. `cat` see the contents of a file

12. `chmod` change permissions

13. `sudo` act as root

14. `chown` own the folder/file

15. `cd` change directory

16. `ls` list files/folders

17. `ps` running processes

18. `kill` terminate a process

19. `lsof`

20. `crontab` cron jobs for scheduling