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

HTML pre code to Markdown code black

Browse source
This commit is contained in:
Brandon Rozek 2025-02-16 13:03:06 -05:00
parent 3b1974b3fd
commit e06d45e053
No known key found for this signature in database
GPG key ID: DFB0E78F805F4567
6 changed files with 127 additions and 191 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
content/blog/2015-04-16-responsive-layout-and-animation.md
View file

@ -17,6 +17,7 @@ mf2_cite:
- 'a:1:{s:6:"author";a:0:{}}'
- 'a:1:{s:6:"author";a:0:{}}'
tags: ["Web", "CSS"]
math: true
---
I saw [Mike Riethmuller’s](http://madebymike.com.au/) precision typography [pen](http://codepen.io/MadeByMike/pen/YPJJYv){.broken_link}, and was highly impressed. I think the equation used has other purposes as well
@ -26,7 +27,13 @@ Side Note: I changed the form of the equation to something similar to y = mx + b
#### Responsive Layout
There are many occasions where I want an element on the page to move between two points. The navigation in the header of my site (at the time of writing) is a great example of this. So knowing the two points I want it to lie between and having the screen width as the variable, I can plug in&#8230; [<img class="aligncenter size-full wp-image-58" src="https://brandonrozek.com/wp-content/uploads/2015/04/responsivelayoutequation.gif" alt="f(x) = (100 * (b - a)/(d - c))X + (ad - bc) / (d - c)" width="219" height="36" />](https://brandonrozek.com/wp-content/uploads/2015/04/responsivelayoutequation.gif){.broken_link} where a is the start pixel b is the end pixel c is the start media query d is the end media query and X is the screen width out of 100 otherwise known as 1vw \*\*Don't forget to keep track of your units!! Whether it's px/rem/em/etc.\*\* Say I want to push a box towards the right a minimum of 5px, a maximum of 20px and for the push to vary between the widths 400-800px. Then I would write&#8230;
There are many occasions where I want an element on the page to move between two points. The navigation in the header of my site (at the time of writing) is a great example of this. So knowing the two points I want it to lie between and having the screen width as the variable, I can plug in:
$$$
f(x) = (100 * (b - a)/(d - c))X + (ad - bc) / (d - c)
$$$
where a is the start pixel b is the end pixel c is the start media query d is the end media query and X is the screen width out of 100 otherwise known as 1vw \*\*Don't forget to keep track of your units!! Whether it's px/rem/em/etc.\*\* Say I want to push a box towards the right a minimum of 5px, a maximum of 20px and for the push to vary between the widths 400-800px. Then I would write&#8230;
```css
@media (min-width: 400px) and (max-width: 800px) {
@ -66,7 +73,14 @@ This is exactly like Mike's pen, but instead he uses the equation to adjust the
#### Animation
This is where the majority of my research went towards. It's not as practical as say positioning an element is but I find it interesting. Like, what if I can manipulate the acceleration of the function? [<img class="aligncenter size-full wp-image-62" src="https://brandonrozek.com/wp-content/uploads/2015/04/accelerationequation.gif" alt="f(x) = ((b - a) / (d^n - c^n))X^n + (ad^n - bc^n) / (d^n - c^n) " width="202" height="36" />](https://brandonrozek.com/wp-content/uploads/2015/04/accelerationequation.gif){.broken_link} Where a is the start unit b is the end unit c is the start time d is the end time n is the acceleration modifier and X is time The interesting part of the function here is the n. If I keep n at 1, then the acceleration is constant. If it's less than one, then it's fast in the beginning and slows down at the end. If it's greater than one, then it's the opposite. I also made a little pen [here](http://codepen.io/brandonrozek/pen/RNzdOV){.broken_link} to demo this for you.
This is where the majority of my research went towards. It's not as practical as say positioning an element is but I find it interesting. Like, what if I can manipulate the acceleration of the function?
$$$
f(x) = ((b - a) / (d^n - c^n))X^n + (ad^n - bc^n) / (d^n - c^n)
$$$
Where a is the start unit b is the end unit c is the start time d is the end time n is the acceleration modifier and X is time The interesting part of the function here is the n. If I keep n at 1, then the acceleration is constant. If it's less than one, then it's fast in the beginning and slows down at the end. If it's greater than one, then it's the opposite. I also made a little pen [here](http://codepen.io/brandonrozek/pen/RNzdOV) to demo this for you.
#### Conclusion

100
content/blog/2015-10-03-animatable-text.md
View file

@ -17,7 +17,7 @@ kind:
- article
tags: ["Web", "CSS"]
---
This post is part 3 of my series on animation. In this post, I&#8217;ll show you different animations you can add onto text. If you haven&#8217;t already, you should check out [part 1](https://brandonrozek.com/2015/09/animatable-box-model/) and [part 2](https://brandonrozek.com/2015/05/animatable-border/) of this series. Animations on text can be used to bring attention, to add importance, or to convey a point. As with all animations, however, keep your user in mind and your text readable.
This post is part 3 of my series on animation. In this post, I'll show you different animations you can add onto text. If you haven't already, you should check out [part 1](https://brandonrozek.com/2015/09/animatable-box-model/) and [part 2](https://brandonrozek.com/2015/05/animatable-border/) of this series. Animations on text can be used to bring attention, to add importance, or to convey a point. As with all animations, however, keep your user in mind and your text readable.
<!--more-->
@ -28,77 +28,59 @@ This post follows along with a [Codepen demo](http://codepen.io/brandonrozek/ful
* Accepts certain keywords, or any positive number or length
* Initial value: normal
Line-height is the space between each line in a text block. It is commonly recommended that you use a unitless line-height because then it takes the font-size into consideration. When you use an unitless value, the browser determines the line-height by taking the unitless value and multiplying it by the element&#8217;s font-size. In the Codepen demo (#1), you can see the line-height decreasing while the opacity increases.
Line-height is the space between each line in a text block. It is commonly recommended that you use a unitless line-height because then it takes the font-size into consideration. When you use an unitless value, the browser determines the line-height by taking the unitless value and multiplying it by the element's font-size. In the Codepen demo (#1), you can see the line-height decreasing while the opacity increases.
<pre><code class="language-css">
```css
@keyframes line-height {
to {
opacity: 1;
line-height: 1.2;
}
}
.line-height {
opacity: 0;
line-height: 2.5;
animation: line-height .75s ease .2s infinite;
}
</code></pre>
```
### font-weight
* Accepts certain keywords or 100, 200, 300, 400, 500, 600, 700, 800, 900 (the higher the number, the darker the font-weight)
* Initial value: normal
Font-weight specifies the boldness of the text. If the typeface doesn&#8217;t come with multiple weights, then the animation would only happen between the weights that it does have. In the demo (#2), the text will go from normal weight to bold.
Font-weight specifies the boldness of the text. If the typeface doesn't come with multiple weights, then the animation would only happen between the weights that it does have. In the demo (#2), the text will go from normal weight to bold.
<pre><code class="language-css">
```css
@keyframes font-weight {
to { font-weight: 900;}
}
.font-weight {
font-weight: 100;
animation: font-weight 2s linear .2s infinite alternate;
}
</code></pre>
```
### font-size
* Accepts any length
* Initial value: medium
It is important to note that changing the font-size could change the value of other text properties that are dependent upon it. (Like unitless line-heights) In the demo (#3), you can see the text&#8217;s font-size shrinking.
It is important to note that changing the font-size could change the value of other text properties that are dependent upon it. (Like unitless line-heights) In the demo (#3), you can see the text's font-size shrinking.
<pre><code class="language-css">
```css
@keyframes font-size {
to { font-size: .1rem;}
}
.font-size {
font-size: 2rem;
animation: font-size 2s ease-out .1s infinite;
}
</code></pre>
```
### text-shadow
@ -106,25 +88,19 @@ It is important to note that changing the font-size could change the value of ot
* Color | Offset-X | Offset-Y | Blur-radius
* Initial value: none
Text-shadow applies a shadow to both the text and it&#8217;s text-decoration. Multiple shadows can be added, and they are applied from front to back. In the animation (#4), you can see the text&#8217;s shadow move.
Text-shadow applies a shadow to both the text and its text-decoration. Multiple shadows can be added, and they are applied from front to back. In the animation (#4), you can see the text's shadow move.
<pre><code class="language-css">
```css
@keyframes text-shadow {
to { text-shadow: 25px 10px 5px rgba(0, 0, 0, .9);}
}
.text-shadow {
font-size: 1.5rem;
text-shadow: -10px 5px 3.5px rgba(0, 0, 0, .3);
animation: text-shadow 1s ease 0s infinite;
}
</code></pre>
```
### text-decoration-color
@ -133,23 +109,18 @@ Text-shadow applies a shadow to both the text and it&#8217;s text-decoration. Mu
This sets the color for [text-decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) (underlines, overlines, or strike-throughs) In the demo (#5), the strike-through changes from red to black.
<pre><code class="language-css">
```css
@keyframes text-decoration-color {
to { text-decoration-color: black;}
}
.text-decoration-color {
text-decoration-color: red;
text-decoration-line: line-through;
animation: text-decoration-color 2s linear 0s infinite alternate;
}
</code></pre>
```
### word-spacing
@ -158,21 +129,17 @@ This sets the color for [text-decoration-line](https://developer.mozilla.org/en-
Word-spacing defines the space between tags and words. Negative values bring the words closer to each other. In the demo (#6), you can see the word-spacing increase with &#8216;good bye!&#8217; where the word &#8216;bye!&#8217; is moving away.
<pre><code class="language-css">
```css
@keyframes word-spacing {
to { word-spacing: 5rem;}
}
.word-spacing {
word-spacing: normal;
animation: word-spacing 1s ease-in 0s infinite;
}
</code></pre>
```
### letter-spacing
@ -181,26 +148,35 @@ Word-spacing defines the space between tags and words. Negative values bring the
Letter-spacing specifies the spacing between text characters. Negative values bring the letters closer together. In the demo (#7), each letter gets separated from one another.
<pre><code class="language-css">
```css
@keyframes letter-spacing {
to { letter-spacing: 2rem;}
}
.letter-spacing {
letter-spacing: 0;
animation: letter-spacing .75s ease 0s infinite alternate;
}
</code></pre>
```
### Conclusion
These animations show the different things you can do with text. Perhaps you&#8217;ll add a small animation to a heading to bring depth and attention, or you&#8217;ll add some to the text of a button to scream &#8220;call to action&#8221;. Whatever you decide, I hope this post helped. I&#8217;ll see you again next time with another animatable post! 🙂
These animations show the different things you can do with text. Perhaps you'll add a small animation to a heading to bring depth and attention, or you'll add some to the text of a button to scream &#8220;call to action&#8221;. Whatever you decide, I hope this post helped. I'll see you again next time with another animatable post! 🙂
#### The links
[https://docs.webplatform.org/wiki/css/properties/line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) <https://developer.mozilla.org/en-US/docs/Web/CSS/line-height> <https://docs.webplatform.org/wiki/css/properties/font-weight>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight> <https://docs.webplatform.org/wiki/css/properties/font-size>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/font-size> <https://docs.webplatform.org/wiki/css/properties/text-shadow>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow> <https://docs.webplatform.org/wiki/css/properties/text-decoration-color>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color> <https://docs.webplatform.org/wiki/css/properties/word-spacing>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing> <https://docs.webplatform.org/wiki/css/properties/letter-spacing>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing>
- [https://docs.webplatform.org/wiki/css/properties/line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
- https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
- https://docs.webplatform.org/wiki/css/properties/font-weight
- https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
- https://docs.webplatform.org/wiki/css/properties/font-size
- https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
- https://docs.webplatform.org/wiki/css/properties/text-shadow
- https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
- https://docs.webplatform.org/wiki/css/properties/text-decoration-color
- https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
- https://docs.webplatform.org/wiki/css/properties/word-spacing
- https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing
- https://docs.webplatform.org/wiki/css/properties/letter-spacing
- https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

53
content/blog/2015-10-11-animatable-visual.md
View file

@ -19,7 +19,7 @@ Hello everyone! This is part 5 of my series on animation. Today’s post will be
<!--more-->
I’ll give a shout-out to <http://csstriggers.com>, if you are interested in [CSS Animation performance](https://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/), then check them out to see what triggers a repaint and/or reflow. Take a look at the other posts in this series!
I’ll give a shout-out to [http://csstriggers.com](http://csstriggers.com), if you are interested in [CSS Animation performance](https://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/), then check them out to see what triggers a repaint and/or reflow. Take a look at the other posts in this series!
* Part 1 — [Animatable: Border](https://brandonrozek.com/2015/05/animatable-border/)
* Part 2 — [Animatable: Box Model](https://brandonrozek.com/2015/09/animatable-box-model/)
@ -28,88 +28,63 @@ I’ll give a shout-out to <http://csstriggers.com>, if you are interested in [C
This post goes with a [Codepen demo](http://codepen.io/brandonrozek/full/rOzeyO/){.broken_link} I made, I’ll reference it later in this post.
### <a href="#color" name="color"></a>color {#color}
### Color
* Accepts any [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) value
* Typically inherits it&#8217;s color from the parent element
* Typically inherits its color from the parent element
The color property sets the color of an element’s text content and its decoration. During the animation, the browser sees the colors in their red, green, and blue (rgb) components, then increments/decrements those values until it reaches the color it’s animating to. For example, in the Codepen demo (#1), the color of the text is changing from <code class="language-css">red</code> or <code class="language-css">rgb(255, 0, 0)</code> to <code class="language-css">green</code> or <code class="language-css">rgb(0, 255, 0)</code>. Meaning the red component is going from 255 to 0 and the green component is going from 0 to 255 during the animation.
<pre><code class="language-css">@keyframes color {
The color property sets the color of an element’s text content and its decoration. During the animation, the browser sees the colors in their red, green, and blue (rgb) components, then increments/decrements those values until it reaches the color it’s animating to. For example, in the Codepen demo (#1), the color of the text is changing from `red` or `rgb(255, 0, 0)` to `green` or `rgb(0, 255, 0)`. Meaning the red component is going from 255 to 0 and the green component is going from 0 to 255 during the animation.
```css
@keyframes color {
to { color: green; }
}
.color {
font-size: 2rem;
color: red;
text-decoration: underline;
animation: color 1.5s ease-in 0s infinite alternate;
}
</code></pre>
```
### <a href="#opacity" name="opacity"></a>opacity {#opacity}
### opacity
* Accepts any number from [0, 1]
* Initial Value: 1
Opacity sets the transparency of an element and it’s decendants. Unlike <code class="language-css">display: none;</code>, when the element is <code class="language-css">opacity: 0;</code> the element still holds it’s space on the page. In the Codepen demo (#2), you can see the element and it’s children fading out.
<pre><code class="language-css">@keyframes opacity {
Opacity sets the transparency of an element and it’s decendants. Unlike `display: none;`, when the element is `opacity: 0;` the element still holds it’s space on the page. In the Codepen demo (#2), you can see the element and it’s children fading out.
```css
@keyframes opacity {
to { opacity: 0; }
}
.opacity {
height: 5rem;
width: 5rem;
background-color: #cd86e4;
opacity: 1;
animation: opacity 2s linear 0s infinite alternate;
}
.opacity div {
margin-left: auto;
margin-right: auto;
height: 3rem;
width: 3rem;
background-color: lightblue;
}
.opacity div div {
margin-left: auto;
margin-right: auto;
height: 1rem;
width: 1rem;
background-color: #00b300;
}
</code></pre>
```
### <a href="#conclusion" name="conclusion"></a>Conclusion {#conclusion}
### Conclusion
I used to work on a chat application called Babbler. In it, I used opacity to fade in the messages as the user recieved them. With all these different types of animations, you can visually show the user what’s going on in your website/application. Doing this series helps me, (as well as you, I hope) recognize all the different properties and possibilities for animation. This is the second to last part of this series, meaning that the next part is the finale. I’m somewhat sad to see this series ending but excited at the same time. Until next time, have fun animating. 🙂
I used to work on a chat application called Babbler. In it, I used opacity to fade in the messages as the user recieved them. With all these different types of animations, you can visually show the user what’s going on in your website/application. Doing this series helps me, (as well as you, I hope) recognize all the different properties and possibilities for animation. This is the second to last part of this series, meaning that the next part is the finale. I’m somewhat sad to see this series ending but excited at the same time. Until next time, have fun animating. 🙂

65
content/blog/2015-10-18-animatable-transform.md
View file

@ -29,112 +29,83 @@ This is not a comprehensize list. If you want one of those, please check out MDN
Animatable: Transform goes with a [CodePen demo](http://codepen.io/brandonrozek/full/ojoMyE){.broken_link} I made. Please check it out, as I will be referencing it later on in the post.
### <a href="#rotate()" name="rotate()"></a>rotate() {#rotate()}
### rotate()
The rotate() function moves the element around a fixed point as defined by the [transform-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) property. In the Codepen demo (#1), the star continously rotates 360 degrees.
<pre><code class="language-css">@keyframes rotate {
```css
@keyframes rotate {
to { transform: rotate(360deg);}
}
.rotate {
width: 6rem;
height: 6rem;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/2000px-Star_full.svg.png");
background-size: cover;
transform: none;
animation: rotate 1s ease 0s infinite;
}
</code></pre>
```
### <a href="#scale()" name="scale()"></a>scale() {#scale()}
### scale()
Scale(sx, sy) modifies the size of the element by taking 2 arguments: sx and sy. Where sx is the multiplier that scales the element in the x-direction while sy is the multiplier that scales the element in the y-direction. In the CodePen demo (#2), the little ninja man scales to half his size and back to normal again.
<pre><code class="language-css">@keyframes scale {
```css
@keyframes scale {
to { transform: scale(.5); }
}
.scale {
width: 6rem;
height: 6rem;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/71/Monocromaticman.JPG");
background-size: contain;
background-repeat: no-repeat;
transform: none;
animation: scale 1s ease 0s infinite alternate;
}
</code></pre>
```
### <a href="#skew()" name="skew()"></a>skew() {#skew()}
### skew()
Skew distorts the element by moving each point to a certain angle determined by it’s distance from the origin. In the CodePen demo (#3), the square skews -20 degrees, making it appear as a parallelogram.
<pre><code class="language-css">@keyframes skew {
```css
@keyframes skew {
to { transform: skew(-20deg); }
}
.skew {
height: 6rem;
width: 6rem;
background-color: lightblue;
transform: none;
animation: skew .75s ease 0s infinite alternate;
}
</code></pre>
```
### <a href="#translate()" name="translate()"></a>translate() {#translate()}
### translate()
Transform(tx, ty) moves the element as specified by it’s two parameters tx and ty. Tx tells the browser how many units to move it in the x direction while ty tells the browser how many units to move the element in the y direction. In the CodePen demo (#4), the car moves forward 10rem and back again.
<pre><code class="language-css">@keyframes translate {
```css
@keyframes translate {
to { transform: translate(10rem);}
}
.translate {
height: 6rem;
width: 6rem;
background-image: url("http://res.freestockphotos.biz/pictures/15/15685-illustration-of-a-red-cartoon-car-pv.png");
background-size: contain;
background-repeat: no-repeat;
transform: none;
animation: translate 1s ease 0s infinite alternate;
}
</code></pre>
```
### <a href="#conclusion" name="conclusion"></a>Conclusion {#conclusion}
### Conclusion
It is now the end of the Animatable series. I am sad to see this first completed series of mine go. It’s okay though, I’m bound to think of another series to write for you guys in no time. My goal in Animatable, is to show you (and me) what is possible using CSS animations. With this small reference completed, we have a good overview of the different tools available. Now with our new toolbelt, go out and craft meaningful experinces!
It is now the end of the Animatable series. I am sad to see this first completed series of mine go. It’s okay though, I’m bound to think of another series to write for you guys in no time. My goal in Animatable, is to show you (and me) what is possible using CSS animations. With this small reference completed, we have a good overview of the different tools available. Now with our new toolbelt, go out and craft meaningful experinces!

24
content/blog/2015-10-18-javascript-conditional-statements.md
View file

@ -24,9 +24,9 @@ Javascript, like most other programming languages, include ways to run blocks of
This post is part of my lecture series for Math I/O. There is no pre-reading for this lecture.
### <a href="#if-statement" name="if-statement"></a>If Statement {#if-statement}
### If Statement
To run a block of code when a condition is true, use an <code class="language-javascript">if</code> statement.
To run a block of code when a condition is true, use an `if` statement.
```javascript
if (condition) {
@ -34,7 +34,7 @@ if (condition) {
}
```
You can also run a block of code when a condition is false using the <code class="language-javascript">else</code> statement.
You can also run a block of code when a condition is false using the `else` statement.
```javascript
if (condition) {
@ -44,9 +44,9 @@ if (condition) {
}
```
### <a href="#switch-statement" name="switch-statement"></a>Switch statement {#switch-statement}
### Switch statement
If you want to check a variable for **equality** against multiple different cases, use a <code class="language-javascript">switch</code> statement.
If you want to check a variable for **equality** against multiple different cases, use a `switch` statement.
```javascript
switch (variable) {
@ -64,9 +64,9 @@ switch (variable) {
The default statement runs when the variable doesn’t equal any of the cases.
### <a href="#while-loop" name="while-loop"></a>While loop {#while-loop}
### While loop
To run a block of code over and over again until a condition is false, use a <code class="language-javascript">while</code> loop.
To run a block of code over and over again until a condition is false, use a `while` loop.
```javascript
while (condition) {
@ -74,11 +74,11 @@ while (condition) {
}
```
Don’t forget to include something in the loop that will eventually make the condition <code class="language-javascript">false</code>, otherwise you run into an infinite loop. (Which is a loop that never stops repeating itself; most likely crashing your browser)
Don’t forget to include something in the loop that will eventually make the condition `false`, otherwise you run into an infinite loop. (Which is a loop that never stops repeating itself; most likely crashing your browser)
### <a href="#for-loop" name="for-loop"></a>For loop {#for-loop}
### For loop
If you want to run something a certain amount of times, use a &#8220;<code class="language-javascript">for"</code> loop. For loops can be broken down into three components: an initiating statement, a condition, and a statement that runs after every loop.
If you want to run something a certain amount of times, use a `for` loop. For loops can be broken down into three components: an initiating statement, a condition, and a statement that runs after every loop.
```javascript
for (var i = 0; i &lt; 5; i++) {
@ -86,9 +86,9 @@ for (var i = 0; i &lt; 5; i++) {
}
```
Here you have the initiating statement of <code class="language-javascript">var i = 0</code>. From there you check, is <code class="language-javascript">i</code> less than 5? Yes, so then we <code class="language-javascript">doSomething();</code>. After we <code class="language-javascript">doSomething();</code>, we add 1 to <code class="language-javascript">i</code>. Now <code class="language-javascript">i</code> equals 2. Is <code class="language-javascript">i</code> still less than 5? Yes, so we <code class="language-javascript">doSomething();</code>. Then we add 1 to <code class="language-javascript">i</code> again. This loop will keep happening until <code class="language-javascript">i</code> is not less than 5.
Here you have the initiating statement of `var i = 0`. From there you check, is `i` less than 5? Yes, so then we `doSomething();`. After we `doSomething();`, we add 1 to `i`. Now `i` equals 2. Is`i` still less than 5? Yes, so we `doSomething();`. Then we add 1 to `i` again. This loop will keep happening until `i` is not less than 5.
### <a href="#conclusion" name="conclusion"></a>Conclusion {#conclusion}
### Conclusion
Having different control/conditional statements helps keep the state of any application you’re making. Did the user say not to notify them? Then don’t, otherwise (else) notify them. That’s all I have to say for this week. Hope this post helps you get a little more used to this big world called programming.

58
content/blog/2015-11-15-fractions-js.md
View file

@ -15,19 +15,19 @@ mf2_cite:
- 'a:1:{s:6:"author";a:0:{}}'
tags: ["JS"]
---
Last week I published my first library over on Github called [Fractions.js](https://github.com/brandonrozek/Fractions.js). Fractions.js is a library to help avoid the [mathmatetical errors](http://floating-point-gui.de/) in floating point arithmetic. What do you mean by floating point artihmetic errors? Here is an example: <code class="language-javascript">.1 * .2</code> outputs <code class="language-javascript">0.020000000000000004</code> even though the correct answer is <code class="language-javascript">.02</code>
Last week I published my first library over on Github called [Fractions.js](https://github.com/brandonrozek/Fractions.js). Fractions.js is a library to help avoid the [mathmatetical errors](http://floating-point-gui.de/) in floating point arithmetic. What do you mean by floating point artihmetic errors? Here is an example: `.1 * .2` outputs `0.020000000000000004` even though the correct answer is `.02`.
<!--more-->
## <a href="#purpose" name="purpose"></a>Purpose {#purpose}
## Purpose
My team and I are currently working on a new game for Math I/O. One of the levels is testing whether the player can add, subtract, multiply, and divide fractions correctly. I didn’t want to implement a solution where we check if the input entered is within a range of the answer. So I asked the team, how do you add, subtract, multiply, and divide fractions in your head? As we were working through it together, I realized that this is a common problem over at Math I/O. So I decided to make a library dedicated to this.
## <a href="#how-it-works" name="how-it-works"></a>How it works {#how-it-works}
## How it works
I broke up each fraction into two things, a numerator and a denominator. With these two numbers, I can figure out all of the most common operations.
### <a href="#addition" name="addition"></a>Addition {#addition}
### Addition
For addition, if two fractions have the same denominator, then you just need to add the numerators.
@ -39,66 +39,66 @@ If not, then you need to change it to have a common denominator. We can do this
1/2 + 1/3 = (1 * 3)/ (2 * 3) + (1 * 2)/ (2 * 3) = 3/6 + 2/6 = 5/6
### <a href="#subtraction" name="subtraction"></a>Subtraction {#subtraction}
### Subtraction
Works the same as addition, except the second fraction is subtracted (taken away) from the first.
### <a href="#multiplication" name="multiplication"></a>Multiplication {#multiplication}
### Multiplication
To multiply two fractions, just multiply the numerators by each other, and the denominators by each other.
2/3 * 1/2 = 2/6
### <a href="#division" name="division"></a>Division {#division}
### Division
Treated similar to multiplication since dividing a number is the same thing as multiplying by it’s [reciprocal](https://www.mathsisfun.com/reciprocal.html).
1 / (1 / 2) = 1 * 2 = 2
### <a href="#simplification" name="simplification"></a>Simplification {#simplification}
### Simplification
Sometimes with the operations above, it’ll produce fractions in an unsimplified form. To avoid any confusion, I created a simplify function. It was challanging trying to figure out a way to code this. While I was browsing around for an implementation, I knocked into Euclider’s algorithm for finding the greatest common factor. Straight from the [Wikipedia article](https://en.wikipedia.org/wiki/Euclidean_algorithm) (where a is greater than b):
function gcd(a, b)
while b ≠ 0
t := b;
b := a mod b;
a := t;
return a;
```
function gcd(a, b)
while b ≠ 0
t := b;
b := a mod b;
a := t;
return a;
```
I can then simplify the fraction by dividing the numerator and denominator by the greatest common factor.
## <a href="#the-api" name="the-api"></a>The API {#the-api}
## The API
I decided to provide as much flexibility as I can in the API. You have several ways to create a new Fraction.
<pre><code class="language-javascript">
```javascript
var oneHalf = new Fraction(1,2);
var oneHalf = new Fraction(.5);
var oneHalf = new Fraction("1/2");
var oneHalf = new Fraction("1", "2")
</code></pre>
var oneHalf = new Fraction("1", "2");
```
All of these results will return a Fraction with a numerator of <code class="language-javascript">1</code> and a denominator of <code class="language-javascript">2</code>. You also have two different ways to do the most common operations.
All of these results will return a Fraction with a numerator of `1` and a denominator of `2`. You also have two different ways to do the most common operations.
<pre><code class="language-javascript">
```javascript
var fiveThirds = Fraction.add("1/3", "4/3");
var fiveThirds = new Fraction("1/3").add("4/3");
</code></pre>
```
The second style came from how jQuery implements it’s library. That way you can chain operations.
<pre><code class="language-javascript">
```javascript
new Fraction("1/2").add("2/3").divide("5/6").subtract("7/8").multiply("6/5").toString()
</code></pre>
```
Outputs <code class="language-javascript">'63/100'</code> This is accomplished in the code through [prototypes](http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/).
Outputs `'63/100'` This is accomplished in the code through [prototypes](http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/).
<pre><code class="language-javascript">
```javascript
Fraction.add = function(frac1, frac2) {
Fraction.correctArgumentLength(2, arguments.length);
frac1 = Fraction.toFraction(frac1)
@ -113,10 +113,10 @@ Fraction.prototype.add = function(frac) {
Fraction.correctArgumentLength(1, arguments.length);
return Fraction.change(this, Fraction.add(this, frac));
}
</code></pre>
```
In the code, the add prototype calls the Fraction.add function within it to avoid code duplication.
## <a href="#conclusion" name="conclusion"></a>Conclusion {#conclusion}
## Conclusion
After I coded this up, I looked online for different implementations and found [fraction.js](https://github.com/ekg/fraction.js) by [Erik Garrison](http://hypervolu.me/~erik/). It’s important to look at different implementations and see which matches your needs better. This post isn’t meant to go fully into detail of the library. To know what else the library can do, visit the [readme page](https://github.com/brandonrozek/Fractions.js/blob/master/README.md). If you’re curious in how it’s implemented, check out the [code](https://github.com/brandonrozek/Fractions.js/blob/master/Fraction.js). [Email me](mailto:brozek@brandonrozek.com) if you have any questions/criticisms 🙂