UPDATE: Replace SVGs with PNGs

_posts/2018-10-29-monthly-resources-and-learnings-october-2018.md

@@ -29,7 +29,7 @@ Furthermore, HTTP is a stateless protocol, meaning none of the data will be save
 
 In a communication context that uses HTTP, we know that the machine that sends out data is called the *client* while the machine that listen to the requests and responds with the appropriate data is the *server*.
 
-![HTTP with the client-server model]({{ 'assets/pictures/self-learning-series/october-2018/http-client-server-model.svg' | relative_url}})
+![HTTP with the client-server model]({{ 'assets/pictures/self-learning-series/october-2018/http-client-server-model.png' | relative_url}})
 *HTTP with the client-server model*{: .caption}
 
 OK. So we know that the communication process between two machines starts with the client requesting something. From the client, it sends out an *HTTP request* which consist of the headers and the body.
@@ -40,7 +40,7 @@ The body, on the other hand, contains the appropriate data needed for the server
 
 Think of the request as the old-fashioned snail mail envelope. The headers is in the outside of the envelope, containing the address of the server where the request is to be sent, the address of the client where the response is to be sent back, and the other headers that the server may parse through - sort of like a secret keyword between two people. The body is obviously the letter that is inside of the envelope, containing the message (data) for the server to read and figure out which of the data is appropriate to be sent regarding the request. 
 
-![HTTP as an envelope]({{ 'assets/pictures/self-learning-series/october-2018/http-as-envelope.svg' | relative_url }})
+![HTTP as an envelope]({{ 'assets/pictures/self-learning-series/october-2018/http-as-envelope.png' | relative_url }})
 
 Now what does those have to do with Node? Of course, everything really! Node is a JavaScript runtime environment that specializes in running servers. It simply means that you can program the back-end stuff with JavaScript: the syntax, the concepts, and other stuffs. 
 
@@ -165,7 +165,7 @@ Here's how we would define a set $S$ verbally: let $S$ be the set of vowels in t
 
 If we would to read sets in set-builder notation, we could read (of what was denoted in the above example) as: *the set of all $x$ such that $x$ is a vowel*.
 
-![Reading a set in set-builder notation]({{ 'assets/pictures/self-learning-series/october-2018/set-builder-notation-example-read.svg' | relative_url }})
+![Reading a set in set-builder notation]({{ 'assets/pictures/self-learning-series/october-2018/set-builder-notation-example-read.png' | relative_url }})
 *How to read the expression*{: .caption}
 
 Of course, each way of denoting sets have its pros and cons. With verbal form, we have a free way on how we could describe the elements on our set but given with the precise nature of mathematics, it needs to be accurate and stick to the usual indicators to be used in our sentences. In roster form needing to list every elements in the set, it depends on the size of the set. Lastly, with the set-builder notation, it gives us what I think the most flexible option but in some cases like a smaller set, it is better and more concise to describe the set in roster method.
@@ -200,7 +200,7 @@ $$ A = B $$
 #### Set combinations
 We can also combine sets. There are two main ways on combining sets: *intersection* and *union*.
 
-![Visualization of set combinations on a Venn diagram]({{ 'assets/pictures/self-learning-series/october-2018/set-combo-venn-ex.svg' | relative_url }})
+![Visualization of set combinations on a Venn diagram]({{ 'assets/pictures/self-learning-series/october-2018/set-combo-venn-ex.png' | relative_url }})
 *Visualization of set combinations on a Venn diagram*{: .caption}
 
 **The intersection of the sets refers to the overlap between the members of the sets. It can be denoted by $S \cap E$, referring to the elements that overlap in all sets.** 
@@ -210,7 +210,7 @@ $$ A \cap B $$
 If we have two sets say $C=$ **{4, 3, 10, 9, 11, 23, 1}**{: .mathjax-text} and $D=$ **{3, 6, 9, 12, 15}**{: .mathjax-text}, we would say that the intersection of sets $C$ and $D$, $C \cap D$, is **{3, 9}**{: .mathjax-text}.
 
 <!-- PICTODO: visualization of set intersections -->
-![Visualization of set intersections on a Venn diagram]({{ 'assets/pictures/self-learning-series/october-2018/intersection-venn-ex.svg' | relative_url }})
+![Visualization of set intersections on a Venn diagram]({{ 'assets/pictures/self-learning-series/october-2018/intersection-venn-ex.png' | relative_url }})
 *Visualization of set intersections on a Venn diagram*{: .caption}
 
 **Meanwhile, a union refers to the totality of all sets. Usually denoted with $S \cup E$, referring to all elements included in the sets.**
@@ -219,7 +219,7 @@ $$ A \cup B $$
 
 From the example that was given a few sentences earlier, the union of sets $C$ and $D$ will be **{1, 3, 4, 6, 9, 10, 11, 12, 15, 23}**{: .mathjax-text}.
 
-![Visualization of set unions on a Venn diagram]({{ 'assets/pictures/self-learning-series/october-2018/union-venn-ex.svg' | relative_url }})
+![Visualization of set unions on a Venn diagram]({{ 'assets/pictures/self-learning-series/october-2018/union-venn-ex.png' | relative_url }})
 *Visualization of set unions on a Venn diagram*{: .caption}
 
 There are more than this than sets, it is just the start of journey into reviewing pre-calculus stuff again so I'll just refer to a book which will be in the next section. 🙂

