{"id":3898,"date":"2014-07-21T20:19:54","date_gmt":"2014-07-22T04:19:54","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=3898"},"modified":"2014-07-21T20:19:54","modified_gmt":"2014-07-22T04:19:54","slug":"beer-and-tell-july-2014","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/","title":{"rendered":"Beer and Tell July 2014"},"content":{"rendered":"<p>Once a month, web developers across the Mozilla community get together to share what side projects or cool stuff we&#8217;ve been working on in our spare time. This monthly tribute is known as &#8220;Beer and Tell&#8221;.<\/p>\n<p>There&#8217;s a <a href=\"https:\/\/wiki.mozilla.org\/Webdev\/Beer_And_Tell\/July2014\">wiki page<\/a> listing the presenters and links to what they&#8217;re showing off and useful side information. There&#8217;s also a <a href=\"https:\/\/air.mozilla.org\/webdev-beer-and-tell-july-2014\/\">recording on Air Mozilla<\/a> of the meeting.<\/p>\n<h2>Pomax: RGBAnalyse and nrAPI<\/h2>\n<p>This month <a href=\"https:\/\/mozillians.org\/u\/Pomax\/\">Pomax<\/a> had two projects to show. The first, <a href=\"http:\/\/pomax.github.io\/RGBAnalyse\/\">RGBAnalyse<\/a>, is a JavaScript library that generates histographical data about the colors in an image. Originally created so he could sort ink colors by hue, the library not only generates the data, but also generates images (available as data-uris) of histograms using that data.<\/p>\n<p>The second project Pomax shared was <a href=\"http:\/\/api.nihongoresources.com\/\">nrAPI<\/a>, a Node.js-based REST API for a website for learning Japanese: <a href=\"http:\/\/www.nihongoresources.com\/\">nihongoresources.com<\/a>. The API lets you search for basic dictionary info, data on specific Kanji, sound effects, and Japanese names. Search input is accepted in English, Romaji, Hiragana, Katakana, or Kanji.<\/p>\n<div id=\"attachment_3904\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/nrAPI-output.png\"><img aria-describedby=\"caption-attachment-3904\" decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-3904\" src=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/nrAPI-output-600x367.png\" alt=\"HTML result from nrAPI search for &quot;tiger&quot;.\" width=\"600\" height=\"367\" srcset=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/nrAPI-output-600x367.png 600w, https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/nrAPI-output-252x154.png 252w, https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/nrAPI-output.png 652w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-3904\" class=\"wp-caption-text\">HTML result from nrAPI search for &#8220;tiger&#8221;.<\/p><\/div>\n<h2>Bill Walker: Photo Mosaic via CSS Multi-Column<\/h2>\n<p>Next, <a href=\"https:\/\/mozillians.org\/u\/bwalker\/\">bwalker<\/a> shared his <a href=\"https:\/\/github.com\/wfwalker\/birdwalker3\">personal birding photo site<\/a>, and talked about a new photo layout he&#8217;s been playing with that uses a <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/Guide\/CSS\/Using_multi-column_layouts\">multi-column layout via CSS<\/a>. The result is an attractive grid of photos of various sizes without awkward gaps, that can also be made responsive without the use of JavaScript. bwalker also shared the <a href=\"http:\/\/css-tricks.com\/seamless-responsive-photo-grid\/\">blog post<\/a> that he learned the technique from.<\/p>\n<h2>Dean Johnson: MusicDownloader<\/h2>\n<p><a href=\"https:\/\/mozillians.org\/u\/djohnson\/\">deanj<\/a> shared <a href=\"https:\/\/github.com\/dean\/MusicDownloader\">MusicDownloader<\/a>, a Python-based program for downloading music from SoundCloud, Youtube, Rdio, Pandora, and HypeScript. The secret sauce is in the submodules, which implement the service-specific download code.<\/p>\n<h2>Chris Lonnen: Alonzo<\/h2>\n<p>Lastly, <a href=\"https:\/\/mozillians.org\/u\/lonnen\/\">lonnen<\/a> shared <a href=\"https:\/\/github.com\/lonnen\/alonzo\/\">alonzo<\/a>, a Scheme interpreter written in Haskell as part of a mad attempt to learn both languages at the same time. It uses\u00a0<a href=\"http:\/\/www.haskell.org\/haskellwiki\/Parsec\">Parsec<\/a> to implement parsing, and so far implements binary numeric operations, basic conditionals, and even rudimentary error checking. The development roughly follows along <a href=\"http:\/\/jonathan.tang.name\/files\/scheme_in_48\/tutorial\/overview.html\">&#8220;Write Yourself a Scheme in 48 Hours&#8221; by Johnathan Tang<\/a>.<\/p>\n<p><a href=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/alonzo-output.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-3903\" src=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/alonzo-output-600x169.png\" alt=\"Sample Runs of alonzo\" width=\"600\" height=\"169\" srcset=\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/alonzo-output-600x169.png 600w, https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/alonzo-output-252x71.png 252w, https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/alonzo-output.png 726w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<hr \/>\n<p>Thanks to all of our presenters for sharing! If you&#8217;re interested in attending or presenting at the next Beer and Tell, subscribe to the <a href=\"https:\/\/lists.mozilla.org\/listinfo\/dev-webdev\">dev-webdev mailing list<\/a>! The wiki page and connection info is shared a few days before each meeting.<\/p>\n<p>See you next month!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Once a month, web developers across the Mozilla community get together to share what side projects or cool stuff we&#8217;ve been working on in our spare time. This monthly tribute is known as &#8220;Beer and Tell&#8221;. There&#8217;s a wiki page &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/\">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":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Beer and Tell July 2014 - 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\/2014\/07\/21\/beer-and-tell-july-2014\/\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/\",\"name\":\"Beer and Tell July 2014 - Mozilla Web Development\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/nrAPI-output-600x367.png\",\"datePublished\":\"2014-07-22T04:19:54+00:00\",\"dateModified\":\"2014-07-22T04:19:54+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/c5d68eef83c0e4e0ae60176f557c1941\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/nrAPI-output.png\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/nrAPI-output.png\",\"width\":652,\"height\":399,\"caption\":\"HTML result from nrAPI search for \\\"tiger\\\".\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/webdev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beer and Tell July 2014\"}]},{\"@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 July 2014 - 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\/2014\/07\/21\/beer-and-tell-july-2014\/","twitter_misc":{"Written by":"Michael Kelly","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/","url":"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/","name":"Beer and Tell July 2014 - Mozilla Web Development","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/nrAPI-output-600x367.png","datePublished":"2014-07-22T04:19:54+00:00","dateModified":"2014-07-22T04:19:54+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/c5d68eef83c0e4e0ae60176f557c1941"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/#primaryimage","url":"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/nrAPI-output.png","contentUrl":"https:\/\/blog.mozilla.org\/webdev\/files\/2014\/07\/nrAPI-output.png","width":652,"height":399,"caption":"HTML result from nrAPI search for \"tiger\"."},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/webdev\/2014\/07\/21\/beer-and-tell-july-2014\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/webdev\/"},{"@type":"ListItem","position":2,"name":"Beer and Tell July 2014"}]},{"@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\/3898"}],"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=3898"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/3898\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/media?parent=3898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/categories?post=3898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/tags?post=3898"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/coauthors?post=3898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}