Jakub Steiner Designer. Camera Pilot. http://jimmac.musichall.cz/blog 2016-01-29T12:15:00+01:00 Jakub Steiner Rio http://jimmac.musichall.cz/blog/2016-01-29-rio/ 2016-01-29T12:15:00+01:00 2016-01-29T13:49:12+01:00 Article Author <iframe src="//player.vimeo.com/video/153437205" class="image full" width="500" height="500" frameborder="0"> <a href="http://vimeo.com/153437205">Rio UX Design Hackfest</a> from <a href="http://vimeo.com/jimmacfx">jimmac</a> on <a href="https://vimeo.com">Vimeo</a>. </iframe> <p>I was really pleased to see <a href="https://endlessm.com/">Endless</a>, the little company with big plans, initiate a <a href="https://wiki.gnome.org/Hackfests/UxDesign2016">GNOME Design hackfest in Rio</a>. </p> <p>The ground team in Rio arranged a visit to two locations where we met with the users that Endless is targeting. While not strictly a user testing session, it helped to better understand the context of their product and get a glimpse of the lives in Rocinha, one of the Rio famous <a href="https://en.wikipedia.org/wiki/Favela">favelas</a> or a more remote rural Magé. Probably wouldn&rsquo;t have a chance to visit Brazil that way.</p> <p class="image full"> <img alt="" src="/blog/2016-01-29-rio/index/notes.jpg"> <small>Points of diversion</small> </p> <div class="row"> <div class="9u"> During the workshop at the Endless offices we went through many areas we identified as being problematic in both the stock GNOME and Endless OS and tried to identify if we could converge on and cooperate on a common solution. Currently Endless isn&rsquo;t using the stock GNOME 3 for their devices. We aren&rsquo;t focusing as much on the shell now, as there is a ton of work to be done in the app space, but there are a few areas in the shell we could revisit. </div><img class="image 3u" alt="" src="/images/blog/sponsored-gnome-badge-shadow.png"> </div> <p>GNOME could do a little better in terms of discoverability. We investigated the role of the app picker versus the window switcher in the overview and being able to enter the overview on boot. Some design choices have been explained and our solution was reconsidered to be a good way forward for Endless. Unified system menu, window controls, notifications, lock screen/screen shield have been analyzed.</p> <p>Endless demoed how the GNOME app-provided system search has been used to great effect on their mostly offline devices. Think &ldquo;offline google&rdquo;.</p> <p class="row"> <a data-flickr-embed="true" class="image 4u" href="https://www.flickr.com/photos/jakubsteiner/24353027270/in/album-72157663311410929/" title="DSC02567"><img src="https://farm2.staticflickr.com/1608/24353027270_a04b07b1aa.jpg" alt="DSC02567"></a> <a data-flickr-embed="true" class="image 4u" href="https://www.flickr.com/photos/jakubsteiner/24280844809/in/album-72157663311410929/" title="DSC02589"><img src="https://farm2.staticflickr.com/1586/24280844809_0726a9f34a.jpg" alt="DSC02589"></a> <a data-flickr-embed="true" class="image 4u" href="https://www.flickr.com/photos/jakubsteiner/24622392616/in/album-72157663311410929/" title="DSC02616"><img src="https://farm2.staticflickr.com/1678/24622392616_1e0b77e8ab.jpg" alt="DSC02616"></a> </p> <p>Another noteworthy detail was the use of CRT screens. The new mini devices sport a cinch connection to old PAL/NTSC CRT TVs. Such small resolutions and poor quality brings more constraints on the design to keep things legible. This also has had a nice effect in that Endless has investigated some responsive layout solutions for gtk+ they demoed.</p> <p>I also presented GNOME design team&rsquo;s workflow, and the free software toolchain we use. Did a little demo of Inkscape for icon design and wireframing and Blender motion design. </p> <p>Last but not least, I&rsquo;d like to thank the GNOME Foundation for making it possible for me to fly to Rio.</p> <p><a href="https://www.flickr.com/photos/jakubsteiner/albums/72157663311410929/with/24622419076/" class="button big">Rio Hackfest Photos</a></p> New Cantarell Maintainer http://jimmac.musichall.cz/blog/2015-12-10-new-cantarell-maintainer/ 2015-12-10T23:33:00+01:00 2015-12-11T00:04:48+01:00 Article Author <p>GNOME&rsquo;s default UI typeface Cantarell gained a new maintainer, Nikolaus Waxweiler. Nikolaus was on a holy crusade to improve the state of text rendering on Linux by improving <a href="http://freetype.org/">FreeType</a> and lobbying for changes in different projects. While he continues on those efforts, bug reports hinted (pun intended) that GNOME&rsquo;s font rendered worse as FreeType improved so he went on to investigate why. It turns out that Cantarell had many metric related issues and its development was quite stagnant.</p> <p class="image full"> <img alt="" src="/blog/2015-12-10-new-cantarell-maintainer/index/bluezones.jpg"> <small>Cantarell with properly defined Blue Zones</small> </p> <p>The process of making fonts look good even on our crappy LoDPI screens is commonly called <a href="https://github.com/fontforge/fontforge/wiki/How-TT-Hinting-Works"><code>hinting</code></a> and it requires precision. Cantarell ships as an .otf font or OpenType font with Postscript-flavor. Hinting .otf fonts works differently from hinting common TrueType or .ttf fonts. You define several horizontal snapping zones, also called blue zones, like descender, x-height, capital height, ascender height, etc. so that they match your design. That means that the outlines you are designing must as a general rule be placed precisely within these blue zones or the hinting algorithm will ignore them. Blue zones must be constructed to contain everything they should contain. The idea is that a well designed typeface is consistent and regular enough that coarse blue zones describe the design well. The hinting algorithm of the font design application will then place stem information according to those blue zones, among other considerations. For a final rendering, glyphs are snapped to those horizontal blue zones, meaning they are <em>only</em> snapped on the Y-axis. Think ClearType.</p> <p>Cantarell was full of off-by-ones-or-twos and technical don&rsquo;t-do-thats, diacritics were inconsistent and Cyrillics still need a look-over. The bold face was in an even poorer state. Back in June 2013 Adobe&rsquo;s contributed a new high-quality OpenType/Postscript-flavor hinting engine. The problems were only magnified because the new engine actually takes hinting information seriously and will spit out garbage when the font designer isn&rsquo;t careful.</p> <p>Nikolaus has cleaned up the fonts considerably by fixing the blue zones, outline precision to fall within them and numerous other problems. You might also notice that letters like bdfklh are a bit taller for a more harmonious look. It should display consistently at all sizes now.</p> <p>Oh, by the way: FreeType 2.6.2 brings more user-visible changes. If you are on a rolling-release distribution, you might have noticed them already. If you wish to read up more on those changes, Nikolaus wrote a lengthy article about the changes and future plans on <a href="http://freetype.org">freetype.org</a>.</p> <p>For a Cantarell 0.1.0 release we plan to have all accented glyphs fixed. Nikolaus has finished a first pass at diacritics and is now looking for testers. Anyone who deals with diacritics in his/her language, especially central European people, please get the .otf fonts from the <a href="https://git.gnome.org/browse/cantarell-fonts/tree/otf">git repo</a> and report bugs to the <a href="https://bugzilla.gnome.org/page.cgi?id=browse.html&amp;product=cantarell-fonts">GNOME bug tracker</a>.</p> <p>Do note that Nikolaus didn&rsquo;t just dive into maintainership, but wrote most of this post. My incentives to get him set up a blog and post on Planet GNOME have been fruitless so far.</p> Wallpapers http://jimmac.musichall.cz/blog/2015-10-21-wallpapers/ 2015-10-21T18:27:00+02:00 2015-10-23T11:44:40+02:00 Article Author <p>Part of <a href="http://gnome.org">GNOME</a>&rsquo;s visual identity are the default wallpapers. Ever since GNOME3 was released, regardless of the release version, you can tell a stock GNOME desktop from afar. Unlike what most Linux distributions do, we don&rsquo;t change the wallpaper thematically from release to release and there is a strong focus on <em>continuity</em>.</p> <p class="image full"> <img alt="" src="/blog/2015-10-21-wallpapers/index/adwaita-318.jpg"> <small>Adwaita 3.18 Day</small> </p> <p>While both <a href="https://design.google.com/articles/the-art-behind-android-marshmallows-new-wallpapers/">Android</a> and <a href="https://www.youtube.com/watch?v=hL8BBOwupcI">Windows</a> are going analog, we&rsquo;re not that hipster. If you follow my journal, you probably wouldn&rsquo;t be shocked to hear I mainly use <a href="http://blender.org">Blender</a> to create the wallpapers. In the past <a href="http://inkscape.org">Inkscape</a> took a major part in the execution, but its <a href="https://bugs.launchpad.net/inkscape/+bug/180693">lacking implementation of gradients</a> leads to dramatic <a href="https://en.wikipedia.org/wiki/Colour_banding">color banding</a> in the subtle gradients we need for the wallpapers. I used to tediously compensate for this in <a href="http://gimp.org">GIMP</a>, using noisify filters while working in high bit depth and then reducing color using <a href="https://en.wikipedia.org/wiki/GEGL">GEGL</a>&rsquo;s magical color reduction operation that Hans Peter Jensen wrote a while a back. It allows to chose various dithering algorithms when lowering the bit depth.</p> <p>However thanks to <a href="http://wiki.blender.org/index.php/Dev:2.6/Source/Render/Cycles">Cycles</a>, we get the noise for free :) Actually it&rsquo;s one of the things I spend hours and hours waiting for getting cleaned up with iterations. But it does help with color banding.</p> <p class="image full"> <img type="image/svg+xml" alt="" src="/blog/2015-10-21-wallpapers/index/blender-rendering.jpg"> <small>Blender rendering the night variant of the 3.20 Adwaita wallpaper (work in progress).</small> </p> <p>In my work I have always focused on execution. Many artists spend a great deal of time constructing a solid concept and have everything thought out. But unless the result is well executed, the whole thing falls apart. GNOME Wallpapers are really <em>just stripes and triangles</em>. But it&rsquo;s the detail, the light play, the sharpness, not too much high density information that make it all work.</p> <p>First iterations of the GNOME 3.20 variants are beginning to land in the <a href="https://git.gnome.org/browse/gnome-backgrounds" class="button small">gnome-backgrounds</a> module. Check it out.</p> <p><p class="image 3u"> <a href="/blog/2015-10-21-wallpapers/index/morning.jpg" data-lightbox="wall"><img alt="" src="/blog/2015-10-21-wallpapers/index/morning-thumb.jpg"></a> <small>Morning</small> </p> <p class="image 3u"> <a href="/blog/2015-10-21-wallpapers/index/day.jpg" data-lightbox="wall"><img alt="" src="/blog/2015-10-21-wallpapers/index/day-thumb.jpg"></a> <small>Day</small> </p> <p class="image 3u"> <a href="/blog/2015-10-21-wallpapers/index/night.jpg" data-lightbox="wall"><img alt="" src="/blog/2015-10-21-wallpapers/index/night-thumb.jpg"></a> <small>Night</small> </p> <p class="image 3u"> <a href="/blog/2015-10-21-wallpapers/index/lock.jpg" data-lightbox="wall"><img alt="" src="/blog/2015-10-21-wallpapers/index/lock-thumb.jpg"></a> <small>Lock Screen</small> </p></p> SVG animation http://jimmac.musichall.cz/blog/2015-10-13-svg-animation/ 2015-10-13T13:27:00+02:00 2015-10-14T13:23:13+02:00 Article Author <p>I haven&rsquo;t written a post in quite a while, so I decided to document my failure to come up with a viable alternative to the translatable animations we use in <a href="https://help.gnome.org/users/gnome-help/3.18/getting-started.html.en">Getting Started</a> documentation. So let&rsquo;s start with what&rsquo;s wrong with it. Despite being far more maintainable than a screencast, it&rsquo;s still a major hassle to keep the videos in sync with the developing designs. Every translation requires a re-render of all the frames and it quickly grows into gigabytes per language.</p> <p class="image full"> <video controls class="image full"> <source src="/blog/2015-10-13-svg-animation/index/gnome-windows-and-workspaces.webm" type="video/webm"> <a href="/blog/2015-10-13-svg-animation/index/gnome-windows-and-workspaces.webm">Czech version of one of the Getting Started videos</a> </video> <small>Czech version of one of the Getting Started videos</small> </p> <p>If you&rsquo;re interested in seeing how these were produced, see the <a href="https://help.gnome.org/users/gnome-help/3.18/getting-started.html.en">Behind the Scenes of getting Started</a> video.</p> <p>The animations themselves aren&rsquo;t super complex. Basic transforms (translation, scale and rotation) and opacity is all that&rsquo;s needed. And because we are using translatable SVGs in Mallard, it was time to look into SVG animation. There are numerous options available to animate in SVG, which already gave me a hint that none of them will work properly for my use case. I hate being right. </p> <h1>SMIL</h1> <p>I&rsquo;ll starts with the one I like least. The inline garbage approach. SMIL. Each attribute of an SVG element is animateable. Creating a global sequence using this by hand is close to impossible. Its capabilities do include a few extras like animating an object <em>along a path</em>, but in general I cannot imagine editing this by hand. Incorporating Inkscape into the workflow seemed feasible first. Inkscape will not touch the XML it doesn&rsquo;t know about. It will not clean out any of the animation stuff when you save. The xlink namespace definition to animate along path seems to have worked, but I can&rsquo;t figure out some weird offsets. Groups usually get some matrix transforms as soon as you reposition them. It all may boil down to Inkscape using its own coordinate system, I don&rsquo;t know. I haven&rsquo;t succeeded to bolt some animation on the Inkscape generated SVG.</p> <p class="image full"> <img src="/blog/2015-10-13-svg-animation/index/smil.svg"> <small>About as complex of a SMIL animation as I can produce :)</small> </p> <h1>CSS</h1> <p>A much more appealing was the concept of using CSS animation. We do a lot of transitions and some animation in gtk+, so it would have been great to reuse the same technology here. While CSS transitions are spot on, animation with a sense of a global timeline is not really the use case for the web. Usually animation in the intended context is an individual transform happening after an event triggered. Creating a sequence of various objects animating in a global timeline is pretty awkward. Especially if you want to loop the whole animation infinitely. The only tools for your disposal is either a time offset or relative time keyframes, keeping all objects&rsquo; animation the same length.</p> <p class="image full"> <img src="/blog/2015-10-13-svg-animation/index/inline-css.svg"> <small>CSS Based animation of a #cursor1 with a JS playback reset button that doesn&rsquo;t work. ;)</small> </p> <p>I also ran into Firefox and Webkit interpreting <code>transform-origin</code> differently.</p> <pre><code>.run-animation { transform-origin: top left; animation: cursor-move 2s ease 1s forwards, fade-in 1s linear 0s, cursor-click .25s ease 3s alternate 2; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes cursor-move { from { opacity: 1; } to { opacity: 1; transform: translate(100px,-100px);} } @keyframes cursor-click { from { transform: translate(100px,-100px) scale(1); } to { transform: translate(100px,-100px) scale(.5); } } </code></pre> <p>The above CSS uses <code>animation-delay</code>. It might be possible to have all keyframes last the same time and use the keyframes relative keyframing for timing (duplicate same keyframe to &ldquo;hold&rdquo;). I can&rsquo;t imagine retiming or generally modify an existing animation hand constructed using CSS&rsquo; keyframes though. A visual tool with a timeline would be necessary. </p> <h1>Javascript</h1> <p>There are many js based frameworks to aid creating and animating SVG documents in realtime, but none of them seem to aid me in creating a global complex animation using assets created in Inkscape. I looked at Google Webdesigner next.</p> <ul> <li><a href="http://julian.com/research/velocity/">http://julian.com/research/velocity/</a></li> <li><a href="http://snapsvg.io/">http://snapsvg.io/</a></li> <li><a href="http://raphaeljs.com/">http://raphaeljs.com/</a></li> </ul> <h1>Google Webdesigner</h1> <p><a href="https://www.google.com/webdesigner/">Google Webdesigner</a> has all the necessary visual tools like property keyframing and a global timeline. Sadly it produces a rather less self contained set of html, js and css files. I didn&rsquo;t figure out a way how that could be brought into Mallard.</p> <iframe class="image full" height=600 src="/blog/2015-10-13-svg-animation/index/index.html"></iframe> <p>In the end, even though the animations don&rsquo;t seem to be that complex, maintaining them by hand doesn&rsquo;t seem very doable. A visual editor is required. If Google Webdesigner can be taught to produce a standalone SVG or Mallard taught to use iframes, I&rsquo;m all ear. Any pointers to a similar tool is also welcome.</p> <link rel="alternate" href="http://jimmac.musichall.cz/blog/2015-10-13-svg-animation/index/"/> <id>http://jimmac.musichall.cz/blog/2015-10-13-svg-animation/index/</id> <published>2015-10-13T02:00:00+02:00</published> <updated>2015-10-13T15:05:04+02:00</updated> <author> <name>Article Author</name> </author> <content type="html"><!DOCTYPE html> <html><head data-gwd-animation-mode="proMode"><meta name="GCD" content="YTk3ODQ3ZWZhN2I4NzZmMzBkNTEwYjJl70abdc7f1ca3cfc2a447552c31b1d67c"/> <meta charset="utf-8"> <meta name="generator" content="Google Web Designer 1.4.2.0915"> <meta name="template" content="Banner 2.2.4"> <meta name="environment" content="gwd-genericad"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css" id="gwd-lightbox-style">.gwd-lightbox{overflow:hidden}</style><style data-exports-type="gwd-pagedeck" data-gwd-node="true" type="text/css">.gwd-pagedeck{position:relative}.gwd-pagedeck>.gwd-page.transparent{opacity:0}.gwd-pagedeck>.gwd-page{position:absolute;top:0;left:0;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:transform,opacity;transition-property:transform,opacity}.gwd-pagedeck>.gwd-page.linear{transition-timing-function:linear}.gwd-pagedeck>.gwd-page.ease-in{transition-timing-function:ease-in}.gwd-pagedeck>.gwd-page.ease-out{transition-timing-function:ease-out}.gwd-pagedeck>.gwd-page.ease{transition-timing-function:ease}.gwd-pagedeck>.gwd-page.ease-in-out{transition-timing-function:ease-in-out}</style><style data-exports-type="gwd-image" data-gwd-node="true" type="text/css">img[is=gwd-image].scaled-proportionally{background-repeat:no-repeat;background-position:center}</style><style data-exports-type="gwd-page" data-gwd-node="true" type="text/css">.gwd-inactive{visibility:hidden}</style> <style type="text/css" media="screen">html,body{width:100%;height:100%;margin:0px}.gwd-page-container{position:relative;width:100%;height:100%}.gwd-page-content{-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);-moz-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);-webkit-perspective:1400px;-moz-perspective:1400px;perspective:1400px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;position:absolute;background-color:transparent}.gwd-page-wrapper{position:absolute;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0);background-color:#fff}.gwd-page-size{width:800px;height:600px}.gwd-img-1dkf{position:absolute;width:840px;height:400px;left:-11px;top:99px}.gwd-img-1uzx{position:absolute;opacity:0;left:449px;top:379px;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);-moz-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px}.gwd-img-4pz1{position:absolute;width:220px;height:240px;opacity:0;left:469px;top:171px}@-webkit-keyframes gwd-gen-1tchgwdanimation_gwd-keyframes{0%{opacity:0;left:469px;top:171px;-webkit-animation-timing-function:ease}45.83%{opacity:0;left:469px;top:171px;-webkit-animation-timing-function:ease}52.78%{opacity:1;left:469px;top:197px;-webkit-animation-timing-function:ease}72.22%{opacity:1;left:469px;top:197px;-webkit-animation-timing-function:ease}79.17%{opacity:0;left:469px;top:234px;-webkit-animation-timing-function:linear}100%{opacity:0;left:469px;top:234px;-webkit-animation-timing-function:linear}}@-moz-keyframes gwd-gen-1tchgwdanimation_gwd-keyframes{0%{opacity:0;left:469px;top:171px;-moz-animation-timing-function:ease}45.83%{opacity:0;left:469px;top:171px;-moz-animation-timing-function:ease}52.78%{opacity:1;left:469px;top:197px;-moz-animation-timing-function:ease}72.22%{opacity:1;left:469px;top:197px;-moz-animation-timing-function:ease}79.17%{opacity:0;left:469px;top:234px;-moz-animation-timing-function:linear}100%{opacity:0;left:469px;top:234px;-moz-animation-timing-function:linear}}@keyframes gwd-gen-1tchgwdanimation_gwd-keyframes{0%{opacity:0;left:469px;top:171px;animation-timing-function:ease}45.83%{opacity:0;left:469px;top:171px;animation-timing-function:ease}52.78%{opacity:1;left:469px;top:197px;animation-timing-function:ease}72.22%{opacity:1;left:469px;top:197px;animation-timing-function:ease}79.17%{opacity:0;left:469px;top:234px;animation-timing-function:linear}100%{opacity:0;left:469px;top:234px;animation-timing-function:linear}}#page1.gwd-play-animation .gwd-gen-7oargwdanimation{-webkit-animation:gwd-gen-7oargwdanimation_gwd-keyframes 7.2s linear 0s infinite normal forwards;-moz-animation:gwd-gen-7oargwdanimation_gwd-keyframes 7.2s linear 0s infinite normal forwards;animation:gwd-gen-7oargwdanimation_gwd-keyframes 7.2s linear 0s infinite normal forwards}#page1.gwd-play-animation .gwd-gen-1tchgwdanimation{-webkit-animation:gwd-gen-1tchgwdanimation_gwd-keyframes 7.2s linear 0s infinite normal forwards;-moz-animation:gwd-gen-1tchgwdanimation_gwd-keyframes 7.2s linear 0s infinite normal forwards;animation:gwd-gen-1tchgwdanimation_gwd-keyframes 7.2s linear 0s infinite normal forwards}@-webkit-keyframes gwd-gen-7oargwdanimation_gwd-keyframes{0%{opacity:0;left:449px;top:379px;-webkit-transform-origin:50% 50%;-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px;-webkit-animation-timing-function:linear}2.78%{opacity:0;left:449px;top:379px;-webkit-transform-origin:50% 50%;-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px;-webkit-animation-timing-function:ease}15.28%{opacity:1;left:449px;top:379px;-webkit-transform-origin:50% 50%;-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px;-webkit-animation-timing-function:ease}37.5%{opacity:0.999999940395355;left:646px;top:192px;-webkit-transform-origin:0px 0px 0px;-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px;-webkit-animation-timing-function:linear}44.44%{opacity:0.999999940395355;left:646px;top:192px;-webkit-transform-origin:0px 0px;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;-webkit-animation-timing-function:linear}45.83%{opacity:0.999999940395355;left:646px;top:192px;-webkit-transform-origin:0px 0px;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);width:24px;height:36px;-webkit-animation-timing-function:linear}48.61%{opacity:0.999999940395355;left:646px;top:192px;-webkit-transform-origin:0px 0px;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;-webkit-animation-timing-function:linear}58.33%{opacity:0.999999940395355;left:646px;top:192px;-webkit-transform-origin:0px 0px;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;-webkit-animation-timing-function:ease}65.28%{opacity:0.999999940395355;left:508px;top:393px;-webkit-transform-origin:0px 0px;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;-webkit-animation-timing-function:linear}70.83%{left:508px;top:393px;width:32px;height:48px;-webkit-animation-timing-function:linear}72.22%{opacity:0.999999940395355;left:508px;top:393px;-webkit-transform-origin:0px 0px;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);width:24px;height:36px;-webkit-animation-timing-function:linear}75%{opacity:0.999999940395355;left:508px;top:393px;-webkit-transform-origin:0px 0px;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;-webkit-animation-timing-function:linear}88.89%{left:508px;top:393px;-webkit-animation-timing-function:linear}100%{opacity:0;left:508px;top:393px;-webkit-transform-origin:0px 0px;-webkit-transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;-webkit-animation-timing-function:linear}}@-moz-keyframes gwd-gen-7oargwdanimation_gwd-keyframes{0%{opacity:0;left:449px;top:379px;-moz-transform-origin:50% 50%;-moz-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px;-moz-animation-timing-function:linear}2.78%{opacity:0;left:449px;top:379px;-moz-transform-origin:50% 50%;-moz-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px;-moz-animation-timing-function:ease}15.28%{opacity:1;left:449px;top:379px;-moz-transform-origin:50% 50%;-moz-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px;-moz-animation-timing-function:ease}37.5%{opacity:0.999999940395355;left:646px;top:192px;-moz-transform-origin:0px 0px 0px;-moz-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px;-moz-animation-timing-function:linear}44.44%{opacity:0.999999940395355;left:646px;top:192px;-moz-transform-origin:0px 0px;-moz-transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;-moz-animation-timing-function:linear}45.83%{opacity:0.999999940395355;left:646px;top:192px;-moz-transform-origin:0px 0px;-moz-transform:matrix(1, 0, 0, 1, 0, 0);width:24px;height:36px;-moz-animation-timing-function:linear}48.61%{opacity:0.999999940395355;left:646px;top:192px;-moz-transform-origin:0px 0px;-moz-transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;-moz-animation-timing-function:linear}58.33%{opacity:0.999999940395355;left:646px;top:192px;-moz-transform-origin:0px 0px;-moz-transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;-moz-animation-timing-function:ease}65.28%{opacity:0.999999940395355;left:508px;top:393px;-moz-transform-origin:0px 0px;-moz-transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;-moz-animation-timing-function:linear}70.83%{left:508px;top:393px;width:32px;height:48px;-moz-animation-timing-function:linear}72.22%{opacity:0.999999940395355;left:508px;top:393px;-moz-transform-origin:0px 0px;-moz-transform:matrix(1, 0, 0, 1, 0, 0);width:24px;height:36px;-moz-animation-timing-function:linear}75%{opacity:0.999999940395355;left:508px;top:393px;-moz-transform-origin:0px 0px;-moz-transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;-moz-animation-timing-function:linear}88.89%{left:508px;top:393px;-moz-animation-timing-function:linear}100%{opacity:0;left:508px;top:393px;-moz-transform-origin:0px 0px;-moz-transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;-moz-animation-timing-function:linear}}@keyframes gwd-gen-7oargwdanimation_gwd-keyframes{0%{opacity:0;left:449px;top:379px;transform-origin:50% 50%;transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px;animation-timing-function:linear}2.78%{opacity:0;left:449px;top:379px;transform-origin:50% 50%;transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px;animation-timing-function:ease}15.28%{opacity:1;left:449px;top:379px;transform-origin:50% 50%;transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px;animation-timing-function:ease}37.5%{opacity:0.999999940395355;left:646px;top:192px;transform-origin:0px 0px 0px;transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);width:32px;height:48px;animation-timing-function:linear}44.44%{opacity:0.999999940395355;left:646px;top:192px;transform-origin:0px 0px;transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;animation-timing-function:linear}45.83%{opacity:0.999999940395355;left:646px;top:192px;transform-origin:0px 0px;transform:matrix(1, 0, 0, 1, 0, 0);width:24px;height:36px;animation-timing-function:linear}48.61%{opacity:0.999999940395355;left:646px;top:192px;transform-origin:0px 0px;transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;animation-timing-function:linear}58.33%{opacity:0.999999940395355;left:646px;top:192px;transform-origin:0px 0px;transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;animation-timing-function:ease}65.28%{opacity:0.999999940395355;left:508px;top:393px;transform-origin:0px 0px;transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;animation-timing-function:linear}70.83%{left:508px;top:393px;width:32px;height:48px;animation-timing-function:linear}72.22%{opacity:0.999999940395355;left:508px;top:393px;transform-origin:0px 0px;transform:matrix(1, 0, 0, 1, 0, 0);width:24px;height:36px;animation-timing-function:linear}75%{opacity:0.999999940395355;left:508px;top:393px;transform-origin:0px 0px;transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;animation-timing-function:linear}88.89%{left:508px;top:393px;animation-timing-function:linear}100%{opacity:0;left:508px;top:393px;transform-origin:0px 0px;transform:matrix(1, 0, 0, 1, 0, 0);width:32px;height:48px;animation-timing-function:linear}}</style> <script data-source="googbase_min.js" data-version="3" data-exports-type="googbase" type="text/javascript">+function(){(window.goog=window.goog||{}).inherits=function(a,d){function b(){}b.prototype=d.prototype;a.b=d.prototype;a.prototype=new b;a.prototype.constructor=a;a.a=function(a,b,f){for(var e=Array(arguments.length-2),c=2;c<arguments.length;c++)e[c-2]=arguments[c];return d.prototype[b].apply(a,e)}};}() </script> <script data-source="gwd_webcomponents_min.js" data-version="4" data-exports-type="gwd_webcomponents" type="text/javascript">/** * @license * Copyright (c) 2014 The Polymer Project Authors. All rights reserved. * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt * Code distributed by Google as part of the polymer project is also * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */ // @version 0.7.12 "undefined"==typeof WeakMap&&!function(){var e=Object.defineProperty,t=Date.now()%1e9,n=function(){this.name="__st"+(1e9*Math.random()>>>0)+(t++ +"__")};n.prototype={set:function(t,n){var o=t[this.name];return o&&o[0]===t?o[1]=n:e(t,this.name,{value:[t,n],writable:!0}),this},get:function(e){var t;return(t=e[this.name])&&t[0]===e?t[1]:void 0},"delete":function(e){var t=e[this.name];return t&&t[0]===e?(t[0]=t[1]=void 0,!0):!1},has:function(e){var t=e[this.name];return t?t[0]===e:!1}},window.WeakMap=n}(),function(e){function t(e){_.push(e),b||(b=!0,w(o))}function n(e){return window.ShadowDOMPolyfill&&window.ShadowDOMPolyfill.wrapIfNeeded(e)||e}function o(){b=!1;var e=_;_=[],e.sort(function(e,t){return e.uid_-t.uid_});var t=!1;e.forEach(function(e){var n=e.takeRecords();r(e),n.length&&(e.callback_(n,e),t=!0)}),t&&o()}function r(e){e.nodes_.forEach(function(t){var n=h.get(t);n&&n.forEach(function(t){t.observer===e&&t.removeTransientObservers()})})}function i(e,t){for(var n=e;n;n=n.parentNode){var o=h.get(n);if(o)for(var r=0;r<o.length;r++){var i=o[r],a=i.options;if(n===e||a.subtree){var d=t(a);d&&i.enqueue(d)}}}}function a(e){this.callback_=e,this.nodes_=[],this.records_=[],this.uid_=++E}function d(e,t){this.type=e,this.target=t,this.addedNodes=[],this.removedNodes=[],this.previousSibling=null,this.nextSibling=null,this.attributeName=null,this.attributeNamespace=null,this.oldValue=null}function s(e){var t=new d(e.type,e.target);return t.addedNodes=e.addedNodes.slice(),t.removedNodes=e.removedNodes.slice(),t.previousSibling=e.previousSibling,t.nextSibling=e.nextSibling,t.attributeName=e.attributeName,t.attributeNamespace=e.attributeNamespace,t.oldValue=e.oldValue,t}function u(e,t){return y=new d(e,t)}function c(e){return N?N:(N=s(y),N.oldValue=e,N)}function f(){y=N=void 0}function l(e){return e===N||e===y}function p(e,t){return e===t?e:N&&l(e)?N:null}function m(e,t,n){this.observer=e,this.target=t,this.options=n,this.transientObservedNodes=[]}var w,h=new WeakMap;if(/Trident|Edge/.test(navigator.userAgent))w=setTimeout;else if(window.setImmediate)w=window.setImmediate;else{var v=[],g=String(Math.random());window.addEventListener("message",function(e){if(e.data===g){var t=v;v=[],t.forEach(function(e){e()})}}),w=function(e){v.push(e),window.postMessage(g,"*")}}var b=!1,_=[],E=0;a.prototype={observe:function(e,t){if(e=n(e),!t.childList&&!t.attributes&&!t.characterData||t.attributeOldValue&&!t.attributes||t.attributeFilter&&t.attributeFilter.length&&!t.attributes||t.characterDataOldValue&&!t.characterData)throw new SyntaxError;var o=h.get(e);o||h.set(e,o=[]);for(var r,i=0;i<o.length;i++)if(o[i].observer===this){r=o[i],r.removeListeners(),r.options=t;break}r||(r=new m(this,e,t),o.push(r),this.nodes_.push(e)),r.addListeners()},disconnect:function(){this.nodes_.forEach(function(e){for(var t=h.get(e),n=0;n<t.length;n++){var o=t[n];if(o.observer===this){o.removeListeners(),t.splice(n,1);break}}},this),this.records_=[]},takeRecords:function(){var e=this.records_;return this.records_=[],e}};var y,N;m.prototype={enqueue:function(e){var n=this.observer.records_,o=n.length;if(n.length>0){var r=n[o-1],i=p(r,e);if(i)return void(n[o-1]=i)}else t(this.observer);n[o]=e},addListeners:function(){this.addListeners_(this.target)},addListeners_:function(e){var t=this.options;t.attributes&&e.addEventListener("DOMAttrModified",this,!0),t.characterData&&e.addEventListener("DOMCharacterDataModified",this,!0),t.childList&&e.addEventListener("DOMNodeInserted",this,!0),(t.childList||t.subtree)&&e.addEventListener("DOMNodeRemoved",this,!0)},removeListeners:function(){this.removeListeners_(this.target)},removeListeners_:function(e){var t=this.options;t.attributes&&e.removeEventListener("DOMAttrModified",this,!0),t.characterData&&e.removeEventListener("DOMCharacterDataModified",this,!0),t.childList&&e.removeEventListener("DOMNodeInserted",this,!0),(t.childList||t.subtree)&&e.removeEventListener("DOMNodeRemoved",this,!0)},addTransientObserver:function(e){if(e!==this.target){this.addListeners_(e),this.transientObservedNodes.push(e);var t=h.get(e);t||h.set(e,t=[]),t.push(this)}},removeTransientObservers:function(){var e=this.transientObservedNodes;this.transientObservedNodes=[],e.forEach(function(e){this.removeListeners_(e);for(var t=h.get(e),n=0;n<t.length;n++)if(t[n]===this){t.splice(n,1);break}},this)},handleEvent:function(e){switch(e.stopImmediatePropagation(),e.type){case"DOMAttrModified":var t=e.attrName,n=e.relatedNode.namespaceURI,o=e.target,r=new u("attributes",o);r.attributeName=t,r.attributeNamespace=n;var a=e.attrChange===MutationEvent.ADDITION?null:e.prevValue;i(o,function(e){return!e.attributes||e.attributeFilter&&e.attributeFilter.length&&-1===e.attributeFilter.indexOf(t)&&-1===e.attributeFilter.indexOf(n)?void 0:e.attributeOldValue?c(a):r});break;case"DOMCharacterDataModified":var o=e.target,r=u("characterData",o),a=e.prevValue;i(o,function(e){return e.characterData?e.characterDataOldValue?c(a):r:void 0});break;case"DOMNodeRemoved":this.addTransientObserver(e.target);case"DOMNodeInserted":var d,s,l=e.target;"DOMNodeInserted"===e.type?(d=[l],s=[]):(d=[],s=[l]);var p=l.previousSibling,m=l.nextSibling,r=u("childList",e.target.parentNode);r.addedNodes=d,r.removedNodes=s,r.previousSibling=p,r.nextSibling=m,i(e.relatedNode,function(e){return e.childList?r:void 0})}f()}},e.JsMutationObserver=a,e.MutationObserver||(e.MutationObserver=a)}(window),window.CustomElements=window.CustomElements||{flags:{}},function(e){var t=e.flags,n=[],o=function(e){n.push(e)},r=function(){n.forEach(function(t){t(e)})};e.addModule=o,e.initializeModules=r,e.hasNative=Boolean(document.registerElement),e.isIE=/Trident/.test(navigator.userAgent),e.useNative=!t.register&&e.hasNative&&!window.ShadowDOMPolyfill&&(!window.HTMLImports||window.HTMLImports.useNative)}(window.CustomElements),window.CustomElements.addModule(function(e){function t(e,t){n(e,function(e){return t(e)?!0:void o(e,t)}),o(e,t)}function n(e,t,o){var r=e.firstElementChild;if(!r)for(r=e.firstChild;r&&r.nodeType!==Node.ELEMENT_NODE;)r=r.nextSibling;for(;r;)t(r,o)!==!0&&n(r,t,o),r=r.nextElementSibling;return null}function o(e,n){for(var o=e.shadowRoot;o;)t(o,n),o=o.olderShadowRoot}function r(e,t){i(e,t,[])}function i(e,t,n){if(e=window.wrap(e),!(n.indexOf(e)>=0)){n.push(e);for(var o,r=e.querySelectorAll("link[rel="+a+"]"),d=0,s=r.length;s>d&&(o=r[d]);d++)o["import"]&&i(o["import"],t,n);t(e)}}var a=window.HTMLImports?window.HTMLImports.IMPORT_LINK_TYPE:"none";e.forDocumentTree=r,e.forSubtree=t}),window.CustomElements.addModule(function(e){function t(e,t){return n(e,t)||o(e,t)}function n(t,n){return e.upgrade(t,n)?!0:void(n&&a(t))}function o(e,t){b(e,function(e){return n(e,t)?!0:void 0})}function r(e){N.push(e),y||(y=!0,setTimeout(i))}function i(){y=!1;for(var e,t=N,n=0,o=t.length;o>n&&(e=t[n]);n++)e();N=[]}function a(e){E?r(function(){d(e)}):d(e)}function d(e){e.__upgraded__&&!e.__attached&&(e.__attached=!0,e.attachedCallback&&e.attachedCallback())}function s(e){u(e),b(e,function(e){u(e)})}function u(e){E?r(function(){c(e)}):c(e)}function c(e){e.__upgraded__&&e.__attached&&(e.__attached=!1,e.detachedCallback&&e.detachedCallback())}function f(e){for(var t=e,n=window.wrap(document);t;){if(t==n)return!0;t=t.parentNode||t.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&t.host}}function l(e){if(e.shadowRoot&&!e.shadowRoot.__watched){g.dom&&console.log("watching shadow-root for: ",e.localName);for(var t=e.shadowRoot;t;)w(t),t=t.olderShadowRoot}}function p(e,n){if(g.dom){var o=n[0];if(o&&"childList"===o.type&&o.addedNodes&&o.addedNodes){for(var r=o.addedNodes[0];r&&r!==document&&!r.host;)r=r.parentNode;var i=r&&(r.URL||r._URL||r.host&&r.host.localName)||"";i=i.split("/?").shift().split("/").pop()}console.group("mutations (%d) [%s]",n.length,i||"")}var a=f(e);n.forEach(function(e){"childList"===e.type&&(M(e.addedNodes,function(e){e.localName&&t(e,a)}),M(e.removedNodes,function(e){e.localName&&s(e)}))}),g.dom&&console.groupEnd()}function m(e){for(e=window.wrap(e),e||(e=window.wrap(document));e.parentNode;)e=e.parentNode;var t=e.__observer;t&&(p(e,t.takeRecords()),i())}function w(e){if(!e.__observer){var t=new MutationObserver(p.bind(this,e));t.observe(e,{childList:!0,subtree:!0}),e.__observer=t}}function h(e){e=window.wrap(e),g.dom&&console.group("upgradeDocument: ",e.baseURI.split("/").pop());var n=e===window.wrap(document);t(e,n),w(e),g.dom&&console.groupEnd()}function v(e){_(e,h)}var g=e.flags,b=e.forSubtree,_=e.forDocumentTree,E=!window.MutationObserver||window.MutationObserver===window.JsMutationObserver;e.hasPolyfillMutations=E;var y=!1,N=[],M=Array.prototype.forEach.call.bind(Array.prototype.forEach),O=Element.prototype.createShadowRoot;O&&(Element.prototype.createShadowRoot=function(){var e=O.call(this);return window.CustomElements.watchShadow(this),e}),e.watchShadow=l,e.upgradeDocumentTree=v,e.upgradeDocument=h,e.upgradeSubtree=o,e.upgradeAll=t,e.attached=a,e.takeRecords=m}),window.CustomElements.addModule(function(e){function t(t,o){if(!t.__upgraded__&&t.nodeType===Node.ELEMENT_NODE){var r=t.getAttribute("is"),i=e.getRegisteredDefinition(t.localName)||e.getRegisteredDefinition(r);if(i&&(r&&i.tag==t.localName||!r&&!i["extends"]))return n(t,i,o)}}function n(t,n,r){return a.upgrade&&console.group("upgrade:",t.localName),n.is&&t.setAttribute("is",n.is),o(t,n),t.__upgraded__=!0,i(t),r&&e.attached(t),e.upgradeSubtree(t,r),a.upgrade&&console.groupEnd(),t}function o(e,t){Object.__proto__?e.__proto__=t.prototype:(r(e,t.prototype,t["native"]),e.__proto__=t.prototype)}function r(e,t,n){for(var o={},r=t;r!==n&&r!==HTMLElement.prototype;){for(var i,a=Object.getOwnPropertyNames(r),d=0;i=a[d];d++)o[i]||(Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(r,i)),o[i]=1);r=Object.getPrototypeOf(r)}}function i(e){e.createdCallback&&e.createdCallback()}var a=e.flags;e.upgrade=t,e.upgradeWithDefinition=n,e.implementPrototype=o}),window.CustomElements.addModule(function(e){function t(t,o){var s=o||{};if(!t)throw new Error("document.registerElement: first argument `name` must not be empty");if(t.indexOf("-")<0)throw new Error("document.registerElement: first argument ('name') must contain a dash ('-'). Argument provided was '"+String(t)+"'.");if(r(t))throw new Error("Failed to execute 'registerElement' on 'Document': Registration failed for type '"+String(t)+"'. The type name is invalid.");if(u(t))throw new Error("DuplicateDefinitionError: a type with name '"+String(t)+"' is already registered");return s.prototype||(s.prototype=Object.create(HTMLElement.prototype)),s.__name=t.toLowerCase(),s.lifecycle=s.lifecycle||{},s.ancestry=i(s["extends"]),a(s),d(s),n(s.prototype),c(s.__name,s),s.ctor=f(s),s.ctor.prototype=s.prototype,s.prototype.constructor=s.ctor,e.ready&&v(document),s.ctor}function n(e){if(!e.setAttribute._polyfilled){var t=e.setAttribute;e.setAttribute=function(e,n){o.call(this,e,n,t)};var n=e.removeAttribute;e.removeAttribute=function(e){o.call(this,e,null,n)},e.setAttribute._polyfilled=!0}}function o(e,t,n){e=e.toLowerCase();var o=this.getAttribute(e);n.apply(this,arguments);var r=this.getAttribute(e);this.attributeChangedCallback&&r!==o&&this.attributeChangedCallback(e,o,r)}function r(e){for(var t=0;t<y.length;t++)if(e===y[t])return!0}function i(e){var t=u(e);return t?i(t["extends"]).concat([t]):[]}function a(e){for(var t,n=e["extends"],o=0;t=e.ancestry[o];o++)n=t.is&&t.tag;e.tag=n||e.__name,n&&(e.is=e.__name)}function d(e){if(!Object.__proto__){var t=HTMLElement.prototype;if(e.is){var n=document.createElement(e.tag);t=Object.getPrototypeOf(n)}for(var o,r=e.prototype,i=!1;r;)r==t&&(i=!0),o=Object.getPrototypeOf(r),o&&(r.__proto__=o),r=o;i||console.warn(e.tag+" prototype not found in prototype chain for "+e.is),e["native"]=t}}function s(e){return b(O(e.tag),e)}function u(e){return e?N[e.toLowerCase()]:void 0}function c(e,t){N[e]=t}function f(e){return function(){return s(e)}}function l(e,t,n){return e===M?p(t,n):D(e,t)}function p(e,t){e&&(e=e.toLowerCase()),t&&(t=t.toLowerCase());var n=u(t||e);if(n){if(e==n.tag&&t==n.is)return new n.ctor;if(!t&&!n.is)return new n.ctor}var o;return t?(o=p(e),o.setAttribute("is",t),o):(o=O(e),e.indexOf("-")>=0&&_(o,HTMLElement),o)}function m(e,t){var n=e[t];e[t]=function(){var e=n.apply(this,arguments);return g(e),e}}var w,h=e.isIE,v=e.upgradeDocumentTree,g=e.upgradeAll,b=e.upgradeWithDefinition,_=e.implementPrototype,E=e.useNative,y=["annotation-xml","color-profile","font-face","font-face-src","font-face-uri","font-face-format","font-face-name","missing-glyph"],N={},M="http://www.w3.org/1999/xhtml",O=document.createElement.bind(document),D=document.createElementNS.bind(document);w=Object.__proto__||E?function(e,t){return e instanceof t}:function(e,t){if(e instanceof t)return!0;for(var n=e;n;){if(n===t.prototype)return!0;n=n.__proto__}return!1},m(Node.prototype,"cloneNode"),m(document,"importNode"),h&&!function(){var e=document.importNode;document.importNode=function(){var t=e.apply(document,arguments);if(t.nodeType==t.DOCUMENT_FRAGMENT_NODE){var n=document.createDocumentFragment();return n.appendChild(t),n}return t}}(),document.registerElement=t,document.createElement=p,document.createElementNS=l,e.registry=N,e["instanceof"]=w,e.reservedTagList=y,e.getRegisteredDefinition=u,document.register=document.registerElement}),function(e){function t(){a(window.wrap(document)),window.CustomElements.ready=!0;var e=window.requestAnimationFrame||function(e){setTimeout(e,16)};e(function(){setTimeout(function(){window.CustomElements.readyTime=Date.now(),window.HTMLImports&&(window.CustomElements.elapsed=window.CustomElements.readyTime-window.HTMLImports.readyTime),document.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0}))})})}var n=e.useNative,o=e.initializeModules,r=e.isIE;if(n){var i=function(){};e.watchShadow=i,e.upgrade=i,e.upgradeAll=i,e.upgradeDocumentTree=i,e.upgradeSubtree=i,e.takeRecords=i,e["instanceof"]=function(e,t){return e instanceof t}}else o();var a=e.upgradeDocumentTree,d=e.upgradeDocument;if(window.wrap||(window.ShadowDOMPolyfill?(window.wrap=window.ShadowDOMPolyfill.wrapIfNeeded,window.unwrap=window.ShadowDOMPolyfill.unwrapIfNeeded):window.wrap=window.unwrap=function(e){return e}),window.HTMLImports&&(window.HTMLImports.__importsParsingHook=function(e){e["import"]&&d(wrap(e["import"]))}),r&&"function"!=typeof window.CustomEvent&&(window.CustomEvent=function(e,t){t=t||{};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,Boolean(t.bubbles),Boolean(t.cancelable),t.detail),n.preventDefault=function(){Object.defineProperty(this,"defaultPrevented",{get:function(){return!0}})},n},window.CustomEvent.prototype=window.Event.prototype),"complete"===document.readyState||e.flags.eager)t();else if("interactive"!==document.readyState||window.attachEvent||window.HTMLImports&&!window.HTMLImports.ready){var s=window.HTMLImports&&!window.HTMLImports.ready?"HTMLImportsLoaded":"DOMContentLoaded";window.addEventListener(s,t)}else t()}(window.CustomElements); "undefined"==typeof window.CustomEvent&&(window.CustomEvent=function(c,a){a=a||{};var b=document.createEvent("CustomEvent");b.initCustomEvent(c,Boolean(a.bubbles),Boolean(a.cancelable),a.detail);return b},window.CustomEvent.prototype=window.Event.prototype);"undefined"==typeof document.register&&(document.register=function(){return document.registerElement.apply(document,arguments)}); </script> <script data-source="gwdpage_min.js" data-version="8" data-exports-type="gwd-page" type="text/javascript">-function(){"use strict";var b;var c=function(a){setTimeout(a,0)};var d=function(a,h){var e;e=document.createEvent("Event");e.initEvent(a,!0,!0);h.dispatchEvent(e)};var f=function(){};goog.inherits(f,HTMLDivElement);b=f.prototype;b.createdCallback=function(){this.h=this.i.bind(this);this.a=[];this.g=this.b=this.f=!1;var a=parseInt(this.getAttribute("data-gwd-width"),10)||this.clientWidth;this.j=(parseInt(this.getAttribute("data-gwd-height"),10)||this.clientHeight)>=a;this.c=!1}; b.attachedCallback=function(){this.addEventListener("ready",this.h,!1);c(function(){this.a=Array.prototype.slice.call(this.querySelectorAll("*")).filter(function(a){return"function"!=typeof a.gwdLoad||"function"!=typeof a.gwdIsLoaded||a.gwdIsLoaded()?!1:!0},this);this.g=!0;0<this.a.length?(this.style.visibility="hidden",this.f=!1):g(this);this.b=!0;d("attached",this)}.bind(this))}; b.detachedCallback=function(){this.removeEventListener("ready",this.h,!1);this.classList.remove("gwd-play-animation");d("detached",this)};b.gwdActivate=function(){this.classList.remove("gwd-inactive");Array.prototype.slice.call(this.querySelectorAll("*")).forEach(function(a){"function"==typeof a.gwdActivate&&"function"==typeof a.gwdIsActive&&0==a.gwdIsActive()&&a.gwdActivate()});this.c=!0;this.b?this.b=!1:d("attached",this);d("pageactivated",this)}; b.gwdDeactivate=function(){this.classList.add("gwd-inactive");this.classList.remove("gwd-play-animation");Array.prototype.slice.call(this.querySelectorAll("*")).forEach(function(a){"function"==typeof a.gwdDeactivate&&"function"==typeof a.gwdIsActive&&1==a.gwdIsActive()&&a.gwdDeactivate()});this.c=!1;d("pagedeactivated",this);d("detached",this)};b.gwdIsActive=function(){return this.c};b.gwdIsLoaded=function(){return this.g&&0==this.a.length}; b.gwdLoad=function(){if(this.gwdIsLoaded())g(this);else for(var a=this.a.length-1;0<=a;a--)this.a[a].gwdLoad()};b.i=function(a){a=this.a.indexOf(a.target);0<=a&&(this.a.splice(a,1),0==this.a.length&&g(this))};var g=function(a){a.style.visibility="";a.f||(d("ready",a),d("pageload",a));a.f=!0};f.prototype.gwdPresent=function(){d("pagepresenting",this);this.classList.add("gwd-play-animation")};f.prototype.isPortrait=function(){return this.j};f.prototype.attributeChangedCallback=null; document.registerElement("gwd-page",{prototype:f.prototype,"extends":"div"});}() </script> <script data-source="gwdpagedeck_min.js" data-version="8" data-exports-type="gwd-pagedeck" type="text/javascript">-function(){"use strict";var g;var l=["-ms-","-moz-","-webkit-",""],m=function(a,c){for(var b,d,e=0;e<l.length;++e)b=l[e]+"transition-duration",d=""+c,a.style.setProperty(b,d)};function n(a,c,b,d,e,h,f){this.j=a;this.f=c;this.w=b;a=d||"none";this.l=e="none"===a?0:e||1E3;this.g=h||"linear";this.i=[];if(e){h=f||"top";if(f=this.j){f.classList.add("gwd-page");f.classList.add("center");f="center";if("push"==a)switch(h){case "top":f="top";break;case "bottom":f="bottom";break;case "left":f="left";break;case "right":f="right"}this.i.push(f);"fade"==a&&this.i.push("transparent")}f=this.f;e="center";if("none"!=a&&"fade"!=a)switch(h){case "top":e="bottom";break;case "bottom":e="top"; break;case "left":e="right";break;case "right":e="left"}f.classList.add(e);f.classList.add("gwd-page");"fade"==a&&f.classList.add("transparent")}}n.prototype.start=function(){if(this.l){var a=this.j,c=this.f;p(c,this.J.bind(this));a&&(m(a,this.l+"ms"),a.classList.add(this.g));m(c,this.l+"ms");c.classList.add(this.g);c.setAttribute("gwd-reflow",c.offsetWidth);if(a)for(var b=0;b<this.i.length;++b)a.classList.add(this.i[b]);q(c)}else this.w()}; var r=function(a,c,b,d){b="transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,"+b+","+d+",0,1);";return a+"."+c+"{-webkit-"+b+"-moz-"+b+"-ms-"+b+b+"}"},t="center top bottom left right transparent".split(" "),q=function(a){t.forEach(function(c){a.classList.remove(c)})},p=function(a,c){var b=function(){a.removeEventListener("webkitTransitionEnd",b);a.removeEventListener("transitionend",b);c()};a.addEventListener("webkitTransitionEnd",b);a.addEventListener("transitionend",b)}; n.prototype.J=function(){var a=this.j;a&&(q(a),m(a,0),a.classList.remove(this.g));m(this.f,0);this.f.classList.remove(this.g);this.w()};var u=function(a,c,b){var d;b?(d=document.createEvent("CustomEvent"),d.initCustomEvent(a,!0,!0,b)):(d=document.createEvent("Event"),d.initEvent(a,!0,!0));c.dispatchEvent(d)},w=function(a,c){var b=function(d){a.removeEventListener("attached",b);c(d)};a.addEventListener("attached",b)};var x=function(){};goog.inherits(x,HTMLDivElement); x.prototype.createdCallback=function(){window.addEventListener("WebComponentsReady",this.I.bind(this),!1);this.u=this.h.bind(this,"shake");this.v=this.h.bind(this,"tilt");this.s=this.h.bind(this,"rotatetoportrait");this.o=this.h.bind(this,"rotatetolandscape");this.a=[];this.A=this.H.bind(this);this.D=this.F.bind(this);this.c=this.B=null;this.b=-1;this.m=!1;this.classList.add("gwd-pagedeck");Object.defineProperty(this,"currentIndex",{enumerable:!0,get:this.G.bind(this)})}; x.prototype.I=function(){this.a=Array.prototype.slice.call(this.querySelectorAll("div[is=gwd-page]"));this.a.forEach(function(a){a.classList.add("gwd-page")});for(u("beforepagesdetached",this,{pages:this.a.slice()});this.firstChild;)this.removeChild(this.firstChild);-1==this.b&&void 0!==this.C&&this.goToPage(this.C)}; x.prototype.attachedCallback=function(){if(!this.B){var a,c=this.id;a=this.offsetWidth;var b=this.offsetHeight,c=(c&&"#")+c+".gwd-pagedeck > .gwd-page";a=r(c,"center",0,0)+r(c,"top",0,b)+r(c,"bottom",0,-b)+r(c,"left",a,0)+r(c,"right",-a,0);b=document.createElement("style");void 0!==b.cssText?b.cssText=a:b.innerHTML=a;document.head.appendChild(b);this.B=b}this.addEventListener("pageload",this.A,!1);document.body.addEventListener("shake",this.u,!0);document.body.addEventListener("tilt",this.v,!0);document.body.addEventListener("rotatetoportrait", this.s,!0);document.body.addEventListener("rotatetolandscape",this.o,!0)};x.prototype.detachedCallback=function(){this.removeEventListener("pageload",this.A,!1);document.body.removeEventListener("shake",this.u,!0);document.body.removeEventListener("tilt",this.v,!0);document.body.removeEventListener("rotatetoportrait",this.s,!0);document.body.removeEventListener("rotatetolandscape",this.o,!0)}; var z=function(a,c,b,d,e,h){if(!(a.b==c||0>c||c>a.a.length-1||a.c)){var f=a.a[a.b],k=a.a[c];a.b=c;a.c=new n(f,k,a.D,b,d,e,h);var v=k.gwdLoad&&!k.gwdIsLoaded();a.m=v;w(k,function(){k.gwdActivate();v?k.gwdLoad():y(this)}.bind(a));a.appendChild(k)}};x.prototype.H=function(a){this.m&&a.target.parentNode==this&&(y(this),this.m=!1)};var y=function(a){u("pagetransitionstart",a);a.c.start()};g=x.prototype; g.F=function(){if(this.c){var a=this.c.j,c=this.c.f;this.c=null;u("pagetransitionend",this,{outgoingPage:a?a:null,incomingPage:c});a&&a.gwdDeactivate();c.gwdPresent()}};g.findPageIndexByAttributeValue=function(a,c){for(var b=this.a.length,d,e=0;e<b;e++)if(d=this.a[e],"boolean"==typeof c){if(d.hasAttribute(a))return e}else if(d.getAttribute(a)==c)return e;return-1};g.goToNextPage=function(a,c,b,d,e){var h=this.b,f=h+1;f>=this.a.length&&(f=a?0:h);z(this,f,c,b,d,e)}; g.goToPreviousPage=function(a,c,b,d,e){var h=this.b,f=this.a.length,k=h-1;0>k&&(k=a?f-1:h);z(this,k,c,b,d,e)};g.goToPage=function(a,c,b,d,e){this.a.length?(a="number"==typeof a?a:this.findPageIndexByAttributeValue("id",a),0<=a&&z(this,a,c,b,d,e)):this.C=a};g.G=function(){return 0<=this.b?this.b:void 0};g.getPages=function(){return this.a};g.getPage=function(a){if("number"!=typeof a){if(!a)return null;a=this.findPageIndexByAttributeValue("id",a)}return 0>a||a>this.a.length-1?null:this.a[a]}; g.getDefaultPage=function(){var a=this.getAttribute("default-page");return a?this.getPage(this.findPageIndexByAttributeValue("id",a)):this.getPage(0)};g.getOrientationSpecificPage=function(a,c){var b=this.getPage(c),d=b.getAttribute("alt-orientation-page");if(!d)return b;var e=b.isPortrait(),h=1==a,d=this.getPage(d);return h==e?b:d};g.h=function(a,c){if(c.target==document.body){var b=this.getPage(this.b);u(a,b,c.detail)}}; g.getElementById=function(a){for(var c=this.a.length,b=0;b<c;b++){var d=this.a[b].querySelector("#"+a);if(d)return d}return null};g.getElementsBySelector=function(a){for(var c=this.a.length,b=[],d=0;d<c;d++){var e=this.a[d].querySelectorAll(a);e&&(b=b.concat(Array.prototype.slice.call(e)))}return b};g.attributeChangedCallback=null;document.registerElement("gwd-pagedeck",{prototype:x.prototype,"extends":"div"});}() </script> <script data-source="gwdgenericad_min.js" data-version="3" data-exports-type="gwd-genericad" type="text/javascript">-function(){"use strict";var b;var d=function(){};goog.inherits(d,HTMLElement);b=d.prototype;b.createdCallback=function(){this.c=this.f.bind(this);this.b=this.a=null};b.attachedCallback=function(){this.a=this.querySelector("[is=gwd-pagedeck]");window.addEventListener("resize",this.c,!1)};b.detachedCallback=function(){window.removeEventListener("resize",this.c,!1)};b.initAd=function(){var a;a=document.createEvent("Event");a.initEvent("adinitialized",!0,!0);this.dispatchEvent(a);this.goToPage()}; b.goToPage=function(a,c,e,f,g){this.a.getPage(this.a.currentIndex);if(a=a?this.a.getPage(a):this.a.getDefaultPage())a=this.a.getOrientationSpecificPage(window.innerHeight>=window.innerWidth?1:2,a.id),c?this.a.goToPage(a.id,c,e,f,g):this.a.goToPage(a.id)};b.f=function(){var a=window.innerHeight>=window.innerWidth?1:2;this.b!=a&&(this.b=a,(a=this.a.getPage(this.a.currentIndex))&&this.goToPage(a.id))};b.exit=function(a,c){window.open(a,"_newtab");c&&this.goToPage()};b.attributeChangedCallback=null; document.registerElement("gwd-genericad",{prototype:d.prototype});}() </script> <script data-source="gwdimage_min.js" data-version="6" data-exports-type="gwd-image" type="text/javascript">-function(){"use strict";var c=function(a){return"gwd-page"==a.tagName.toLowerCase()||"gwd-page"==a.getAttribute("is")},e=function(a){if(c(a))return a;for(;a&&9!=a.nodeType;)if((a=a.parentElement)&&c(a))return a;return null};var f=function(a,b){var d;d=document.createEvent("Event");d.initEvent(a,!0,!0);b.dispatchEvent(d)};var g=function(){};goog.inherits(g,HTMLImageElement);g.prototype.createdCallback=function(){this.b=this.c.bind(this);this.a=0;var a=this.getAttribute("src");a&&(this.setAttribute("source",a),this.removeAttribute("src"));this.addEventListener("load",this.b,!1);this.addEventListener("error",this.b,!1)}; g.prototype.attachedCallback=function(){if("function"==typeof this.gwdLoad&&"function"==typeof this.gwdIsLoaded&&!this.gwdIsLoaded()){var a=e(this),b=a&&"function"==typeof a.gwdIsLoaded;(!a||b&&a.gwdIsLoaded())&&this.gwdLoad()}};g.prototype.gwdIsLoaded=function(){return 2==this.a||3==this.a};g.prototype.gwdLoad=function(){var a=this.getAttribute("source");a?(this.a=1,this.setAttribute("src",a)):f("load",this)};g.prototype.c=function(a){this.a=a&&"error"==a.type?3:2;h(this);f("ready",this)}; var h=function(a){if(2==a.a){var b=a.getAttribute("source"),d=a.getAttribute("scaling")||"stretch";b&&("stretch"!=d?(a.classList.add("scaled-proportionally"),a.style.backgroundImage="url("+JSON.stringify(b)+")",a.style.backgroundSize="none"!=d?d:"auto","data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="!=a.getAttribute("src")&&a.setAttribute("src","data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==")):(a.classList.remove("scaled-proportionally"), a.style.backgroundImage="",b!=a.getAttribute("src")&&a.setAttribute("src",b)))}};g.prototype.attributeChangedCallback=function(a){"source"==a&&0!==this.a&&this.gwdLoad();"scaling"==a&&h(this)};document.registerElement("gwd-image",{prototype:g.prototype,"extends":"img"});}() </script> </head> <body> <gwd-genericad id="gwd-ad"> <div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck"> <div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="800px" data-gwd-height="600px"> <div class="gwd-page-content gwd-page-size"> <img is="gwd-image" source="bg.svg" id="background" class="gwd-img-1dkf"> <img is="gwd-image" source="top-bar-menu.svg" id="menu" class="gwd-img-4pz1 gwd-gen-1tchgwdanimation"> <img is="gwd-image" source="pointer.svg" id="pointer" class="gwd-img-1uzx gwd-gen-7oargwdanimation"> </div> </div> </div> </gwd-genericad> <script type="text/javascript" id="gwd-init-code"> (function() { document.body.style.opacity = "0"; var gwdAd = document.getElementById('gwd-ad'); /** * Handles the DOMContentLoaded event. The DOMContentLoaded event is * fired when the document has been completely loaded and parsed. */ function handleDomContentLoaded(event) { // This is a good place to show a loading or branding image while // the ad loads. } /** * Handles the WebComponentsReady event. This event is fired when all * custom elements have been registered and upgraded. */ function handleWebComponentsReady(event) { document.body.style.opacity = ""; // Start the Ad lifecycle. setTimeout(function() { gwdAd.initAd(); }, 0); } /** * Handles the event that is dispatched after the Ad has been * initialized and before the default page of the Ad is shown. */ function handleAdInitialized(event) { // This marks the end of the polite load phase of the Ad. If a // loading image was shown to the user, this is a good place to // remove it. } window.addEventListener('DOMContentLoaded', handleDomContentLoaded, false); window.addEventListener('WebComponentsReady', handleWebComponentsReady, false); window.addEventListener('adinitialized', handleAdInitialized, false); })(); </script> </body></html> </content> </entry> <entry> <title>GUADEC Gothenburg http://jimmac.musichall.cz/blog/2015-09-07-guadec-gothenburg/ 2015-09-07T15:18:00+02:00 2015-09-07T17:32:56+02:00 Article Author <p>The GUADEC posts have settled by now, which is why it&rsquo;s time for me to post another one. I hope those of you lucky enough to be abel to visit the beautiful, but expensive, city of Gothenburg will enjoy this little 4K edit of the moment I&rsquo;ve captured on my pocket camera.</p> <p> <iframe width="100%" height="500" src="https://www.youtube.com/embed/8M4XBDE_tv4" frameborder="0" allowfullscreen> <a href="https://www.youtube.com/watch?v=8M4XBDE_tv4">GUADEC Gothenburg at 4K</a></iframe> </p> <p>And if you did, check out some of the <a href="https://www.flickr.com/photos/jakubsteiner/albums/72157657099934902">photos</a> too. I&rsquo;ve stoppped counting how many I&rsquo;ve attended, but it&rsquo;s always great to meet up with all the creative minds and the new student blood that makes GNOME happen. Thanks to all of you, and especially to this year&rsquo;s organizers! They made a stellar job.</p> <p class="row"> <a data-flickr-embed="true" href="https://www.flickr.com/photos/jakubsteiner/20488201832/in/album-72157657099934902/" title="DSC01363" class="image 4u"><img src="https://farm1.staticflickr.com/476/20488201832_420b944875_k.jpg" alt="DSC01363"></a> <a data-flickr-embed="true" href="https://www.flickr.com/photos/jakubsteiner/20308918218/in/album-72157657099934902/" title="DSC01140" class="image 4u"><img src="https://farm1.staticflickr.com/506/20308918218_ba228d791a_k.jpg" alt="DSC01140"></a> <a data-flickr-embed="true" href="https://www.flickr.com/photos/jakubsteiner/19876056393/in/album-72157657099934902/" title="DSC01233" class="image 4u"><img src="https://farm1.staticflickr.com/434/19876056393_537d3ae02b_k.jpg" alt="DSC01233"></a> </p>