mirror of
https://github.com/Brandon-Rozek/website.git
synced 2024-11-25 01:26:30 -05:00
Added old URL paths as aliases and cleaned up some code sections of old posts
This commit is contained in:
parent
8e175e60e4
commit
b86c103ade
27 changed files with 1023 additions and 966 deletions
|
@ -5,6 +5,8 @@ date: 2015-04-16T22:19:36+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: http://brandonrozek.com/?p=57
|
guid: http://brandonrozek.com/?p=57
|
||||||
|
aliases:
|
||||||
|
- /2015/04/responsive-layout-and-animation/
|
||||||
permalink: /2015/04/responsive-layout-and-animation/
|
permalink: /2015/04/responsive-layout-and-animation/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
@ -32,51 +34,39 @@ Side Note: I changed the form of the equation to something similar to y = mx + b
|
||||||
|
|
||||||
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… [<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…
|
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… [<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…
|
||||||
|
|
||||||
<pre><code class="language-css">
|
```css
|
||||||
@media (min-width: 400px) and (max-width: 800px) {
|
@media (min-width: 400px) and (max-width: 800px) {
|
||||||
|
.box {
|
||||||
.box {
|
position: relative;
|
||||||
|
left: calc(3.75vw - 10px) /*After simplifying the equation*/
|
||||||
position: relative;
|
}
|
||||||
|
|
||||||
left: calc(3.75vw - 10px) /*After simplifying the equation*/ }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
That would only make it vary between 400-800px. Now we need to include what happens under 400px and over 800px.
|
That would only make it vary between 400-800px. Now we need to include what happens under 400px and over 800px.
|
||||||
|
|
||||||
<pre><code class="language-css">
|
```css
|
||||||
@media (max-width: 400px) {
|
@media (max-width: 400px) {
|
||||||
|
.box {
|
||||||
.box {
|
position: relative;
|
||||||
|
left: 5px;
|
||||||
position: relative;
|
}
|
||||||
|
|
||||||
left: 5px; }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 400px) and (max-width: 800px) {
|
@media (min-width: 400px) and (max-width: 800px) {
|
||||||
|
.box {
|
||||||
.box {
|
position: relative;
|
||||||
|
left: calc(3.75vw - 10px);
|
||||||
position: relative;
|
}
|
||||||
|
|
||||||
left: calc(3.75vw - 10px); }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 800px) {
|
@media (min-width: 800px) {
|
||||||
|
.box {
|
||||||
.box {
|
position: relative;
|
||||||
|
left: 20px;
|
||||||
position: relative;
|
}
|
||||||
|
|
||||||
left: 20px; }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
This is exactly like Mike’s pen, but instead he uses the equation to adjust the font-size between an upper and lower bound. You can apply this method to anything that accepts calc() and viewport units. Here is my [pen](http://codepen.io/brandonrozek/pen/JoQVEb){.broken_link} showing some use cases. To make your life easier, I made a quick little tool where you can input the variables and it will provide you with a simpler form of the equation to put into your calc() function [here](http://codepen.io/brandonrozek/pen/KpPwGL){.broken_link}.
|
This is exactly like Mike’s pen, but instead he uses the equation to adjust the font-size between an upper and lower bound. You can apply this method to anything that accepts calc() and viewport units. Here is my [pen](http://codepen.io/brandonrozek/pen/JoQVEb){.broken_link} showing some use cases. To make your life easier, I made a quick little tool where you can input the variables and it will provide you with a simpler form of the equation to put into your calc() function [here](http://codepen.io/brandonrozek/pen/KpPwGL){.broken_link}.
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2015-05-23T19:59:25+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: http://brandonrozek.com/?p=85
|
guid: http://brandonrozek.com/?p=85
|
||||||
|
aliases:
|
||||||
|
- /2015/05/animatable-border/
|
||||||
permalink: /2015/05/animatable-border/
|
permalink: /2015/05/animatable-border/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
@ -34,21 +36,16 @@ This post follows well along with my Codepen [demo](http://codepen.io/brandonroz
|
||||||
|
|
||||||
Border-color animates by splitting the colors to their red, green and blue components and raises/lowers them to it’s new value. ([Demo](http://codepen.io/brandonrozek/pen/PqzPMe){.broken_link}) ([Spec](http://www.w3.org/TR/css3-transitions/#animtype-color)) Example of animation corresponds to #1 in the pen, but I will rewrite the relevant code here.
|
Border-color animates by splitting the colors to their red, green and blue components and raises/lowers them to it’s new value. ([Demo](http://codepen.io/brandonrozek/pen/PqzPMe){.broken_link}) ([Spec](http://www.w3.org/TR/css3-transitions/#animtype-color)) Example of animation corresponds to #1 in the pen, but I will rewrite the relevant code here.
|
||||||
|
|
||||||
<pre><code class="language-css">
|
```css
|
||||||
@keyframes color {
|
@keyframes color {
|
||||||
|
to { border-color: purple red green blue; }
|
||||||
to { border-color: purple red green blue; }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-color {
|
.border-color {
|
||||||
|
border-color: white;
|
||||||
border-color: white;
|
animation: color .4s ease-in .1s infinite alternate;
|
||||||
|
|
||||||
animation: color .4s ease-in .1s infinite alternate;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -58,44 +55,31 @@ animation: color .4s ease-in .1s infinite alternate;
|
||||||
* Each value corresponds to a corner starting from the top left and going clockwise
|
* Each value corresponds to a corner starting from the top left and going clockwise
|
||||||
* Initial Value: 0
|
* Initial Value: 0
|
||||||
|
|
||||||
<pre><code class="language-css">
|
```css
|
||||||
.border-radius {
|
.border-radius {
|
||||||
|
border-radius: 40% 30% 60% 50% / 20% 40% 60% 80%;
|
||||||
border-radius: 40% 30% 60% 50% / 20% 40% 60% 80%;
|
/** is the same as **/
|
||||||
|
border-top-left-radius: 40% 20%;
|
||||||
/** is the same as **/
|
border-top-right-radius: 30% 40%;
|
||||||
|
border-bottom-right-radius: 60% 60%;
|
||||||
border-top-left-radius: 40% 20%;
|
border-bottom-left-radius: 50% 80%;
|
||||||
|
/** where the first value is the horizontal
|
||||||
border-top-right-radius: 30% 40%;
|
radius and the second value the vertical radius **/
|
||||||
|
|
||||||
border-bottom-right-radius: 60% 60%;
|
|
||||||
|
|
||||||
border-bottom-left-radius: 50% 80%;
|
|
||||||
|
|
||||||
/** where the first value is the horizontal radius and the second value the vertical radius**/
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
For animation, this corresponds to #2 in the pen I made at the top. I’ll repeat the relevant code here.
|
For animation, this corresponds to #2 in the pen I made at the top. I’ll repeat the relevant code here.
|
||||||
|
|
||||||
<pre><code class="language-css">
|
```css
|
||||||
|
|
||||||
@keyframes radius {
|
@keyframes radius {
|
||||||
|
to { border-radius: 20%; }
|
||||||
to { border-radius: 20%; }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-radius {
|
.border-radius {
|
||||||
|
border-radius: 0;
|
||||||
border-radius: 0;
|
animation: radius .5s ease-in .1s infinite alternate;
|
||||||
|
|
||||||
animation: radius .5s ease-in .1s infinite alternate;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -107,24 +91,27 @@ animation: radius .5s ease-in .1s infinite alternate;
|
||||||
|
|
||||||
For animation, this corresponds to #3 in the pen I made at the top. I’ll repeat the relevant code here.
|
For animation, this corresponds to #3 in the pen I made at the top. I’ll repeat the relevant code here.
|
||||||
|
|
||||||
<pre><code class="language-css">
|
```css
|
||||||
@keyframes width {
|
@keyframes width {
|
||||||
|
to { border-width: .15rem .25rem .15rem .25rem; }
|
||||||
to { border-width: .15rem .25rem .15rem .25rem; }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-width {
|
.border-width {
|
||||||
|
border-width: .7rem;
|
||||||
border-width: .7rem;
|
animation: width .5s ease-in .1s infinite alternate;
|
||||||
|
|
||||||
animation: width .5s ease-in .1s infinite alternate;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Conclusion
|
### Conclusion
|
||||||
|
|
||||||
Animations are quite enjoyable. The last box in my Codepen demo tries combining all three of those animations. (Super Wacky!) You don’t need to use keyframe animations to achieve this, you can also use the transition property. I used keyframes so you can better visualize what’s going on. There are plenty of other animatable properties to go through, so I’ll get started on those. In the meantime, if you want to look at some of the sites I used for research I’ll include the links below. <https://developer.mozilla.org/en-US/docs/Web/CSS/animation> <http://www.w3.org/TR/css3-transitions/#animatable-css> <https://developer.mozilla.org/en-US/docs/Web/CSS/border-color> <https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius> <https://developer.mozilla.org/en-US/docs/Web/CSS/border-width> <https://docs.webplatform.org/wiki/css/properties/border-color>{.broken_link} <https://docs.webplatform.org/wiki/css/properties/border-radius>{.broken_link} <https://docs.webplatform.org/wiki/css/properties/border-width>{.broken_link}
|
Animations are quite enjoyable. The last box in my Codepen demo tries combining all three of those animations. (Super Wacky!) You don’t need to use keyframe animations to achieve this, you can also use the transition property. I used keyframes so you can better visualize what’s going on. There are plenty of other animatable properties to go through, so I’ll get started on those. In the meantime, if you want to look at some of the sites I used for research I’ll include the links below.
|
||||||
|
- <https://developer.mozilla.org/en-US/docs/Web/CSS/animation>
|
||||||
|
- <http://www.w3.org/TR/css3-transitions/#animatable-css>
|
||||||
|
- <https://developer.mozilla.org/en-US/docs/Web/CSS/border-color>
|
||||||
|
- <https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius>
|
||||||
|
- <https://developer.mozilla.org/en-US/docs/Web/CSS/border-width>
|
||||||
|
- <https://docs.webplatform.org/wiki/css/properties/border-color>{.broken_link}
|
||||||
|
- <https://docs.webplatform.org/wiki/css/properties/border-radius>{.broken_link}
|
||||||
|
- <https://docs.webplatform.org/wiki/css/properties/border-width>{.broken_link}
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2015-09-14T12:07:52+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=155
|
guid: https://brandonrozek.com/?p=155
|
||||||
|
aliases:
|
||||||
|
- /2015/09/animatable-box-model/
|
||||||
permalink: /2015/09/animatable-box-model/
|
permalink: /2015/09/animatable-box-model/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2015-10-03T09:34:08+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=190
|
guid: https://brandonrozek.com/?p=190
|
||||||
|
aliases:
|
||||||
|
- /2015/10/animatable-location/
|
||||||
permalink: /2015/10/animatable-location/
|
permalink: /2015/10/animatable-location/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2015-10-03T08:44:51+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=148
|
guid: https://brandonrozek.com/?p=148
|
||||||
|
aliases:
|
||||||
|
- /2015/10/animatable-text/
|
||||||
permalink: /2015/10/animatable-text/
|
permalink: /2015/10/animatable-text/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2015-10-04T17:50:50+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=210
|
guid: https://brandonrozek.com/?p=210
|
||||||
|
aliases:
|
||||||
|
- /2015/10/html-css-javascript-link-together/
|
||||||
permalink: /2015/10/html-css-javascript-link-together/
|
permalink: /2015/10/html-css-javascript-link-together/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2015-10-10T20:01:20+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=238
|
guid: https://brandonrozek.com/?p=238
|
||||||
|
aliases:
|
||||||
|
- /2015/10/javascript-data-types/
|
||||||
permalink: /2015/10/javascript-data-types/
|
permalink: /2015/10/javascript-data-types/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2015-10-11T16:52:36+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=297
|
guid: https://brandonrozek.com/?p=297
|
||||||
|
aliases:
|
||||||
|
- /2015/10/animatable-visual/
|
||||||
permalink: /2015/10/animatable-visual/
|
permalink: /2015/10/animatable-visual/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2015-10-18T16:32:37+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=337
|
guid: https://brandonrozek.com/?p=337
|
||||||
|
aliases:
|
||||||
|
- /2015/10/animatable-transform/
|
||||||
permalink: /2015/10/animatable-transform/
|
permalink: /2015/10/animatable-transform/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2015-10-18T18:30:21+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=344
|
guid: https://brandonrozek.com/?p=344
|
||||||
|
aliases:
|
||||||
|
- /2015/10/javascript-conditional-statements/
|
||||||
permalink: /2015/10/javascript-conditional-statements/
|
permalink: /2015/10/javascript-conditional-statements/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
@ -32,25 +34,28 @@ This post is part of my lecture series for Math I/O. There is no pre-reading for
|
||||||
|
|
||||||
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 <code class="language-javascript">if</code> statement.
|
||||||
|
|
||||||
<pre><code class="language-javascript"> if (condition) {
|
```javascript
|
||||||
|
if (condition) {
|
||||||
doSomething();
|
doSomething();
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
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 <code class="language-javascript">else</code> statement.
|
||||||
|
|
||||||
<pre><code class="language-javascript"> if (condition) {
|
```javascript
|
||||||
|
if (condition) {
|
||||||
doSomething();
|
doSomething();
|
||||||
} else {
|
} else {
|
||||||
doSomethingElse();
|
doSomethingElse();
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
### <a href="#switch-statement" name="switch-statement"></a>Switch statement {#switch-statement}
|
### <a href="#switch-statement" name="switch-statement"></a>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 <code class="language-javascript">switch</code> statement.
|
||||||
|
|
||||||
<pre><code class="language-javascript"> switch (variable) {
|
```javascript
|
||||||
|
switch (variable) {
|
||||||
case condition1:
|
case condition1:
|
||||||
doSomething();
|
doSomething();
|
||||||
break;
|
break;
|
||||||
|
@ -60,8 +65,8 @@ If you want to check a variable for **equality** against multiple different case
|
||||||
default:
|
default:
|
||||||
doSomethingCompletelyDifferent();
|
doSomethingCompletelyDifferent();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
The default statement runs when the variable doesn’t equal any of the cases.
|
The default statement runs when the variable doesn’t equal any of the cases.
|
||||||
|
|
||||||
|
@ -69,10 +74,11 @@ The default statement runs when the variable doesn’t equal any of the cases.
|
||||||
|
|
||||||
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 <code class="language-javascript">while</code> loop.
|
||||||
|
|
||||||
<pre><code class="language-javascript"> while (condition) {
|
```javascript
|
||||||
|
while (condition) {
|
||||||
doSomething();
|
doSomething();
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
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 <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)
|
||||||
|
|
||||||
|
@ -80,10 +86,11 @@ Don’t forget to include something in the loop that will eventually make the co
|
||||||
|
|
||||||
If you want to run something a certain amount of times, use a “<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 “<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.
|
||||||
|
|
||||||
<pre><code class="language-javascript"> for (var i = 0; i < 5; i++) {
|
```javascript
|
||||||
|
for (var i = 0; i < 5; i++) {
|
||||||
doSomething();
|
doSomething();
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
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 <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.
|
||||||
|
|
||||||
|
@ -91,11 +98,12 @@ Here you have the initiating statement of <code class="language-javascript">var
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
<pre><code class="language-javascript"> if (youLikeThisPost) {
|
```javascript
|
||||||
|
if (youLikeThisPost) {
|
||||||
console.log("Come back next week! :)");
|
console.log("Come back next week! :)");
|
||||||
} else {
|
} else {
|
||||||
console.log("Aww that's okay, you should give me another chance next week :)");
|
console.log("Aww that's okay, you should give me another chance next week :)");
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
I recommend that you look at different perspectives of the same concepts. WebCheatSheet.com has a similar post to mine, check out what they had to say [here](http://webcheatsheet.com/javascript/if_else_switch.php).
|
I recommend that you look at different perspectives of the same concepts. WebCheatSheet.com has a similar post to mine, check out what they had to say [here](http://webcheatsheet.com/javascript/if_else_switch.php).
|
|
@ -5,6 +5,8 @@ date: 2015-10-25T13:48:41+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=350
|
guid: https://brandonrozek.com/?p=350
|
||||||
|
aliases:
|
||||||
|
- /2015/10/functions/
|
||||||
permalink: /2015/10/functions/
|
permalink: /2015/10/functions/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
@ -27,33 +29,33 @@ Ever had a snippet of code that appears multiple times in different places in yo
|
||||||
|
|
||||||
To make a function
|
To make a function
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var doSomething = function() {
|
var doSomething = function() {
|
||||||
doStuff;
|
doStuff;
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
To call the above function to execute
|
To call the above function to execute
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
doSomething();
|
doSomething();
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
### <a href="#arguments" name="arguments"></a>Arguments {#arguments}
|
### <a href="#arguments" name="arguments"></a>Arguments {#arguments}
|
||||||
|
|
||||||
You can also add in arguments (parameters that go inside the paraenthesis next to the word function) for the functions to use.
|
You can also add in arguments (parameters that go inside the paraenthesis next to the word function) for the functions to use.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var add = function(number1, number2) {
|
var add = function(number1, number2) {
|
||||||
return number1 + number2;
|
return number1 + number2;
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
And when you use the `return` keyword, like the function above. You can store the value in a variable for future use.
|
And when you use the `return` keyword, like the function above. You can store the value in a variable for future use.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var total = add(1, 3);
|
var total = add(1, 3);
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
<code class="language-javascript">total</code> here will equal `4`
|
<code class="language-javascript">total</code> here will equal `4`
|
||||||
|
|
||||||
|
@ -63,16 +65,16 @@ Functions create their own scope, which means that variables created inside the
|
||||||
|
|
||||||
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 <code class="language-javascript">total is not defined</code>
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var add = function(number1, number2) {
|
var add = function(number1, number2) {
|
||||||
var total = number1 + number2;
|
var total = number1 + number2;
|
||||||
}
|
}
|
||||||
console.log(total);
|
console.log(total);
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
Below is a correct example of the concept
|
Below is a correct example of the concept
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
//Function below converts km/hr to m/s
|
//Function below converts km/hr to m/s
|
||||||
var convert = function(speed) {
|
var convert = function(speed) {
|
||||||
var metersPerHour = speed * 1000;
|
var metersPerHour = speed * 1000;
|
||||||
|
@ -80,13 +82,13 @@ Below is a correct example of the concept
|
||||||
return metersPerSecond;
|
return metersPerSecond;
|
||||||
}
|
}
|
||||||
var currentSpeed = convert(5);
|
var currentSpeed = convert(5);
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
It’s also important to note that functions can use variables outside of it; granted it resides in the same scope.
|
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’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)
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var something = function() {
|
var something = function() {
|
||||||
var x = 5;
|
var x = 5;
|
||||||
var y = 2;
|
var y = 2;
|
||||||
|
@ -96,17 +98,17 @@ Here is an example of a variable that doesn’t reside in the same scope as
|
||||||
console.log(x + y);
|
console.log(x + y);
|
||||||
}
|
}
|
||||||
addXandY();
|
addXandY();
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
Below, is an example of where the variable does reside in the same scope as the function. Which allows this snippet to execute properly.
|
Below, is an example of where the variable does reside in the same scope as the function. Which allows this snippet to execute properly.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var x = 5;
|
var x = 5;
|
||||||
var addX = function(a) {
|
var addX = function(a) {
|
||||||
return a + x;
|
return a + x;
|
||||||
}
|
}
|
||||||
var sum = addX(6);
|
var sum = addX(6);
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
<code class="language-javascript">sum</code> here will equal <code class="language-javascript">11</code>
|
<code class="language-javascript">sum</code> here will equal <code class="language-javascript">11</code>
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2015-11-14T15:47:06+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=400
|
guid: https://brandonrozek.com/?p=400
|
||||||
|
aliases:
|
||||||
|
- /2015/11/service-workers/
|
||||||
permalink: /2015/11/service-workers/
|
permalink: /2015/11/service-workers/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
@ -33,34 +35,37 @@ You need HTTPS to be able to use service workers on your site. This is mainly fo
|
||||||
|
|
||||||
Place `service-worker.js` on the root of your site. This is so the service worker can access all the files in the site. Then in your main javascript file, register the service worker.
|
Place `service-worker.js` on the root of your site. This is so the service worker can access all the files in the site. Then in your main javascript file, register the service worker.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
if (navigator.serviceWorker) {
|
if (navigator.serviceWorker) {
|
||||||
navigator.serviceWorker.register('/serviceworker.js', {
|
navigator.serviceWorker.register('/serviceworker.js', {
|
||||||
scope: '/'
|
scope: '/'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
## <a href="#install-the-service-worker" name="install-the-service-worker"></a>Install the service worker {#install-the-service-worker}
|
## <a href="#install-the-service-worker" name="install-the-service-worker"></a>Install the service worker {#install-the-service-worker}
|
||||||
|
|
||||||
The first time the service worker runs, it emits the `install` event. At this time, we can load the visitor’s cache with some resources for when they’re offline. Every so often, I like to change up the theme of the site. So I have version numbers attached to my files. I would also like to invalidate my cache with this version number. So at the top of the file I added
|
The first time the service worker runs, it emits the `install` event. At this time, we can load the visitor’s cache with some resources for when they’re offline. Every so often, I like to change up the theme of the site. So I have version numbers attached to my files. I would also like to invalidate my cache with this version number. So at the top of the file I added
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var version = 'v2.0.24:';
|
var version = 'v2.0.24:';
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
Now, to specify which files I want the service worker to cache for offline use. I thought my home page and my offline page would be good enough.
|
Now, to specify which files I want the service worker to cache for offline use. I thought my home page and my offline page would be good enough.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var offlineFundamentals = [
|
var offlineFundamentals = [
|
||||||
'/',
|
'/',
|
||||||
'/offline/'
|
'/offline/'
|
||||||
];
|
];
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
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 <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.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var updateStaticCache = function() {
|
var updateStaticCache = function() {
|
||||||
return caches.open(version + 'fundamentals').then(function(cache) {
|
return caches.open(version + 'fundamentals').then(function(cache) {
|
||||||
return Promise.all(offlineFundamentals.map(function(value) {
|
return Promise.all(offlineFundamentals.map(function(value) {
|
||||||
|
@ -76,7 +81,8 @@ var updateStaticCache = function() {
|
||||||
}))
|
}))
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
Let’s go through this chunk of code.
|
Let’s go through this chunk of code.
|
||||||
|
|
||||||
|
@ -88,11 +94,12 @@ Let’s go through this chunk of code.
|
||||||
|
|
||||||
Now we call it when the `install` event is fired.
|
Now we call it when the `install` event is fired.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
self.addEventListener("install", function(event) {
|
self.addEventListener("install", function(event) {
|
||||||
event.waitUntil(updateStaticCache())
|
event.waitUntil(updateStaticCache())
|
||||||
})
|
})
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
With this we now cached all the files in the offlineFundamentals array during the install step.
|
With this we now cached all the files in the offlineFundamentals array during the install step.
|
||||||
|
|
||||||
|
@ -100,7 +107,7 @@ With this we now cached all the files in the offlineFundamentals array during th
|
||||||
|
|
||||||
Since we’re caching everything. If you change one of the files, your visitor wouldn’t get the changed file. Wouldn’t it be nice to remove old files from the visitor’s cache? Every time the service worker finishes the install step, it releases an `activate` event. We can use this to look and see if there are any old cache containers on the visitor’s computer. From [Nicolas’ code](https://ponyfoo.com/articles/serviceworker-revolution). Thanks for sharing 🙂
|
Since we’re caching everything. If you change one of the files, your visitor wouldn’t get the changed file. Wouldn’t it be nice to remove old files from the visitor’s cache? Every time the service worker finishes the install step, it releases an `activate` event. We can use this to look and see if there are any old cache containers on the visitor’s computer. From [Nicolas’ code](https://ponyfoo.com/articles/serviceworker-revolution). Thanks for sharing 🙂
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var clearOldCaches = function() {
|
var clearOldCaches = function() {
|
||||||
return caches.keys().then(function(keys) {
|
return caches.keys().then(function(keys) {
|
||||||
return Promise.all(
|
return Promise.all(
|
||||||
|
@ -114,7 +121,8 @@ var clearOldCaches = function() {
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
1. Check the names of each of the cache containers
|
1. Check the names of each of the cache containers
|
||||||
2. If they don’t start with the correct version number
|
2. If they don’t start with the correct version number
|
||||||
|
@ -122,11 +130,12 @@ var clearOldCaches = function() {
|
||||||
|
|
||||||
Call the function when the `activate` event fires.
|
Call the function when the `activate` event fires.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
self.addEventListener("activate", function(event) {
|
self.addEventListener("activate", function(event) {
|
||||||
event.waitUntil(clearOldCaches())
|
event.waitUntil(clearOldCaches())
|
||||||
});
|
});
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
## <a href="#intercepting-fetch-requests" name="intercepting-fetch-requests"></a>Intercepting fetch requests {#intercepting-fetch-requests}
|
## <a href="#intercepting-fetch-requests" name="intercepting-fetch-requests"></a>Intercepting fetch requests {#intercepting-fetch-requests}
|
||||||
|
|
||||||
|
@ -136,7 +145,7 @@ The cool thing about service worker’s is that it can handle file requests. We
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var limitCache = function(cache, maxItems) {
|
var limitCache = function(cache, maxItems) {
|
||||||
cache.keys().then(function(items) {
|
cache.keys().then(function(items) {
|
||||||
if (items.length > maxItems) {
|
if (items.length > maxItems) {
|
||||||
|
@ -144,7 +153,8 @@ var limitCache = function(cache, maxItems) {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
We’ll call it later in the code.
|
We’ll call it later in the code.
|
||||||
|
|
||||||
|
@ -152,7 +162,7 @@ We’ll call it later in the code.
|
||||||
|
|
||||||
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. <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.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var fetchFromNetwork = function(response) {
|
var fetchFromNetwork = function(response) {
|
||||||
var cacheCopy = response.clone();
|
var cacheCopy = response.clone();
|
||||||
if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
|
if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
|
||||||
|
@ -172,16 +182,15 @@ var fetchFromNetwork = function(response) {
|
||||||
cache.put(event.request, cacheCopy);
|
cache.put(event.request, cacheCopy);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
### <a href="#when-the-network-fails" name="when-the-network-fails"></a>When the network fails {#when-the-network-fails}
|
### <a href="#when-the-network-fails" name="when-the-network-fails"></a>When the network fails {#when-the-network-fails}
|
||||||
|
|
||||||
There are going to be times where the visitor cannot access the website. Maybe they went in a tunnel while they were riding a train? Or maybe your site went down. I thought it would be nice for my reader’s to be able to look over my blog posts again regardless of an internet connection. So I provide a fall-back. Defined within the `fetch` event.
|
There are going to be times where the visitor cannot access the website. Maybe they went in a tunnel while they were riding a train? Or maybe your site went down. I thought it would be nice for my reader’s to be able to look over my blog posts again regardless of an internet connection. So I provide a fall-back. Defined within the `fetch` event.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var fallback = function() {
|
var fallback = function() {
|
||||||
if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
|
if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
|
||||||
return caches.match(event.request).then(function (response) {
|
return caches.match(event.request).then(function (response) {
|
||||||
|
@ -191,7 +200,8 @@ var fallback = function() {
|
||||||
return new Response('<svg width="400" height="300" role="img" aria-labelledby="offline-title" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title id="offline-title">Offline</title><g fill="none" fill-rule="evenodd"><path fill="#D8D8D8" d="M0 0h400v300H0z"/><text fill="#9B9B9B" font-family="Helvetica Neue,Arial,Helvetica,sans-serif" font-size="72" font-weight="bold"><tspan x="93" y="172">offline</tspan></text></g></svg>', { headers: { 'Content-Type': 'image/svg+xml' }});
|
return new Response('<svg width="400" height="300" role="img" aria-labelledby="offline-title" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title id="offline-title">Offline</title><g fill="none" fill-rule="evenodd"><path fill="#D8D8D8" d="M0 0h400v300H0z"/><text fill="#9B9B9B" font-family="Helvetica Neue,Arial,Helvetica,sans-serif" font-size="72" font-weight="bold"><tspan x="93" y="172">offline</tspan></text></g></svg>', { headers: { 'Content-Type': 'image/svg+xml' }});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
1. Is the request for a HTML file?
|
1. Is the request for a HTML file?
|
||||||
* Show the [offline](https://brandonrozek.com/offline/) page.
|
* Show the [offline](https://brandonrozek.com/offline/) page.
|
||||||
|
@ -202,20 +212,22 @@ var fallback = function() {
|
||||||
|
|
||||||
First off, I’m only handling GET requests.
|
First off, I’m only handling GET requests.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
if (event.request.method != 'GET') {
|
if (event.request.method != 'GET') {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
For HTML files, grab the file from the network. If that fails, then look for it in the cache. _Network then cache strategy_
|
For HTML files, grab the file from the network. If that fails, then look for it in the cache. _Network then cache strategy_
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
|
if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
|
||||||
event.respondWith(fetch(event.request).then(fetchFromNetwork, fallback));
|
event.respondWith(fetch(event.request).then(fetchFromNetwork, fallback));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
For non-HTML files, follow this series of steps
|
For non-HTML files, follow this series of steps
|
||||||
|
|
||||||
|
@ -226,13 +238,14 @@ For non-HTML files, follow this series of steps
|
||||||
|
|
||||||
_Cache then network strategy_
|
_Cache then network strategy_
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
event.respondWith(
|
event.respondWith(
|
||||||
caches.match(event.request).then(function(cached) {
|
caches.match(event.request).then(function(cached) {
|
||||||
return cached || fetch(event.request).then(fetchFromNetwork, fallback);
|
return cached || fetch(event.request).then(fetchFromNetwork, fallback);
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
|
|
||||||
For different stategy’s, take a look at Jake Archibald’s [offline cookbook](https://jakearchibald.com/2014/offline-cookbook/).
|
For different stategy’s, take a look at Jake Archibald’s [offline cookbook](https://jakearchibald.com/2014/offline-cookbook/).
|
||||||
|
|
||||||
|
@ -240,7 +253,7 @@ For different stategy’s, take a look at Jake Archibald’s [offline cookbook](
|
||||||
|
|
||||||
With all of that, we now have a fully functioning offline-capable website! I wouldn’t be able to implement this myself if it wasn’t for some of the awesome people I mentioned earlier sharing their experience. So share, share, share! With that sentiment, I’ll now share the full code for `service-worker.js` **Update:** There is a new version of this code over at this [blog post](https://brandonrozek.com/2015/11/limiting-cache-service-workers-revisited/).
|
With all of that, we now have a fully functioning offline-capable website! I wouldn’t be able to implement this myself if it wasn’t for some of the awesome people I mentioned earlier sharing their experience. So share, share, share! With that sentiment, I’ll now share the full code for `service-worker.js` **Update:** There is a new version of this code over at this [blog post](https://brandonrozek.com/2015/11/limiting-cache-service-workers-revisited/).
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var version = 'v2.0.24:';
|
var version = 'v2.0.24:';
|
||||||
|
|
||||||
var offlineFundamentals = [
|
var offlineFundamentals = [
|
||||||
|
@ -359,4 +372,4 @@ self.addEventListener("fetch", function(event) {
|
||||||
self.addEventListener("activate", function(event) {
|
self.addEventListener("activate", function(event) {
|
||||||
event.waitUntil(clearOldCaches())
|
event.waitUntil(clearOldCaches())
|
||||||
});
|
});
|
||||||
</code></pre>
|
```
|
|
@ -5,6 +5,8 @@ date: 2015-11-15T12:46:14+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=398
|
guid: https://brandonrozek.com/?p=398
|
||||||
|
aliases:
|
||||||
|
- /2015/11/fractions-js/
|
||||||
permalink: /2015/11/fractions-js/
|
permalink: /2015/11/fractions-js/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,11 @@ date: 2015-11-30T00:34:15+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=449
|
guid: https://brandonrozek.com/?p=449
|
||||||
|
aliases:
|
||||||
|
- /2015/11/limiting-cache-service-workers-revisited/
|
||||||
|
- /2015/11/limiting-cache-service-workers-revisited1/
|
||||||
|
- /2015/11/limiting-cache-service-workers-revisited2/
|
||||||
|
- /2015/11/limiting-cache-service-workers-revisited3/
|
||||||
permalink: /2015/11/limiting-cache-service-workers-revisited3/
|
permalink: /2015/11/limiting-cache-service-workers-revisited3/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
@ -27,7 +32,7 @@ Summary: I rewrote how cache limiting works to address a few problems listed lat
|
||||||
|
|
||||||
I wrote a function in my [previous service worker post](https://brandonrozek.com/2015/11/service-workers/) to help limit the cache. Here’s a reminder of what it looked like.
|
I wrote a function in my [previous service worker post](https://brandonrozek.com/2015/11/service-workers/) to help limit the cache. Here’s a reminder of what it looked like.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var limitCache = function(cache, maxItems) {
|
var limitCache = function(cache, maxItems) {
|
||||||
cache.keys().then(function(items) {
|
cache.keys().then(function(items) {
|
||||||
if (items.length > maxItems) {
|
if (items.length > maxItems) {
|
||||||
|
@ -35,7 +40,7 @@ var limitCache = function(cache, maxItems) {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
### The Problem
|
### The Problem
|
||||||
|
|
||||||
|
@ -45,7 +50,7 @@ Jeremy Keith updated the service worker on his site and noticed that the images
|
||||||
|
|
||||||
Jeremy wrote a function to help trim the cache and asked when it would be appropriate to apply it.
|
Jeremy wrote a function to help trim the cache and asked when it would be appropriate to apply it.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var trimCache = function (cacheName, maxItems) {
|
var trimCache = function (cacheName, maxItems) {
|
||||||
caches.open(cacheName)
|
caches.open(cacheName)
|
||||||
.then(function (cache) {
|
.then(function (cache) {
|
||||||
|
@ -58,11 +63,11 @@ var trimCache = function (cacheName, maxItems) {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
And that got me thinking. In what situations is this problem more likely to occur? This particular problem happens when a lot of files are being called asynchronously. This problem doesn’t occur when only one file is being loaded. So when do we load a bunch of files? During page load. During page load, the browser might request css, javascript, images, etc. Which for most [websites](http://royal.pingdom.com/2011/11/21/web-pages-getting-bloated-here-is-why/), is a lot of files. Let’s now move our focus back to the humble script.js. Before, the only role it played with service workers was registering the script. However, if we can get the script to notify the service worker when the page is done loading, then the service worker will know when to trim the cache.
|
And that got me thinking. In what situations is this problem more likely to occur? This particular problem happens when a lot of files are being called asynchronously. This problem doesn’t occur when only one file is being loaded. So when do we load a bunch of files? During page load. During page load, the browser might request css, javascript, images, etc. Which for most [websites](http://royal.pingdom.com/2011/11/21/web-pages-getting-bloated-here-is-why/), is a lot of files. Let’s now move our focus back to the humble script.js. Before, the only role it played with service workers was registering the script. However, if we can get the script to notify the service worker when the page is done loading, then the service worker will know when to trim the cache.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
if ('serviceWorker' in navigator) {
|
if ('serviceWorker' in navigator) {
|
||||||
navigator.serviceWorker.register('https://yourwebsite.com/serviceworker.js', {scope: '/'});
|
navigator.serviceWorker.register('https://yourwebsite.com/serviceworker.js', {scope: '/'});
|
||||||
}
|
}
|
||||||
|
@ -71,11 +76,11 @@ window.addEventListener("load", function() {
|
||||||
navigator.serviceWorker.controller.postMessage({"command":"trimCache"});
|
navigator.serviceWorker.controller.postMessage({"command":"trimCache"});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
Why <code class="language-javascript">if (navigator.serviceWorker.controller != null)</code>? Service Workers don’t take control of the page immediately but on subsequent page loads, Jake Archibald [explains](https://jakearchibald.com/2014/using-serviceworker-today/). When the service worker does have control of the page however, we can use the [postMessage api](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage) to send a message to the service worker. Inside, I provided a json with a “command” to “trimCache”. Since we send the json to the service worker, we need to make sure that it can receive it.
|
Why `if (navigator.serviceWorker.controller != null)` Service Workers don’t take control of the page immediately but on subsequent page loads, Jake Archibald [explains](https://jakearchibald.com/2014/using-serviceworker-today/). When the service worker does have control of the page however, we can use the [postMessage api](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage) to send a message to the service worker. Inside, I provided a json with a “command” to “trimCache”. Since we send the json to the service worker, we need to make sure that it can receive it.
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
self.addEventListener("message", function(event) {
|
self.addEventListener("message", function(event) {
|
||||||
var data = event.data;
|
var data = event.data;
|
||||||
|
|
||||||
|
@ -85,7 +90,7 @@ self.addEventListener("message", function(event) {
|
||||||
trimCache(version + "assets", 30);
|
trimCache(version + "assets", 30);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
Once it receives the command, it goes on to trim all of the caches.
|
Once it receives the command, it goes on to trim all of the caches.
|
||||||
|
|
||||||
|
@ -93,7 +98,7 @@ Once it receives the command, it goes on to trim all of the caches.
|
||||||
|
|
||||||
So whenever you download a bunch of files, make sure to run <code class="language-javascript">navigator.serviceWorker.controller.postMessage({"command":"trimCache"});</code> on the main javascript file to trim the cache. A downside to this method is that since Service Workers don’t take control during the first page load, the cache isn’t trimmed until the second page load. If you can find a way to make it so that this event happens in the first page load [tell me](mailto:hello@brandonrozek.com) about it/write a blog post. 🙂 **Update:** To get the service worker to take control of the page immediately call [self.skipWaiting()](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting) after the install event and [self.clients.claim()](https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim) after the activate event. Current code for our humble service worker:
|
So whenever you download a bunch of files, make sure to run <code class="language-javascript">navigator.serviceWorker.controller.postMessage({"command":"trimCache"});</code> on the main javascript file to trim the cache. A downside to this method is that since Service Workers don’t take control during the first page load, the cache isn’t trimmed until the second page load. If you can find a way to make it so that this event happens in the first page load [tell me](mailto:hello@brandonrozek.com) about it/write a blog post. 🙂 **Update:** To get the service worker to take control of the page immediately call [self.skipWaiting()](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting) after the install event and [self.clients.claim()](https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim) after the activate event. Current code for our humble service worker:
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
var version = 'v2.0.24:';
|
var version = 'v2.0.24:';
|
||||||
|
|
||||||
var offlineFundamentals = [
|
var offlineFundamentals = [
|
||||||
|
@ -233,9 +238,9 @@ self.addEventListener("activate", function(event) {
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
<pre><code class="language-javascript">
|
```javascript
|
||||||
if ('serviceWorker' in navigator) {
|
if ('serviceWorker' in navigator) {
|
||||||
navigator.serviceWorker.register('https://brandonrozek.com/serviceworker.js', {scope: '/'});
|
navigator.serviceWorker.register('https://brandonrozek.com/serviceworker.js', {scope: '/'});
|
||||||
}
|
}
|
||||||
|
@ -244,4 +249,4 @@ window.addEventListener("load", function() {
|
||||||
navigator.serviceWorker.controller.postMessage({"command":"trimCache"});
|
navigator.serviceWorker.controller.postMessage({"command":"trimCache"});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</code></pre>
|
```
|
|
@ -5,6 +5,8 @@ date: 2015-12-22T15:13:44+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=572
|
guid: https://brandonrozek.com/?p=572
|
||||||
|
aliases:
|
||||||
|
- /2015/12/playing-with-qr-codes/
|
||||||
permalink: /2015/12/playing-with-qr-codes/
|
permalink: /2015/12/playing-with-qr-codes/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2015-12-27T15:17:12+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=599
|
guid: https://brandonrozek.com/?p=599
|
||||||
|
aliases:
|
||||||
|
- /2015/12/creating-vcards-from-h-cards/
|
||||||
permalink: /2015/12/creating-vcards-from-h-cards/
|
permalink: /2015/12/creating-vcards-from-h-cards/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2016-08-16T23:37:09+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: http://brandonrozek.com/?p=919
|
guid: http://brandonrozek.com/?p=919
|
||||||
|
aliases:
|
||||||
|
- /2016/08/pass-password-manager/
|
||||||
permalink: /2016/08/pass-password-manager/
|
permalink: /2016/08/pass-password-manager/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";s:2:"no";s:2:"id";N;s:21:"follower_notification";s:3:"yes";s:7:"license";s:19:"all-rights-reserved";s:14:"publication_id";s:2:"-1";s:6:"status";s:4:"none";s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";s:2:"no";s:2:"id";N;s:21:"follower_notification";s:3:"yes";s:7:"license";s:19:"all-rights-reserved";s:14:"publication_id";s:2:"-1";s:6:"status";s:4:"none";s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2017-03-07T04:29:50+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=2090
|
guid: https://brandonrozek.com/?p=2090
|
||||||
|
aliases:
|
||||||
|
- /2017/03/knit-document-rstudio/
|
||||||
permalink: /2017/03/knit-document-rstudio/
|
permalink: /2017/03/knit-document-rstudio/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2017-03-07T21:50:52+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=2095
|
guid: https://brandonrozek.com/?p=2095
|
||||||
|
aliases:
|
||||||
|
- /2017/03/uniformity-math-random/
|
||||||
permalink: /2017/03/uniformity-math-random/
|
permalink: /2017/03/uniformity-math-random/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
@ -38,9 +40,9 @@ The website works by producing a random number using <code class='language-javas
|
||||||
|
|
||||||
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
|
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
|
||||||
|
|
||||||
<pre class='language-bash'><code class='language-bash'>
|
```bash
|
||||||
grep -oE '[0-9]+' Random.csv > Random_corrected.csv
|
grep -oE '[0-9]+' Random.csv > Random_corrected.csv
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
Do this with all three files and make sure to keep track of which is which.
|
Do this with all three files and make sure to keep track of which is which.
|
||||||
|
|
||||||
|
@ -62,22 +64,28 @@ Since all of the conditions are met, we can use the Chi-square test of Goodness
|
||||||
|
|
||||||
For the rest of the article, we will use R for analysis. Looking at the histograms for the three browsers below. The random numbers all appear to occur uniformly
|
For the rest of the article, we will use R for analysis. Looking at the histograms for the three browsers below. The random numbers all appear to occur uniformly
|
||||||
|
|
||||||
<pre class="language-R"><code class='language-R'>rm(list=ls())
|
```R
|
||||||
|
rm(list=ls())
|
||||||
chrome = read.csv("~/Chrome_corrected.csv", header = F)
|
chrome = read.csv("~/Chrome_corrected.csv", header = F)
|
||||||
firefox = read.csv("~/Firefox_corrected.csv", header = F)
|
firefox = read.csv("~/Firefox_corrected.csv", header = F)
|
||||||
ie11 = read.csv("~/IE11_corrected.csv", header = F)
|
ie11 = read.csv("~/IE11_corrected.csv", header = F)
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
<pre class="language-R"><code class='language-R'>
|
```R
|
||||||
hist(ie11$V1, main = "Distribution of Random Values for IE11", xlab = "Random Value")</code></pre>
|
hist(ie11$V1, main = "Distribution of Random Values for IE11", xlab = "Random Value")
|
||||||
|
```
|
||||||
|
|
||||||
![](https://brandonrozek.com/wp-content/uploads/2017/03/ie11hist.png)
|
![](https://brandonrozek.com/wp-content/uploads/2017/03/ie11hist.png)
|
||||||
|
|
||||||
<pre class="language-R"><code class='language-R'>hist(firefox$V1, main = "Distribution of Random Values for Firefox", xlab = "Random Value")</code></pre>
|
```R
|
||||||
|
hist(firefox$V1, main = "Distribution of Random Values for Firefox", xlab = "Random Value")
|
||||||
|
```
|
||||||
|
|
||||||
![](https://brandonrozek.com/wp-content/uploads/2017/03/firefoxhist.png)
|
![](https://brandonrozek.com/wp-content/uploads/2017/03/firefoxhist.png)
|
||||||
|
|
||||||
<pre class="language-R"><code class='language-R'>hist(chrome$V1, main = "Distribution of Random Values for Chrome", xlab = "Random Value")</code></pre>
|
```R
|
||||||
|
hist(chrome$V1, main = "Distribution of Random Values for Chrome", xlab = "Random Value")
|
||||||
|
```
|
||||||
|
|
||||||
![](https://brandonrozek.com/wp-content/uploads/2017/03/chromehist.png)
|
![](https://brandonrozek.com/wp-content/uploads/2017/03/chromehist.png)
|
||||||
|
|
||||||
|
@ -85,23 +93,25 @@ hist(ie11$V1, main = "Distribution of Random Values for IE11", xlab = "Random Va
|
||||||
|
|
||||||
Before we run our test, we need to convert the quantatative data to count data by using the plyr package
|
Before we run our test, we need to convert the quantatative data to count data by using the plyr package
|
||||||
|
|
||||||
<pre class="language-R"><code class='language-R'>#Transform to count data
|
```R
|
||||||
|
#Transform to count data
|
||||||
library(plyr)
|
library(plyr)
|
||||||
chrome_count = count(chrome)
|
chrome_count = count(chrome)
|
||||||
firefox_count = count(firefox)
|
firefox_count = count(firefox)
|
||||||
ie11_count = count(ie11)
|
ie11_count = count(ie11)
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
Run the tests
|
Run the tests
|
||||||
|
|
||||||
<pre class='language-R'><code class='language-R'>
|
```R
|
||||||
# Chi-Square Test for Goodness-of-Fit
|
# Chi-Square Test for Goodness-of-Fit
|
||||||
chrome_test = chisq.test(chrome_count$freq)
|
chrome_test = chisq.test(chrome_count$freq)
|
||||||
firefox_test = chisq.test(firefox_count$freq)
|
firefox_test = chisq.test(firefox_count$freq)
|
||||||
ie11_test = chisq.test(ie11_count$freq)
|
ie11_test = chisq.test(ie11_count$freq)
|
||||||
|
|
||||||
# Test results
|
# Test results
|
||||||
chrome_test</code></pre>
|
chrome_test
|
||||||
|
```
|
||||||
|
|
||||||
As you can see in the test results below, we fail to reject the null hypothesis at a 5% significance level because all of the p-values are above 0.05.
|
As you can see in the test results below, we fail to reject the null hypothesis at a 5% significance level because all of the p-values are above 0.05.
|
||||||
|
|
||||||
|
@ -111,7 +121,7 @@ As you can see in the test results below, we fail to reject the null hypothesis
|
||||||
## data: chrome_count$freq
|
## data: chrome_count$freq
|
||||||
## X-squared = 101.67, df = 99, p-value = 0.4069
|
## X-squared = 101.67, df = 99, p-value = 0.4069
|
||||||
|
|
||||||
<pre class="r"><code>firefox_test</code></pre>
|
`firefox_test`
|
||||||
|
|
||||||
##
|
##
|
||||||
## Chi-squared test for given probabilities
|
## Chi-squared test for given probabilities
|
||||||
|
@ -119,7 +129,7 @@ As you can see in the test results below, we fail to reject the null hypothesis
|
||||||
## data: firefox_count$freq
|
## data: firefox_count$freq
|
||||||
## X-squared = 105.15, df = 99, p-value = 0.3172
|
## X-squared = 105.15, df = 99, p-value = 0.3172
|
||||||
|
|
||||||
<pre class="r"><code>ie11_test</code></pre>
|
`ie11_test`
|
||||||
|
|
||||||
##
|
##
|
||||||
## Chi-squared test for given probabilities
|
## Chi-squared test for given probabilities
|
||||||
|
@ -129,4 +139,4 @@ As you can see in the test results below, we fail to reject the null hypothesis
|
||||||
|
|
||||||
## Conclusion
|
## Conclusion
|
||||||
|
|
||||||
At a 5% significance level, we fail to obtain enough evidence to suggest that the distribution of random number is not uniform. This is a good thing since it shows us that our random number generators give all numbers an equal chance of being represented. We can use <code class='language-javascript'>Math.random()</code> with ease of mind.
|
At a 5% significance level, we fail to obtain enough evidence to suggest that the distribution of random number is not uniform. This is a good thing since it shows us that our random number generators give all numbers an equal chance of being represented. We can use `Math.random()` with ease of mind.
|
|
@ -5,6 +5,8 @@ date: 2017-03-09T02:09:58+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=2115
|
guid: https://brandonrozek.com/?p=2115
|
||||||
|
aliases:
|
||||||
|
- /2017/03/simplifying-expressions-octave/
|
||||||
permalink: /2017/03/simplifying-expressions-octave/
|
permalink: /2017/03/simplifying-expressions-octave/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2017-03-14T05:31:21+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=2089
|
guid: https://brandonrozek.com/?p=2089
|
||||||
|
aliases:
|
||||||
|
- /2017/03/monte-carlo-pi/
|
||||||
permalink: /2017/03/monte-carlo-pi/
|
permalink: /2017/03/monte-carlo-pi/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
@ -60,7 +62,7 @@ This will allow us to perform a pooled empiricle probability on the simulations
|
||||||
|
|
||||||
Meaning the area of the circle will be the number of times that the inequality was satisfied $$A_{circle} = \# Successes$$
|
Meaning the area of the circle will be the number of times that the inequality was satisfied $$A_{circle} = \# Successes$$
|
||||||
|
|
||||||
And the area of the square will be the number of times the simulation was run, since the random numbers generated will always be between 0 and 1 $$A_{square} = \# Trials$$
|
And the area of the square will be the number of times the simulation was run, since the random numbers generated will always be between 0 and 1 $A_{square} = \# Trials$
|
||||||
|
|
||||||
Recall that taking the ratio of the area of the circle and the area of the square is a fourth of pi. $$\frac{\frac{1}{4} \pi}{1} = \frac{1}{4} \pi$$
|
Recall that taking the ratio of the area of the circle and the area of the square is a fourth of pi. $$\frac{\frac{1}{4} \pi}{1} = \frac{1}{4} \pi$$
|
||||||
|
|
||||||
|
@ -68,13 +70,14 @@ Multiply this number by 4 and you get the value for pi.
|
||||||
|
|
||||||
This tells us that four times the probability that the randomly generated point is in the circle is equal to pi.
|
This tells us that four times the probability that the randomly generated point is in the circle is equal to pi.
|
||||||
|
|
||||||
$$\pi = 4 \* (Probability\ of\ being\ inside\ circle) = 4 \* \frac{\# Success}{\# Trials} = 4 * \frac{A\_{circle}}{A\_{square}}$$
|
$$\pi = 4 * (Probability\ of\ being\ inside\ circle) = 4 * \frac{\# Success}{\# Trials} = 4 * \frac{A\_{circle}}{A\_{square}}$$
|
||||||
|
|
||||||
## Implementation
|
## Implementation
|
||||||
|
|
||||||
For the Monte Carlo simulation I used Java. The BigDecimal implementation was used so that there wouldn’t be any issue with integer size limits
|
For the Monte Carlo simulation I used Java. The BigDecimal implementation was used so that there wouldn’t be any issue with integer size limits
|
||||||
|
|
||||||
<pre class='language-java'><code class='language-java'>/** Calculates Pi
|
```java
|
||||||
|
/** Calculates Pi
|
||||||
* @author Brandon Rozek
|
* @author Brandon Rozek
|
||||||
*/
|
*/
|
||||||
// Big Integers are used so we don't run into the integer size limit
|
// Big Integers are used so we don't run into the integer size limit
|
||||||
|
@ -104,17 +107,18 @@ for (; trials.compareTo(numTrials) < 0; trials = trials.add(BigInteger.ONE))
|
||||||
successes = successes.add(BigInteger.ONE);
|
successes = successes.add(BigInteger.ONE);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
And then we finalize it with a quick calculation of pi
|
And then we finalize it with a quick calculation of pi
|
||||||
|
|
||||||
<pre class='language=java'><code class='language-java'>// (Number of successes) / (Number of trials) * 4 gives the approximation for pi
|
```java
|
||||||
|
// (Number of successes) / (Number of trials) * 4 gives the approximation for pi
|
||||||
BigDecimal pi = new BigDecimal(successes)
|
BigDecimal pi = new BigDecimal(successes)
|
||||||
.divide(new BigDecimal(trials))
|
.divide(new BigDecimal(trials))
|
||||||
.multiply(new BigDecimal("4"));
|
.multiply(new BigDecimal("4"));
|
||||||
System.out.println("The calculated value of pi is: " + pi);
|
System.out.println("The calculated value of pi is: " + pi);
|
||||||
}}
|
}}
|
||||||
</code></pre>
|
```
|
||||||
|
|
||||||
## Conclusion
|
## Conclusion
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2017-05-24T15:59:45+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=2174
|
guid: https://brandonrozek.com/?p=2174
|
||||||
|
aliases:
|
||||||
|
- /2017/05/viewing-java-applets/
|
||||||
permalink: /2017/05/viewing-java-applets/
|
permalink: /2017/05/viewing-java-applets/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2017-06-05T23:30:18+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=2198
|
guid: https://brandonrozek.com/?p=2198
|
||||||
|
aliases:
|
||||||
|
- /2017/06/java-swing-components/
|
||||||
permalink: /2017/06/java-swing-components/
|
permalink: /2017/06/java-swing-components/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2017-06-05T20:36:22+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=2192
|
guid: https://brandonrozek.com/?p=2192
|
||||||
|
aliases:
|
||||||
|
- /2017/06/using-system-themes-java-swing/
|
||||||
permalink: /2017/06/using-system-themes-java-swing/
|
permalink: /2017/06/using-system-themes-java-swing/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2017-08-28T17:12:00+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=2236
|
guid: https://brandonrozek.com/?p=2236
|
||||||
|
aliases:
|
||||||
|
- /2017/08/escape-sequences-java/
|
||||||
permalink: /2017/08/escape-sequences-java/
|
permalink: /2017/08/escape-sequences-java/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2017-08-28T17:37:59+00:00
|
||||||
author: Brandon Rozek
|
author: Brandon Rozek
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=2241
|
guid: https://brandonrozek.com/?p=2241
|
||||||
|
aliases:
|
||||||
|
- /2017/08/obtaining-command-line-input-java/
|
||||||
permalink: /2017/08/obtaining-command-line-input-java/
|
permalink: /2017/08/obtaining-command-line-input-java/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}'
|
||||||
|
|
|
@ -5,6 +5,8 @@ date: 2018-01-22T05:17:16+00:00
|
||||||
author: rozek_admin
|
author: rozek_admin
|
||||||
layout: post
|
layout: post
|
||||||
guid: https://brandonrozek.com/?p=2250
|
guid: https://brandonrozek.com/?p=2250
|
||||||
|
aliases:
|
||||||
|
- /2018/01/identifying-misspelled-words-dataset-hunspell/
|
||||||
permalink: /2018/01/identifying-misspelled-words-dataset-hunspell/
|
permalink: /2018/01/identifying-misspelled-words-dataset-hunspell/
|
||||||
medium_post:
|
medium_post:
|
||||||
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";s:75:"https://cdn-images-1.medium.com/fit/c/200/200/1*06lotWcLMUnKZTN6-Th3IQ.jpeg";s:10:"author_url";s:32:"https://medium.com/@brandonrozek";s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";s:2:"no";s:2:"id";s:12:"c0ccd543b7e6";s:21:"follower_notification";s:3:"yes";s:7:"license";s:19:"all-rights-reserved";s:14:"publication_id";s:2:"-1";s:6:"status";s:6:"public";s:3:"url";s:104:"https://medium.com/@brandonrozek/identifying-misspelled-words-in-your-dataset-with-hunspell-c0ccd543b7e6";}'
|
- 'O:11:"Medium_Post":11:{s:16:"author_image_url";s:75:"https://cdn-images-1.medium.com/fit/c/200/200/1*06lotWcLMUnKZTN6-Th3IQ.jpeg";s:10:"author_url";s:32:"https://medium.com/@brandonrozek";s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";s:2:"no";s:2:"id";s:12:"c0ccd543b7e6";s:21:"follower_notification";s:3:"yes";s:7:"license";s:19:"all-rights-reserved";s:14:"publication_id";s:2:"-1";s:6:"status";s:6:"public";s:3:"url";s:104:"https://medium.com/@brandonrozek/identifying-misspelled-words-in-your-dataset-with-hunspell-c0ccd543b7e6";}'
|
||||||
|
|
Loading…
Reference in a new issue