add org presentation v1

This commit is contained in:
Thomas Ruoff
2019-09-16 00:14:36 +02:00
parent 9e28ebd430
commit 93166f7b52
2 changed files with 0 additions and 618 deletions

View File

@@ -1,236 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>bw-cloud-functions</title>
<meta name="author" content="(Thomas Ruoff)"/>
<style type="text/css">
.underline { text-decoration: underline; }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@3/css/reveal.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@3/css/theme/solarized.css" id="theme"/>
<link rel="stylesheet" href="./local.css"/>
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://cdn.jsdelivr.net/npm/reveal.js@3/css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<meta name="description" content="">
</head>
<body>
<div class="reveal">
<div class="slides">
<section id="sec-title-slide"><h1 class="title">bw-cloud-functions</h1><h2 class="author">Thomas Ruoff</h2><p class="date">Created: 2019-08-13 Tue 23:18</p>
</section>
<section>
<section id="slide-org27d6d8f">
<h2 id="org27d6d8f">Logos in Analytics</h2>
<p>
A Logo Query contains a set of logo versions.
</p>
<p>
Our backend identifies them by an URL that resolves with a PNG of that logo
version.
</p>
<p>
The URL and the PNG is controlled by Logograb (our logo detection provider).
</p>
</section>
</section>
<section>
<section id="slide-org6deced3">
<h2 id="org6deced3">Showing Logos in Analytics</h2>
<p>
We show the logo versions in various places in Analytics, also in the chart exports.
</p>
<p>
Though the PNGs used by Logograb are not optimized for displaying, especially
not on a whitish background.
</p>
</section>
</section>
<section>
<section id="slide-org0dfade8">
<h2 id="org0dfade8">1st try</h2>
<p>
Detect whitish logos in the client and add a dark background if it&rsquo;s a whitish
logo.
</p>
</section>
</section>
<section>
<section id="slide-org7c6f587">
<h3 id="org7c6f587">Problems</h3>
<p>
Detection runs every single time a logo is shown.
</p>
<p>
It runs on the client.
</p>
<p>
We couldn&rsquo;t make it work in certain places, especially in highcharts and
obviously exported charts.
</p>
</section>
</section>
<section>
<section id="slide-org88ba199">
<h2 id="org88ba199">2nd try</h2>
<p>
Move the detection and conversion to the server.
</p>
</section>
</section>
<section>
<section id="slide-org691cc40">
<h3 id="org691cc40">Wins</h3>
<p>
Browser caches converted image.
</p>
<p>
Client stays slim.
</p>
<p>
We can just use an image URL in the frontend and chart export service.
</p>
</section>
</section>
<section>
<section id="slide-org15f1540">
<h3 id="org15f1540">Problems left</h3>
<p>
Requested logos are cached only in memory.
</p>
<p>
Not seperate
</p>
</section>
</section>
<section>
<section id="slide-orgaacc7a2">
<h2 id="orgaacc7a2">3rd try</h2>
<p>
Frontend was moved to CDN while this happend.
</p>
<p>
Cloudfront seemed to support what we needed: execute some JS when the response
of an origin came back, so we could place detection and conversion before
returning it to the client and storing it in the CDN.
</p>
</section>
</section>
<section>
<section id="slide-org159bd34">
<h3 id="org159bd34">no wins, just problems</h3>
<p>
Turns out no way even access on the body, so no way to detect nor modify that
body. :(
</p>
</section>
</section>
<section>
<section id="slide-org2d6b790">
<h2 id="org2d6b790">4th try</h2>
<p>
CDN directs logo URL calls directly to a cloud function.
</p>
<p>
We use <code>bw-cloud-functions</code> to implement conversion and detection.
</p>
</section>
</section>
<section>
<section id="slide-orgf53d241">
<h3 id="orgf53d241">wins</h3>
<p>
Re-used detection and conversion we already wrote in JS in the 2nd try.
</p>
<p>
Super easy deployment
</p>
<p>
Still makes it&rsquo;s way into the CDN store
</p>
</section>
</section>
<section>
<section id="slide-org9e9f30e">
<h3 id="org9e9f30e">problems left</h3>
<p>
Well, we misunderstood how a CDN actually works. It&rsquo;s NOT a storage as it
removes content that is not requested often enough in a region, so just a very
small TTL in the cache.
</p>
<p>
To be fair, it&rsquo;s not too bad the costs for all logo versions we currently get is
still pretty low and does not really justify to spend more time on it.
</p>
</section>
</section>
<section>
<section id="slide-org3b6aff9">
<h2 id="org3b6aff9">5th try (to be done)</h2>
<p>
Use cloud storage to store converted images and check there first, before doing
a <span class="underline">fetch, detect an maybe do a conversion</span> dance.
</p>
</section>
</section>
</div>
</div>
<p> Created by Thomas. </p>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@3/js/reveal.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
width:1200, height:800, margin: 0.1, minScale:0.2, maxScale:2.5, transition:'cube', center: false,
multiplex: {
secret: '', // null if client
id: '', // id, obtained from socket.io server
url: '' // Location of socket.io server
},
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'https://cdn.jsdelivr.net/npm/reveal.js@3/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'https://cdn.jsdelivr.net/npm/reveal.js@3/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'https://cdn.jsdelivr.net/npm/reveal.js@3/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }]
});
</script>
</body>
</html>

