mirror of
https://github.com/tomru/org.git
synced 2026-03-02 22:17:22 +01:00
237 lines
5.7 KiB
HTML
237 lines
5.7 KiB
HTML
<!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’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’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’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’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’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>
|