assets/pictures/self-learning-series/october-2018/http-as-envelope.svg

@@ -1,2 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="512px" height="253px" viewBox="-0.5 -0.5 512 253" content="&lt;mxfile userAgent=&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/8.8.0 Chrome/61.0.3163.100 Electron/2.0.2 Safari/537.36&quot; version=&quot;9.3.1&quot; editor=&quot;www.draw.io&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;c0904624-072e-0df2-0171-23438d4f317d&quot; name=&quot;Page-1&quot;&gt;1VbbjtowEP2avKxERAgJ9JHr8tBKK0HVx8pJjGPVyWQdh0u/vmPHIcnCinaFKi1IYJ8Z23OOhxMcf5GdniUp0m+QUOGMhsnJ8ZfOaDQNhvipgXMNBMOwBpjkSQ15LbDlv6kF7TpW8YSWvUQFIBQv+mAMeU5j1cOIlHDsp+1B9E8tCKNXwDYm4hr9wROVWlqjSYtvKGdpc7IXfqkjEYl/MQlVbs9zRv7evOpwRpq9LNEyJQkcO5C/cvyFBFD1KDstqNDSNrLV69bvRC91S5qrv1pg6zgQUdGmZFOYOjdiHKhUHLX5SiIqXqDkikOOoQiUgszx503CTHCmAwoKRFOVCZx4OESWhd4sOzHdLm5ESh67JK4U/akkJznTZ81N+wzdAId7LsQCBEhTgr+a6zfi1/wsZV0DPXUgy/eZQkaVPGOKjU4azrY3veYuju1Ne0OLpd1b9i1IbHexy96twjiwIt8W3L+vt2kfqvOHyPiYckW3BYl19Ijy9aV9gCDT+3qE0xt6+OED9Ahv6BEKpVsAkFFXmPC1giYwKI1nzDBhNC5ObVD/2mutWgwpS8ZJNylkJrDaOZrtGgGSaWXzqNRfm93uBWHP9ZpqcFYXVK9s4IQfPlJjf5P/wHQDpao32QMMEmDla4U9k7iMq7SKXA53iCJsuH5O+t9LKgczZn4jequ4ktiE64kbBHev+HMzn8UxLSzrJ6Ty9I9s33gTWorqG5CkWCeJTIL2qwJ4rowhBHMnWCJCKgU1F7OA2KeEoHv17sOjRMPjOdvpyXIwfozRXVy9cbrxtdP5wQ2n+4DR4bR9iptY55+Sv/oD&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><path d="M 441 91 L 476 0 L 511 91 Z" fill="#ebebeb" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><rect x="0" y="0" width="476" height="252" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(14.5,15.5)scale(0.7)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="333" height="110" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; white-space: nowrap;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;"><font style="font-size: 24px" face="Georgia">GET / HTTP/1.1</font><div style="font-size: 24px"><font style="font-size: 24px" face="Georgia">Host: foo-dogsquared.github.io</font></div><div style="font-size: 24px"><font style="font-size: 24px" face="Georgia">User-Agent: curl/7.55.1</font></div><div style="font-size: 24px"><font style="font-size: 24px" face="Georgia">Accept: */*</font></div></div></div></foreignObject><text x="167" y="61" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">[Not supported by viewer]</text></switch></g></svg>

assets/pictures/self-learning-series/october-2018/venn-diagram.svg

@@ -1,2 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="568px" height="351px" version="1.1" content="&lt;mxfile userAgent=&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/8.8.0 Chrome/61.0.3163.100 Electron/2.0.2 Safari/537.36&quot; version=&quot;9.3.0&quot; editor=&quot;www.draw.io&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;3228e29e-7158-1315-38df-8450db1d8a1d&quot; name=&quot;Page-1&quot;&gt;vZTBboMwDIafhusEpFC4lrXdZaceds7AQNQQozRt6Z5+gSQFhKpN2lQOKP5+2zF/IjySNd1e0rZ+xwK4F/pF55FXLwyTONbvHtwMiPqoB5VkhUHBCA7sCyz0LT2zAk6zRIXIFWvnMEchIFczRqXE6zytRD7ftaUVLMAhp3xJP1ihakuDOB2FN2BVbbdOwrURPml+rCSehd3PC0k5PEZuqOtlP/RU0wKvE0S2HskkojKrpsuA99Y620zd7oF6n1uCUL8pCIOI2KO5UH4GN/Uwm7o5P3SRtl4Hm5JxniFHOQiEkDTd6eabk5J4BKcIFH1yrRquo0AvsaU5U/11iH0dLue0o19AKugmyM69B2xAyZtOceo6fYlMkb1lQeLAdTy0yLdW15PzukNqL0p1bz+apRfWr8fekT94B0kUr8KlNz9ZWaJQkza74fkfT1fJcz3V4XjXB23yPyHbbw==&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g transform="translate(0.5,0.5)"><ellipse cx="175" cy="175" rx="175" ry="175" fill-opacity="0.6" fill="#3399ff" stroke="none" pointer-events="none"/><ellipse cx="392" cy="175" rx="175" ry="175" fill-opacity="0.6" fill="#e85642" stroke="none" pointer-events="none"/></g></svg>