0 Robot status page

Check out the robot's latest metrics from Salvius on the status page.

After creating the status page, I wanted to write a little bit about the technologies that went into creating it. The status page has been on my to-do list for a while now. I had originally considered having it be hosted on the robot's server, however the issue with doing that is if the server crashes, there is no way to access the status page. By having the status page be a simple static webpage which pulls from a variety of data sources, it makes it nearly impervious to complete failure. Even if the GitHub pages on which it is currently hosted were to become unavailable, the status page could be opened locally in a browser.

Many websites that provide online services provide useful status pages to display information about the sites performance and any potential service outages or problems. The idea for this page was to create a decentralized location to view statistics and data published by the robot. A few examples of status pages provided by different online services are from sites such as GitHub (status.github.com), Disqus (status.disqus.com) and Travis CI (status.travis-ci.com).

Salvius has a number of hardware items that report their status to various online sources. Out of an interest to see all of these metrics in one convenient location I created my own status page http://gunthercox.github.io/salvius.status/ which graphs data published by the robot.

The page is 100% responsive thanks to Bootstrap and Chart.js. Chart.js is a HTML5 canvas graphing library which has awesome support for different kinds of graphs. Although I only use the line graph, Chart.js supports a total of six different graph types to choose from.

The robot's status page pulls from a variety of data sources including Travis.CI, Sparkfun's data service, and Twitter. Travis.CI provides code testing services which are run each time a change is made to the robot's source code.

I was very interested to try out Sparkfun's data service which uses an application called Phant to host streams of various data submitted by a variety of networked electronic devices. Sparkfun is currently hosting data streams from sources such as homemade weather stations, GPS logging robots and more. The data service is meant to expose the reality of the Internet of Things. The Internet of Things is a term that came into recent popularity which describes the fact that there is more electronic devices connected to the internet then there is humans on the planet Earth. This has been true since 2008 when the number of devices connected to the internet reached 12 billion with the world population only at 6.7 billion. There is no end in sight to the ever increasing usefulness of interconnected technologies.

I'm planning to add graphs and metrics to this page as Salvius evolves and more sources of data become available. Idea submissions for graphs are welcome. Issue tracker: https://github.com/gunthercox/salvius.status/issues.

