add static builder
This commit is contained in:
Thibaud Dauce
@@ -0,0 +1,310 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Informatique, complexité et écologie</title>
|
||||
<link rel="stylesheet" href="tailwind.min.css">
|
||||
</head>
|
||||
<body class="font-sans bg-gray-100 text-gray-900">
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">Informatique, Complexité et Écologie</h1>
|
||||
<h2 class="text-3xl text-gray-700">Thibaud Dauce</h2>
|
||||
<p class="">
|
||||
<a class="text-blue-600" href="https://twitter.com/ThibaudDauce">@ThibaudDauce</a> | <a class="text-blue-600" href="https://thibaud.dauce.fr">https://thibaud.dauce.fr</a>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<div class="flex mb-12">
|
||||
<div class="w-64 mr-8">
|
||||
<img class="w-4/5" src="images/quantic.png" alt="Quantic Telecom">
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h2 class="text-2xl text-gray-700">Co-fondateur de Quantic Telecom</h2>
|
||||
<p>
|
||||
<a class="text-blue-600" href="https://www.quantic-telecom.net/">
|
||||
https://www.quantic-telecom.net
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="w-64 mr-8">
|
||||
<img src="images/laravel.png" alt="Quantic Telecom">
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<h2 class="text-2xl text-gray-700">Formateur & Consultant Laravel</h2>
|
||||
<p>
|
||||
<a class="text-blue-600" href="https://www.formation-laravel.fr/">
|
||||
https://www.formation-laravel.fr
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">Informatique, Complexité et Écologie</h1>
|
||||
<h2 class="text-3xl text-gray-700">Thibaud Dauce</h2>
|
||||
<p class="">
|
||||
<a class="text-blue-600" href="https://twitter.com/ThibaudDauce">@ThibaudDauce</a> | <a class="text-blue-600" href="https://thibaud.dauce.fr">https://thibaud.dauce.fr</a>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">$ npm run start</h1>
|
||||
</section>
|
||||
<section>
|
||||
<img src="images/grunt_not_found.png" alt="">
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">$ sudo npm install -g grunt</h1>
|
||||
</section>
|
||||
<section>
|
||||
<img src="images/grunt_not_local.png" alt="">
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">$ npm install</h1>
|
||||
</section>
|
||||
<section>
|
||||
<img src="images/grunt_compile_fail.png" alt="">
|
||||
</section>
|
||||
<section>
|
||||
<div>
|
||||
<h1 class="text-5xl text-gray-700">Problèmes de <span class="text-gray-900">fiabilité</span></h1>
|
||||
<h1 class="text-5xl text-gray-700">Problèmes de <span class="text-gray-900">productivité</span></h1>
|
||||
<h1 class="text-5xl text-gray-700">Problèmes de <span class="text-gray-900">performances</span></h1>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">Problèmes de <span class="text-gray-900">fiabilité</span></h1>
|
||||
</section>
|
||||
<section>
|
||||
<div class="bg-gray-900 p-4 text-sm text-gray-100 font-semibold border-white border-4">
|
||||
<p>Impossible de lire ce titre pour le moment.</p>
|
||||
<div class="flex mt-4 -mx-1">
|
||||
<p class="border border-gray-500 mx-1 px-1 text-xs">OK</p>
|
||||
<p class="border border-gray-500 mx-1 px-1 text-xs">Annuler</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<img src="images/twitter_no_like.png" alt="" class="w-2/5">
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">Problèmes de <span class="text-gray-900">productivité</span></h1>
|
||||
</section>
|
||||
<section>
|
||||
<video src="videos/ken.mp4" controls class="w-2/3 mb-3"></video>
|
||||
<h2 class="text-xl text-gray-700"><span class="text-gray-900">Ken Thompson</span> — VCF East 2019</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">Twitter <span class="text-gray-900">2012</span> vs Twitter <span class="text-gray-900">2019</span> ?</h1>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">Windows <span class="text-gray-900">XP</span> vs Windows <span class="text-gray-900">10</span> ?</h1>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">Problèmes de <span class="text-gray-900">performances</span></h1>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700 mb-12">Loi de <span class="text-gray-900">Wirth</span></h1>
|
||||
<div class="relative">
|
||||
<span style="left: -1rem; top: -6.5rem; font-size: 8rem" class="absolute text-gray-300 z-0">«</span>
|
||||
<p class="relative italic text-xl text-gray-700 font-semibold z-10 mb-2">
|
||||
<span>Les programmes ralentissent plus vite que le matériel accélère.</span>
|
||||
<br>
|
||||
</p>
|
||||
<p class="text-right italic text-lg text-gray-700">
|
||||
Niklaus Wirth, « A Plea For Lean Software » (1995)
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">Hardware = Pétrole</h1>
|
||||
</section>
|
||||
<section>
|
||||
<div class="flex">
|
||||
<div class="mr-6">
|
||||
<h1 class="text-3xl text-gray-700">Twitter</h1>
|
||||
<h1 class="text-3xl text-gray-700">Youtube Studio</h1>
|
||||
<h1 class="text-3xl text-gray-700">Facebook</h1>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl text-gray-700 text-right"><span class="text-gray-900">3</span> secondes</h1>
|
||||
<h1 class="text-3xl text-gray-700 text-right"><span class="text-gray-900">5</span> secondes</h1>
|
||||
<h1 class="text-3xl text-gray-700 text-right"><span class="text-gray-900">3</span> secondes</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<img src="images/doom.jpg" alt="" class="w-4/5">
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">Oui mais…</h1>
|
||||
<h2 class="text-3xl text-gray-700">les problèmes sont plus complexes ?</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700 mb-4">C'est un <span class="text-gray-900">ratio</span> en baisse</h1>
|
||||
|
||||
<div class="opacity-0 flex flex-col items-center">
|
||||
<h1 class="text-3xl text-gray-700">Complexité idéale du <span class="text-gray-900">problème</span></h1>
|
||||
<hr class="border-4 w-16 border-gray-700">
|
||||
<h1 class="text-3xl text-gray-700">Complexité de la <span class="text-gray-900">solution</span></h1>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700 mb-4">La minorité bruyante</h1>
|
||||
|
||||
<div class="relative mx-16">
|
||||
<span style="left: -1rem; top: -6.5rem; font-size: 8rem" class="absolute text-gray-300 z-0">«</span>
|
||||
<p class="relative italic text-xl text-gray-700 font-semibold z-10 mb-2">
|
||||
<span>The bigger a company, the more credibility they have to inspire smaller company on what they should do […] In fact, in many cases it's the exact opposite answer. Whatever Facebook is doing do the complete opposite of that.</span>
|
||||
<br>
|
||||
</p>
|
||||
<p class="text-right italic text-lg text-gray-700">
|
||||
David Heinemeier Hansson, <a href="http://www.fullstackradio.com/32">« Building Basecamp 3 like a Porsche 911 »</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<img src="images/twitter_docker.png" alt="">
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700 mb-4">Une complexité <span class="text-gray-900">cachée</span></h1>
|
||||
|
||||
<div class="flex">
|
||||
<div class="mr-6">
|
||||
<h1 class="text-3xl text-gray-700">Wordpress</h1>
|
||||
<h1 class="text-3xl text-gray-700">Laravel & VueJS</h1>
|
||||
<h1 class="text-3xl text-gray-700">PHP</h1>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl text-gray-700 text-right"><span class="text-gray-900">630 317</span> lignes de code</h1>
|
||||
<h1 class="text-3xl text-gray-700 text-right"><span class="text-gray-900">1 364 908</span> lignes de code</h1>
|
||||
<h1 class="text-3xl text-gray-700 text-right"><span class="text-gray-900">1 261 239</span> lignes de code</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">Tout connaître est impossible</h1>
|
||||
<h2 class="text-3xl text-gray-700 opacity-0">surtout en 6 mois…</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">Où recruter ?</h1>
|
||||
<h2 class="text-3xl text-gray-700">les prochains ingénieurs d'Intel…</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">Bilan écologique</h1>
|
||||
<h2 class="text-3xl text-gray-700">des pertes de fiabilité et de performances</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">L'obsolescence des appareils</h1>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700">La multiplication des flux réels</h1>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700 mb-4">Pour aller plus loin…</h1>
|
||||
|
||||
<div class="text-sm">
|
||||
<div class="mb-2">
|
||||
<p>Jonathan Blow, Preventing the Collapse of Civilization</p>
|
||||
<p><a class="text-blue-600" href="https://www.youtube.com/watch?v=pW-SOdj4Kkk">https://www.youtube.com/watch?v=pW-SOdj4Kkk</a></p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<p>Casey Muratori, The Thirty Million Line Problem</p>
|
||||
<p><a class="text-blue-600" href="https://caseymuratori.com/blog_0031">https://caseymuratori.com/blog_0031</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700 mb-12">Et Reveal.js dans tout ça ?</h1>
|
||||
<p class="">
|
||||
<a class="text-blue-600" href="https://twitter.com/ThibaudDauce">@ThibaudDauce</a> | <a class="text-blue-600" href="https://thibaud.dauce.fr">https://thibaud.dauce.fr</a>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="text-5xl text-gray-700 mb-12">Questions</h1>
|
||||
<p class="">
|
||||
<a class="text-blue-600" href="https://twitter.com/ThibaudDauce">@ThibaudDauce</a> | <a class="text-blue-600" href="https://thibaud.dauce.fr">https://thibaud.dauce.fr</a>
|
||||
</p>
|
||||
</section>
|
||||
<script>
|
||||
let max_index = 0;
|
||||
document.querySelectorAll('section').forEach((section) => {
|
||||
max_index++
|
||||
section.id = max_index
|
||||
})
|
||||
|
||||
let slide_index = window.location.hash.substring(1) || 1
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (slide_index < max_index && e.keyCode === 39) {
|
||||
let fragment = document.getElementById(slide_index).querySelector('.opacity-0');
|
||||
if (fragment) {
|
||||
fragment.classList.replace('opacity-0', 'opacity-100')
|
||||
return
|
||||
}
|
||||
|
||||
slide_index++
|
||||
window.location.hash = slide_index
|
||||
}
|
||||
if (slide_index > 1 && e.keyCode === 37) {
|
||||
let fragment = document.getElementById(slide_index).querySelector('.opacity-100');
|
||||
if (fragment) {
|
||||
fragment.classList.replace('opacity-100', 'opacity-0')
|
||||
return
|
||||
}
|
||||
|
||||
slide_index--
|
||||
window.location.hash = slide_index
|
||||
}
|
||||
|
||||
document.getElementById(slide_index).scrollIntoView();
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
document.getElementById(slide_index).scrollIntoView();
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
body, html {
|
||||
font-size: 40px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
html::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
section {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
font-family: "League Gothic";
|
||||
font-weight: normal;
|
||||
}
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
font-family: "League Gothic";
|
||||
font-weight: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "League Gothic";
|
||||
src: url("league-gothic.woff") format("woff");
|
||||
}
|
||||
* {
|
||||
transition: opacity 300ms;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user