{"id":4128,"date":"2016-09-23T09:56:35","date_gmt":"2016-09-23T17:56:35","guid":{"rendered":"https:\/\/blog.mozilla.org\/webdev\/?p=4128"},"modified":"2016-09-23T09:56:35","modified_gmt":"2016-09-23T17:56:35","slug":"beer-and-tell-september-2016","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/","title":{"rendered":"Beer and Tell &#8211; September 2016"},"content":{"rendered":"<p>Once a month, web developers from across the Mozilla Project get together to talk about our side projects and drink, an occurrence we like to call &#8220;Beer and Tell&#8221;.<\/p>\n<p>There&#8217;s a <a href=\"https:\/\/wiki.mozilla.org\/Webdev\/Beer_And_Tell\/2016\/September\">wiki page available<\/a> with a list of the presenters, as well as links to their presentation materials. There&#8217;s also a <a href=\"https:\/\/air.mozilla.org\/webdev-beer-and-tell-september-2016\/\">recording available<\/a> courtesy of Air Mozilla.<\/p>\n<h2>emceeaich: Gopher Tessel<\/h2>\n<p>First up was <a href=\"https:\/\/mozillians.org\/en-US\/u\/emceeaich\/\">emceeaich<\/a>, who shared <a href=\"https:\/\/github.com\/emceeaich\/gopher-tessel\">Gopher Tessel<\/a>, a project for running a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Gopher_(protocol)\">Gopher<\/a> server (an Internet protocol that was popular before the World Wide Web) on a <a href=\"https:\/\/tessel.io\/\">Tessel<\/a>. Tessel is small circuit board that runs <a href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a> projects; Gopher Tessel reads sensors (such as the temperature sensor) connected to the board, and exposes their values via Gopher. It also can control lights connected to the board.<\/p>\n<h2>groovecoder: Crypto: 500 BC &#8211; Present<\/h2>\n<p>Next was <a href=\"https:\/\/mozillians.org\/en-US\/u\/groovecoder\/\">groovecoder<\/a>, who shared a preview of a talk about cryptography throughout history. The talk is based on <a href=\"https:\/\/en.wikipedia.org\/wiki\/The_Code_Book\">&#8220;The Code Book&#8221; by Simon Sign<\/a>. Notable moments and techniques mentioned include:<\/p>\n<ul>\n<li>499 BCE: Histiaeus of Miletus shaves the heads of messengers, tattoos messages on their scalps, and sends them after their hair has grown back to hide the message.<\/li>\n<li>~100 AD: Milk of tithymalus plant is used as invisible ink, activated by heat.<\/li>\n<li>~700 BCE: <a href=\"https:\/\/en.wikipedia.org\/wiki\/Scytale\">Scytale<\/a><\/li>\n<li>49 BC: <a href=\"https:\/\/en.wikipedia.org\/wiki\/Scytale\">Caesar cipher<\/a><\/li>\n<li>1553 AD: <a href=\"https:\/\/en.wikipedia.org\/wiki\/Vigen%C3%A8re_cipher\">Vigen\u00e8re cipher<\/a><\/li>\n<\/ul>\n<h2>bensternthal: Home Monitoring &amp; Weather Tracking<\/h2>\n<p><a href=\"https:\/\/mozillians.org\/en-US\/u\/bensternthal\/\">bensternthal<\/a> was up next, and he shared his work building a dashboard with weather and temperature information from his house. Ben built several Node.js-based applications that collect data from his home weather station, from his <a href=\"https:\/\/nest.com\/\">Nest<\/a> thermostat, and from <a href=\"https:\/\/www.wunderground.com\/\">Weather Underground<\/a> and send all the data to an <a href=\"https:\/\/www.influxdata.com\/\">InfluxDB<\/a> store. The dashboard itself uses <a href=\"http:\/\/grafana.org\/\">Grafana<\/a> to plot the data, and all of these servers are run using <a href=\"https:\/\/www.docker.com\/\">Docker<\/a>.<\/p>\n<p>The repositories for the Node.js applications and the Docker configuration are available on GitHub:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/bensternthal\/grafana-influxdb-docker\">grafana-influxdb-docker<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/bensternthal\/wunderground-influxdb\">wunderground-influxdb<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/bensternthal\/nest-influxdb\">nest-influxdb<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/bensternthal\/tfws-influxdb\">tfws-influxdb<\/a><\/li>\n<\/ul>\n<h2>craigcook: ByeHolly<\/h2>\n<p>Next was <a href=\"https:\/\/mozillians.org\/en-US\/u\/craigcook\/\">craigcook<\/a>, who shared a <a href=\"http:\/\/craigcook.github.io\/etc\/byeholly\/\">virtual yearbook page<\/a> that he made as a farewell tribute to former-teammate Holly Habstritt-Gaal, who recently took a job at another company. The page shows several photos that are clipped at the edges to look curved like an old television screen. This is done in CSS using <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clip-path\">clip-path<\/a> with an <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\">SVG<\/a>-based path for clipping. The SVG used is also defined using proportional units, which allows it to warp and distort correctly for different image sizes, as seen by the variety of images it is used on in the page.<\/p>\n<h2>peterbe: react-buggy<\/h2>\n<p><a href=\"https:\/\/mozillians.org\/en-US\/u\/peterbe\/\">peterbe<\/a> told us about <a href=\"https:\/\/github.com\/peterbe\/react-buggy\">react-buggy<\/a>, a client for viewing Github issues implemented in <a href=\"https:\/\/facebook.github.io\/react\/\">React<\/a>. It is a rewrite of <a href=\"http:\/\/buggy.peterbe.com\/\">buggy<\/a>, a similar client peterbe wrote for Bugzilla bugs. Issues are persisted in <a href=\"https:\/\/github.com\/google\/lovefield\">Lovefield<\/a> (a wrapper for IndexedDB) so that the app can function offline. The client also uses <a href=\"http:\/\/elasticlunr.com\/\">elasticlunr.js<\/a> to provide full-text search on issue titles and comments.<\/p>\n<h2>shobson: tic-tac-toe<\/h2>\n<p>Last up was <a href=\"https:\/\/mozillians.org\/en-US\/u\/stephaniehobson\/\">shobson<\/a>, who shared a small <a href=\"https:\/\/viewsourceconf.org\/offline\/\">Tic-Tac-Toe<\/a> game on the <a href=\"https:\/\/viewsourceconf.org\/\">viewsourceconf.org<\/a> offline page that is shown when the site is in offline mode and you attempt to view a page that is not available offline.<\/p>\n<hr \/>\n<p>If you&#8217;re interested in attending the next Beer and Tell, sign up for the <a href=\"https:\/\/lists.mozilla.org\/listinfo\/dev-webdev\">dev-webdev@lists.mozilla.org mailing list<\/a>. An email is sent out a week beforehand with connection details. You could even add yourself to the wiki and show off your side-project!<\/p>\n<p>See you next month!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Once a month, web developers from across the Mozilla Project get together to talk about our side projects and drink, an occurrence we like to call &#8220;Beer and Tell&#8221;. There&#8217;s a wiki page available with a list of the presenters, &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/\">Continue reading<\/a><\/p>\n","protected":false},"author":445,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20263],"tags":[],"coauthors":[28315],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Beer and Tell - September 2016 - Mozilla Web Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Kelly\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/\",\"name\":\"Beer and Tell - September 2016 - Mozilla Web Development\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\"},\"datePublished\":\"2016-09-23T17:56:35+00:00\",\"dateModified\":\"2016-09-23T17:56:35+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/c5d68eef83c0e4e0ae60176f557c1941\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/webdev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beer and Tell &#8211; September 2016\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/\",\"name\":\"Mozilla Web Development\",\"description\":\"For make benefit of glorious tubes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/c5d68eef83c0e4e0ae60176f557c1941\",\"name\":\"Michael Kelly\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/835c2c0db4a21fa347206563231f3e71\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a414aea4a5b11c6e2e00f760e96b85ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a414aea4a5b11c6e2e00f760e96b85ab?s=96&d=mm&r=g\",\"caption\":\"Michael Kelly\"},\"description\":\"Michael Kelly is a developer on the Web Engineering team at Mozilla. He works on tools that help engineers get things done. He also helps run a lot of the Webdev group activities!\",\"sameAs\":[\"http:\/\/mkelly.me\",\"https:\/\/x.com\/Osmose\"],\"url\":\"https:\/\/blog.mozilla.org\/webdev\/author\/mkellymozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Beer and Tell - September 2016 - Mozilla Web Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/","twitter_misc":{"Written by":"Michael Kelly","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/","url":"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/","name":"Beer and Tell - September 2016 - Mozilla Web Development","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#website"},"datePublished":"2016-09-23T17:56:35+00:00","dateModified":"2016-09-23T17:56:35+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/c5d68eef83c0e4e0ae60176f557c1941"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/webdev\/2016\/09\/23\/beer-and-tell-september-2016\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/webdev\/"},{"@type":"ListItem","position":2,"name":"Beer and Tell &#8211; September 2016"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/webdev\/#website","url":"https:\/\/blog.mozilla.org\/webdev\/","name":"Mozilla Web Development","description":"For make benefit of glorious tubes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/c5d68eef83c0e4e0ae60176f557c1941","name":"Michael Kelly","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/835c2c0db4a21fa347206563231f3e71","url":"https:\/\/secure.gravatar.com\/avatar\/a414aea4a5b11c6e2e00f760e96b85ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a414aea4a5b11c6e2e00f760e96b85ab?s=96&d=mm&r=g","caption":"Michael Kelly"},"description":"Michael Kelly is a developer on the Web Engineering team at Mozilla. He works on tools that help engineers get things done. He also helps run a lot of the Webdev group activities!","sameAs":["http:\/\/mkelly.me","https:\/\/x.com\/Osmose"],"url":"https:\/\/blog.mozilla.org\/webdev\/author\/mkellymozilla-com\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/4128"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/users\/445"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/comments?post=4128"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/4128\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/media?parent=4128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/categories?post=4128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/tags?post=4128"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/coauthors?post=4128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}