index.html (63711B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>banna - ramblings</title> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <link rel="stylesheet" href="/styles/style.css" /> 8 <link rel="stylesheet" href="/styles/look.css" /> 9 <link rel="stylesheet" href="/styles/codetheme.css" /> 10 <script src="/scripts/highlight.js"></script> 11 <script>hljs.initHighlightingOnLoad();</script> 12 </head> 13 14 <body> 15 <div id="sidebar"> 16 <div id="logo"> 17 <a href="/"> 18 <img src="/banna.png" alt="banna.tech" height="45" width="201" /> 19 </a> 20 </div> 21 <div id="nav"> 22 <a class="current" href="/post">blog</a> 23 <a class="" href="/things">things</a> 24 <a class="" href="/about">about</a> 25 </div> 26 </div> 27 28 <div id="wrapper"> 29 <div id="content"> 30 <div class="post"> 31 <a href="/post/simple_tools_better_be_built_better" class="link"><h1 class="header">Simple tools better be built better</h1></a> 32 <span class="date">Posted on June, 18 2020</span> 33 <div class="content"> 34 <p>There is more value with complexity than with simplicity, and because of this simple things we have taken into our daily lives aren't always built to the same standards as their complex counterparts. When a simple tool or component that is built to a higher standard is used to build complex tools or components, the quality of that initial tool shows through in the final product.</p> 35 <blockquote> 36 <p>This simple calculator is built better than most cars...</p> 37 </blockquote> 38 <p><img src="//i.banna.tech/230blog.png" style="border:2px solid #000;box-shadow:0px 0px 3px #3F3F3F;" /></p> 39 <p>The power switch creates a satisfactory <em>thock</em>. Each button assuredly follows a consistent force curve until it reaches confident stop. The LCD display panel is seated precisely. The housing is held together with a single machine screw, so that the batteries are replaced with ease. Not to mention that the PCB construction is equally as robust as the metal housing that the unit is kept together with.</p> 40 <p>Taken out of context, what I described may be far more advanced than a simple calculator. Even when working with bland things there are opportunities for creating the extraordinary.</p> 41 <p>Through the utility of the internet we have access to the latest and greatest at every moment, pulling our thoughts to every corner of our imaginations. Awesome examples of people creating these incredibly exciting and awe-inspiring things. Despite these stories being exciting, the basic and fundamental building blocks that make those creations possible aren't always viewed in the same light or built with the same level of passion. </p> 42 <p>If what you are providing is basic, it can be the difference between two worlds in certain cases.</p> 43 <p>Imagine if one day you ordered a new piece of furniture from ‹insert major furniture brand here› and you had to assemble the components to get the final product. Instead of using the provided good-enough hex key to put the components together, you used a hex key with an ergonomic handle. The action of torquing down fasteners is now a comfortable and swift task, where more time is spent reviewing the build instructions. If you were to fumble with the provided hex tool, you wouldn't spend as much time considering how each piece went together. If you were to make an error, you would be less likely to correct that error because the tool sucks. The construction of the simple hex key tool may influence a difference in quality for something inherently more complex than the hex tool itself.</p> 44 <p>The build quality of this simple calculator is an example of my thoughts on this loosely defined philosophy. Whatever it is that you may be doing, there exists opportunities for passing forth quality. Deliberately discern what you know of as quality, and follow suit by realizing a set of standards that you build to. That's what a team of people had to do at one point to produce this small piece of hand-held technology in 1980's.</p> 45 </div> 46 </div> 47 <div class="post"> 48 <a href="/post/dusty_digital_and_forgotten_ideas" class="link"><h1 class="header">Dusty Digital and Forgotten Ideas</h1></a> 49 <span class="date">Posted on October, 28 2019</span> 50 <div class="content"> 51 <p>Cobwebs appear to have a distinct glint in the digital era. After you've left something digital alone for some time, returning to that virtually legitimate concept of space has a certain effect. Lists of to-dos and this-thats that were once rummaged, written, and rethought on occasion are lost to the dry-erase eraser and poor organizational skills. As with the slow crawl of the calendar year, these idle ideas and problems collate and begin to grow into puzzles upon revisiting these digital vistas.</p> 52 <h3>Revitalizing an old project</h3> 53 <p>I have found my small index of thoughts scattered among notebooks, archives and stale git repositories as a treasure trove of inspiration and self-humiliation. I spent some time to revive an effort to implement this microcontroller architecture I named "tisc" : which is short for <strong>t</strong>iny <strong>i</strong>nstruction <strong>s</strong>et <strong>c</strong>omputer. The whole mess of it was an undocumented circuit (implemented with Logisim) with vague instruction set definitions and cryptic hand-assembled test programs, complete with an absolute failure of an assembler half-assed in C. The catch was that it was indeed my past self who had created all of this mess, so how hard would it be to, y'know, remember it all?</p> 54 <p>To pick this project back up and breathe life back into the idea took determining what was working, what was broken, and where the work needed to be done. These tasks were at one point clearly pictured when this project was new to me. Simply learning what I haphazardly threw down was a unique experience in that, there was a kind of dust upon this digital form. The kind of dust you really notice after the code hasn't been seen in a few years. Once you get those layers of dust off, you get a better idea of what you are looking at.</p> 55 <h3>Realizing why it was left to gather digital dust</h3> 56 <p>After virtually dusting off a large portion of this project, wrapping up loose ends and actually writing the assembler; I got to a vantage point with the project and my work on it slowed to a stop. I really didn't know what to work on next. Besides, I have a fear of unnecessary effort, I tend to challenge any idea of work without clear results. The results of this effort had already came in the form of seeing what left the project in the dust in the first place.</p> 57 <p>Despite my lack of direction I had hit the notebooks and started to fork TISC into something with greater potential. When digging into how I could change the architecture, I came upon the conclusion that this process would require having to completely scrap what I originally laid out. To make matters worse I was trying to pull the project outside of the original scope I had in mind, which was to create a small-footprint microarchitecture that would be reasonably understandable to someone with limited knowledge of computer architecture.</p> 58 <p>Instead of reinventing <a href="https://github.com/bannana/tisc">TISC</a>, I wrote this post explaining what picking this project back up meant to me, and what I hope it may eventually mean to you, reader. These universes of old ideas within archives are dormant seeds in my eye. If not seeds then when approached appropriately these ideas exist as stepping stones to even greater ideas.</p> 59 </div> 60 </div> 61 <div class="post"> 62 <a href="/post/when_software_becomes_useful" class="link"><h1 class="header">When software becomes useful</h1></a> 63 <span class="date">Posted on May, 26 2018</span> 64 <div class="content"> 65 <p>I guess we all use software of some kind as a function in our modern life.</p> 66 <p>Lately I've paused to ask what the term 'software' even implies; soft as in what? ware as in to be a manufactured article?</p> 67 <p>From the perspective of a software engineer I have no idea what to make of the term.</p> 68 <p>At best software is modular, and tasks are executed through a clear interface. For example, I use the software drivers packaged in my operating system to interact with my keyboard. This software interfaces with other software, and serves as a modular component to a greater system. Without software being written to be modal, nothing in the software world would be remotely efficient.</p> 69 <p>The functionality of software as tools with low-depth interfaces, especially interfaces that compose to execute a greater domain of tasks, is sought after by any user which designs a workflow to solve a problem or to execute a task. You, for instance, must have some understanding on what needs to be done (at least, in the best case...) with what will fit in the problem you are going to solve. A 'detailed enough' description of what will happen is in mind when ever anyone interacts with software. 'Detailed enough' in the sense of leaving room for broader steps to decompose into smaller problems.</p> 70 <p>For instance, if I turn on my computer to go write an essay, it's not really the case that I'm hashing out every detail of what I will need my word processor to do, I just open it and start writing. </p> 71 <p>So the first description of what I'll need to do is "Launch a word processor, and allow user to edit, save, and open a persistent record readable in the English language."</p> 72 <p>This then, decomposes into whatever sub-problems need to be solved before we can even get to implementing that description, and some of these are:</p> 73 <ul> 74 <li> 75 <p>Address, store, and modify a persistent and available chunk of memory</p> 76 </li> 77 <li> 78 <p>Display English writing to the user</p> 79 </li> 80 <li> 81 <p>Allow the user to input the English language</p> 82 </li> 83 </ul> 84 <p>And with these listed problems, each problem can be broken down into a further sub-problems until you reach fundamental problems of physical implementation and problems of physical constraints.</p> 85 <p>To me, software is most useful when the depth of the interface to each software component attempts to achieve is minimized. This opens up for a consistent algebra of defined solutions to identifiable problems.</p> 86 </div> 87 </div> 88 <div class="post"> 89 <a href="/post/a_thought_on_abstraction" class="link"><h1 class="header">A Thought on Abstraction</h1></a> 90 <span class="date">Posted on May, 19 2016</span> 91 <div class="content"> 92 <p>What makes technology easier to deal with?</p> 93 <p>To answer this question, look no further than the most popular technology to deal with: The Web</p> 94 <p>The Web (HTML, CSS, JS) accomplishes the great feat of providing a standardized paradigm for delivering functionality to end users, i.e. web browsers. For any given platform with a web browser that implements the same standards, the page should function in a similar way to other platforms.</p> 95 <p>The good news here is that for the most part this is indeed true. The mechanism behind this great feat is accredited to abstraction. When writing software for web browsers, the particular machine that will eventually render the code written is not within the scope of concerns; due to the assumption that the web browser rendering the current page follows the standards set in place by web browsers.</p> 96 <p>Web Pages are a great example of a domain specific abstraction. In english, this means that the standards set in place by the web browser are limited to establishing a way to define a structure (HTML), style the structure (CSS), and modify the structure (JS). Beyond the specified standards for the web, and you've gone too far- you're in open waters.</p> 97 <p>When you're in open waters, the abstraction begins to fade and what you're left with is what every aspiring software developer is afraid of: What translates the abstraction to the machine itself.</p> 98 <p>Granted, at every level you are faced with abstraction. When you're writing in C, you're abstracting away machine code. When you're writing in assembly, the instruction opcodes are abstracted away. When you're manually writing instructions byte-by-byte, virtual addresses are abstracted away, etc.</p> 99 <p>Eventually you reach a point of no return, where there is no abstraction and all that is left is the atomic laws that compose themselves into what you're looking at right now to read this blog post. For each level you strip away the abstraction, the more you can engineer on a specific platform for speed, memory consumption, and the list goes on.</p> 100 <p>The issue people run into is the level of understanding on each platform that is needed to solve the same problem, or in the worst case the complete incompatibility of the abstraction in respect to the problem at hand. Utilizing abstraction to cover a large 'surface area' of platforms is a trade off between the extent you can engineer using the abstraction vs. how well the abstraction preforms vs. the amount of things you can do using the abstraction:</p> 101 <pre><code>Q = ( Supported Platforms ) + ( Performance ) + ( Range ) 102 103 where Q is an unknown universal constant 104 </code></pre> 105 <p>Depending on the domain of the problems you're trying to solve using the abstraction, you can get a wide range of supported platforms and performance, with the sacrifice of the complexity of the problems you can solve with the abstraction. Alternatively, you can get optimal performance and freedom, with the sacrifice of the number of supported platforms.</p> 106 <p>Abstraction is everywhere in computing. Classifying abstractions using this made-up constraint in respect to the problem you're trying to solve using the abstraction can help you give insight to what to use.</p> 107 </div> 108 </div> 109 <div class="post"> 110 <a href="/post/ramblings_on_the_toy_language_part_2" class="link"><h1 class="header">Ramblings on the Toy Language Part 2</h1></a> 111 <span class="date">Posted on March, 24 2016</span> 112 <div class="content"> 113 <blockquote> 114 <p>In the last installment of <a href="https://banna.tech/post/ramblings_on_the_toy_language_part_1/">Ramblings on the Toy Language</a>, I talked about the definition of an instruction interpreter. Beyond interpreting instructions, providing an environment where instruction subroutines can manipulate various components of the runtime is a key factor in providing a turing-complete architecture. In this installment, I will be going over the basic components of a runtime context.</p> 115 </blockquote> 116 <h2>Runtime Context</h2> 117 <p>Much like how various components are connected together on a main bus inside a CPU, the runtime context provides references to various objects (along with their interfaces) that need to be exposed for a runtime to function. Refer to the diagram below:</p> 118 <p><img alt="runtime" src="//i.banna.tech/190blog.svg" /></p> 119 <p>In this diagram, the entry point initiates the runtime which, in turn, initiates a series of objects such as a Namespace instance, a Runtime stack, an Argument stack, and a Program counter. When a program is run, a Runtime context is then passed as the context to any instruction subroutine. Referring to the instruction <a href="http://dev.nanner.co/language/file/doc/SPECIFICATION.html#l159">specifications</a>, an instruction like <code>POP S<n></code> would manipulate the Runtime stack, while an instruction like <code>GOTO A<addr></code> would manipulate the program counter.</p> 120 <p>Each one of these objects under the runtime context have a specific interface where they are manipulated through. The idea of having opcodes as subroutines is to provide abstract wrappers around these interfaces. For example, if there were no runtime context, <a href="http://dev.nanner.co/language/file/doc/SPECIFICATION.html#l196">binary operators</a> wouldn't have a stack to push/pop to. The interface would exist, but the contextual data of specific instances of stacks are needed for a chain of instructions to properly achieve turing-completeness.</p> 121 </div> 122 </div> 123 <div class="post"> 124 <a href="/post/ramblings_on_the_toy_language_part_1" class="link"><h1 class="header">Ramblings on the Toy Language Part 1</h1></a> 125 <span class="date">Posted on February, 21 2016</span> 126 <div class="content"> 127 <p>Since the slow beginning of my senior year, I've been slowly laying out the foundations of my toy language's VM. Much like how you would implement a real machine, or any functioning system, is the fact that it can be interpreted as smaller, individual components that work together. Once you have a rough layout of the individual components and how they interact, you can implement unit tests on each component you make and ensure their behavior via comprehensive tests. Of course, certain components are more reusable than others. For this installment, I'm going to be talking about the instruction interpreter. </p> 128 <h2>The Instruction Interpreter</h2> 129 <p>This is the unit that takes a series of bytes and giving them a meaning to the machine. Instructions are single-byte opcodes, with varying length arguements depending on the opcodes definition. For example, a binary addition operator such as ADD, has 0 parameters, thus the instruction is exactly 1 byte in length. On the other hand, operators such as GOTO require an address parameter. This makes its length 1 byte for the opcode, and the length of how many bytes it takes to represent an address. For example, the mnemonic way to write the expression is as follows:</p> 130 <pre><code>GOTO 0x04 131 </code></pre> 132 <p>The above instruction implies that the address space 'width' in bytes is 1, so this instruction would take <code>1 (opcode length) + 1 (arguement length) = 2 bytes</code>. This width implication must be defined pre-execution during the initialization of the interpreter.</p> 133 <p>The instruction interpreter would have to lookup the metadata associated with the particular instruction to correctly load the correct values into references in memory. Much like how you read a book and remember important 'keyed' bits of information that chain together a story, the instruction interpreter allows the program to interpret the words of the story to be put into memory; but more on memory later. There's a few more important points that we must cover here.</p> 134 <p>Once this is done, the instructions must be traverseable by address. This will be required by the 'Program Counter'. A program counter is a unit that keeps track of the current instruction being interpreted. It must increment/decrement, and branch to arbitrary locations in memory, invoked by instructions like <code>GOTO</code>.</p> 135 <p>On top of the instruction interpreter, the logic that actually implements the definition of every single opcode must be present. Along with the logic, there are many interfaces it must communicate with that implement architecture-specific functions and external library calls.</p> 136 <p><img alt="Helpful diagram" src="//i.banna.tech/180blog.png" /></p> 137 <h2>Conclusion</h2> 138 <p>That's one small part of the big picture. The instruction interpreter covers a critical & fundamental part of the problem of getting a machine to compute. Further iterations of these posts rambling about components will continue when I get the time to type out my thoughts.</p> 139 </div> 140 </div> 141 <div class="post"> 142 <a href="/post/thoughts_on_threading" class="link"><h1 class="header">Thoughts on Threading</h1></a> 143 <span class="date">Posted on February, 02 2016</span> 144 <div class="content"> 145 <p><img src="//i.banna.tech/170blog.jpg" style="box-shadow:0px 0px 5px black"></img></p> 146 <p>'Threading' invokes a certain response in a programmers mind. To the layperson, 'Threading' (or "multithreading") implies that, given a running program, that program can run two or more pieces of code at the same time.</p> 147 <p>Multi-tasking and multi-processing dates back to the early 1970's and early 1980's, when computing required that all resources to be used in the most efficient way possible. The large, slow, and expensive computers at the time only existed in established institutions, where researchers would run computations on what were known as <a href="https://en.wikipedia.org/wiki/Time-sharing">time-sharing</a> systems. Time-sharing systems took a large 'mainframe' computer, and tied many users via teletype terminals where users would interact with the mainframe. It is this notion of multi-user systems that spawned the famous Unix systems, and the artifacts are found in the core design of any Unix-like system today. Due to these multi-user systems, time sharing algorithms have allowed the modern-day data centers to be an epicenter of distributed computations. Online services like Google, Amazon, Microsoft, and Facebook all take advantage of the idea of multi-user time-sharing systems to handle billions of requests without delay.</p> 148 <p>In the domain of individual applications, multi-threading arose when CPU's began incorporating multiple cores to simultaneously run two processes at the same time. In implementation, there are two types of threads that integrate with the operating system. One of the objectives a sane operating system must tackle is handling various processes that run on a given system. Under a process, the <a href="https://en.wikipedia.org/wiki/Kernel_(operating_system)">kernel</a> organizes what are known as 'Kernel threads', which are running programs that share resources with other kernel threads which share the same process. For any process, there is at least one kernel thread. Scheduling of kernel threads are, by definition, handled by the operating system. Due to this, a program that implements kernel threads cannot control the behavior and scheduling of the threads it creates, which may not be fine-tuned for the applications needs. Besides kernel threads, there is another type of thread implementation that handles thread scheduling in <a href="https://en.wikipedia.org/wiki/User_space">user-space</a>, as compared to kernel threads which are handled in kernel space. Userspace threading implementations take advantage of kernel threads to distribute jobs across available processors and implement a preferred scheduling scheme for the application at hand.</p> 149 <p>Modern computing wouldn't be where it is without the concept of juggling processes and threads over a shared piece of computing equipment.</p> 150 </div> 151 </div> 152 <div class="post"> 153 <a href="/post/contemplation_on_compiling" class="link"><h1 class="header">Contemplation on Compiling</h1></a> 154 <span class="date">Posted on January, 19 2016</span> 155 <div class="content"> 156 <p><img alt="compiler" src="//i.banna.tech/160blog.png" /></p> 157 <p>Computer programs that analyze and generate data that can be interpreted by lower-level systems (also known as compilers) are critical to any software developer out there. Few have ventured into how compilers generate the code that runs the programs they have meticulously designed, although understanding compilers and how they operate can help you understand why a computer program even has a chance to run on a piece of silicon.</p> 158 <p>Everyone who has played about with programming and had to use a compiler understands a few basic facts about what a compiler does:</p> 159 <ul> 160 <li> 161 <p>Looks at syntactically correct code and builds an abstract tree of data representing the code</p> 162 </li> 163 <li> 164 <p>Iterates over built 'understanding' of the code to compile and translates into lower-level commands and subroutines</p> 165 </li> 166 <li> 167 <p>Links with external libraries and spits out an executable that does what the original code meant to do</p> 168 </li> 169 </ul> 170 <p>Beyond that, mainstream compilers implement further steps such as many different standards and optimization for specific platforms. When going out to implement a compiler there are a myriad of things to consider for even the most simplistic compiler out there. The first step is how a compiler can translate code such as <code>int x = 3;</code> into its own meaning.</p> 171 <h2>Lexical Analysis</h2> 172 <p>A way to make a computer program understand code is using a 'Lexer', or what is known as <a href="https://en.wikipedia.org/wiki/Lexical_analysis">Lexical Analysis</a>. Put in layman's terms, this process takes a string such as <code>int x = 3;</code> and parses each digestible bit of information that string provides into what can be called 'tokens'. For example, on the string <code>int x = 3;</code> the list of tokens would be as follows:</p> 173 <table> 174 <tr> 175 <th>String</th> 176 <th>Token Type</th> 177 </tr> 178 <tr> 179 <td><code>int</code></td> 180 <td>Type</td> 181 <tr> 182 <td><code>x</code></td> 183 <td>Variable Name</td> 184 </tr> 185 <tr> 186 <td><code>=</code></td> 187 <td>Assignment Operator</td> 188 </tr> 189 <tr> 190 <td><code>3</code></td> 191 <td>Static Value</td> 192 </tr> 193 <tr> 194 <td><code>;</code></td> 195 <td>End of statemnet</td> 196 </tr> 197 </table> 198 199 <p>From this table, each string is represented as an individual 'Token Type'. Building on top of this analysis, using computational logic these arrays of tokens and strings can be classified much easier than if the string were given as is. Once a string of tokens is classified an auxiliary algorithm can apply the values provided into a set of op-codes designed for that specific purpose.</p> 200 <h2>What is a variable?</h2> 201 <p>The biggest concept in computer programming that one comes across is the idea of a <em>variable</em>. When you assign a variable, you generally intend to change its value. For this to happen, you have to know where to find the variable. This is where compilers come in. Tell a computer to find <code>mySuperImportantVariable</code>, and it will act very confused. A computer only knows how to find a value based on a number. But wait, you said? Your program uses human-readable words for variables? Well, no. Code uses human-friendly, easy-to-remember words for variable names. To a computer, these easy-to-remember words take a long time to find due to the amount of different names that can possibly exist given a string with the length <code>n</code>. Before code is compiled into an executable program, the compiler must translate these easy to remember names into specific addresses in some region of memory. For this to happen, the compiler must know how to translate these names into addresses.</p> 202 <p>Translating human readable names into addresses boils down to counting ducks. For each instantiated variable, depending on scope, will be assigned a unique identifier that, for all intensive purposes, can just be a number. Each variable in the run-time environment would be just an integer pointing to a location in memory, whether it is a function, object, or a fundamental data type.</p> 203 <h2>Concluding thoughts</h2> 204 <p>Each and every program ever ran uses a compiler (or assembler) to translate human-friendly syntax into the simplistic instructions that computers can understand.</p> 205 <p>One good reading into simple compilers is <a href="http://compilers.iecc.com/crenshaw/">Let's build a compiler, by Jack Crenshaw</a>. It covers the concepts required to make a simplistic compiler and a basic programming language.</p> 206 </div> 207 </div> 208 <div class="post"> 209 <a href="/post/chained_conditional_expressions_in_python" class="link"><h1 class="header">Chained conditional expressions in python</h1></a> 210 <span class="date">Posted on July, 12 2015</span> 211 <div class="content"> 212 <blockquote> 213 <p>NOTE: Before you start reading this, read up on <a href="https://en.wikipedia.org/wiki/Stack_machine">stack machines</a> if you have not done so yet. In this post I'll be going over some python bytecode, knowing what a stack machine will help a lot!</p> 214 </blockquote> 215 <pre><code>False == False in [False] 216 </code></pre> 217 <p>A friend had recently showed this statement to me, and asked what it evaluates 218 to. I replied 'False', of course, since <code>False == False</code> is <code>True</code>, and <code>True</code> 219 is not in the list <code>[False]</code>. Until, of course, I threw it in the python 220 interpreter.</p> 221 <pre><code>>>> False == False in [False] 222 True 223 </code></pre> 224 <p>Now, now... what's this madness? Is python pulling a javascript? To answer this 225 problem we will disassemble a python function into python bytecode and evaluate 226 it line-by-line.</p> 227 <pre><code>>>> def func(): 228 ... # We'll name these constants as they pop up in the stack 229 ... # A B C 230 ... return False == False in [False] 231 ... 232 >>> import dis 233 >>> dis.dis(func) 234 2 0 LOAD_GLOBAL 0 (False) 235 3 LOAD_GLOBAL 0 (False) 236 6 DUP_TOP 237 7 ROT_THREE 238 8 COMPARE_OP 2 (==) 239 11 JUMP_IF_FALSE_OR_POP 24 240 14 LOAD_GLOBAL 0 (False) 241 17 BUILD_LIST 1 242 20 COMPARE_OP 6 (in) 243 23 RETURN_VALUE 244 >> 24 ROT_TWO 245 25 POP_TOP 246 26 RETURN_VALUE 247 </code></pre> 248 <h3>Lines 0-3</h3> 249 <p>On lines 0-3, <code>LOAD_GLOBAL</code> is called twice to load <code>A</code> and <code>B</code> into the stack. Below is a representation of the stack, with the label/ID mnemonic above each stack element. </p> 250 <pre><code># TOS (top-of-stack), TOS1 251 # B A 252 stack = [False, False] 253 </code></pre> 254 <h3>Line 6</h3> 255 <p><code>DUP_TOP</code> duplicates the 'top' of the stack.</p> 256 <pre><code># TOS , TOS1 257 # DUP.B B A 258 stack = [False, False, False] 259 </code></pre> 260 <h3>Line 7</h3> 261 <p><code>ROT_THREE</code> rotates the top three elements in the stack.</p> 262 <pre><code># TOS , TOS1 263 # B A DUP.B 264 stack = [False, False, False] 265 </code></pre> 266 <h3>Line 8</h3> 267 <p>The next instruction is <code>COMPARE_OP(==)</code>, which compares if <code>TOS == TOS1</code>, 268 pops <code>TOS</code> and <code>TOS1</code> before pushing the result of <code>TOS == TOS1</code>.</p> 269 <pre><code># TOS , TOS1 270 # A==B, DUP.B 271 stack = [True, False] 272 </code></pre> 273 <h3>Line 11</h3> 274 <p><code>JUMP_IF_FALSE_OR_POP</code> jumps if <code>TOS == False</code>, else it pops the stack and moves 275 on</p> 276 <pre><code># TOS 277 # DUP.B 278 stack = [False] 279 </code></pre> 280 <p>Huh, won't you look at that? The result of <code>False == False</code> was thrown away 281 completely, leaving only the duplicate of B in the stack. This tells me that my 282 initial theory was completely wrong, python is not chaining these operations 283 together at all!</p> 284 <h3>Lines 14-17</h3> 285 <p>Now, the next set of instructions (14-17) builds the list, by pushing <code>False</code> on 286 the stack and using <code>BUILD_LIST(size)</code> to create the list.</p> 287 <pre><code># TOS , TOS1 288 # C B 289 stack = [List, False] 290 </code></pre> 291 <h3>Line 20</h3> 292 <p><code>COMPARE_OP(in)</code> tests whether <code>TOS1</code> is in list <code>TOS</code>, which is <code>True</code>.</p> 293 <pre><code># TOS 294 stack = [True] 295 </code></pre> 296 <p>The line after that is <code>RETURN_VALUE</code>, which returns the value of <code>TOS</code>, which 297 is what we get when we run func()</p> 298 <h2>Analysis</h2> 299 <p>From what we can see, python does not chain these operations together as 300 expected. It actually doesn't chain the operations together at all.</p> 301 <p>Looking at what values are in the stack at each instruction, we can see that 302 instead of keeping the result of <code>A == B</code>, it keeps what we named as <code>B</code> 303 in the stack and tested whether or not <code>B</code> was in the list <code>C</code>. On line 11, 304 <code>JUMP_IF_FALSE_OR_POP</code> was used. If <code>A == B</code> were to evaluate to <code>False</code> 305 , it would end up jumping to line <code>24</code> and return <code>False</code>.</p> 306 <h2>Conclusion</h2> 307 <p>In short, what the bytecode tells us is that the statement we wrote as</p> 308 <p><code>A == B in [C]</code> is interpreted as <code>A == B and B in C</code>.</p> 309 <p>This must mean that given a statement structure as <code>A is B is C</code>, the statement 310 is expanded into <code>A is B and B is C</code>.</p> 311 </div> 312 </div> 313 <div class="post"> 314 <a href="/post/a_hacky_alternative_to_image_identification_using_grids" class="link"><h1 class="header">A Hacky Alternative to Image Identification Using Grids</h1></a> 315 <span class="date">Posted on June, 24 2015</span> 316 <div class="content"> 317 <p>Since my last post about R3CI, a whole lot of progress has been done on the project. The server side is up to par, implementing modular protocol type handlers. The client side is up to the bare minimum, supplying the baseline functions for the final test.</p> 318 <p>As expected of one critical component of R3CI, classifying all of the robots could not be done within the time-span given to us. An unfortunate statement to make indeed, but this allows me to test how robots behave under a 'blindfold' per-se. The solution to this problem is to rely on the coordinate grid alone, and identifying robots based solely on the relative coordinates of robots in the grid. Of course, this is not ideal due to imperfections within accurately updating the robots coordinates. For now, we will assume the coordinate grid is accurate.</p> 319 <p>The overview of the idea is to 'simulate' the area of vision the image would produce, using only the relative x,y coordinates of each robot. This can be implemented in many ways, but I chose to use a quadratic function inequality to render a robot 'in view' and 'out of view'. This may seem hacky, but- well, it's because it is.</p> 320 <p>The quadratic function is simply</p> 321 <pre><code>y > x^2 + x_off*x + y_off 322 </code></pre> 323 <p>And it's output where <code>x_off</code> and <code>y_off</code> both equal 0 is</p> 324 <p><img src="//i.banna.tech/140blog.png" style="box-shadow:0px 0px 3px #ffffff;" /></p> 325 <p>On the coordinate grid, the robot trying to see what is in front of itself exists at 0,0 (This is why <code>x_off</code> and <code>y_off</code> are set to 0 in the example). Any coordinate in the light blue shaded region is where a robot will be 'seen'. This is great and all, but it has a shortfall- The angle of the robot trying to 'see' <em>must</em> be at 90 degrees.</p> 326 <p>The step that must be done before you check whether a robot is in sight or not is to rotate the entire coordinate plane thus that the robot's angle is 90 degrees relative to every other robot. This can be done with two simple functions for x and y.</p> 327 <pre><code>f(x) = cos(angle)x + sin(angle)y 328 329 f(y) = -sin(angle)x + sin(angle)y 330 </code></pre> 331 <p>What this produces is the coordinates of x,y translated by the angle specified. Translating the coordinate plane thus that the robot's angle is 90 degrees, and feeding in the quadratic equation should yield the desired results.</p> 332 <p>Overall, this solution is a good way to roughly simulate what using image identification can do with much less processing power. For this to be implemented in the future though, keeping the coordinate grid accurate is a must.</p> 333 </div> 334 </div> 335 <div class="post"> 336 <a href="/post/a_week_of_design" class="link"><h1 class="header">A Week of Design</h1></a> 337 <span class="date">Posted on May, 04 2015</span> 338 <div class="content"> 339 <p><img src="//i.banna.tech/130blog.jpg" style="box-shadow:0px 0px 3px #000000"></img></p> 340 <p>The work on R3CI continues. In the previous week, my partner and I transformed an abstract idea of problems that R3CI would solve into a solidified set of problems. The next step is to take each component specified to fully design and lay out to be implemented. The first component on the list is the communication system and protocol.</p> 341 <p>The week was spent pondering on implementation, efficiency, and most importantly, implementation. The protocol at its lowest level is handled by TCP, where the rest of the R3CI protocol is layered on top of. The data being transferred takes form as JSON, due to its simplicity and the wide availability of parser libraries for every mainstream language. This also implies that all data will be sent as text. This simplifies the system, although images must be encoded in base64 to be sent over the protocol. This will be interesting due to the conversion time, and how data may be inflated. Communication types will be dynamic, as the protocol will support database fetch/set, image identification, communication, and along with a system in place to add a custom subset to the protocol. In conclusion, the protocol should provide one necessary component to the R3CI system. </p> 342 </div> 343 </div> 344 <div class="post"> 345 <a href="/post/the_birth_of_a_robot_infrastructure" class="link"><h1 class="header">The Birth of a Robot Infrastructure</h1></a> 346 <span class="date">Posted on March, 06 2015</span> 347 <div class="content"> 348 <p><img src="//i.banna.tech/120blog.png" style="box-shadow:0px 0px 3px #FFFFFF"></img></p> 349 <p>This week was a different one. My friend and I took our first steps in designing the utilities for a class project. The project requires a group of robots, individually controlled by each students code, to interact in a 'play' sequence. Each robot has a different routine for all of our robots in the play. This project requires a system to identify robots based on image capture, along with getting the robots unique identity. This is obviously a pretty large task to a group that doesn't particularly know their way around programming, so the obvious course of action was to make a reusable library for each student to use and interact with to get the 'hard' stuff out of the way.</p> 350 <h3>'R3CI'</h3> 351 <p>So it begins. The name for the library that handles all the tricky parts of the project consolidated in the blood, sweat and tears of my friend and I. The abbreviation stands for "Robot Coordination, Collision, Communication and Identification". The library will handle how the robots coordinate between each-other, detecting and avoiding collisions, handling communication between robots, and how robots identify each-other. The most interesting part to implement will be identifying different robots based solely on a crappy camera embedded into the IPRE cards in the robots. My friend, ryan, suggests using OpenCV on an outside server to processes images against a database of every robot. This is a task unto itself, as it requires taking an array of photos of each robot at every angle possible, and running a training program that builds up OpenCV-compatible data for image recognition that takes some time to complete. Over all, this is a very big project that will take some time to complete. </p> 352 </div> 353 </div> 354 <div class="post"> 355 <a href="/post/the_struggles_of_being_forced_to_think_about_what_youre_coding" class="link"><h1 class="header">The struggles of being forced to think about what you're coding</h1></a> 356 <span class="date">Posted on December, 19 2014</span> 357 <div class="content"> 358 <p>Embarking on a project from scratch in a new environment was an interesting task. This week I was planning, and started the base for a toy assembly compiler for an instruction set I implemented not too long ago in a <a href="http://www.cburch.com/logisim/">logisim</a> CPU. For the futures sake, I decided instead of using the boring Python to accomplish this task, I would use C. Over the summer and beginning of this year I have been browsing around C source code for popular applications, and getting to know the standard libraries and how people use them efficiently.</p> 359 <p>Starting out was hard. I had to sit down and think how the program would read the file, and break the lines up into consumable chunks for my program to decipher. Working in a different language makes you think about how you are going to do things with the tools at hand. Unlike python, C is a simple procedural language with many different types of tools to manipulate data at a low level. The design for this program was thought out keeping in mind the way C operates.</p> 360 <p><img alt="compiled vs. interpreted" src="//i.banna.tech/110blog.gif" /></p> 361 <p>Implementation was another task. Compiling, running and debugging is a new experience that I wish I started out in. Compared to a programming language, an interpreted language uses high-level datatypes that require a lot of effort to implement in C. Going from having a nice air conditioned house to a hut in the middle of Antarctica where all of the conveniences have been ripped out and stomped on by a large elephant. In all, it was a fun challenge and I hope what I learned this week will help me make bigger and better projects for the future.</p> 362 </div> 363 </div> 364 <div class="post"> 365 <a href="/post/colleagues" class="link"><h1 class="header">Colleagues.</h1></a> 366 <span class="date">Posted on November, 14 2014</span> 367 <div class="content"> 368 <p>Two people with a mutual goal, with two different styles. Of all the weeks, my <a href="http://rjgordon.net">friend</a> and I usually end up working on different projects that peak our interest the most. Although, this week was a tad different. As explained in a <a href="/post/venturing_into_enterprise-grade_servers/">previous post</a>, we have the responsibility of helping out a club set up their IT infrastructure. Fast-forward to now, and it's back in our hands. This time we are setting up a QuickBooks server, along with making scripts to backup files and handle miscellaneous tasks. To even out the workload, we end up working on different parts of the script...</p> 369 <p><img src="//i.banna.tech/100blog.png" title="source: xkcd.com/1285/" /></p> 370 <p>In my short time of pressing buttons, I had never started a project with another person. Every group project was either already started, or I started it alone. This time, I started the base utilities and let my colleague work on one functionality. Over all, things went smoothly and it was a new experience I can tack on to my list of things I have done in my life.</p> 371 </div> 372 </div> 373 <div class="post"> 374 <a href="/post/a_vacation_from_summer" class="link"><h1 class="header">A Vacation from Summer</h1></a> 375 <span class="date">Posted on August, 30 2014</span> 376 <div class="content"> 377 <p>Some people wish it never happened, some people wish it would never end. The days of going to bed at 3 AM and waking up with a back ache and to a clock that reads "2 PM", sending you into a downward spiral of a shifted sleep pattern, ending up to haunt you until the day your alarm clock slaps you in the face at 6:00 AM.</p> 378 379 <p>Most days of summer you wake up with one agenda: To have no agenda. Wake up, do routine, and proceed to do nothing until you feel like doing something. The other days that account for summer is when you do have an agenda, to go somewhere, to do something: to adhere to a schedule.</p> 380 381 <p>Now that the seasons are shifting, a vacation from summer is upon people associated with public schooling. The differences from Summer to School is something that a kid would think is a banana to the Large Hadron Collider.</p> 382 383 <p>It's just not the same.</p> 384 385 <p>Most days of the school year, you wake up, do your routine, and proceed to <em>adhere to a schedule</em> until the day is over. The other days that account for the school year is when you do <em>not</em> have an agenda.</p> 386 </div> 387 </div> 388 <div class="post"> 389 <a href="/post/venturing_into_enterprise-grade_servers" class="link"><h1 class="header">Venturing into Enterprise-grade servers</h1></a> 390 <span class="date">Posted on June, 20 2014</span> 391 <div class="content"> 392 <p>The smell of a fresh server <em>SCREAMING WITH THE POWER OF TWO XEONS</em> is a great way to start the day.</p> 393 394 <p><img src="//i.banna.tech/80blog.png" style="box-shadow:none"></img> 395 <p>During my little adventures in my vocational class, I got to play with two Dell PowerEdge 1950's. Disregarding the brand, these two servers were pretty impressive. The servers specs included 2 Xeons, 16GB of RAM, a few Gigabit Ethernet ports, and a RAID card and 4 HDDs. The first logical step was to set up RAID for the hard drives.</p> 396 <p>The different options for RAID was an intimidating task to undergo, with terms such as "Stripe size" and "Dynamic cache" were new and interesting concepts. The goal for this server was to throw VMWare ESXi on one "OS" drive, two drives in RAID 1, and the last drive dedicated to backups.</p> 397 <p>The drives in RAID 1 would run various VMs handled by the OS. These VMs would run things such as SQL servers, web servers and various other environment-optimized applications. When it came to the OS for virtual machines, installing the toolkit for configuring the machines was the easy way. The corny name of vSphere Hypervisor is what ESXi uses for remote configuration, and it's what was used to set up a LAN of a laptop-server network to configure the proper Virtual Machines. Due to the demands of who we were setting the servers up for, Windows 7 was required for the SQL server (don't ask...). The Windows 7 template was configured to have the pagefile removed, Performance monitoring off and various other small teaks to lower the VMs impact on the server. After that, the first iteration of the server was practically complete.</p></p> 398 </div> 399 </div> 400 <div class="post"> 401 <a href="/post/somethings_new_in_the_air" class="link"><h1 class="header">Something's new in the air</h1></a> 402 <span class="date">Posted on May, 25 2014</span> 403 <div class="content"> 404 <p>After a week of work, I finally moved away from my weird blogging platform written in a weird language.</p> 405 406 <p>When I started this little project to make a website of my own, I was dabbling in the art of "PHP". This was a very dangerous, and a rather scary art. My little website needed a way to dynamically manage content, for it would be a Blog in which I would write posts of text and share it with the internet. It so happens that I started delving into PHP to do such a task.</p> 407 408 <p>A few hours later of thinking about how I would do such a thing and bam, I came up with a way to have a small text database in JSON to assemble a page with various posts based of a series of templates and some fancy text manipulation skills. At the time, the simplicity astounded me. The architecture went something like this: index.php, posts.json and pagedata.json all in a directory, index.php reads pagedata.json and constructs a template and evaluates any sort of queries, and then takes data from posts.json and assembles the proper page for a specific request. For any other page, you would just configure pagedata.json to get the proper output.</p> 409 410 <p>At the time, this was on-par with what I required. As time progressed, I slowly began to realize that maybe this wasn't a best idea.</p> 411 412 <p>For example, as the posts accumulated I noted that the size of posts.json and how inefficient it is to load that big of a file every time someone loads the page. The idea then struck me to create a static website builder.</p> 413 414 <p>The concept is simple: Take a configuration and various templates to create the entire site into html files, and serve them instead of evaluating scripts. For large sites with content create by users that require accounts, this is not possible. But for a simple blog that should be static in the first place, it is the best option.</p> 415 416 <p><img src="//i.banna.tech/70blog.png" style="box-shadow:none"></img> 417 <p>When it came to actually creating the first iteration of the program, things were slow and steady. To transition from a script that created all the pages from just spitting out a string on the request of a page, to something that interpreted and built the entire website with one command was something that required some thinking. The concept for the program was to take a generic configuration specifying the page name, page variables, templates, and modules for a given page. The program then would go through each page and generate a template and run a specified module to create a set of subpages. Once all the pages were done being processed, the site with all the pages and subpages would be written to a directory. With the new content managing system, there is no more limitations to what pages can look like and behave.</p></p> 418 </div> 419 </div> 420 <div class="post"> 421 <a href="/post/javascripts_past" class="link"><h1 class="header">JavaScript's Past</h1></a> 422 <span class="date">Posted on May, 01 2014</span> 423 <div class="content"> 424 <p>JavaScript in its early days was like an emotionally troubled teenager trying to find individuality: It developed its style almost overnight, went through various name changes to get attention, and then sooner or later growing up and finally adopting standards.</p> 425 426 <p><img src="//i.banna.tech/60blog.svg" style="box-shadow:none" height="191" width="700"></img> 427 <h2>Beginnings. </h2> 428 <p>JavaScript was originally created by <a href="http://en.wikipedia.org/wiki/Brendan_Eich">Brenden Eich</a>, in a mere 10 days around May 1995. The original name of JavaScript was Mocha, chosen by the founder of NetScape, <a href="http://en.wikipedia.org/wiki/Marc_Andreessen">Marc Andreessen</a>. Later followed another name change in September 1995 to LiveScript, then December of the same year upon receiving a trademark license from Sun, the name JavaScript was adopted. Why the name JavaScript? The name JavaScript was chosen due to the popularity of Java during the time. Later in that year, 1996 - 1997 JavaScript was taken by ECMA to lay out a standard specification. After some time, the standard ECMA-262 Ed.1 was now what we know as the implementation of JavaScript.</p> 429 <h2>Horray for a new era!</h2> 430 <p>Currently, JavaScript and HTML/CSS are going through a new cycle in the development of the web. With the introduction of HTML5, CSS3 and Nodejs. With these new standards and technologies, things on the web can have more functionality than ever. And no, don't forget that JavaScript is <em>not</em> Java! Java is a programming language that runs in a Runtime Environment on your desktop. Never forget this.</p></p> 431 </div> 432 </div> 433 <div class="post"> 434 <a href="/post/the_sun_has_risen" class="link"><h1 class="header">The sun has risen.</h1></a> 435 <span class="date">Posted on March, 13 2014</span> 436 <div class="content"> 437 <p>Every time you turn on your local news station and prop your view into the dead glare of the reporter and his monotone voice, 75 percent of the time the next thing he's going to tell you is bad news.</p> 438 439 <p><img alt="news" src="//i.banna.tech/50blog.jpg" /></p> 440 441 <p>It seems as if all we like to talk about is negative instances of news. When you wake up, you will find that nobody will greet you in a friendly voice and say <em>"Great news! The sun has risen, there's no apocalyptic event, and there's no war! What a great day!"</em></p> 442 443 <p>According to a <a href="http://faculty-gsb.stanford.edu/heath/documents/Good%20news,%20bad%20news-OBHDP.pdf">study</a> conducted by the University of Chicago, we love bad news. The study found that people would pass on exaggerated news in the general direction of the conversation. People who are in a negative conversation were more willing to greatly exaggerate negative topics, and even favor the negative topics rather than the positive topics. Negative topics also tended toward uncontrollable variables that doesn't lead toward any action.</p> 444 445 <p>The media is a big factor in the negative train. Media is many things, and what it isn't is helpful. For the most part, media networks focus on irrelevant information that gets you to pay attention, may the information be something that is taboo to the society, or something completely absurd. On the bright side, the Huffington Post has a <a href="http://www.huffingtonpost.com/good-news/">good news</a> section to their news.</p> 446 447 <p>Generally, ignoring any media channel in favor of any reputable source will make your days just smidgen better.</p> 448 </div> 449 </div> 450 <div class="post"> 451 <a href="/post/efficiency_of_2d_typed_arrays_vs_normal_arrays" class="link"><h1 class="header">Efficiency of 2D Typed Arrays vs Normal Arrays</h1></a> 452 <span class="date">Posted on February, 22 2014</span> 453 <div class="content"> 454 <p>The efficiency of some aspects of JavaScript surprise me, in good ways and bad ways.</p> 455 456 <p>When working on my latest <a href="//banna.tech/projects/?title=Game_of_Life">project</a>, It was originally using the normal <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a> that JavaScript provides, since it was the most straight-forward option. The project required to use a 2D array to store points on a grid.</p> 457 458 <p>The method used to create a 2D array was by nesting Arrays with two coordinates in one big array:</p> 459 460 <pre><code>var array = [[x0,y0],[x1,x2]]; 461 array[i][0] = x; 462 array[i][1] = y;</code></pre> 463 464 <p>Originally I thought this method was fine and dandy until I realized that the algorithm is extremely slow... Looking over it I saw nothing that I could improve so I just set it back into the corner for a bit.</p> 465 466 <p>Flash-forward a week, and I find the existence of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a>. </p> 467 468 <p><strong>What's so special about Typed Arrays?</strong> Well, there's a myriad of differences between Typed arrays and normal arrays. First off, with normal JavaScript Arrays, they're not actually arrays. What I mean by this is that JavaScript arrays are actually just key-value objects, and the indexes are not integers, they're strings- generally. JavaScript engines do different things with Arrays, and that's where JavaScript gets its unreliable <a href="https://github.com/sq/JSIL/wiki/JavaScript-Performance-For-Madmen">performance</a> from. Typed Arrays on the other hand uses a set chunk of memory to construct a C-style array with a variety of different data Types (and yes, this does mean that all numbers in JavaScript that aren't doubles).</p> 469 470 <p>Using 2D Typed Arrays is a bit more complex initially. First, nesting Typed Arrays is pointless, since you're still using the wonky normal arrays. Therefore, we must create a flat array that's x*y big. For a Boolean Typed Array we will use an Unsigned 8 bit Array:</p> 471 472 <pre><code>var array = new Uint8Array(Array(x*y))</code></pre> 473 474 <p>To read/write to this array, we must assume how the data is stored. In languages like C, this is generally implemented in a colexicographic order (also known as <a href="http://en.wikipedia.org/wiki/Row-major_order">Row-major order</a>), likewise in other languages like Fortran use a lexicographic ordering (also known as Column-major order). Assuming a colexicographic order, we can calculate an offset based on X Y coordinates, like so:</p> 475 476 <pre><code>index = (columns * x) + y</code></pre> 477 478 <p>With this offset calculated, all we have to do is throw it as an index in our typed array in one neat little statement:</p> 479 480 <pre><code>//maxy is the maximum Y value 481 array[maxy*x+y] = 1;</code></pre> 482 483 <p>Originally I was a tad naive on the speed, so I ran some <a href="http://jsperf.com/performance-of-2d-typed-arrays-vs-normal-arrays">tests</a>. The results I got were shocking, since I knew the normal arrays in JavaScript were bad but... that bad?</p> 484 485 <p><img alt="Graph" src="//i.banna.tech/40blog.png" /></p> 486 487 <p>This test did 1 basic operation: go through a 1,000^2 2D array and set all the values to one.</p> 488 489 <h2>Setup:</h2> 490 491 <pre><code>var normal = []; 492 var typed = new Uint8Array(new Array(1000*1000));</code></pre> 493 494 <h2>Normal Array:</h2> 495 496 <pre><code>for (var x = 0; x < 1000; x++) { 497 for (var y = 0; y < 1000; y++) { 498 normal.push([x,y]); 499 } 500 }</code></pre> 501 502 <h2>Typed Array:</h2> 503 504 <pre><code>for (var x = 0; x < 1000; x++) { 505 for (var y = 0; y < 1000; y++) { 506 typed[1000*x+y] = 1; 507 } 508 }</code></pre> 509 510 <p>The normal array was 95% slower than the typed array on average. To put that in perspective, the normal array did 32 operations per second on average. The typed array on the other hand did 575 operations/second on average, leaving it 18x faster than the normal array.</p> 511 512 <p>In hindsight, I feel pretty dumb to even use my original method.</p> 513 </div> 514 </div> 515 <div class="post"> 516 <a href="/post/polar_vortices_and_cold" class="link"><h1 class="header">Polar Vortices and Cold</h1></a> 517 <span class="date">Posted on January, 26 2014</span> 518 <div class="content"> 519 <p>Cold weather is the worst. It deceives you with its clear blue skies and glowing sun, teasing you from your window to walk outside. The second you walk into nature's domain, it bites you with the bitterness of cold. The only safe place from the dreaded cold is indoors, where the artificial warmth of space-heaters and oil burners surrounds you. </p> 520 521 <p>From your window, the first thing that pops into your mind is "Oh, well so much for global warming!"</p> 522 523 <p>That is not the case.</p> 524 525 <p>The mythical "Polar Vortex" you hear on the news is responsible for the dreaded cold. A polar vortex (or polar vortices) is the persistent large-scale cyclone on Earths north and south poles, and on every other planet in the solar system. These cold, low pressure areas are caused by the temperature differentials between the equator and poles. Occasionally, they move out of the polar regions and move closer to the equator. (<a href="http://en.wikipedia.org/wiki/Polar_vortex">source</a>)</p> 526 527 <p>The issue with this is people forget that global warming still exists and disregard it simply because it's cold in their region.</p> 528 529 <p><img alt="xkcd" src="//i.banna.tech/30blog.png" /></p> 530 531 <p>Globally, 2013 was recorded as the 7th warmest year, tied with 2009 and 2006. The average temperature in 2013 was 14.6 degrees Celsius (58.3 Fahrenheit). That's 0.6 C (1.1 F) warmer than the mid-20th century baseline. Over all, the global temperature has risen about 0.8 C (1.4 F) since 1880 (<a href="http://climate.nasa.gov/news/1029">source</a>).</p> 532 533 <p>The use of greenhouse-gas polluting fuel sources must be replaced with another means of generating energy if we don't want to boil us right off the face of earth.</p> 534 </div> 535 </div> 536 <div class="post"> 537 <a href="/post/data_centers" class="link"><h1 class="header">Data Centers</h1></a> 538 <span class="date">Posted on January, 12 2014</span> 539 <div class="content"> 540 <p><img alt="data center" src="//i.banna.tech/20blog.jpg" /></p> 541 542 <p>They're big, complex and loud. The fail-safes, redundancies and new technologies are in quantities enough to make your brain turn into potato soup. Data centers are generally things you don't hear about since of the years of research and experience of their staff and developers to keep their facilities in working order without question.</p> 543 544 <p>This week my computer programming class took a trip to an IT Service called <a href="http://www.earthlink.net/">EarthLink</a>. During this trip they toured us around their Data Center and told us some facts on their Data Center.</p> 545 546 <p>A few of the facts listed:</p> 547 548 <ul> 549 <li> 550 <p>They hosted the Boston Marathon runner information/website</p> 551 </li> 552 <li> 553 <p>They have multiple fall-back 10 gigabit connections</p> 554 </li> 555 <li> 556 <p>The current technology will be completely replaced in the next 5 years</p> 557 </li> 558 <li> 559 <p>The density of computing power doubles every year</p> 560 </li> 561 </ul> 562 563 <p>It was interesting seeing a part of the internet in person. The average Joe never comprehends what's behind their computer when they access a webpage and how companies and governments allow the internet to connect every single person. With this complex network established, businesses can leverage this connection to make our life easier and more entertaining. The technology will only double in speed, power, and size, which I look forward to.</p> 564 </div> 565 </div> 566 <div class="post"> 567 <a href="/post/query_selectors_in_css" class="link"><h1 class="header">Query Selectors in CSS</h1></a> 568 <span class="date">Posted on January, 07 2014</span> 569 <div class="content"> 570 <p>CSS3 has some funky features that allow you to make dynamic websites without using JavaScript once. One of these features is the <code>@media</code> selector. <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Syntax">documentation</a></p> 571 572 <p><code>@media</code> allows you to enable properties on elements depending on screen size.</p> 573 574 <p>To do this, simply type <code>@media <condition> { css }</code></p> 575 576 <p>example:</p> 577 578 <pre><code>@media (min-height:600px) and (orientation:landscape) { 579 div { 580 background-color:red; 581 } 582 }</code></pre> 583 584 <p><code>(min-height:600px)</code> is a condition where <code>min-height</code> checks if the minimum height is <code>600px</code>. The <code>and</code> is a logical operator specifying that both conditions on either side must evaluate to true, to be true.</p> 585 586 <p>You can implement this selector when loading style-sheets onto your HTML document to select between completely different style-sheets based on screen size.</p> 587 588 <pre><code><link rel="stylesheet" media="only screen and (max-width: 999px) and (min-width:635px)" href="style.css" /> 589 </code></pre> 590 <p>The <code>media</code> attribute in the link element allows a stylesheet to be evaluated & conditionally loaded.</p> 591 592 <p>Here's an example of loading 3 different stylesheets for desktop, tablet and mobile</p> 593 594 <pre><code><meta name="viewport" content="width=device-width, initial-scale=1"> 595 <link rel="stylesheet" media="only screen and (max-width: 634px)" href="mobile.css" /> 596 <link rel="stylesheet" media="only screen and (max-width: 999px) and (min-width:635px)" href="tablet.css" /> 597 <link rel="stylesheet" media="only screen and (min-width: 1000px)" href="desktop.css" /> 598 </code></pre> 599 <p>Here's a list of all the conditions (<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Media_features">documentation</a>):</p> 600 601 <ul> 602 <li> 603 <p>width | min-width | max-width</p> 604 </li> 605 <li> 606 <p>width | min-width | max-width</p> 607 </li> 608 <li> 609 <p>device-width | min-device-width | max-device-width</p> 610 </li> 611 <li> 612 <p>device-height | min-device-height | max-device-height</p> 613 </li> 614 <li> 615 <p>aspect-ratio | min-aspect-ratio | max-aspect-ratio</p> 616 </li> 617 <li> 618 <p>device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio</p> 619 </li> 620 <li> 621 <p>color | min-color | max-color</p> 622 </li> 623 <li> 624 <p>color-index | min-color-index | max-color-index</p> 625 </li> 626 <li> 627 <p>monochrome | min-monochrome | max-monochrome</p> 628 </li> 629 <li> 630 <p>resolution | min-resolution | max-resolution</p> 631 </li> 632 <li>scan | grid</li> 633 </ul> 634 </div> 635 </div> 636 <div class="post"> 637 <a href="/post/hi" class="link"><h1 class="header">hi</h1></a> 638 <span class="date">Posted on November, 20 2013</span> 639 <div class="content"> 640 <p><img alt="" src="//i.banna.tech/00blog.jpg" />Blogs. They're interesting things, you write on them, and people view them- I hope?</p> 641 642 <p>It's my first post, and I just got done making the editor interface for my website...</p> 643 644 <p>It's exciting seeing something you thought up come to life after about two weeks of work. The satisfaction of having everything complete- or at least in working order -is a very relieving one.</p> 645 646 <p>Thanks for reading my first post, have a nice day, whomever it may concern.</p> 647 </div> 648 </div> 649 650 651 </div> 652 </div> 653 </body> 654 </html>