joshua/presentation-blockchains
1
0
Fork 0
mirror of https://github.com/seigler/presentation-blockchains synced 2025-07-26 01:06:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: enlarged notes styles to support far-from-laptop presenter setup

Browse source
This commit is contained in:
Joshua Seigler 2017-01-27 11:35:05 -05:00
parent fed382f2ac
commit ed85fb348a
3 changed files with 54 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

54
build/index.html
View file

@ -624,26 +624,21 @@ body.show-notes {
background-color: #333;
}
body.show-notes section {
body.show-notes section, body.show-notes section * {
transition: none;
}
body.show-notes section[janus-timeline='present'] {
transform: scale(0.75);
transform-origin: 0% 0%;
overflow: visible;
}
.notes {
display: none;
background-color: #333;
box-sizing: border-box;
white-space: pre-line;
position: absolute;
top: 0;
left: 100%;
width: 33.33%;
height: 100%;
font-size: 0.5rem;
left: -300%;
width: 300%;
height: 400%;
font-size: 3rem;
text-align: left;
padding: 0.2em;
}
@ -651,6 +646,16 @@ body.show-notes section[janus-timeline='present'] > .notes {
display: block;
}
body.show-notes section[janus-timeline='present'] {
transform: scale(0.25);
transform-origin: top right;
top: 0;
right: 0;
bottom: auto;
left: auto;
overflow: visible;
}
body.show-notes section[janus-timeline='present'] + section[janus-timeline='future'] {
transform: scale(0.25);
transform-origin: bottom right;
@ -660,7 +665,6 @@ body.show-notes section[janus-timeline='present'] + section[janus-timeline='futu
right: 0;
opacity: 1;
visibility: visible;
outline: 0.2rem solid white;
z-index: 3;
}
</style>
@ -1563,11 +1567,10 @@ i.cc.SWIFT, i.cc.SWIFT-alt { color: #428BCA; }
<ul janus-timeline="" janus-future="down">(Acceptable)</ul>
</li>
</div>
<div class="notes">
<u>Medium of exchange:</u> portable, durable, fungible
<u>Unit of account:</u> divisible, fungible
<u>Store of value:</u> durable, scarce, fungible
One more property: acceptable (people like using it)
<div class="notes"><u>Medium of exchange:</u> ➫portable, ➫durable, ➫fungible
<u>Unit of account:</u> ➫divisible, fungible
<u>Store of value:</u> durable, ➫scarce, fungible
One more property: ➫acceptable (people like using it)
Next: things we've used as money</div>
</section>
@ -1651,8 +1654,7 @@ i.cc.SWIFT, i.cc.SWIFT-alt { color: #428BCA; }
</tr>
</tbody>
</table>
<div class="notes">
Precious metals, gold and silver.
<div class="notes">Precious metals, gold and silver.
Used widely today as money but not currency.
Less portable and divisible than its competitors.</div>
</section>
@ -1723,7 +1725,7 @@ i.cc.SWIFT, i.cc.SWIFT-alt { color: #428BCA; }
</tbody>
</table>
<div class="notes">A ledger keeps track each person's money.
To send money, reduce my account and increase their account.
To send money, ➫reduce my account and ➫increase their account.
Like Paypal.
BUT - requires trust. One way to reduce the trust required is with...</div>
@ -1779,7 +1781,7 @@ i.cc.SWIFT, i.cc.SWIFT-alt { color: #428BCA; }
</tr>
</tbody>
</table>
<div class="notes">Then instead of sending a payment from "Joshua" to "Jack", it's a payment from "private keys A and B" to "public key C".</div>
<div class="notes">Then instead of sending a payment from "Joshua" to "Jack", it's a payment from "private keys ➫A and ➫B" to "public key ➫C".</div>
</section>
<section janus-future="down" janus-past="down">
@ -1844,7 +1846,7 @@ i.cc.SWIFT, i.cc.SWIFT-alt { color: #428BCA; }
<img janus-timeline="" janus-future="left" src="data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22533.333%22 height=%22426.667%22 viewBox=%220 0 500.00002 399.99997%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-.212%22 width=%221.423%22 y=%22-.212%22 height=%221.423%22 color-interpolation-filters=%22sRGB%22%3E%3CfeGaussianBlur stdDeviation=%222.671%22/%3E%3C/filter%3E%3Cfilter id=%22a%22 x=%22-.035%22 width=%221.071%22 y=%22-.045%22 height=%221.091%22 color-interpolation-filters=%22sRGB%22%3E%3CfeGaussianBlur stdDeviation=%221.447%22/%3E%3C/filter%3E%3Cfilter id=%22c%22 x=%22-.325%22 width=%221.65%22 y=%22-.362%22 height=%221.724%22 color-interpolation-filters=%22sRGB%22%3E%3CfeGaussianBlur stdDeviation=%223.075%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath d=%22M111.307 90.558L189.36 50.17l20.89 40.372-78.052 40.389z%22 fill=%22#838383%22 fill-rule=%22evenodd%22/%3E%3Cg fill-rule=%22evenodd%22%3E%3Cg fill=%22#777%22 stroke=%22#000%22 stroke-width=%221.406%22 stroke-linejoin=%22round%22 filter=%22url(#a)%22 transform=%22rotate(-51.233 446.095 439.829)%22%3E%3Cpath d=%22M562.229 2l-1.842 2.367 93.76 72.94 1.841-2.37z%22 style=%22line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal%22 color=%22#000%22 font-weight=%22400%22 font-family=%22sans-serif%22 white-space=%22normal%22 overflow=%22visible%22 enable-background=%22accumulate%22/%3E%3Cpath d=%22M647.14 60.755l11.082 17.784-19.964-6.367c5.102-1.441 8.674-6.063 8.881-11.417z%22/%3E%3C/g%3E%3Cg fill=%22#fbfbfb%22 stroke=%22none%22 stroke-width=%222.156%22 stroke-opacity=%220%22%3E%3Cpath d=%22M177.438 75.131l.692 2.918 115.58-27.433-.695-2.92z%22 style=%22line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal%22 color=%22#000%22 font-weight=%22400%22 font-family=%22sans-serif%22 white-space=%22normal%22 overflow=%22visible%22 enable-background=%22accumulate%22/%3E%3Cpath d=%22M276.417 45.716l20.805 2.495-17.465 11.578c2.071-4.88.704-10.56-3.34-14.073z%22/%3E%3C/g%3E%3C/g%3E%3Cpath d=%22M610.04 26.753a15.152 15.152 0 0 1-15.152 15.152 15.152 15.152 0 0 1-15.152-15.152A15.152 15.152 0 0 1 594.888 11.6a15.152 15.152 0 0 1 15.152 15.153z%22 fill-rule=%22evenodd%22 filter=%22url(#b)%22 transform=%22translate(-362.729 34.909)%22/%3E%3Cpath d=%22M247.311 61.661a15.152 15.152 0 0 1-15.152 15.153 15.152 15.152 0 0 1-15.152-15.153 15.152 15.152 0 0 1 15.152-15.152 15.152 15.152 0 0 1 15.152 15.152z%22 fill=%22#1c75bc%22 fill-rule=%22evenodd%22/%3E%3Cpath d=%22M235.77 59.83l-.677 3.571h3.124v1.55h-3.434l-.792 4.146h-1.654l.815-4.146h-3.273l-.803 4.146h-1.62l.758-4.146h-2.928v-1.55h3.227l.712-3.571h-3.09v-1.54h3.365l.781-4.065h1.654l-.77 4.066h3.296l.793-4.066h1.62l-.793 4.066h2.951v1.539zm-5.603 3.571h3.284l.689-3.571h-3.273z%22 style=%22line-height:125%%22 font-weight=%22400%22 font-size=%2244.982%22 font-family=%22sans-serif%22 letter-spacing=%220%22 word-spacing=%220%22 fill=%22#fff%22/%3E%3Cg transform=%22translate(-96.683 76.77)%22 style=%22line-height:23.4375px;text-align:center%22 font-weight=%22400%22 font-size=%2237.5%22 font-family=%22sans-serif%22 letter-spacing=%220%22 word-spacing=%220%22 text-anchor=%22middle%22 stroke-width=%22.938%22 filter=%22url(#c)%22%3E%3Cpath d=%22M239.15 21.707q.715 0 1.081 1.172.733 2.198 1.044 2.198.238 0 .494-.367 5.146-7.562 9.522-10.766 1.85-1.355 3.607-1.355 2.325 0 2.801.146.202.055.202.458 0 .33-.421.824-11.774 13.513-14.026 17.578-.77 1.392-3.552 1.392-.916 0-1.923-.476-.421-.22-1.465-2.802-1.318-3.26-1.318-5.713 0-.897 1.282-1.483 1.757-.806 2.636-.806z%22/%3E%3C/g%3E%3Cg style=%22line-height:23.4375px;text-align:center%22 font-weight=%22400%22 font-size=%2237.5%22 font-family=%22sans-serif%22 letter-spacing=%220%22 word-spacing=%220%22 text-anchor=%22middle%22 fill=%22#f7931a%22 stroke-width=%22.938%22%3E%3Cpath d=%22M142.468 98.478q.714 0 1.08 1.172.733 2.197 1.044 2.197.238 0 .495-.366 5.145-7.562 9.521-10.766 1.85-1.355 3.607-1.355 2.326 0 2.802.146.201.055.201.458 0 .33-.421.824-11.774 13.513-14.026 17.578-.769 1.392-3.552 1.392-.916 0-1.923-.477-.42-.22-1.465-2.801-1.318-3.26-1.318-5.713 0-.897 1.282-1.483 1.758-.806 2.637-.806z%22/%3E%3C/g%3E%3C/svg%3E" alt="" class="contain" style="object-position: 50% 50%">
<h2 janus-timeline="">= Blockchain</h2>
</div>
<div class="notes">A good structure for a ledger is a linked list: each block of transactions points to the previous block. But we want this log to be tamper-proof. Hash pointers can make it so that changes earlier in the chain affect every item after that. To change history, you have to redo all the work after that point. But new blocks are still being added.</div>
<div class="notes">A good structure for a ledger is a linked list: each block of transactions points to the previous block. Each participant will trust the longest log they hear about. But we need this log to be tamper-proof. ➫➫Hash pointers can make it so that changes earlier in the chain affect every item after that. ➫➫Add proof-of-work. Now to change history, you have to redo all the work after that point. But new blocks are still being added.</div>
</section>
<section>
@ -1904,8 +1906,7 @@ i.cc.SWIFT, i.cc.SWIFT-alt { color: #428BCA; }
<i class="cc SIA"></i>
<i class="cc NXT"></i>
</div>
<div class="notes">
Cloud storage is just one step further than proof-of-existence.
<div class="notes">Cloud storage is just one step further than proof-of-existence.
(Storj, Maidsafe, SIAcoin, NXT)</div>
</section>
@ -1951,6 +1952,7 @@ i.cc.SWIFT, i.cc.SWIFT-alt { color: #428BCA; }
<i class="cc NMC"></i>
<i class="cc DASH"></i>
</div>
<div class="notes">(Blockstack using Bitcoin, Namecoin, Dash [upcoming])</div>
</section>
<section>
@ -1959,9 +1961,11 @@ i.cc.SWIFT, i.cc.SWIFT-alt { color: #428BCA; }
<h1>SSL certificate authorities</h1>
<div class="coins">
<i class="cc NMC"></i>
<i class="cc ETH"></i>
<i class="cc EMC"></i>
<i class="cc ETH"></i>
</div>
<div class="notes">CAs are a great example of a TTP with perverse incentives. Ripe for disruption.
(Namecoin, Emercoin, Ethereum)</div>
</section>
<section>

21
index.html
View file

@ -65,11 +65,10 @@
<ul janus-timeline janus-future="down">(Acceptable)</ul>
</li>
</div>
<div class="notes">
<u>Medium of exchange:</u> portable, durable, fungible
<u>Unit of account:</u> divisible, fungible
<u>Store of value:</u> durable, scarce, fungible
One more property: acceptable (people like using it)
<div class="notes"><u>Medium of exchange:</u> ➫portable, ➫durable, ➫fungible
<u>Unit of account:</u> ➫divisible, fungible
<u>Store of value:</u> durable, ➫scarce, fungible
One more property: ➫acceptable (people like using it)
Next: things we've used as money</div>
</section>
@ -153,8 +152,7 @@
</tr>
</tbody>
</table>
<div class="notes">
Precious metals, gold and silver.
<div class="notes">Precious metals, gold and silver.
Used widely today as money but not currency.
Less portable and divisible than its competitors.</div>
</section>
@ -225,7 +223,7 @@
</tbody>
</table>
<div class="notes">A ledger keeps track each person's money.
To send money, reduce my account and increase their account.
To send money, ➫reduce my account and ➫increase their account.
Like Paypal.
BUT - requires trust. One way to reduce the trust required is with...</div>
@ -281,7 +279,7 @@
</tr>
</tbody>
</table>
<div class="notes">Then instead of sending a payment from "Joshua" to "Jack", it's a payment from "private keys A and B" to "public key C".</div>
<div class="notes">Then instead of sending a payment from "Joshua" to "Jack", it's a payment from "private keys ➫A and ➫B" to "public key ➫C".</div>
</section>
<section janus-future="down" janus-past="down">
@ -346,7 +344,7 @@
<img janus-timeline janus-future="left" src="styles/hashpointers-new-entry.svg" alt="" class="contain" style="object-position: 50% 50%">
<h2 janus-timeline>= Blockchain</h2>
</div>
<div class="notes">A good structure for a ledger is a linked list: each block of transactions points to the previous block. But we want this log to be tamper-proof. Hash pointers can make it so that changes earlier in the chain affect every item after that. To change history, you have to redo all the work after that point. But new blocks are still being added.</div>
<div class="notes">A good structure for a ledger is a linked list: each block of transactions points to the previous block. Each participant will trust the longest log they hear about. But we need this log to be tamper-proof. ➫➫Hash pointers can make it so that changes earlier in the chain affect every item after that. ➫➫Add proof-of-work. Now to change history, you have to redo all the work after that point. But new blocks are still being added.</div>
</section>
<section>
@ -406,8 +404,7 @@
<i class="cc SIA"></i>
<i class="cc NXT"></i>
</div>
<div class="notes">
Cloud storage is just one step further than proof-of-existence.
<div class="notes">Cloud storage is just one step further than proof-of-existence.
(Storj, Maidsafe, SIAcoin, NXT)</div>
</section>

28
styles/main.css
View file

@ -530,26 +530,21 @@ body.show-notes {
background-color: #333;
}
body.show-notes section {
body.show-notes section, body.show-notes section * {
transition: none;
}
body.show-notes section[janus-timeline='present'] {
transform: scale(0.75);
transform-origin: 0% 0%;
overflow: visible;
}
.notes {
display: none;
background-color: #333;
box-sizing: border-box;
white-space: pre-line;
position: absolute;
top: 0;
left: 100%;
width: 33.33%;
height: 100%;
font-size: 0.5rem;
left: -300%;
width: 300%;
height: 400%;
font-size: 3rem;
text-align: left;
padding: 0.2em;
}
@ -557,6 +552,16 @@ body.show-notes section[janus-timeline='present'] > .notes {
display: block;
}
body.show-notes section[janus-timeline='present'] {
transform: scale(0.25);
transform-origin: top right;
top: 0;
right: 0;
bottom: auto;
left: auto;
overflow: visible;
}
body.show-notes section[janus-timeline='present'] + section[janus-timeline='future'] {
transform: scale(0.25);
transform-origin: bottom right;
@ -566,6 +571,5 @@ body.show-notes section[janus-timeline='present'] + section[janus-timeline='futu
right: 0;
opacity: 1;
visibility: visible;
outline: 0.2rem solid white;
z-index: 3;
}