brozek/website
1
0
Fork 0
mirror of https://github.com/Brandon-Rozek/website.git synced 2025-12-11 12:40:25 +00:00
Code Issues Projects Releases Packages Activity

Removing raw HTML

Browse source
This commit is contained in:
Brandon Rozek 2025-02-16 22:04:56 -05:00
parent e06d45e053
commit 572d587b8e
No known key found for this signature in database
GPG key ID: DFB0E78F805F4567
33 changed files with 373 additions and 386 deletions
Download patch file Download diff file Expand all files Collapse all files

286
content/blog/2015-10-10-javascript-data-types.md
View file

@ -20,288 +20,266 @@ tags: ["Web", "JS"]
---
Javascript has multiple ways you can store your data. Each of these different ways is called a data type, and they each carry different “methods” which are helpful commands. Today, I’ll show you the different data types and methods that I use and how they’re useful.
<!--more-->
This post is by far not a comprehenive list of all the Data types and their methods. If you want one of those, please check out [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) and/or [WebPlatform](http://docs.webplatform.org/wiki/javascript/objects){.broken_link}. This is the second lecture of the web development class I’m teaching for the newer folks over at [Math I/O](http://math-io.com). Due to the nature of Math I/O (making math games and all), the next few posts will be Javascript centric. We’re getting ready to build a new game, so I want to prepare them as much as possible. \*Excited\* ^_^ Ilya Kantor does a good job of descibing Javascript data types and their many methods in [Mastering Data Types](http://javascript.info/tutorial/mastering-data-types) which I made the recommended reading for this lecture.
### <a href="#string" name="string"></a>String {#string}
### String
A string is one or more characters.
<pre><code class="language-javascript">var name = "Brandon";</code></pre>
```javascript
var name = "Brandon";
```
You can access a character inside of a string by using [] notation. Inside the [] you put the index of the character you want. An index is the numeral location of the character starting from the left. It is important to note that Javascript starts counting from 0.
<table border="1">
<tr>
<td>
B
</td>
| B | r | a | n | d | o | n |
| ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| 0 | 1 | 2 | 3 | 4 | 5 | 6 |
<td>
r
</td>
<td>
a
</td>
<td>
n
</td>
<td>
d
</td>
<td>
o
</td>
<td>
n
</td>
</tr>
<tr>
<td>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
</table>
```javascript
var firstInitial = "Brandon"[0];
```
Now the value of firstInitial is the letter `"B"`.
<pre><code class="language-javascript">var firstInitial = "Brandon"[0];</code></pre>
#### Some useful methods for strings
Now the value of firstInitial is the letter <code class="language-javascript">"B"</code>.
#### <a href="#some-useful-methods-for-strings" name="some-useful-methods-for-strings"></a>Some useful methods for strings {#some-useful-methods-for-strings}
##### <a href="#string.prototype.indexof();" name="string.prototype.indexof();"></a>String.prototype.indexOf(); {#string.prototype.indexof();}
##### `String.prototype.indexOf`
This can be used to find the index of any character(s) in a string. I primarily use it for when I need to check if something exists in a string. Do I have a ‘z’ in my name?
<pre><code class="language-javascript">"Brandon".indexOf('z');</code></pre>
```javascript
"Brandon".indexOf('z');
```
Nope, so Javascript will return a <code class="language-javascript">-1</code>. How about a ‘d’?
Nope, so Javascript will return a `-1`. How about a ‘d’?
<pre><code class="language-javascript">"Brandon".indexOf('d');</code></pre>
```javascript
"Brandon".indexOf('d');
```
Yes, Javascript will return <code class="language-javascript">5</code> which is the index of the letter ‘d’.
Yes, Javascript will return `5` which is the index of the letter `‘d’`.
##### <a href="#string.prototype.replace();" name="string.prototype.replace();"></a>String.prototype.replace(); {#string.prototype.replace();}
##### `String.prototype.replace`
The replace method can replace any character(s) with other character(s). For more complex replacing, look into [Regular Expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) and how you can use them in .replace(). Replace the first ‘n’ in my name with an ‘m’.
The replace method can replace any character(s) with other character(s). For more complex replacing, look into [Regular Expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) and how you can use them in `.replace()`. Replace the first `‘n’` in my name with an `‘m’`.
<pre><code class="language-javascript">
```javascript
var modifiedName = "Brandon".replace('n', 'm');
console.log(modifiedName);
</code></pre>
```
Logs <code class="language-javascript">"Bramdon"</code>.
Logs `"Bramdon"`.
##### <a href="#string.prototype.touppercase();" name="string.prototype.touppercase();"></a>String.prototype.toUpperCase(); {#string.prototype.touppercase();}
##### `String.prototype.toUpperCase`
This method returns the string with all the lowercase characters converted to uppercase and can be useful for when you’re checking user input and you don’t want to worry about different cases.
<pre><code class="language-javascript">"Brandon".toUpperCase();</code></pre>
```javascript
"Brandon".toUpperCase();
```
Returns <code class="language-javascript">"BRANDON"</code>.
Returns `"BRANDON"`.
##### <a href="#string.prototype.tolowercase();" name="string.prototype.tolowercase();"></a>String.prototype.toLowerCase(); {#string.prototype.tolowercase();}
##### `String.prototype.toLowerCase()`
Same as above but instead of converting lowercase to uppercase, it converts uppercase to lowercase.
<pre><code class="language-javascript">"Brandon".toLowerCase();</code></pre>
```javascript
"Brandon".toLowerCase();
```
Returns <code class="language-javascript">"brandon"</code>.
Returns `"brandon"`.
#### <a href="#a-couple-useful-escape-secquences" name="a-couple-useful-escape-secquences"></a>A couple useful escape secquences {#a-couple-useful-escape-secquences}
#### A couple useful escape secquences
* <code class="language-javascript">n</code> for newline.
* <code class="language-javascript">t</code> for tab character.
* `\n` for newline.
* `\t` for tab character.
You can also use escape sequnces if you want to add “” or ‘’ to your strings.
<pre><code class="language-javascript">
var greeting = "Hello "Brandon"";
You can also use escape sequnces if you want to add `“”` or `‘’` to your strings.
```javascript
var greeting = "Hello \"Brandon\"";
console.log(greeting);
</code></pre>
```
Returns <code class="language-javascript">"Hello "Brandon""</code>.
Returns `"Hello "Brandon""`.
### <a href="#number" name="number"></a>Number {#number}
### Number
Any number between -(2<sup>53</sup> – 1) and (2<sup>53</sup> – 1).
Any number between -(2^53 – 1) and (2^53 – 1).
#### <a href="#number-methods" name="number-methods"></a>Number Methods {#number-methods}
#### Number Methods
Number methods are useful when trying to represent complex numbers.
##### <a href="#number.prototype.toexponential();" name="number.prototype.toexponential();"></a>Number.prototype.toExponential(); {#number.prototype.toexponential();}
##### `Number.prototype.toExponential()`
Returns a string representing a number in exponential notation.
<pre><code class="language-javascript">77.1234.toExponential(2);</code></pre>
```javascript
77.1234.toExponential(2);
```
Returns <code class="language-javascript">"7.71e+1"</code>.
Returns `"7.71e+1"`.
##### <a href="#number.prototype.tofixed();" name="number.prototype.tofixed();"></a>Number.prototype.toFixed(); {#number.prototype.tofixed();}
##### `Number.prototype.toFixed()`
Returns a string representing a number fixed to x amount of decimal places.
<pre><code class="language-javascript">12345.6789.toFixed(1);</code></pre>
```javascript
12345.6789.toFixed(1);
```
Returns <code class="language-javascript">"12345.7"</code>.
Returns `"12345.7"`.
##### <a href="#number.prototype.toprecision();" name="number.prototype.toprecision();"></a>Number.prototype.toPrecision(); {#number.prototype.toprecision();}
##### `Number.prototype.toPrecision();`
Returns a string representing a number using x amount of significant figures.
<pre><code class="language-javascript">5.123456.toPrecision(2);</code></pre>
```javascript
5.123456.toPrecision(2);
```
Returns <code class="language-javascript">"5.1"</code>.
Returns `"5.1"`.
#### <a href="#math-properties/methods" name="math-properties/methods"></a>Math properties/methods {#math-properties/methods}
#### Math properties/methods
In Javascript there is a Math object which contains many properties and methods which are useful for mathmatical calculations.
##### <a href="#return-euler's-constant" name="return-euler's-constant"></a>Return Euler’s constant {#return-euler's-constant}
##### Return Euler’s constant
<code class="language-javascript">Math.E</code> which returns ~2.718.
`Math.E` which returns ~2.718.
##### <a href="#return-the-natural-log-of-x" name="return-the-natural-log-of-x"></a>Return the natural log of x {#return-the-natural-log-of-x}
##### Return the natural log of x
<code class="language-javascript">Math.log(x)</code>
```javascript
Math.log(x)
```
##### <a href="#rise-x-to-the-y-power" name="rise-x-to-the-y-power"></a>Rise x to the y power {#rise-x-to-the-y-power}
##### Rise x to the y power
<code class="language-javascript">Math.pow(x,y)</code>
```javascript
Math.pow(x,y)
```
##### <a href="#return-a-psuedo-random-number-[0,1)" name="return-a-psuedo-random-number-[0,1)"></a>Return a psuedo random number [0,1) {#return-a-psuedo-random-number-[0,1)}
##### Return a psuedo random number \[0,1\)
<code class="language-javascript">Math.random()</code>
```javascript
Math.random()
```
##### <a href="#round-x-to-the-nearest-integer" name="round-x-to-the-nearest-integer"></a>Round x to the nearest integer {#round-x-to-the-nearest-integer}
##### Round x to the nearest integer
<code class="language-javascript">Math.round(x)</code>
```javascript
Math.round(x)
```
### <a href="#boolean" name="boolean"></a>Boolean {#boolean}
### Boolean
Booleans are either <code class="language-javascript">true</code> or <code class="language-javascript">false and</code> are typically used in conditional statements. You can either create them explicitly
<pre><code class="language-javascript">var alive = true;</code></pre>
Booleans are either `true` or `false` and are typically used in conditional statements. You can either create them explicitly
```javascript
var alive = true;
```
or by evaluating a [comparison](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators).
<pre><code class="language-javascript">
```javascript
var dead = false;
var isAlive = !dead;
</code></pre>
```
isAlive equals <code class="language-javascript">true</code>.
isAlive equals `true`.
### <a href="#array" name="array"></a>Array {#array}
### Array
An array is a list of items. In Javascript these items can be any data type, even arrays themselves.
<pre><code class="language-javascript">var mixedBag = ['sword', 24, true, [Math.PI, Math.E], 'shield'];</code></pre>
```javascript
var mixedBag = ['sword', 24, true, [Math.PI, Math.E], 'shield'];
```
To access an item in an array use [] notation with an index as mentioned over at strings.
<pre><code class="language-javascript">['sword', 'shield', 'helmet'][1];</code></pre>
```javascript
['sword', 'shield', 'helmet'][1];
```
Returns <code class="language-javascript">'shield'</code>. to figure out how many items are in the array.
Returns `'shield'`. In order to figure out how many items are in the array:
<pre><code class="language-javascript">
```javascript
var inventory = ['boots', 'gloves', 'pants', 'shirt'];
var inventoryAmt = inventory.length;
</code></pre>
```
inventoryAmt is <code class="language-javascript">4</code> since there are 4 items in inventory.
inventoryAmt is `4` since there are 4 items in inventory.
#### <a href="#array-methods" name="array-methods"></a>Array Methods {#array-methods}
#### Array Methods
##### <a href="#array.prototype.push();" name="array.prototype.push();"></a>Array.prototype.push(); {#array.prototype.push();}
##### `Array.prototype.push()`
Adds whatever is inside the parenthesis to the end of the array. Great for adding items to a list. For example, test scores.
<pre><code class="language-javascript">[100,92,95].push(80);</code></pre>
```javascript
[100,92,95].push(80);
```
Returns <code class="language-javascript">[100,92,95,80]</code>.
Returns `[100,92,95,80]`.
##### <a href="#array.prototype.reverse();" name="array.prototype.reverse();"></a>Array.prototype.reverse(); {#array.prototype.reverse();}
##### `Array.prototype.reverse()`
Reverses the order of all the items in the array.
<pre><code class="language-javascript">[1,2,3].reverse();</code></pre>
```javascript
[1,2,3].reverse();
```
Returns <code class="language-javascript">[3,2,1]</code>.
Returns `[3,2,1]`.
##### <a href="#array.prototype.concat();" name="array.prototype.concat();"></a>Array.prototype.concat(); {#array.prototype.concat();}
##### `Array.prototype.concat()`
Combines two arrays, putting the items from the array in the parenthesis to the end of the main array. This method is a lot faster than grabbing each item by their index and adding them using the .push() method.
Combines two arrays, putting the items from the array in the parenthesis to the end of the main array. This method is a lot faster than grabbing each item by their index and adding them using the `.push()` method.
<pre><code class="language-javascript">['a','b','c'].concat([1,2,3]);</code></pre>
```javascript
['a','b','c'].concat([1,2,3]);
```
Returns <code class="language-javascript">['a','b','c',1,2,3]</code>.
Returns `['a','b','c',1,2,3]`.
##### <a href="#array.prototype.join();" name="array.prototype.join();"></a>Array.prototype.join(); {#array.prototype.join();}
##### `Array.prototype.join()`
Converts the array into a string, with each item seperated by whatever is in the parenthesis. Useful for telling the user the items in their inventory, for example.
<pre><code class="language-javascript">
```javascript
var inventory = ['books','apples','pencils'];
console.log("You have " + inventory.join(", ") + " in your inventory.");
</code></pre>
```
Logs <code class="language-javascript">"You have books, apples, pencils in your inventory."</code>
Logs `"You have books, apples, pencils in your inventory."`
##### <a href="#array.prototype.indexof();" name="array.prototype.indexof();"></a>Array.prototype.indexOf(); {#array.prototype.indexof();}
##### `Array.prototype.indexOf()`
Similar to String.prototype.indexOf(), it returns the index of the item inside the parenthesis.
<pre><code class="language-javascript">['chicken','pizza','tacos'].indexOf('tacos');</code></pre>
```javascript
['chicken','pizza','tacos'].indexOf('tacos');
```
Returns <code class="language-javascript">2</code>.
Returns `2`.
### <a href="#objects" name="objects"></a>Objects {#objects}
### Objects
Objects are like arrays, however they’re easier for establishing the relationship between properties and their values. You can store any data type as a property of an object.
<pre><code class="language-javascript">
```javascript
var player = {};
player.name = "Brandon";
player.health = Number.POSITIVE_INFINITY;
console.log(player.name + " has " + player.health + " health.");
</code></pre>
```
Logs <code class="language-javascript">"Brandon has Infinity health"</code> Yup that sounds about right.
Logs `"Brandon has Infinity health"`. Yup that sounds about right.
### <a href="#conclusion" name="conclusion"></a>Conclusion {#conclusion}
### Conclusion
All of the different data types in Javascript are tools for you to get the job done. When assigning a variable, think to yourself which tool you should use. I had fun doing this lecture. We finished earlier than expected, due to my extra preparations. (Still shuddering over my unpreparedness from last week). We had finished so early in fact, that I went ahead and started teaching next week&#8217;s material. Do not worry though, my lovely reader&#8217;s only get the most structured of lesson materials. So you&#8217;ll have to wait until next week to hear more. 🙂
All of the different data types in Javascript are tools for you to get the job done. When assigning a variable, think to yourself which tool you should use. I had fun doing this lecture. We finished earlier than expected, due to my extra preparations. (Still shuddering over my unpreparedness from last week). We had finished so early in fact, that I went ahead and started teaching next week's material. Do not worry though, my lovely readers only get the most structured of lesson materials. So you'll have to wait until next week to hear more. 🙂

18
content/blog/2015-10-25-functions.md
View file

@ -17,9 +17,7 @@ tags: ["Web", "JS"]
---
Ever had a snippet of code that appears multiple times in different places in your program? Whenever you had to change that snippet, you end up playing this game of search and replace. Functions can help. They exist to abstract your code, making it not only easier to change that little snippet, but to read and debug your code as well.
<!--more-->
### <a href="#how-to-create/execute-a-function" name="how-to-create/execute-a-function"></a>How to create/execute a function {#how-to-create/execute-a-function}
### How to create/execute a function
To make a function
@ -35,7 +33,7 @@ To call the above function to execute
doSomething();
```
### <a href="#arguments" name="arguments"></a>Arguments {#arguments}
### Arguments
You can also add in arguments (parameters that go inside the paraenthesis next to the word function) for the functions to use.
@ -51,13 +49,13 @@ And when you use the `return` keyword, like the function above. You can store th
var total = add(1, 3);
```
<code class="language-javascript">total</code> here will equal `4`
`total` here will equal `4`
### <a href="#scope" name="scope"></a>Scope {#scope}
### Scope
Functions create their own scope, which means that variables created inside the function will only be able available within that function.
The snippet below will output an error like <code class="language-javascript">total is not defined</code>
The snippet below will output an error like `total is not defined`.
```javascript
var add = function(number1, number2) {
@ -80,7 +78,7 @@ Below is a correct example of the concept
It’s also important to note that functions can use variables outside of it; granted it resides in the same scope.
Here is an example of a variable that doesn&#8217;t reside in the same scope as the function. (The below code will fail)
Here is an example of a variable that doesn't reside in the same scope as the function. (The below code will fail)
```javascript
var something = function() {
@ -104,8 +102,8 @@ Below, is an example of where the variable does reside in the same scope as the
var sum = addX(6);
```
<code class="language-javascript">sum</code> here will equal <code class="language-javascript">11</code>
`sum` here will equal `11`
### <a href="#conclusion" name="conclusion"></a>Conclusion {#conclusion}
### Conclusion
As long as you name them appropriately, functions are useful for abstracting your code, making them easier to understand. This concludes another lecture made for the members over at Math I/O. Until next week 🙂

12
content/blog/2015-11-14-service-workers.md
View file

@ -62,7 +62,7 @@ var offlineFundamentals = [
```
Since <code class="language-javascript">cache.addAll()</code> hasn’t been implemented yet in any of the browsers, and the polyfill implementation didn’t work for my needs. I pieced together my own.
Since `cache.addAll()` hasn’t been implemented yet in any of the browsers, and the polyfill implementation didn’t work for my needs. I pieced together my own.
```javascript
var updateStaticCache = function() {
@ -85,8 +85,8 @@ var updateStaticCache = function() {
Let’s go through this chunk of code.
1. Open the cache called <code class="language-javascript">'v2.0.24:fundamentals'</code>
2. Go through all of the <code class="language-javascript">offlineFundamental</code>‘s URLs
1. Open the cache called `'v2.0.24:fundamentals'`
2. Go through all of the `offlineFundamental`‘s URLs
* Does the file I ask for come from the same domain as my site?
* No. Then, make the request ‘no-cors’ (I had difficulty getting my asset files in cors mode. If the cors headers are included in the response, then you can take out this line)
* Fetch the file from the network and then cache it.
@ -140,7 +140,7 @@ self.addEventListener("activate", function(event) {
The cool thing about service worker’s is that it can handle file requests. We could cache all files requested for offline use, and if a fetch for a resource failed, then the service worker can look for it in the cache or provide an alternative. This is a large section, so I’m going to attempt to break it down as much as I can.
## Limit the cache {#limit-the-cache}
## Limit the cache
If the visitor started browsing all of the pages on my site, his or her cache would start to get bloated with files. To not burden my visitors, I decided to only keep the latest 25 pages and latest 10 images in the cache.
@ -159,7 +159,7 @@ We’ll call it later in the code.
## Fetch from network and cache
Every time I fetch a file from the network I throw it into a specific cache container. <code class="language-javascript">'pages'</code> for HTML files, <code class="language-javascript">'images'</code> for CSS files, and <code class="language-javascript">'assets'</code> for any other file. This is so I can handle the cache limiting above easier. Defined within the `fetch` event.
Every time I fetch a file from the network I throw it into a specific cache container: `'pages'` for HTML files, `'images'` for CSS files, and `'assets'` for any other file. This is so I can handle the cache limiting above easier. Defined within the `fetch` event.
```javascript
var fetchFromNetwork = function(response) {
@ -371,4 +371,4 @@ self.addEventListener("fetch", function(event) {
self.addEventListener("activate", function(event) {
event.waitUntil(clearOldCaches())
});
```
```

19
content/blog/2015-12-22-playing-with-qr-codes.md
View file

@ -18,26 +18,21 @@ bridgy_syndication:
https://twitter.com/B_RozekJournal/status/790337750280970241
---
Looking at Aaron Parecki&#8217;s [&#8220;Fun with QR Codes&#8221;](https://aaronparecki.com/articles/2015/10/05/1/fun-with-qr-codes) inspired me to play with QR Codes myself. Using the tool [QArt Coder](http://research.swtch.com/qr/draw) made by [Russ Cox](https://plus.google.com/116810148281701144465), I made a QR Code with my face in it!
Looking at Aaron Parecki's [&#8220;Fun with QR Codes&#8221;](https://aaronparecki.com/articles/2015/10/05/1/fun-with-qr-codes) inspired me to play with QR Codes myself. Using the tool [QArt Coder](http://research.swtch.com/qr/draw) made by [Russ Cox](https://plus.google.com/116810148281701144465), I made a QR Code with my face in it!
<!--more-->
![](https://brandonrozek.com/wp-content/uploads/2016/10/qrcode-large-1.png)
<img class="alignnone size-medium wp-image-579" src="https://brandonrozek.com/wp-content/uploads/2016/10/qrcode-large-1.png" alt="qrcode-large" width="300" height="300" />
### Why QR Codes?
QR Codes aren&#8217;t prevalent in the United States of America. In fact, they&#8217;re often viewed by technologists as a [joke](http://picturesofpeoplescanningqrcodes.tumblr.com/). But as [Christina Xu](http://www.christinaxu.org/) points out on her Medium post [&#8220;Pictures of Chinese People Scanning QR Codes&#8221;](https://medium.com/chrysaora-weekly/pictures-of-chinese-people-scanning-qr-codes-a564047ec58f), it&#8217;s not a joke everywhere. In fact, many people actually depend on this humble little QR code to get by in their day. Another story, my family and I go out to eat sometimes. Occasionally, we&#8217;ll knock into a Heinz Ketchup bottle.
QR Codes aren't prevalent in the United States of America. In fact, they're often viewed by technologists as a [joke](http://picturesofpeoplescanningqrcodes.tumblr.com/). But as [Christina Xu](http://www.christinaxu.org/) points out on her Medium post [&#8220;Pictures of Chinese People Scanning QR Codes&#8221;](https://medium.com/chrysaora-weekly/pictures-of-chinese-people-scanning-qr-codes-a564047ec58f), it's not a joke everywhere. In fact, many people actually depend on this humble little QR code to get by in their day. Another story, my family and I go out to eat sometimes. Occasionally, we'll knock into a Heinz Ketchup bottle.
<div id="attachment_573" style="width: 235px" class="wp-caption aligncenter">
<img aria-describedby="caption-attachment-573" class="size-medium wp-image-573" src="https://brandonrozek.com/wp-content/uploads/2016/10/heinz-2-768x1024.jpg" alt="Picture of Heinz ketchup bottle with QR Code." width="225" height="300" />
![Picture of Heinz ketch bottle with QR Code](https://brandonrozek.com/wp-content/uploads/2016/10/heinz-2-768x1024.jpg)
<p id="caption-attachment-573" class="wp-caption-text">
Picture by <a href="http://azadzahoory.com/2014/07/03/when-the-product-becomes-an-ad/">Azad Zahoory</a>
</p>
</div> My brother would get so excited whenever he saw this. This little ketchup bottle meant that we got to play a
Image by Azad Zahoory.
<a href="http://www.heinztablegames.com/game_selector.html" rel="nofollow" class="broken_link">trivia game</a>. No matter what you think of QR Codes, vanity or not, there are people who use it every day. So have some fun and make yourself a QR Code of your own. You know, just in case 😉
My brother would get so excited whenever he saw this. This little ketchup bottle meant that we got to play a [trivia game](http://www.heinztablegames.com/game_selector.html). No matter what you think of QR Codes, vanity or not, there are people who use it every day. So have some fun and make yourself a QR Code of your own. You know, just in case 😉
### Setting up the QR Code
First, you need a picture. I used a picture of myself. Then for the QArt Coder site to work correctly, the image needs to be in high-contrast. Meaning, it needs to be mostly black and white. To accomplish this, fire up [Gimp](https://www.gimp.org/) (or your image editor of choice), and hit Color -> Threshold. That will give you a black and white version of the picture where you can then play around with the slider to get it just how you want it. After that, open up [QArt Coder](http://research.swtch.com/qr/draw) and upload the image onto the site. Once that&#8217;s accomplished, you might need to play with the QR Size, Image Size, Rotation, and other options. After that, hit &#8220;Save this QR Code&#8221; and viola! You got yourself three different sizes of QR codes to use. What should you do with the QR Code after you get it? First, brag to your friends about how cool it looks. Then maybe put it on your [business card](https://www.webdesignerdepot.com/2011/07/30-creative-qr-code-business-cards/). If you can think of any other <del>excuses</del> uses of QR Codes [contact me](mailto:brozek@brandonrozek.com) 🙂
First, you need a picture. I used a picture of myself. Then for the QArt Coder site to work correctly, the image needs to be in high-contrast. Meaning, it needs to be mostly black and white. To accomplish this, fire up [Gimp](https://www.gimp.org/) (or your image editor of choice), and hit Color -> Threshold. That will give you a black and white version of the picture where you can then play around with the slider to get it just how you want it. After that, open up [QArt Coder](http://research.swtch.com/qr/draw) and upload the image onto the site. Once that's accomplished, you might need to play with the QR Size, Image Size, Rotation, and other options. After that, hit &#8220;Save this QR Code&#8221; and viola! You got yourself three different sizes of QR codes to use. What should you do with the QR Code after you get it? First, brag to your friends about how cool it looks. Then maybe put it on your [business card](https://www.webdesignerdepot.com/2011/07/30-creative-qr-code-business-cards/). If you can think of any other ~~excuses~~ uses of QR Codes [contact me](mailto:brozek@brandonrozek.com) 🙂

45
content/blog/2015-12-27-creating-vcards-from-h-cards.md
View file

@ -23,11 +23,11 @@ Microformats is semantic HTML used to convey metadata. Using an userscript, I ca
[H-card](http://microformats.org/wiki/h-card) is a type of microformat that serves as a contact card for people and organizations.
[vCard](https://en.wikipedia.org/wiki/VCard) is the standard for electronic business cards. They&#8217;re most likely used in your phone to store contacts.
[vCard](https://en.wikipedia.org/wiki/VCard) is the standard for electronic business cards. They're most likely used in your phone to store contacts.
Userscript is essentially JavaScript that runs in the [Greasemonkey](http://www.greasespot.net/) extension.
### What I&#8217;ll need
### What I'll need
* Microformat parser
* Way to find the representative h-card
@ -40,7 +40,7 @@ To keep everything in small [reusable components](https://en.wikipedia.org/wiki/
Next, I need to find the representative h-card of the page. Following the [instructions](http://microformats.org/wiki/representative-h-card-parsing) on the microformats wiki, I wrote the following code.
<pre><code class="language-javascript">
```javascript
/*
representative-h-card - v0.1.0
Copyright (c) 2015 Brandon Rozek
@ -60,7 +60,7 @@ var representativeHCard = function(hCards, url) {
hCard.items = [hCards.items[0]];
return hCard
} else {
for (var i = 0; i &lt; hCards.items.length; i++) {
for (var i = 0; i < hCards.items.length; i++) {
if (urlsMatchURL(hCards.items[i], url) && (uidsMatchURL(hCards.items[i], url) || relMeMatchURL(hCards, url))) {
hCard = hCards;
hCard.items = [hCards.items[i]];
@ -75,7 +75,7 @@ var representativeHCard = function(hCards, url) {
var urlsMatchURL = function(hCard, url) {
var urls = hCard.properties.url;
if (typeof(urls) == "object") {
for (var i = 0; i &lt; urls.length; i++) {
for (var i = 0; i < urls.length; i++) {
if (new URL(urls[i]).toString() == new URL(url).toString()) {
return true;
}
@ -86,7 +86,7 @@ var urlsMatchURL = function(hCard, url) {
var uidsMatchURL = function(hCard, url) {
var uids = hCard.properties.uid;
if (typeof(uids) == "object") {
for (var i = 0; i &lt; uids.length; i++) {
for (var i = 0; i < uids.length; i++) {
if (new URL(uids[i]).toString() == new URL(url).toString()) {
return true;
}
@ -97,7 +97,7 @@ var uidsMatchURL = function(hCard, url) {
var relMeMatchURL = function(microformats, url) {
var me = microformats.rels.me;
if (typeof(me) == "object") {
for (var i = 0; i &lt; me.length; i++) {
for (var i = 0; i < me.length; i++) {
if (new URL(me[i]).toString() == new URL(url).toString()) {
return true;
}
@ -105,9 +105,9 @@ var relMeMatchURL = function(microformats, url) {
}
return false;
}
</code></pre>
```
Next up, is making the vCard. For this, I had to look at the [vCard 4.0 specification](https://tools.ietf.org/html/rfc6350) to figure out what the property names and values are. Then I browsed around different <a href="http://indieweb.thatmustbe.us/" rel="nofollow">sites</a> (takes you to a random [Indieweb](https://indiewebcamp.com/) site)  to figure out which properties are the most common.
Next up, is making the vCard. For this, I had to look at the [vCard 4.0 specification](https://tools.ietf.org/html/rfc6350) to figure out what the property names and values are. Then I browsed around different [sites](http://indieweb.thatmustbe.us/) (takes you to a random [Indieweb](https://indiewebcamp.com/) site)  to figure out which properties are the most common.
The properties I ended up adding to the vCard.
@ -123,7 +123,7 @@ The properties I ended up adding to the vCard.
 As I was browsing around, I noticed that a few people would have empty values for certain properties on their h-card. To avoid having this show up on the vCard, I added a filter that takes out empty strings.
<pre><code class="language-javascript">
```javascript
/*
vCard-from-h-card - v0.1.0
Copyright (c) 2015 Brandon Rozek
@ -180,7 +180,7 @@ var makeVCard = function(hCard) {
//Add IMPP (Instant Messaging and Presence Protocol)
if (typeof(impp) == "object") {
impp.removeEmptyStrings();
for (var i = 0; i &lt; impp.length; i++) {
for (var i = 0; i < impp.length; i++) {
vCard += "IMPP;PREF=" + (i + 1) + ": " + impp[i] + "n";
}
}
@ -189,7 +189,7 @@ var makeVCard = function(hCard) {
var email = hCard.items[0].properties.email;
if (typeof(email) == "object") {
email.removeEmptyStrings();
for (var i = 0; i &lt; email.length; i++) {
for (var i = 0; i < email.length; i++) {
try {
vCard += "EMAIL: " + new URL(email[i]).pathname + "n";
} catch (e) {
@ -238,10 +238,9 @@ var makeVCard = function(hCard) {
Array.prototype.removeEmptyStrings = function() {
return this.filter(function(i) { return i !== "" })
}
```
</code></pre>
Now for the final part, making the userscript. Inspired by [Ryan Barret](https://snarfed.org/) and his userscript [Let&#8217;s Talk,](https://github.com/snarfed/misc/blob/master/userscripts/lets_talk.user.js) this userscript brings all of the above modules together. First it grabs the microformats from the page using microformat-shiv.
Now for the final part, making the userscript. Inspired by [Ryan Barret](https://snarfed.org/) and his userscript [Let's Talk,](https://github.com/snarfed/misc/blob/master/userscripts/lets_talk.user.js) this userscript brings all of the above modules together. First it grabs the microformats from the page using microformat-shiv.
For some reason, when I tried filtering it by &#8216;h-card&#8217; it froze my computer. So I wrote my own little filter instead.
@ -249,7 +248,7 @@ After I grab the representative h-card from the page using the little module I w
The link is actually a [data uri](https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs) that has all of the information of the vCard encoded in it. Depending on your browser, once you click the link you might have to hit CTRL-S to save.
<pre><code class="language-javascript">
```javascript
/*
show-vCard - v0.1.0
Copyright (c) 2015 Brandon Rozek
@ -257,8 +256,8 @@ The link is actually a [data uri](https://developer.mozilla.org/en-US/docs/Web/H
*/
var filterMicroformats = function(items, filter) {
var newItems = [];
for (var i = 0; i &lt; items.items.length; i++) {
for (var k = 0; k &lt; items.items[i].type.length; k++) {
for (var i = 0; i < items.items.length; i++) {
for (var k = 0; k < items.items[i].type.length; k++) {
if (filter.indexOf(items.items[i].type[k]) != -1) {
newItems.push(items.items[i]);
}
@ -306,16 +305,16 @@ var render = function() {
document.addEventListener("DOMContentLoaded", function() {
render();
});
</code></pre>
```
Sadly, I have no way of controlling the file name when you save it so you&#8217;ll have to manually rename it to something more meaningful than a random string of characters. Also remember to add the extension &#8216;.vcf&#8217; for it to be recognized by some devices.
Sadly, I have no way of controlling the file name when you save it so you'll have to manually rename it to something more meaningful than a random string of characters. Also remember to add the extension &#8216;.vcf&#8217; for it to be recognized by some devices.
### Conclusion
Fire up your favorite userscript handling tool and add the [script](https://gist.github.com/brandonrozek/e0153b2733e947fa9c87) in! Of course, since it&#8217;s pure JavaScript, you can also add it to your own site to serve the same purpose.
Fire up your favorite userscript handling tool and add the [script](https://gist.github.com/brandonrozek/e0153b2733e947fa9c87) in! Of course, since it's pure JavaScript, you can also add it to your own site to serve the same purpose.
I ran into a small problem loading a contact onto my Android 5.0.2 phone. Apparently, they don&#8217;t support vCard 4.0 yet so I had to go into the file and change the line that says &#8220;VERSION 4.0&#8221; to &#8220;VERSION 3.0&#8221; which then allowed me to import the file into my contacts.
I ran into a small problem loading a contact onto my Android 5.0.2 phone. Apparently, they don't support vCard 4.0 yet so I had to go into the file and change the line that says &#8220;VERSION 4.0&#8221; to &#8220;VERSION 3.0&#8221; which then allowed me to import the file into my contacts.
As with all the code I write, feel free to comment/criticize. I love hearing feedback so if you spot anything, [contact me](mailto:brozek@brandonrozek.com) 🙂
Also posted on [IndieNews](http://news.indiewebcamp.com/en){.u-syndication}
Also posted on [IndieNews](http://news.indiewebcamp.com/en){.u-syndication}

10
content/blog/2017-03-07-uniformity-math-random.md
View file

@ -31,7 +31,7 @@ HA: The random numbers outputted do not follow the uniform distribution
I wrote a small [website](http://share.zeropointshift.com/files/2017/03/random.html) and obtained my data by getting the CSV outputted when I use IE11, Firefox, and Chrome.
The website works by producing a random number using <code class='language-javascript'>Math.random()</code> between 1 and 1000 inclusive and calls the function 1,000,000 times. Storing it&#8217;s results in a file
The website works by producing a random number using `Math.random()` between 1 and 1000 inclusive and calls the function 1,000,000 times. Storing its results in a file
This website produces a file with all the numbers separated by a comma. We want these commas to be replaced by newlines. To do so, we can run a simple command in the terminal
@ -45,13 +45,13 @@ Here are a copy of my files for [Firefox](https://brandonrozek.com/wp-content/up
## Check Conditions
Since we&#8217;re interested in if the random values occur uniformly, we need to perform a Chi-Square test for Goodness of Fit. With every test comes some assumptions
Since we're interested in if the random values occur uniformly, we need to perform a Chi-Square test for Goodness of Fit. With every test comes some assumptions
<u>Counted Data Condition:</u> The data can be converted from quantatative to count data.
**Counted Data Condition:** The data can be converted from quantatative to count data.
<u>Independence Assumption:</u> One random value does not affect another.
**Independence Assumption:** One random value does not affect another.
<u>Expected Cell Frequency Condition:</u> The expected counts are going to be 10000
**Expected Cell Frequency Condition:** The expected counts are going to be 10000
Since all of the conditions are met, we can use the Chi-square test of Goodness of Fit

37
content/blog/2017-05-24-viewing-java-applets.md
View file

@ -18,13 +18,14 @@ tags: ["Java"]
---
When you use an IDE there are many things you can take for granted. A section of an intro level computer science course at my university uses [JGrasp](http://www.jgrasp.org/) to build Java Applets.
Following around using a normal text editor, I found that I couldn&#8217;t just compile and run the code like I have with my java programs in the past. To be able to help around and assist in the course, I need to be able to build and run these applications. The rest of this article describes the process I underwent to be able to use my existing setup to write and build java applets. Of course you can always install JGrasp and have that all built in, but it&#8217;s always nice to not have to change your workflow.
<!--more-->
Following around using a normal text editor, I found that I couldn't just compile and run the code like I have with my java programs in the past. To be able to help around and assist in the course, I need to be able to build and run these applications. The rest of this article describes the process I underwent to be able to use my existing setup to write and build java applets. Of course you can always install JGrasp and have that all built in, but it's always nice to not have to change your workflow.
When I tried following along, I would receive the following error
```
Main method not found in class HelloWorld, please define main method as...
```
Which makes sense since I have never defined a main method inside my source code. So how do I go about doing this?
@ -32,20 +33,20 @@ Which makes sense since I have never defined a main method inside my source code
Java Applets are meant to run on web pages, because of this one needs an html file to host the applet. The following code gives you the bare minimum for setting up the html file. I called it `HelloWorld.html`.
<pre class='language-html'><code class='language-html'>
&lt;html&gt;
&lt;head&gt;&lt;title&gt;Applet Container&lt;title&gt;
&lt;body&gt;
&lt;applet code='HelloWorld.class' width=400 height=400&gt;&lt;/applet&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
```html
<html>;
<head><title>Applet Container</title>
<body>
<applet code='HelloWorld.class' width=400 height=400></applet>
</body>
</html>
```
## Hello World Program
To get it up and running, I will show a &#8220;Hello World&#8221; like application for applets.
<pre class='language-java'><code class='language-java'>
```java
import javax.swing.JApplet;
import java.awt.Graphics;
@ -54,18 +55,22 @@ public class HelloWorld extends JApplet {
g.drawString("Hello World", 30, 30);
}
}
</code></pre>
```
## Running the Applet
Now we need to compile the code
<pre class='langauge-bash'><code class='language-bash'>javac HelloWorld.java</code></pre>
```bash
javac HelloWorld.java
```
Then run the appletviewer
<pre class='language-bash'><code class='language-bash'>appletviewer HelloWorld.html</code></pre>
```bash
appletviewer HelloWorld.html
```
## Conclusion
This tutorial concludes the setup of running a simple Java applet. From here you can look at the different methods in the [Graphics library](https://docs.oracle.com/javase/7/docs/api/java/awt/Graphics.html) and play around 😀
This tutorial concludes the setup of running a simple Java applet. From here you can look at the different methods in the [Graphics library](https://docs.oracle.com/javase/7/docs/api/java/awt/Graphics.html) and play around 😀

102
content/blog/2017-06-05-java-swing-components.md
View file

@ -22,41 +22,43 @@ This post, over time, will serve as a reference to myself and others of the diff
Buttons are created using the JButton component. The constructor takes the text placed inside the button.
<pre class='language-java'><code class='language-java'>
```java
JButton stopBtn = new JButton("Stop");
</code></pre>
```
![](https://brandonrozek.com/wp-content/uploads/2017/06/stopbutton.png)
<img src="https://brandonrozek.com/wp-content/uploads/2017/06/stopbutton.png" alt="" width="67" height="25" class="alignnone size-full wp-image-2211" />
You can also add images inside a button. To do that you need to get the image and make it into an icon. The following code grabs the image file &#8220;smallpanda.jpg&#8221; from the current working directory.
<pre class='langauge-java'><code class='language-java'>
```java
Image img = this.getImage(this.getCodeBase(), "smallpanda.jpg");
ImageIcon imgIcon = new ImageIcon(img);
JButton feedBtn = new JButton("Feed", imgIcon);
</code></pre>
```
Sometimes, you want to change the location of the text in the button. Like say, we want to place the text in the center horizontally and bottom vertically.
<pre class='language-java'><code class='language-java'>
```java
feedBtn.setHorizontalTextPosition(JButton.CENTER);
feedBtn.setVerticalTextPosition(JButton.BOTTOM);
</code></pre>
```
Don&#8217;t forget to add your buttons to the screen!
Don't forget to add your buttons to the screen!
<pre class='language-java'><code class='language-java'>
```java
this.add(stopBtn);
this.add(feedBtn);
</code></pre>
```
![](https://brandonrozek.com/wp-content/uploads/2017/06/smallpandabutton.png)
<img src="https://brandonrozek.com/wp-content/uploads/2017/06/smallpandabutton.png" alt="" width="234" height="181" class="alignnone size-full wp-image-2210" />
### Labels and Textfields
One of the most common forms of input is a text field, usually distinguished with a label. Those components are called JTextField and JLabel respectively. The constructor for JTextArea can take just the width of the text field, or another common use is to have already inputed text and its width.
<pre class='language-java'><code class='language-java'>
```java
JLabel nameLabel = new JLabel("Enter in your name: ");
// Create an input and set the width to be 10px wide
@ -67,28 +69,30 @@ One of the most common forms of input is a text field, usually distinguished wit
this.add(nameLabel);
this.add(nameInput);
</code></pre>
```
![](https://brandonrozek.com/wp-content/uploads/2017/06/labeltextfield.png)
<img src="https://brandonrozek.com/wp-content/uploads/2017/06/labeltextfield.png" alt="" width="274" height="24" class="alignnone size-full wp-image-2209" />
### Checkboxes
Checkboxes are commonly used when giving the possibility for multiple answers. Such as, check all of the foods that you like.
<pre class='language-java'><code class='language-java'>
```java
JCheckBox pizza = new JCheckBox("Pizza");
JCheckBox noodles = new JCheckBox("Noodles");
JCheckBox rice = new JCheckBox("Rice");
this.add(pizza);
this.add(noodles);
this.add(rice);
</code></pre>
```
<img src="https://brandonrozek.com/wp-content/uploads/2017/06/checkboxes.png" alt="" width="206" height="40" class="alignnone size-full wp-image-2207" />
![](https://brandonrozek.com/wp-content/uploads/2017/06/checkboxes.png)
You can even replace the default look of the checkbox with an image. To do this, you need to make image icons for both when it&#8217;s checked and when it&#8217;s unchecked.
<pre class='language-java'><code class='language-java'>
You can even replace the default look of the checkbox with an image. To do this, you need to make image icons for both when it's checked and when it's unchecked.
```java
Image checkedImage = this.getImage(this.getCodeBase(), "checked.png");
Image uncheckedImage = this.getImage(this.getCodeBase(), "unchecked.png");
@ -99,32 +103,33 @@ JCheckBox checkbox = new JCheckBox("Check Me", uncheckedIcon);
checkbox.setSelectedIcon(checkedIcon);
this.add(checkbox);
</code></pre>
```
![](https://brandonrozek.com/wp-content/uploads/2017/06/unchecked.png)
![](https://brandonrozek.com/wp-content/uploads/2017/06/checked.png)
<img src="https://brandonrozek.com/wp-content/uploads/2017/06/unchecked.png" alt="" width="187" height="123" class="alignnone size-full wp-image-2213" />
<img src="https://brandonrozek.com/wp-content/uploads/2017/06/checked.png" alt="" width="186" height="102" class="alignnone size-full wp-image-2208" />
### Text Areas
Text Areas are different from text fields in which it is made to be able to hold multiple lines of text. It&#8217;s called JTextArea and its construction takes a width and height as it&#8217;s arguments.
Text Areas are different from text fields in which it is made to be able to hold multiple lines of text. It's called JTextArea and its construction takes a width and height as it's arguments.
<pre class='language-java'><code class='language-java'>
```java
JTextArea textarea = new JTextArea(10, 10);
</code></pre>
```
By default, when the someone inputs more text than the size can hold, it will automatically grow with the text inputted. To override this behaviour and instead introuduce scroll bars. One must define a ScrollPane and put the TextArea inside of it by using it as the scroll pane&#8217;s argument for its constructor.
By default, when the someone inputs more text than the size can hold, it will automatically grow with the text inputted. To override this behaviour and instead introuduce scroll bars. One must define a ScrollPane and put the TextArea inside of it by using it as the scroll pane's argument for its constructor.
<pre class='language-java'><code class='language-java'>
```java
JScrollPane scrollPane = new JScrollPane(textarea);
</code></pre>
```
<img src="https://brandonrozek.com/wp-content/uploads/2017/06/textarea.png" alt="" width="119" height="149" class="alignnone size-full wp-image-2212" />
![](https://brandonrozek.com/wp-content/uploads/2017/06/textarea.png)
### Radio Buttons
Radio buttons are used for when you only want one out of many different options to be selected. For this, one needs to define a button group that houses the radio buttons for the user to choose from. This can be achieved with ButtonGroup and JRadioButton respectively.
<pre class='language-java'><code class='language-java'>
```java
// Make the radio buttons
JRadioButton radio1 = new JRadioButton("Pies");
JRadioButton radio2 = new JRadioButton("Cakes");
@ -140,55 +145,56 @@ desserts.add(radio3);
this.add(radio1);
this.add(radio2);
this.add(radio3);
</code></pre>
```
![](https://brandonrozek.com/wp-content/uploads/2017/06/radiobuttons.png)
<img src="https://brandonrozek.com/wp-content/uploads/2017/06/radiobuttons.png" alt="" width="211" height="34" class="alignnone size-full wp-image-2218" />
### JList
To display a list of items that are clickable by the user, you can use a `JList`. JLists require a model that stores the list implementation, we&#8217;ll use `DefaultListModel` to achieve this purpose.
To display a list of items that are clickable by the user, you can use a `JList`. JLists require a model that stores the list implementation, we'll use `DefaultListModel` to achieve this purpose.
<pre class='language-java'><code class='language-java'>
```java
DefaultListModel model = new DefaultListModel();
JList list = new JList(model);
</code></pre>
```
To add scrolling capabilities, remember to add it to a scroll pane
<pre class='language-java'><code class='language-java'>
```java
JScollPane sp = new JScrollPane(list);
</code></pre>
```
You can set the number of items you wish to see in the list. The example below, allows us to see three items in the list.
<pre class='language-java'><code class='language-java'>
```java
list.setVisibleRowCount(3);
</code></pre>
```
There are a variety of ways to add items to the list. If a number is specified that tells it to place it at the index specified. Starting from the top at zero, to the button.
<pre class='language-java'><code class='language-java'>
```java
model.addElement("Apples")
model.addElement("Cherries");
model.addElement("Bananas");
// Adds 'Oranges' to the top
model.add(0, "Oranges");
</code></pre>
```
Sometimes, you want to only let the user select one item. At the end, don&#8217;t forget to add the component to the screen!
Sometimes, you want to only let the user select one item. At the end, don't forget to add the component to the screen!
<pre class='language-java'><code class='language-java'>
```java
list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);
this.add(sp);
</code></pre>
```
<img src="https://brandonrozek.com/wp-content/uploads/2017/06/JList.png" alt="" width="77" height="53" class="alignnone size-full wp-image-2224" />
![](https://brandonrozek.com/wp-content/uploads/2017/06/JList.png)
### JComboBox
To create a dropdown list of different options, consider using a JComboBox.
<pre class='language-java'><code class='language-java'>
```java
JComboBox cb = new JComboBox();
cb.addItem("Select Food Option");
cb.addItem("Pizza");
@ -197,6 +203,6 @@ cb.addItem("Hot Dog");
cb.addItem("Steak");
// Add it to the screen
this.add(cb);
</code></pre>
```
<img src="https://brandonrozek.com/wp-content/uploads/2017/06/JComboBox.png" alt="" width="153" height="24" class="alignnone size-full wp-image-2223" srcset="https://brandonrozek.com/wp-content/uploads/2017/06/JComboBox.png 153w, https://brandonrozek.com/wp-content/uploads/2017/06/JComboBox-150x24.png 150w" sizes="(max-width: 153px) 100vw, 153px" />
![](https://brandonrozek.com/wp-content/uploads/2017/06/JComboBox.png)

8
content/blog/2017-06-05-using-system-themes-java-swing.md
View file

@ -24,12 +24,12 @@ The default theme for Java Swing components is a cross-platform theme called &#8
In the init method of your java application, place the following code.
<pre class='language-java'><code class='language-java'>
```java
try {
UIManager.setLookAndFeel(UIManager
.getSystemLookAndFeelClassName());
} catch(Exception e) {}
</code></pre>
```
Here the application will attempt to look up the system theme and set that as the default styles for the Swing components. If the lookup fails, then it will default back to the metal theme.
@ -37,6 +37,6 @@ For more information, check out this page from [Oracle](http://docs.oracle.com/j
### Discussion
If it is so easy to set up applications that look native to each desktop environment, why not have that by default? With the cross platform metal theme, you can ensure that the style of your application is the same across all the operating systems. In this fashion, you don&#8217;t need to worry about spacing between components and have full control of the &#8220;look and feel&#8221; of your application.
If it is so easy to set up applications that look native to each desktop environment, why not have that by default? With the cross platform metal theme, you can ensure that the style of your application is the same across all the operating systems. In this fashion, you don't need to worry about spacing between components and have full control of the &#8220;look and feel&#8221; of your application.
Since I am used to development for the web, I don&#8217;t have strong motivation to have an application look the same on all platforms. I prefer the application to match the system theme and look like it was built for the platform that I am on. One loses partial control on the presentation of your application across different desktop environmnets, but with a strong layout, it is possible to make it look organized and integrated.
Since I am used to development for the web, I don't have strong motivation to have an application look the same on all platforms. I prefer the application to match the system theme and look like it was built for the platform that I am on. One loses partial control on the presentation of your application across different desktop environmnets, but with a strong layout, it is possible to make it look organized and integrated.

74
content/blog/2018-01-22-identifying-misspelled-words-dataset-hunspell.md
View file

@ -14,7 +14,7 @@ mf2_syndication:
- 'a:1:{i:0;s:60:"https://twitter.com/B_RozekJournal/status/955308388384235521";}'
tags: []
---
This article is based on one written by [Markus Konrad](https://datascience.blog.wzb.eu/author/markus_konrad/) at this link <a href='https://datascience.blog.wzb.eu/2016/07/13/autocorrecting-misspelled-words-in-python-using-hunspell/' target='_blank' >https://datascience.blog.wzb.eu/2016/07/13/autocorrecting-misspelled-words-in-python-using-hunspell/</a>
This article is based on one written by [Markus Konrad](https://datascience.blog.wzb.eu/author/markus_konrad/) at this link [https://datascience.blog.wzb.eu/2016/07/13/autocorrecting-misspelled-words-in-python-using-hunspell/](https://datascience.blog.wzb.eu/2016/07/13/autocorrecting-misspelled-words-in-python-using-hunspell/).
I assume in this article that you have hunspell and it's integration with python installed. If not, please refer to the article mention above and follow the prerequisite steps.
@ -24,8 +24,10 @@ This article is inspired from the need to correct misspelled words in the [Dress
Misspelled words are common when dealing with survey data or data where humans type in the responses manually. In the Dress Attributes Dataset this is apparent when looking at the sleeve lengths of the different dresses.
<pre><code class='language-python' lang='python'>dresses_data[&#39;SleeveLength&#39;].value_counts()
</code></pre><figure>
```python
dresses_data['SleeveLength'].value_counts()
```
| Word | Frequency |
| -------------- | --------- |
@ -45,7 +47,7 @@ Misspelled words are common when dealing with survey data or data where humans t
| turndowncollor | 1 |
| sleveless | 1 |
| butterfly | 1 |
| threequater | 1 |</figure>
| threequater | 1 |
Ouch, so many misspelled words. This is when my brain is racking up all the ways I can automate this problem away. Hence my stumbling upon Markus' post.
@ -55,20 +57,22 @@ First, I decided to completely ignore what Markus warns in his post and automati
To begin the code, let's import and create an instance of the spellchecker:
<pre><code class='language-python' lang='python'>from hunspell import HunSpell
spellchecker = HunSpell(&#39;/usr/share/hunspell/en_US.dic&#39;, &#39;/usr/share/hunspell/en_US.aff&#39;)
</code></pre>
```python
from hunspell import HunSpell
spellchecker = HunSpell('/usr/share/hunspell/en_US.dic', '/usr/share/hunspell/en_US.aff')
```
I modified his `correct_words` function so that it only corrects one word and so I can `apply` it along the `SleeveLength` column.
<pre><code class='language-python' lang='python'>def correct_word(checker, word, add_to_dict=[]):
```python
def correct_word(checker, word, add_to_dict=[]):
"Takes in a hunspell object and a word and corrects the word if needed"
# Add custom words to the dictionary
for w in add_to_dict:
checker.add(w)
corrected = ""
# Check to see if it&#39;s a string
# Check to see if it's a string
if isinstance(word, str):
# Check the spelling
ok = checker.spell(word)
@ -89,15 +93,17 @@ I modified his `correct_words` function so that it only corrects one word and so
## Not a string. Return original
corrected = word
return corrected
</code></pre>
```
Now let's apply the function over the `SleeveLength` column of the dataset:
<pre><code class='language-python' lang='python'>dresses_data[&#39;SleeveLength&#39;] = dresses_data[&#39;SleeveLength&#39;].apply(
lambda x: correct_word(spellchecker, x))
</code></pre>
```python
dresses_data['SleeveLength'] = dresses_data['SleeveLength'].apply(
lambda x: correct_word(spellchecker, x)
)
```
Doing so creates the following series:<figure>
Doing so creates the following series:
| Word | Frequency |
| -------------- | --------- |
@ -114,7 +120,7 @@ Doing so creates the following series:<figure>
| turndowncollor | 1 |
| half | 1 |
| landownership | 1 |
| forequarter | 1 |</figure>
| forequarter | 1 |
As you might be able to tell, this process didn't go as intended. `landownership` isn't even a length of a sleeve!
@ -124,7 +130,8 @@ This is when I have to remember, technology isn't perfect. Instead we should rel
Keeping that in mind, I modified the function again to take in a list of the data, and return a dictionary that has the misspelled words as the keys and suggestions as the values represented as a list.
<pre><code class='language-python' lang='python'>def list_word_suggestions(checker, words, echo = True, add_to_dict=[]):
```python
def list_word_suggestions(checker, words, echo = True, add_to_dict=[]):
"Takes in a list of words and returns a dictionary with mispellt words as keys and suggestions as a list. Also prints it out"
# add custom words to the dictionary
for w in add_to_dict:
@ -141,34 +148,37 @@ Keeping that in mind, I modified the function again to take in a list of the dat
elif echo:
print(word + ": " + "[", ", ".join(repr(i) for i in suggestions[word]), "]")
return suggestions
</code></pre>
```
With that, I can use the function on my data. To do so, I convert the pandas values to a list and pass it to the function:
<pre><code class='language-python' lang='python'>s = list_word_suggestions(spellchecker, dresses_data[&#39;SleeveLength&#39;].values.tolist())
</code></pre>
```python
s = list_word_suggestions(spellchecker, dresses_data['SleeveLength'].values.tolist())
```
These are the suggestions it produces:
<pre><code class='language-python' lang='python'>sleevless: [ &#39;sleeveless&#39;, &#39;sleepless&#39;, &#39;sleeves&#39;, &#39;sleekness&#39;, &#39;sleeve&#39;, &#39;lossless&#39; ]
threequarter: [ &#39;three quarter&#39;, &#39;three-quarter&#39;, &#39;forequarter&#39; ]
halfsleeve: [&#39;half sleeve&#39;, &#39;half-sleeve&#39;, &#39;sleeveless&#39; ]
```
sleevless: [ 'sleeveless', 'sleepless', 'sleeves', 'sleekness', 'sleeve', 'lossless' ]
threequarter: [ 'three quarter', 'three-quarter', 'forequarter' ]
halfsleeve: ['half sleeve', 'half-sleeve', 'sleeveless' ]
turndowncollor: No suggestions
threequater: [ &#39;forequarter&#39; ]
capsleeves: [ &#39;cap sleeves&#39;, &#39;cap-sleeves&#39;, &#39;capsules&#39; ]
sleeevless: [ &#39;sleeveless&#39;, &#39;sleepless&#39;, &#39;sleeves&#39;, &#39;sleekness&#39;, &#39;sleeve&#39; ]
urndowncollor: [ &#39;landownership&#39; ]
thressqatar: [ &#39;throatiness&#39; ]
sleveless: [ &#39;sleeveless&#39;, &#39;levelness&#39;, &#39;valveless&#39;, &#39;loveless&#39;, &#39;sleepless&#39; ]
</code></pre>
threequater: [ 'forequarter' ]
capsleeves: [ 'cap sleeves', 'cap-sleeves', 'capsules' ]
sleeevless: [ 'sleeveless', 'sleepless', 'sleeves', 'sleekness', 'sleeve' ]
urndowncollor: [ 'landownership' ]
thressqatar: [ 'throatiness' ]
sleveless: [ 'sleeveless', 'levelness', 'valveless', 'loveless', 'sleepless' ]
```
From here, you can analyze the output and do the replacements yourself:
<pre><code class='language-python' lang='python'>dresses_data[&#39;SleeveLength&#39;].replace(&#39;sleevless&#39;, &#39;sleeveless&#39;, inplace = True)
</code></pre>
```python
dresses_data['SleeveLength'].replace('sleevless', 'sleeveless', inplace = True)
```
### What's the Benefit?
This is where you ask "What's the difference if it doesn't automatically fix my data?"
When you have large datasets, it can be hard to individually identify which items are misspelled. Using this method will allow you to have a list of all the items that are misspelled which can let you deal with it in a systematic way.
When you have large datasets, it can be hard to individually identify which items are misspelled. Using this method will allow you to have a list of all the items that are misspelled which can let you deal with it in a systematic way.

4
content/blog/abstractdef.md
View file

@ -71,9 +71,9 @@ An ideal $J$ of a commutative ring is said to be a **prime ideal** if for any tw
$$
ab \in J \implies a \in J \text{ or } b \in J
$$
<u>Theorem:</u> If $J$ is a prime ideal of a community ring with unity $A$, then the quotient ring $A / J$ is an integral domain.
**Theorem:** If $J$ is a prime ideal of a community ring with unity $A$, then the quotient ring $A / J$ is an integral domain.
An ideal $J$ of $A$ with $J \ne A$ is called a **maximal ideal** if there exists no proper ideal $K$ of $A$ such that $J \subseteq K$ with $J \ne K$.
<u>Theorem:</u> If $A$ is a commutative ring with unity, then $J$ is a maximal ideal of $A$ iff $A/J$ is a field.
**Theorem:** If $A$ is a commutative ring with unity, then $J$ is a maximal ideal of $A$ iff $A/J$ is a field.

18
content/blog/albuquerque.md
View file

@ -76,31 +76,31 @@ coefficients of CUST2 and the y-intercept.
##### Checking the Conditions for Inference
Before we conclude with the analysis, we must first check the conditions for inference to see if the technique is appropriate for our data.
<u>Independence Assumption:</u>
**Independence Assumption:**
A house’s selling price can depend on another’s so this condition is not met.
<u>Randomization Condition:</u>
**Randomization Condition:**
The dataset is comprised of a random sample of records of resale of homes which satisfies the
randomization condition.
<u>Straight Enough Condition:</u>
**Straight Enough Condition:**
The scatterplot matrix in Figure 20 shows that for the predictors square footage and tax that the
scatterplot is straight enough and doesn’t have any bends or curves.
<u>Equal Variance Assumption:</u>
**Equal Variance Assumption:**
The residual analysis in Figure 21 shows that the outliers are not spread equally on the
scatterplot. Therefore, the equal variance assumption is not met.
<u>Nearly Normal Condition:</u>
**Nearly Normal Condition:**
The QQ-Plot in Figure 21 shows that the residuals follow a unimodal and symmetric distribution.
Taking out the outliers in the model also did not introduce any new outliers in the boxplot.
<u>Missing At Random Condition:</u>
**Missing At Random Condition:**
7The discussion in the descriptive statistics section about the missing data tells us that the data
is missing evenly with respect to the different variables. Therefore, it is safe to assume that the
data is missing at random
<u>Multicollinearity Condition:</u>
**Multicollinearity Condition:**
All of the VIF values are lower than 10, therefore this condition is met.
The conditions for inference are not fully met due to the equal variance assumption. This means that our model will be more inaccurate for some price range of homes than others. Looking at our residual analysis, it appears that the inaccuracies happen when the price of the home is higher. There weren’t many outliers in the dataset (6 out of 117 or 5%) so removing these outliers makes the model more representative to the majority of the houses in the market. Since this model is intended to be used when analyzing prices of homes in the area, it is better not to include the outliers that most people don&#8217;t intend to buy. Since the error term is unimodal and symmetric, we can be at ease that there isn’t any other confounding factor in our model. Overall, this is a good model to use for inference and prediction as long as one doesn’t use it to describe the outliers.
The conditions for inference are not fully met due to the equal variance assumption. This means that our model will be more inaccurate for some price range of homes than others. Looking at our residual analysis, it appears that the inaccuracies happen when the price of the home is higher. There weren’t many outliers in the dataset (6 out of 117 or 5%) so removing these outliers makes the model more representative to the majority of the houses in the market. Since this model is intended to be used when analyzing prices of homes in the area, it is better not to include the outliers that most people don't intend to buy. Since the error term is unimodal and symmetric, we can be at ease that there isn’t any other confounding factor in our model. Overall, this is a good model to use for inference and prediction as long as one doesn’t use it to describe the outliers.
### Conclusion
The multiple imputation model without outliers is the best model outlined in this paper for describing the price of housing in this region. The formula is re-expressed here
PRICE = 76.47917 + 0.64130(TAX) + 0.27290(SQFT) + 77.58816(CUST2)
This states that for every dollar of tax spent on the home, the home increases on average by $64 given the other parameters stay constant. The same concept applies to square footage and custom design. For every square foot added to the home, the value of it increases on average by $27. Having a home with a custom design increases the value of the home by $7700. This model is more reliable the lower the price of the home is. When it comes to high cost homes, the error produced by the model increases. From this model, we conclude that property tax, square footage, and whether or not a home is built from a custom design are the most significant factors in the price of a home in Albuquerque, New Mexico.
This states that for every dollar of tax spent on the home, the home increases on average by $64 given the other parameters stay constant. The same concept applies to square footage and custom design. For every square foot added to the home, the value of it increases on average by $27. Having a home with a custom design increases the value of the home by $7700. This model is more reliable the lower the price of the home is. When it comes to high cost homes, the error produced by the model increases. From this model, we conclude that property tax, square footage, and whether or not a home is built from a custom design are the most significant factors in the price of a home in Albuquerque, New Mexico.

2
content/blog/introrfpoweramp.md
View file

@ -18,7 +18,7 @@ I opened up mini-circuits and was greeted with the following table. (Shorted for
| LZV-22+ | 0.1 | 200 | 43 | 8.9 | 42 | 52 | 1.4 | 4 | 24 | 6000 |
| ZHL-1W-63-S+ | 600 | 6000 | 35 | 12 | 30 | 35 | 2.5 | 3.5 | 15 | 1000 |
<u>Definitions</u>
### Definitions
F Low: Lowest frequency supported by the power amplifier

30
content/blog/male-vs-female-life-expectancy.md
View file

@ -14,7 +14,6 @@ tags: ["Statistics"]
It is well known that females live longer than males, but does that statement hold statistically? Matthew Martinez and I set out to find out.
<!--more-->
## Population and the hypothesis
@ -26,7 +25,7 @@ HA: The average female life expectancy is higher than the average male life expe
## Data preparation
Since the website gives us an overlook at all of the counties in the United States we want to take a small sample of that so we can perform statistics. Using the entire dataset will result in looking at population parameters which doesn&#8217;t leave room for inference.
Since the website gives us an overlook at all of the counties in the United States we want to take a small sample of that so we can perform statistics. Using the entire dataset will result in looking at population parameters which doesn't leave room for inference.
A random number was chosen to pick the state and then the county. This was done a total of 101 times. The CSV file is located [here](https://brandonrozek.com/wp-content/uploads/2017/03/LifeExpectancy.csv) for convenience.
@ -46,9 +45,9 @@ femaleExpectancy = LifeExpectancy$Life.Expectancy.Female
## Summary Statistics
Before we begin our inferential statistics, it is a good idea to look at what we have in our sample. It will give us a good feeling for what we&#8217;re working with and help us answer some questions involving the assumptions in parametric tests.
Before we begin our inferential statistics, it is a good idea to look at what we have in our sample. It will give us a good feeling for what we're working with and help us answer some questions involving the assumptions in parametric tests.
We&#8217;re interested in the minimum, mean, maximum, and interquartile range of the data
We're interested in the minimum, mean, maximum, and interquartile range of the data
```R
# Summary statistics
@ -65,7 +64,7 @@ Looking at the table below, we can see that the average male lives to be around
summary
## Min Mean Max IQR
## Male 69.0 74.952 80.9 2.775
## Female 76.1 80.416 84.1 2.350</code></pre>
## Female 76.1 80.416 84.1 2.350
```
## Inferential Statistics
@ -78,11 +77,11 @@ Since our data is quantitative in nature, we will attempt to perform a two sampl
Performing a t-test comes with several assumptions we need to check before confidently reporting our results.
<u>Independence Condition:</u> One county&#8217;s life span does not affect the lifespan of another.
**Independence Condition:** One county's life span does not affect the lifespan of another.
<u>Independent groups assumption:</u> The lifespan of a male does not directly impact a lifespan of a female.
**Independent groups assumption:** The lifespan of a male does not directly impact a lifespan of a female.
<u>Nearly Normal Condition:</u> We need to check the histograms to see if they&#8217;re unimodal and symmetric and check to see if any outliers exist
**Nearly Normal Condition:** We need to check the histograms to see if they're unimodal and symmetric and check to see if any outliers exist
The male life expectancy distribution appears to be unimodal and symmetric.
@ -91,7 +90,7 @@ The male life expectancy distribution appears to be unimodal and symmetric.
hist(maleExpectancy, main = "Male Life Expectancy", xlab = "Age")
```
<img src="https://brandonrozek.com/wp-content/uploads/2017/03/maleLifeExpectancyHist.png" width="672" />
![](https://brandonrozek.com/wp-content/uploads/2017/03/maleLifeExpectancyHist.png)
Same with the female life expectancy distribution
@ -99,15 +98,16 @@ Same with the female life expectancy distribution
hist(femaleExpectancy, main = "Female Life Expectancy", xlab = "Age")
```
<img src="https://brandonrozek.com/wp-content/uploads/2017/03/femaleLifeExpectancyHist.png" width="672" />
![](https://brandonrozek.com/wp-content/uploads/2017/03/femaleLifeExpectancyHist.png)
Looking at the boxplot, we can see that the IQR of the female life expectancy is higher than the one of the males. The hypothesis test will show us if this is of significant difference. On the male&#8217;s side there are two outliers. This violates the Nearly Normal Condition so we must proceed with caution in our test.
Looking at the boxplot, we can see that the IQR of the female life expectancy is higher than the one of the males. The hypothesis test will show us if this is of significant difference. On the male's side there are two outliers. This violates the Nearly Normal Condition so we must proceed with caution in our test.
```R
boxplot(maleExpectancy, femaleExpectancy, names = c("Male Life Expectancy", "Female Life Expectancy"), ylab = "Age")
```
<img src="https://brandonrozek.com/wp-content/uploads/2017/03/LifeExpectancyBoxplot.png" width="672" />
![](https://brandonrozek.com/wp-content/uploads/2017/03/LifeExpectancyBoxplot.png)
Since the nearly normal condition was not met, we do not meet the assumptions necessary to perform a t-test. However, since the condition was violated by an outlier, let us perform a t-test with the outlier and without the outlier and compare the results.
@ -175,7 +175,7 @@ Looking at the boxplot, there are no more outliers present
boxplot(maleExpectancy2, ylab = "Age", main = "Male Life Expectancy w/o Outliers")
```
<img src="https://brandonrozek.com/wp-content/uploads/2017/03/MLifeExpectBoxplotNoOutliers.png" width="672" />
![](https://brandonrozek.com/wp-content/uploads/2017/03/MLifeExpectBoxplotNoOutliers.png)
The histogram still appears to be unimodal and symmetric
@ -183,7 +183,7 @@ The histogram still appears to be unimodal and symmetric
hist(maleExpectancy2, xlab = "Age", main = "Male Life Expectancy w/o Outliers")
```
<img src="https://brandonrozek.com/wp-content/uploads/2017/03/MLifeExpectHistNoOutliers.png" width="672" />
![](https://brandonrozek.com/wp-content/uploads/2017/03/MLifeExpectHistNoOutliers.png)
Without the outliers present, the nearly normal condition is now met. We can perform the t-test.
@ -229,4 +229,4 @@ t.test(femaleExpectancy, maleExpectancy2)
## Conclusion
By running the tests and checking the effects of the outliers in the dataset and seeing that the results did not change, we can safely conclude that our interpretations stated before are correct. There is enough evidence to suggest that females in the United States live on average longer than males. We are 95% confident that they live longer than males by 5 to 6 years.
By running the tests and checking the effects of the outliers in the dataset and seeing that the results did not change, we can safely conclude that our interpretations stated before are correct. There is enough evidence to suggest that females in the United States live on average longer than males. We are 95% confident that they live longer than males by 5 to 6 years.

2
content/blog/rsynckey.md
View file

@ -22,7 +22,7 @@ Quick option definitions (from man page)
| Option | Description |
| -------------- | ------------------------------------------------------------ |
| -e | Allows you to override the default shell used as the transport for rsync. Command line options are permitted after the command name. |
| -a, --archive | This is equivalent to -rlptgoD. It is a quick way of saying you want recursion and want to preserve almost everything (with -H being a notable omission). The only exception to the above equivalence is when --files-from is specified, in which case -r is not implied. <br />Note that -a does not preserve hardlinks, because finding multiply-linked files is expensive. You must separately specify -H. |
| -a, --archive | This is equivalent to -rlptgoD. It is a quick way of saying you want recursion and want to preserve almost everything (with -H being a notable omission). The only exception to the above equivalence is when --files-from is specified, in which case -r is not implied. Note that -a does not preserve hardlinks, because finding multiply-linked files is expensive. You must separately specify -H. |
| -P | Equivalent to --partial --progress. Its purpose is to make it much easier to specify these two options for a long transfer that may be interrupted. |
| -z, --compress | Compress file data during the transfer |
| --delete | Delete extraneous files from dest dirs |

2
content/blog/simulators.md
View file

@ -9,7 +9,7 @@ Part of my job involves integrating multiple different sensors together to make
Now since we're working with sensor data, it doesn't always make sense to need to be connected to a whole system. There's also the additional hassle of dealing with safety and working outside. So in order to do some programming and still be at ease that we didn't break anything, we make heavy use of simulators.
<u>Example</u>: Have a GPS hooked up to your system? Well with a tool you can make waypoints and generate a file which you then feed in as a fake GPS device!
**Example**: Have a GPS hooked up to your system? Well with a tool you can make waypoints and generate a file which you then feed in as a fake GPS device!
Now when I say fake device, I don't mean I'm actually emulating the device on the machine. It's easier to have your device interfacers publish to the local network and have your other parts of the application subscribe to it. So in this case, you will just need to produce those messages directly.

2
content/blog/sshconnectionsharing.md
View file

@ -18,7 +18,7 @@ ControlPath ~/.ssh/sockets/socket-%r@%h:%p
| Option | Description |
| ---------------- | ------------------------------------------------------------ |
| `ControlMaster` | Allows connection sharing |
| `ControlPersist` | `yes` to keep connection up even when no clients are connected.<br />`2s` (or custom timeout) to keep the connection up for 2 seconds after no clients are connected.<br />`no` to disconnect immediately |
| `ControlPersist` | `yes` to keep connection up even when no clients are connected. `2s` (or custom timeout) to keep the connection up for 2 seconds after no clients are connected.`no` to disconnect immediately |
| `ControlPath` | Where to store connection information. This should not be writable by other users. |