View File

@@ -1,382 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
.underline { text-decoration: underline; }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@3/css/reveal.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@3/css/theme/moon.css" id="theme"/>
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://cdn.jsdelivr.net/npm/reveal.js@3/css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section id="sec-title-slide"><p class="date">Created: 2019-08-12 Mon 23:09</p>
</section>
<section id="table-of-contents">
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#/slide-org343fe85">1. to research</a>
<ul>
<li><a href="#/slide-orgced0244">1.1. backup file location configurable?</a></li>
<li><a href="#/slide-org2b841af">1.2. highlight line</a></li>
<li><a href="#/slide-orgecf44b7">1.3. git gutter needed</a></li>
<li><a href="#/slide-orgff30bba">1.4. what the hell is that footer thing you cannot edit?</a></li>
<li><a href="#/slide-orgb2f6dc7">1.5. <code>C-o</code> does not open last file, not sure why yet</a></li>
<li><a href="#/slide-orgd97863d">1.6. persistant undo possible?</a></li>
<li><a href="#/slide-org36078e6">1.7. helm/ivy - dash?</a></li>
<li><a href="#/slide-orge8841d4">1.8. gruvbox-theme</a></li>
<li><a href="#/slide-org3ababc1">1.9. which-key</a></li>
<li><a href="#/slide-org8092b31">1.10. magit</a></li>
<li><a href="#/slide-org5695222">1.11. language server protocol</a></li>
<li><a href="#/slide-org80a5c8f">1.12. vim-unimpaired ?</a></li>
<li><a href="#/slide-org6546912">1.13. vim-abolish ?</a></li>
<li><a href="#/slide-org9e62754">1.14. ranger/dired-ranger</a></li>
<li><a href="#/slide-org6a09d9f">1.15. devdocs</a></li>
</ul>
</li>
<li><a href="#/slide-orgb326385">2. installed packages</a>
<ul>
<li><a href="#/slide-orga4f6901">2.1. general</a>
<ul>
<li><a href="#/slide-orgb12a413">2.1.1. editorconfig</a></li>
<li><a href="#/slide-orgc2e7db4">2.1.2. helm</a></li>
<li><a href="#/slide-orgbd880b1">2.1.3. projectile</a></li>
<li><a href="#/slide-org5db7a6e">2.1.4. magit</a></li>
</ul>
</li>
<li><a href="#/slide-org0911a87">2.2. evil related</a>
<ul>
<li><a href="#/slide-org88b5166">2.2.1. evil</a></li>
<li><a href="#/slide-org1595b1a">2.2.2. evil-escape</a></li>
<li><a href="#/slide-orgd478ae2">2.2.3. evil-leader</a></li>
<li><a href="#/slide-orgf339492">2.2.4. evil-surround</a></li>
<li><a href="#/slide-org8d5c2cb">2.2.5. evil-magit</a></li>
<li><a href="#/slide-org0facc22">2.2.6. evil-org</a></li>
</ul>
</li>
<li><a href="#/slide-orgcf221ef">2.3. org-mode related</a>
<ul>
<li><a href="#/slide-org4e0872b">2.3.1. org-bullets</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#/slide-org09a2887">3. considering packages</a>
<ul>
<li><a href="#/slide-orge898fc9">3.1. general</a></li>
<li><a href="#/slide-org53a2f2d">3.2. evil related</a>
<ul>
<li><a href="#/slide-org1b2b54b">3.2.1. evil-args</a></li>
<li><a href="#/slide-org3762fc3">3.2.2. evil-matchit</a></li>
<li><a href="#/slide-orge864784">3.2.3. evil-collection</a></li>
</ul>
</li>
<li><a href="#/slide-org63b59bf">3.3. org-mode related</a>
<ul>
<li><a href="#/slide-org5b65d1e">3.3.1. org-download</a></li>
<li><a href="#/slide-org9a5ed25">3.3.2. org-gcal</a></li>
<li><a href="#/slide-org48db92a">3.3.3. org-jira</a></li>
<li><a href="#/slide-org4ac8396">3.3.4. org-projectile</a></li>
<li><a href="#/slide-orga7aafd3">3.3.5. org-pandoc</a></li>
<li><a href="#/slide-orgf844221">3.3.6. org-reveal</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</section>
<p>
To get a list of packages type <code>M-x list-packages</code>
</p>
<section>
<section id="slide-org343fe85">
<h2 id="org343fe85"><span class="section-number-2">1</span> to research</h2>
<div class="outline-text-2" id="text-1">
</div>
</section>
<section id="slide-orgced0244">
<h3 id="orgced0244"><span class="section-number-3">1.1</span> backup file location configurable?</h3>
</section>
<section id="slide-org2b841af">
<h3 id="org2b841af"><span class="section-number-3">1.2</span> highlight line</h3>
</section>
<section id="slide-orgecf44b7">
<h3 id="orgecf44b7"><span class="section-number-3">1.3</span> git gutter needed</h3>
</section>
<section id="slide-orgff30bba">
<h3 id="orgff30bba"><span class="section-number-3">1.4</span> what the hell is that footer thing you cannot edit?</h3>
</section>
<section id="slide-orgb2f6dc7">
<h3 id="orgb2f6dc7"><span class="section-number-3">1.5</span> <code>C-o</code> does not open last file, not sure why yet</h3>
</section>
<section id="slide-orgd97863d">
<h3 id="orgd97863d"><span class="section-number-3">1.6</span> persistant undo possible?</h3>
</section>
<section id="slide-org36078e6">
<h3 id="org36078e6"><span class="section-number-3">1.7</span> helm/ivy - dash?</h3>
<p>
Still trying to figure what use-case each of these tries to
solve. I&rsquo;m primarily looking for something that offers me an nice
interface to deal with all kind of lists of elements, like files,
buffers, commits, tags, grepper etc.
</p>
<p>
I used to cover that all with vim.fzf and would again like to have
something like that.
</p>
<p>
Though it seems, that I just need some inteface for lists of any
kind that I can easily fuzzy search.
</p>
<p>
And other plugins to actually provide the content.
</p>
</section>
<section id="slide-orge8841d4">
<h3 id="orge8841d4"><span class="section-number-3">1.8</span> gruvbox-theme</h3>
</section>
<section id="slide-org3ababc1">
<h3 id="org3ababc1"><span class="section-number-3">1.9</span> which-key</h3>
<p>
Seems great for learning the editor commands. But could also be
distracting
</p>
</section>
<section id="slide-org8092b31">
<h3 id="org8092b31"><span class="section-number-3">1.10</span> magit</h3>
</section>
<section id="slide-org5695222">
<h3 id="org5695222"><span class="section-number-3">1.11</span> language server protocol</h3>
<p>
Mainly for my JS work, but probably worth to look at something
generic if there is something out there.
</p>
</section>
<section id="slide-org80a5c8f">
<h3 id="org80a5c8f"><span class="section-number-3">1.12</span> vim-unimpaired ?</h3>
<p>
Couln&rsquo;t find something replicating unimpaired until now.
</p>
<p>
Maybe I just need to roll most of these on my own
</p>
</section>
<section id="slide-org6546912">
<h3 id="org6546912"><span class="section-number-3">1.13</span> vim-abolish ?</h3>
</section>
<section id="slide-org9e62754">
<h3 id="org9e62754"><span class="section-number-3">1.14</span> ranger/dired-ranger</h3>
</section>
<section id="slide-org6a09d9f">
<h3 id="org6a09d9f"><span class="section-number-3">1.15</span> devdocs</h3>
</section>
</section>
<section>
<section id="slide-orgb326385">
<h2 id="orgb326385"><span class="section-number-2">2</span> installed packages</h2>
<div class="outline-text-2" id="text-2">
</div>
</section>
<section id="slide-orga4f6901">
<h3 id="orga4f6901"><span class="section-number-3">2.1</span> general</h3>
<div class="outline-text-3" id="text-2-1">
</div>
</section>
<section id="slide-orgb12a413">
<h4 id="orgb12a413"><span class="section-number-4">2.1.1</span> editorconfig</h4>
</section>
<section id="slide-orgc2e7db4">
<h4 id="orgc2e7db4"><span class="section-number-4">2.1.2</span> helm</h4>
</section>
<section id="slide-orgbd880b1">
<h4 id="orgbd880b1"><span class="section-number-4">2.1.3</span> projectile</h4>
</section>
<section id="slide-org5db7a6e">
<h4 id="org5db7a6e"><span class="section-number-4">2.1.4</span> magit</h4>
</section>
<section id="slide-org0911a87">
<h3 id="org0911a87"><span class="section-number-3">2.2</span> evil related</h3>
<div class="outline-text-3" id="text-2-2">
</div>
</section>
<section id="slide-org88b5166">
<h4 id="org88b5166"><span class="section-number-4">2.2.1</span> evil</h4>
<p>
evil uses &ldquo;state&rdquo; for the &ldquo;modes&rdquo; in vi. The term &ldquo;mode&rdquo; is already used in emacs
for a set of key bindings for a cetrain sort of text. A &ldquo;mode&rsquo; may include custom
bindings for evil states.
</p>
<p>
The state is shown in the status bar.
</p>
<p>
There is also an emacs state &lt;E&gt;, basically turn off evil, which you can
toggle with &rsquo;C-z&rsquo;.
</p>
<p>
I&rsquo;ve heard numerous times that people claim evil covers 99% of what they use in vim.
[[evil-maps.el][~/.emacs.d/elpa/evil-20190729.704/evil-maps.el] is a good place
to start looking if something does not work for you.
</p>
</section>
<section id="slide-org1595b1a">
<h4 id="org1595b1a"><span class="section-number-4">2.2.2</span> evil-escape</h4>
</section>
<section id="slide-orgd478ae2">
<h4 id="orgd478ae2"><span class="section-number-4">2.2.3</span> evil-leader</h4>
<p>
I was first not sure if I should even start using the leader key
as I did in my vim config, as it would again not bring me further
in learning the standard key bindings vim offers.
</p>
<p>
This is still a valid point, but I also feel it will slow me down
quite a bit, now that I&rsquo;m considering to switch to Emacs.
</p>
<p>
So I&rsquo;ll start with using it, but keep it very high in my priorities
to finally getting rid of it.
</p>
<p>
This is pretty important, as I&rsquo;m pretty sure that I&rsquo;ll still be using
Vim in quite some remote systems.
</p>
</section>
<section id="slide-orgf339492">
<h4 id="orgf339492"><span class="section-number-4">2.2.4</span> evil-surround</h4>
</section>
<section id="slide-org8d5c2cb">
<h4 id="org8d5c2cb"><span class="section-number-4">2.2.5</span> evil-magit</h4>
</section>
<section id="slide-org0facc22">
<h4 id="org0facc22"><span class="section-number-4">2.2.6</span> evil-org</h4>
</section>
<section id="slide-orgcf221ef">
<h3 id="orgcf221ef"><span class="section-number-3">2.3</span> org-mode related</h3>
<div class="outline-text-3" id="text-2-3">
</div>
</section>
<section id="slide-org4e0872b">
<h4 id="org4e0872b"><span class="section-number-4">2.3.1</span> org-bullets</h4>
<p>
UTF-8 bullets
</p>
</section>
</section>
<section>
<section id="slide-org09a2887">
<h2 id="org09a2887"><span class="section-number-2">3</span> considering packages</h2>
<div class="outline-text-2" id="text-3">
</div>
</section>
<section id="slide-orge898fc9">
<h3 id="orge898fc9"><span class="section-number-3">3.1</span> general</h3>
</section>
<section id="slide-org53a2f2d">
<h3 id="org53a2f2d"><span class="section-number-3">3.2</span> evil related</h3>
<div class="outline-text-3" id="text-3-2">
</div>
</section>
<section id="slide-org1b2b54b">
<h4 id="org1b2b54b"><span class="section-number-4">3.2.1</span> evil-args</h4>
</section>
<section id="slide-org3762fc3">
<h4 id="org3762fc3"><span class="section-number-4">3.2.2</span> evil-matchit</h4>
</section>
<section id="slide-orge864784">
<h4 id="orge864784"><span class="section-number-4">3.2.3</span> evil-collection</h4>
<p>
This seems to use vim like keybindings in most common emacs
places. Not sure yet if this is a good idea.
</p>
</section>
<section id="slide-org63b59bf">
<h3 id="org63b59bf"><span class="section-number-3">3.3</span> org-mode related</h3>
<div class="outline-text-3" id="text-3-3">
</div>
</section>
<section id="slide-org5b65d1e">
<h4 id="org5b65d1e"><span class="section-number-4">3.3.1</span> org-download</h4>
<p>
image d&rsquo;n&rsquo;d
</p>
</section>
<section id="slide-org9a5ed25">
<h4 id="org9a5ed25"><span class="section-number-4">3.3.2</span> org-gcal</h4>
</section>
<section id="slide-org48db92a">
<h4 id="org48db92a"><span class="section-number-4">3.3.3</span> org-jira</h4>
</section>
<section id="slide-org4ac8396">
<h4 id="org4ac8396"><span class="section-number-4">3.3.4</span> org-projectile</h4>
</section>
<section id="slide-orga7aafd3">
<h4 id="orga7aafd3"><span class="section-number-4">3.3.5</span> org-pandoc</h4>
</section>
<section id="slide-orgf844221">
<h4 id="orgf844221"><span class="section-number-4">3.3.6</span> org-reveal</h4>
</section>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@3/js/reveal.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
multiplex: {
secret: '', // null if client
id: '', // id, obtained from socket.io server
url: '' // Location of socket.io server
},
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'https://cdn.jsdelivr.net/npm/reveal.js@3/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'https://cdn.jsdelivr.net/npm/reveal.js@3/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'https://cdn.jsdelivr.net/npm/reveal.js@3/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'https://cdn.jsdelivr.net/npm/reveal.js@3/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'https://cdn.jsdelivr.net/npm/reveal.js@3/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }]
});
</script>
</body>
</html>