Update: I switched from Chart.js to chartist.js (see http://gionkunz.github.io/chartist-js/ for details). My main reason for switching was that chartist provides support for different aspect ratios which is useful when placing charts within responsive webpages. The second reason is that chartist also uses svg elements which has better browser support, and allows css animations to be applied to the graphs.

Detail: Robot status page

0 New Programming Jargon

Bat Code

Why is this code here?

Because its Batman!

Why's this running dad? Because it has to. Because it's the code that the program deserves, but not the one it needs right now. So we'll run it. Because we can. Because its not our code. It's a silent function. A watchful parameter. It's Bat code!

Bucket of Darts

Many times we encounter things that should work in theory, but don't really Its like throwing a bucket of darts off the top of a building and trying to hit someone. Such as ...
Bootstrap 2.3.2 conversion tool
Python 2 to 3 conversion tool
Some of it works some of it fails.

Phantom Comments

What? Did they all just die or something?

Zombie Documentation

The software has been updated but documentation for old features is still alive and kicking, or should we say undead?

Windows

When a simple, easy to use feature has unintended catastrophic side effects.


Post inspired by
http://www.codinghorror.com/blog/2012/07/new-programming-jargon.html
http://blogs.msdn.com/b/cdndevs/archive/2010/05/09/new-programming-jargon.aspx
I will add more to this post as I encounter them.

Detail: New Programming Jargon

0 Classic Computer-brain Analogy

There is a frequent analogy which compares the function of the brain to a computer. This comparison is somewhat concerning considering how incorrect it is. The analogy stems from the information processing model in psychology which is one among many models describing how the brain manipulates information.

The information processing model breaks the process into three parts; encoding, storage, and retrieval. Essentially the steps that this model describes include information being broken into neural code, information being stored, and information being retrieved when needed.

People need to recognise that computers do not operate in any human-like way. Saying that a processor is like the computer's brain is like saying that your brain is like a walnut. The biggest flaw here is that brains are massively parallel in structure while computers are not. A single processor computer can only do one task at a time and sadly Von Neumann architecture is not conducent to neural-like behavior.

Detail: Classic Computer-brain Analogy

0 GitHub

Salvius is open source, check out the latest code on

>>> GitHub <<<

---

Below is my personal pastebin of helpful git commands. Feel free to use them or comment with suggestions.

List all local branches git branch
List all remote branches git branch -r
List all local and remote branches git branch -a
Delete a local branch git branch -D branch-name
Delete remote branch git push origin :branch-name
Drop staged changes git stash
git stash drop
Edit previous commit git commit --amend -m "New commit message"
Edit previous commit git reset --hard HEAD~1
Abort merge and remove conflict indicators git merge --abort
Remove all local changes/commits and get a new copy of a branch git reset --hard origin/master
Merge changes from a remote branch with local without adding a merge commit. git pull --rebase origin issue_360

Detail: GitHub

0 Robot Ipsum

http://robotipsum.github.io/

This was a recent project I put together. Robot Ipsum is a tool inspired by the classic lorem ipsum text as well as the variation of the text at zombieipsum. Robot Ipsum is robot themed lorem ipsum text accompanied by a text random word generator which you can set to create as many random filler words as you need.

About lorem ipsum (http://www.lipsum.com)

"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."

"It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32."

Detail: Robot Ipsum

0 Edsgar Dijkstra - Shortest Path Algorithms

Computer science is no more about computers than astronomy is about telescopes. - Edsger Dijkstra

There are many ways to find the shortest path between two points. A simple example would be driving instructions. Assuming a situation where traffic is not an issue, you could take literally thousands of different roadways to get from Massachusetts to California. So which one will get you there the quickest? To answer this question we must consider not only the time to travel between the two points, but also the time it takes to compute this information. Edsgar Dijkstra was responsible for creating the fastest algorithm to date that determines the quickest path between two points.

Dijkstra’s algorithm works on rather simple principles. The distance between the starting point and all adjacent points are first measured. The point at the shortest distance from the first point is then selected. This operation then repeats until the destination is reached.

The algorithm has been implemented in a plethora of modern programs. It is the base behind items such as Google Maps, GPS Devices, and network routing protocols where it is necessary for computers to communicate quickly with each other. The algorithm is also used in the computation of Fibonacci heaps, heap data structures in which each child key is greater than or equal to its parent.

Edsgar Dijkstra began college with the intent to major in theoretical physics, after realizing that physics was not for him, he then turned to computer science. He quickly became noted for his strong opinions about different aspects of programming. He has opposition against the programming language BASIC became quite prevalent after he stated that

“It is practically impossible to teach good programming to students that have had a prior exposure to BASIC: as potential programmers they are mentally mutilated beyond hope of regeneration.”

Dijkstra also denoted the idea of structure based controls such as using a while loop, before which there was a GOTO statement. He published a paper in 1968, urging developers to work towards the widespread usage of structured control constructs as well as the depreciation of the GOTO statement. The GOTO statement provided a one-way transfer of control from one line of code to another.

Note: In java goto is a reserved word but it is infact unusable.
Also noteworthy, Dijkstra created a fictional company, Mathematics Inc. for which he worked and published papers. The company mass produced mathematical formulas which it then sold to the public.

Pseudocode:

 1  function Dijkstra(Graph, source):
 2      for each vertex v in Graph:                                // Initializations
 3          dist[v] := infinity ;                                  // Unknown distance function from 
 4                                                                 // source to v
 5          previous[v] := undefined ;                             // Previous node in optimal path
 6      end for                                                    // from source
 7      
 8      dist[source] := 0 ;                                        // Distance from source to source
 9      Q := the set of all nodes in Graph ;                       // All nodes in the graph are
10                                                                 // unoptimized - thus are in Q
11      while Q is not empty:                                      // The main loop
12          u := vertex in Q with smallest distance in dist[] ;    // Source node in first case
13          remove u from Q ;
14          if dist[u] = infinity:
15              break ;                                            // all remaining vertices are
16          end if                                                 // inaccessible from source
17          
18          for each neighbor v of u:                              // where v has not yet been 
19                                                                 // removed from Q.
20              alt := dist[u] + dist_between(u, v) ;
21              if alt < dist[v]:                                  // Relax (u,v,a)
22                  dist[v] := alt ;
23                  previous[v] := u ;
24                  decrease-key v in Q;                           // Reorder v in the Queue
25              end if
26          end for
27      end while
28  return dist;

Detail: Edsgar Dijkstra - Shortest Path Algorithms

0 Flowcharts

Program flowchart – shows a graphic form the algorithm, or method of solution, used to program.

A flowchart shows how the application is to be accomplished.

Aids in developing the logic of a program
Aids in breaking the program down into smaller units when the top-down or modular approach is used
A verification that all possible conditions have been considered in the program
A means of communicating with others (especially non-programmers) about the program
A guide in coding the program
A means of documenting the program

Four ways programmers begin designing programs:
1. Flowchart
2. storyboard
3. Psudocode
4. Toe chart

Different types of flowchart notation (8 basic symbols):

1. Annotation – rectangle with only three sides (missing side toward left margin)
2. Processes- Rectangle
3. Input / Output - Parallelogram
4. Decision - Rhombus
5. Start / Stop – Terminal
6. Predefined Process – hand draw, largest rectangle with an extra line on left and right
7. Connector – smallest of given circles – only thing that goes in it is an uppercase letter
8. Flowline -

(Use the same size symbols for all other times it is used in diagram!)
Do not use cursive writing on a flowchart

Start / Stop – Terminal Only START, STOP, END can go on a terminal symbol (must be uppercase)

Writing has to fit in the symbol

First make annotation symbol
Connect it to a terminal symbol with a dashed line going almost to the middle of the page
Dashed lines are only for connecting an annotation to a symbol and are only lines with no arrows.
Can be multiple pages

There is no exact length set for any arrow

There is 9 symbols related to System Design

1. On-Line Display
2. Manual Input
3. Off-Line Storage
4. Manual Operation
5. Auxiliary Operation
6. Core Storage
7. Card Deck
8. Card File
9. Communication Link

There are 16 symbols related to System Designing and Programming

1. Flowlines
2. Processing
3. Magnetic Tapes
4. Documents / Reports
5. Punched Cards
6. General Input / Output
7. Punched Paper Tape
8. Annotation
9. On-Line Storage
10. Collate
11. Magnetic Disk
12. Sort
13. Magnetic Drum
14. Connector
15. Merge
16. Extract

Annotation Symbol
-Represents the addition of descriptive information, comments, or explanatory notes as clarification.
-All REM or Commented statements go in this symbol
-Always connected with a broken flowline
-Can go on either side but opening faces out

Processing Symbol
-represents the process of executing a defined operation of group of operations that results in a change of value, form, or location
-rectangle (arrow only comes in through middle of top and only exits through bottom)
Input / Output Symbol
-Represents an I/O function, which makes data available for process (input) or for displaying (output) of processed information
-READ, INPUT, PRINT Symbols

Decision Symbol
-Represents a decision that determines which number of alternative paths is to be followed
IF, SELECT CASE, DO…WHILE, FOR…NEXT Statements
False True
-Flow always comes in at the top vertex
-Flowline’s arrow has to touch the symbol, do not leave a gap!
Boolean Algebra deals with making decisions (true or false)
-TRUE or FALSE is written on the flow line
-A question goes in this symbol

Terminal Symbol
-Represents the beginning, the end, or a point of interruption or delay in a program
-STOP, RETURN, END Statements or START
Start is the only one where a flowline exits the symbol

Connector Symbol
-Represents any entry form, or exit to, another part of the flow chart. Also serves as an off-page connector. Use only a single uppercase letter inside the symbol.

Predefined Process Symbol
-Represents a named process consisting of one or more operations or program steps that are specified elsewhere.
GOSUB, CALL Statements

Flowlines
Flowlines are solid lines with arrows that indicate the direction of flow.
The process, input/output, decision, terminal connector, and predefined process symbols are connected with SOLID lines
The annotation is connected by a BROKEN line to any other symbol
-Flowlines never are squiggly and never cross each other but they can flow to another flow line

Fundamental Rules

1. always start a flowchart with an annotation symbol in the top left corner of the page
2. always use bank paper flow should be top to bottom or left to right
3. arrows are used to indicate direction
4. no curved or diagonal flowlines are allowed
5. the first symbol next to an annotation symbol is the terminal symbol with “Start” written inside
6. all writing is PRINTED, no cursive!
7. flowlines should enter out the top-middle of a symbol
8. flowlines should exit out the bottom-middle of a symbol
9. the decision symbol has two possible exits from the symbol
10. the exit flowlines of a decision symbol must be labeled with YES/NO or TRUE/FALSE
11. when you run out of space at the bottom of a page, use a connector symbol
12. place all lengthy algorithms into an annotation symbol
13. there should be no more than 3-5 words in a symbol

Tips:
1 sketch a flowchart and the necessary detail flowchart before coding the problem
2 put yourself in the position of the reader, keeping in mind that the purpose of the flowchart is to improve communication between one person and another concerning the method of solution for the problem
3 show the flow of processing from top to bottom and from left to right. When in doubt, use arrowheads as required to indicate the direction of flow
4 draw the flowchart so that it is neat and clear
5 use connector symbol

Detail: Flowcharts

0 Embedding Base64 Images

This is a technique that I used on this blog a while back to embed some icons in a post because I didn't want them to be stored in my albums on Picasa. It worked well and I  just wanted to share how I did it. This technique allows you to embed an image in a web page without having to upload an image file.

I found a great online tool for making base64 encoded images http://www.base64-image.de/

Personally the first thing that I thought about was the pros and cons of using embedded images on my website. This is what I found out:

• Pros: 
• Quicker loading
• No file storage required
• No resource request

• Cons:
• Images can take up almost three times more storage space
• Images will not cache locally and 
• Your website can be seen as a spam site because many spam sites use base64 to force browsers to load images. (I have never run into this issue myself)

Using embedded images:

• In HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAiG0" />

• In CSS:

div.image{background-image:url(data:image/png;base64,iVBORw0KGgoAAAiG0);}

Using embedded images:

I recently learned that it is also possible to embed fonts as base64 as well. This is remarkably easy and they can be included in css just like images and the same pros and cons apply. For converting the fonts I have been using http://base64fonts.com as my tool of choice.

• Base64 font in CSS:

@font-face{font-family:"webfont";src:url(data:font/ttf;base64,
AAEAAAANAIAAAwBQRkZUTWSFw8QAAAZ0AAAAHE9TLzIH/RRrAAABWAAAAGBjbWFwAA/zzAAAAcgAAAFMAAAABGdhc3AAAAAQG)format('TrueType');}

Detail: Embedding Base64 Images