Skip to content

Instantly share code, notes, and snippets.

@naeluh

naeluh/index.html

Last active February 28, 2018 06:37
Show Gist options
  • Save naeluh/e34f721efc1154df898bb399e2a5ea04 to your computer and use it in GitHub Desktop.
Save naeluh/e34f721efc1154df898bb399e2a5ea04 to your computer and use it in GitHub Desktop.
Download ZIP
menu_angle.js
Raw
gistfile1.txt
(function () {
const rem = parseInt(window.getComputedStyle(document.documentElement)['font-size'], 10);
const headerHeight = document.querySelector('header').clientHeight;
const pageWidth = document.body.clientWidth;
const getHeaderSkew = function () {
let aa = headerHeight - window.scrollY - (4 * rem);
let a = headerHeight - (headerHeight * 0.6);
if (aa > a) {
aa = a;
}
return -1 * (Math.asin( 1 / (Math.sqrt(Math.pow(aa, 2) + Math.pow(pageWidth, 2)) / aa ))) * (180 / Math.PI);
}
const getFooterSkew = function () {
let k = window.scrollY + document.documentElement.clientHeight - document.querySelector('main').offsetHeight
let footerHeight = document.querySelector('footer').offsetHeight;
let aa = footerHeight - (footerHeight - k);
if (k < 0 || aa < 0) {
return 0;
}
if (aa >= 6 * rem) {
aa = 6 * rem;
}
return (Math.asin( 1 / (Math.sqrt(Math.pow(aa, 2) + Math.pow(pageWidth, 2)) / aa ))) * (180 / Math.PI);
}
const addHeaderShrink = function () {
if (!document.querySelector('.header--shrink')) {
const body = document.querySelector('body')
body.className += 'header--shrink ';
document.querySelector('header input').checked = false;
}
}
const removeHeaderShrink = function () {
const body = document.querySelector('body')
const cl = body.className;
body.className = cl.replace(/header--shrink/g, '');
document.querySelector('header input').checked = false;
}
const onScroll = function () {
const startTreshold = window.scrollY - (headerHeight - (headerHeight * 0.6)) >= 0;
const endTreshold = (headerHeight - window.scrollY - (4 * rem)) < 0;
if (startTreshold && !endTreshold) {
window.requestAnimationFrame(() => {
removeHeaderShrink()
document.documentElement.style.setProperty(`--headerSkew`, getHeaderSkew() + 'deg');
})
} else if (endTreshold) {
window.requestAnimationFrame(() => {
addHeaderShrink();
})
} else if (window.scrollY === 0) {
removeHeaderShrink()
document.documentElement.style.setProperty(`--headerSkew`, getHeaderSkew() + 'deg');
}
document.documentElement.style.setProperty(`--footerSkew`, getFooterSkew() + 'deg');
}
const init = function () {
let menuHeight = headerHeight;
if (16 * rem >= headerHeight) {
menuHeight = 20 * rem;
}
document.documentElement.style.setProperty(`--headerHeight`, headerHeight + 'px');
document.documentElement.style.setProperty(`--menuHeight`, menuHeight + 'px');
document.documentElement.style.setProperty(`--headerSkew`, getHeaderSkew() + 'deg');
}
init();
document.querySelectorAll('header nav li a').forEach((item) => {
item.addEventListener('click', function () {
this.parentNode.className += 'menu-clicked';
})
})
window.addEventListener('resize', () => {
window.requestAnimationFrame(() => {
document.documentElement.style.setProperty(`--headerSkew`, getHeaderSkew() + 'deg');
})
})
onScroll();
document.addEventListener('scroll', onScroll);
}());
Raw
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Thunder Plains 2017 | nec.is</title>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, user-scalable=1" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#030303">
<meta name="theme-color" content="#030303">
<meta name="robots" content="index, follow">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@_nec">
<meta name="twitter:creator" content="@_nec">
<meta name="twitter:title" content="Thunder Plains 2017">
<meta name="twitter:description" content="Picked up my old hacked coffee machine once again, and traveled across the world with it.">
<meta name="twitter:image" content="https://nec.is/speaking/thunder-plains-2017/social-card.png">
<meta name="twitter:url" content="https://nec.is/speaking/thunder-plains-2017/">
<meta property="og:type" content="website" />
<meta property="og:title" content="Thunder Plains 2017" />
<meta property="og:description" content="Picked up my old hacked coffee machine once again, and traveled across the world with it." />
<meta property="og:image" content="https://nec.is/speaking/thunder-plains-2017/social-card.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="300" />
<meta property="og:site_name" content="@_nec" />
<meta property="og:url" content="https://nec.is/speaking/thunder-plains-2017/" />
<link rel="alternate" href="/atom.xml" title="nec.is" type="application/atom+xml">
<link rel='stylesheet' href='https://d33wubrfki0l68.cloudfront.net/css/8dadb6d8ca7f4dc116e431cb424b278468a8176e/css/style.css'/>
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700|Libre+Franklin:300,500" rel="stylesheet">
<link rel='stylesheet' type='text/css' href='https://d33wubrfki0l68.cloudfront.net/bundles/54223c02ad16b0c4dd09c03bbce272b1dc73f5e7.css'/>
</head>
<body class="" ontouchstart>
<header>
<div class="top">
<h1 class="logo">
<a href="/" title="Go to the home page">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340.2 340.2">
<path id="n-path" d="M172.1,319.4c-82.5,0-149.3-66.9-149.3-149.3S89.6,20.8,172.1,20.8s149.3,66.9,149.3,149.3
S254.5,319.4,172.1,319.4z M142.1,62.8l-19.4,157.3l-145.8,0.3v40.9l140.7,0h46.6l11.8-95c1-8,2.1-15,3.4-21
c1.3-6.1,2.8-11.2,4.6-15.4c3.4-8.2,8.6-15.2,15.6-20.9c8.6-7.3,18.8-10.9,30.8-10.9c19.4,0,29.1,8.9,29.1,26.8
c0,2.7-0.1,5.7-0.3,9c-0.2,3.4-0.6,7.2-1.2,11.5l-30.3,249.6h46.6l29.4-237.7c1.7-13.7,2.6-25.5,2.6-35.4
c0-18.2-5.7-32.6-17.2-43.2c-11.8-10.6-27.4-15.8-46.8-15.8c-18.8,0-37.4,6.1-55.8,18.3l2.1-18.3H142.1z"/>
<clipPath id="n-clip-path"><use xlink:href="#n-path" style="overflow:visible;"/></clipPath>
<circle class="st0" cx="172.2" cy="170.8" r="148.2" style="clip-path:url(#n-clip-path); fill: #fff;"/>
</svg>
</a>
</h1>
<nav>
<input type="checkbox" id="menu-open">
<label for="menu-open"><span>menu</span></label>
<ul>
<li><a href="/">about</a></li>
<li><a href="/speaking">speaking</a></li>
<li><a href="https://twitter.com/_nec">twitter</a></li>
</ul>
</nav>
</div>
<h1 class="title">
Thunder Plains 2017
</h1>
</header>
<main>
<article id="speaking-page-speaking-thunderplains2017">
<blockquote><p>Welcome to our impromptu coffeeshop where you can be the connected smart barista! Create the coffee that blends with technology, hack &amp; tamper with hardware, and brew an espresso from the command line - or from the browser!</p>
<footer><strong>Café Terminal, Talk abstract</strong><cite><a href="http://2017.thunderplainsconf.com/" target="_blank" rel="noopener">2017.thunderplainsconf.com</a></cite></footer></blockquote>
<p>It was really exciting to visit the US for the second time, especially with a huge hardcovered utility box, with an old espresso machine inside! Thunder Plains seems like the local community conference around Oklahoma and the surrounding nations, but that’s a bit deceiving. This event - althought it wasn’t always called <em>Thunder Plains</em> - is maybe older than JSConf itself, Jesse and Amanda Harlin are doing this for the local community since years. The Oklahoma tech community is proud to give the world talented people like Kyle Simpson or John-David Dalton.</p>
<p>Everything was super-fine until I’ve realized one major flaw in my planning for the talk: the coffee machine I’ve brought was an old one, more than 20 years old. It’s power requirements were waaay over 110V, the standard for the United States. It was not a question of plug converter, I needed a step-upper, a kind of transformator, that made 220Volts from 110. Jesse and Amanda were awesome, they tried to help me find such a device the day before the event, but we’ve failed - so I used a backup video during the presentation, I’ve made at home - in case the TSA does find my huge plastic box dangerous, and the machine fails to arrive in the county. Here are the slides for my talk:</p>
<iframe src="//www.slideshare.net/slideshow/embed_code/key/vDWFRzp0lgeLZi" width="595" height="375" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen> </iframe>
<p>But the luckily the talk and the whole trip was a success, I’ve received really positive feedback. Doring and after the event I’ve had the pleasure to meet Adam Baldwin, who started the <a href="https://nodesecurity.io/" target="_blank" rel="noopener">NodeSecurity</a> project. As I was curious, he explained how they manage to pinpoint malicious npm pacakage installs within seconds, using docker and <a href="https://www.sysdig.org/" target="_blank" rel="noopener">sysdig</a>. I’ve met with Laurie Voss from npm again, and it was great to see John-David Dalton in person, and hear from the <a href="https://github.com/standard-things/esm" target="_blank" rel="noopener">esm loader</a> he’s working on nowadays.</p>
<p>Oklahoma City is the 8th largest city in the US by land area, it streches through the Great Plains region, it was super flat. The business district has some skyscrapers, but on the whole, its a reaaly flat city, with a rich history of western culture. I’ve visited the science museum on the day after the conference, and they happen to have an actual size replica of an F1 rocket engine, one of five that powered the 1st stage of the Saturn rockets during the Apollo missions.</p>
<p>Some photos of my trip to OKC on Instagram:</p>
<div class="instagram-gallery"><a href="https://www.instagram.com/p/Ba-ULrYBiWo/" target="_blank" rel="noopener"><span style="background-image: url(https://scontent.cdninstagram.com/vp/f9c9fc6465b756fa9c8d4336be82e388/5B1A33F7/t51.2885-15/s640x640/sh0.08/e35/23101270_1576851689024439_9164108312873009152_n.jpg);"></span></a><a href="https://www.instagram.com/p/Ba-ULrYBiWo/" target="_blank" rel="noopener"><span style="background-image: url(https://scontent.cdninstagram.com/vp/2aeab246c44faec5584c1af6de70f5af/5B10AD9B/t51.2885-15/s640x640/sh0.08/e35/23161369_155604031715823_6487304459998199808_n.jpg);"></span></a><a href="https://www.instagram.com/p/Ba-ULrYBiWo/" target="_blank" rel="noopener"><span style="background-image: url(https://scontent.cdninstagram.com/vp/cbe13a264e6bbdfb5654cfd963d21ed7/5B2848FD/t51.2885-15/s640x640/sh0.08/e35/22861053_755073124684338_7015868252412706816_n.jpg);"></span></a><a href="https://www.instagram.com/p/Ba-ULrYBiWo/" target="_blank" rel="noopener"><span style="background-image: url(https://scontent.cdninstagram.com/vp/d4f439913c0b940212876c95307f8255/5B278DF6/t51.2885-15/s640x640/sh0.08/e35/23099018_446316339099300_6558617560110071808_n.jpg);"></span></a><a href="https://www.instagram.com/p/Ba-ULrYBiWo/" target="_blank" rel="noopener"><span style="background-image: url(https://scontent.cdninstagram.com/vp/bcecd5c869caed4e8522d84aca396d25/5B194346/t51.2885-15/s640x640/sh0.08/e35/23098660_530438530636687_6313010589727719424_n.jpg);"></span></a><a href="https://www.instagram.com/p/Ba-ULrYBiWo/" target="_blank" rel="noopener"><span style="background-image: url(https://scontent.cdninstagram.com/vp/82a6e900ccf98655557c9b423a262390/5B12BF7A/t51.2885-15/s640x640/sh0.08/e35/23101574_127721757931180_1967964576351780864_n.jpg);"></span></a><a href="https://www.instagram.com/p/BbE3X8oBw4Z/" target="_blank" rel="noopener"><span style="background-image: url(https://scontent.cdninstagram.com/vp/a001b59a0ae311ca063e6fda532bfb96/5B3254CA/t51.2885-15/s640x640/sh0.08/e35/23164727_1593126960743573_6454532712773451776_n.jpg);"></span></a><a href="https://www.instagram.com/p/BbE3X8oBw4Z/" target="_blank" rel="noopener"><span style="background-image: url(https://scontent.cdninstagram.com/vp/72c42685b4b5d5bb8f004e3044aca0b0/5B4BE4C8/t51.2885-15/s640x640/sh0.08/e35/23161611_1968076163463597_5827175373946748928_n.jpg);"></span></a><a href="https://www.instagram.com/p/BbGKOachkA3/" target="_blank" rel="noopener"><span style="background-image: url(https://scontent.cdninstagram.com/vp/9a5dcc4006db5e515753fd827e12d379/5B1409FF/t51.2885-15/s640x640/sh0.08/e35/23101856_164694260794009_6558294179137454080_n.jpg);"></span></a><a href="https://www.instagram.com/p/BbGKOachkA3/" target="_blank" rel="noopener"><span style="background-image: url(https://scontent.cdninstagram.com/vp/cb6bcbcf92fbd99eb354d56616a10e25/5B10CBBA/t51.2885-15/sh0.08/e35/p640x640/23347898_881165748716429_8482847528163737600_n.jpg);"></span></a><a href="https://www.instagram.com/p/BbGKOachkA3/" target="_blank" rel="noopener"><span style="background-image: url(https://scontent.cdninstagram.com/vp/8efa55b71986481313ac74b5d20080c3/5B4549D5/t51.2885-15/s640x640/sh0.08/e35/23164104_356579114791144_2428435592183283712_n.jpg);"></span></a><a href="https://www.instagram.com/p/BbGKOachkA3/" target="_blank" rel="noopener"><span style="background-image: url(https://scontent.cdninstagram.com/vp/ac83000b438889c69920d90ff99cd9c2/5B17D89F/t51.2885-15/s640x640/sh0.08/e35/23347714_2201448100082266_3973633248960970752_n.jpg);"></span></a></div>
</article>
<section class="article-meta">
<div class="article-meta__inner">
<p>
Posted on <time datetime="2018-02-27T15:53:41.636Z" >2018, February 27th</time>
.
</p>
<p>
If you wish to comment, correct someting silly I've wrote or ask a question,
the <a href="https://github.com/necccc/nec.is/tree/master/source/_posts/speaking/thunderplains2017.md">source for this post is on github</a>, contact me there, or via <a href="mailto:[email protected]" title="email">email</a>,
or just find me on <a href="https://twitter.com/_nec">twitter</a>.
</p>
</div>
</section>
</main>
<footer class="site">
<div class="footer-content">
<h3>Keep updated, contact, get in touch!</h3>
<ul>
<li>Contact me via <a href="mailto:[email protected]" title="email">email</a></li>
<li><a href="/atom.xml">RSS feed</a> of my posts</li>
</ul>
<hr />
<ul>
<li><a href="https://github.com/necccc">GitHub</a></li>
<li><a href="https://www.instagram.com/_nec">Instagram</a></li>
<li><a href="https://twitter.com/_nec">Twitter</a></li>
</ul>
</div>
<div class="footer-bottom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340.2 340.2">
<g>
<path d="M297.3,278.8c25-29.3,40.2-67.2,40.2-108.8c0-33.3-9.7-64.4-26.5-90.4c3.3,8.1,5,17.3,5,27.6c0,10.8-0.9,23.8-2.8,38.8
L297.3,278.8z"/>
<path d="M114.6,215l21.2-172.5h50.9l-2.3,20.1c20.2-13.4,40.6-20.1,61.3-20.1c19.2,0,34.9,4.7,47.3,14
C262.4,23.4,218.7,2.7,170.1,2.7C77.6,2.7,2.7,77.6,2.7,170.1c0,15.7,2.2,30.9,6.2,45.3L114.6,215z"/>
<path d="M263,133c0.6-4.7,1-9,1.3-12.6c0.2-3.7,0.3-7,0.3-9.9c0-19.6-10.6-29.4-31.9-29.4c-13.1,0-24.4,4-33.7,11.9
c-7.7,6.3-13.4,13.9-17.1,23c-2,4.6-3.7,10.2-5.1,16.9c-1.4,6.7-2.6,14.4-3.7,23.1l-12.9,104.3h-51.1l-80,0
c29.7,46.4,81.8,77.2,141,77.2c25.3,0,49.4-5.6,70.9-15.7L263,133z"/>
</g>
</svg>
<p>
2018 &copy; Szabolcs Szabolcsi-Toth. All rights reserved.
</p>
<p>
Built using <a href="http://hexo.io/" target="_blank">Hexo</a>,
deployed on <a href="https://netlify.com/" target="_blank">Netlify</a>.<br />
if you're interested how, <a href="/writing/how-this-site-was-made/">I've wrote a post about it here!</a>
</p>
</div>
</footer>
<script src='https://d33wubrfki0l68.cloudfront.net/js/4172248ab2b85e20ed54d673b89c0a7e1506e023/js/script.js'></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112128951-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-112128951-1');
</script>
<!-- End Google Analytics -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment