mirror of
https://github.com/tomru/org.git
synced 2026-03-03 06:27:22 +01:00
a lot of changes at once
This commit is contained in:
Thomas Ruoff
236
.export/bw-functions.html
Normal file
236
.export/bw-functions.html
Normal file
@@ -0,0 +1,236 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user