Jakub Steiner Designer. Camera Pilot. http://jimmac.musichall.cz/blog 2018-03-14T12:58:00+01:00 Jakub Steiner Builder Nightly http://jimmac.musichall.cz/blog/2018-03-14-builder-nightly/ 2018-03-14T12:58:00+01:00 2018-03-21T13:02:55+01:00 Article Author <p>One of the great aspects of the <a href="http://flatpak.org">Flatpak model</a>, apart from separating apps from the OS, is that you can have multiple versions of the same app installed concurrently. You can rely on the stable release while trying things out in the development or nightly built version. This creates a need to easily identify the two versions apart when launching it with the shell.</p> <p>I think Mozilla has set a great precendent on how to manage multiple version identities.</p> <div class='image full'><h1></h1> <img alt='' src='index/firefox.png'> </div> <p>Thus came the desire to spend a couple of nights working on the Builder nightly app icon. While we&rsquo;ve generally tried to simplify app icons to match what&rsquo;s happening on the mobile platforms and trickling down to the older desktop OSes, I&rsquo;ve decided to retain the 3D wokflow for the builder icon. Mainly because I want to get better at it, but also because it&rsquo;s a perfect platform for <a href="https://en.wikipedia.org/wiki/Kitbashing">kit bashing</a>.</p> <div class='image full'><h1></h1> <img alt='' src='index/blender-wip.jpg'> </div> <p>For Builder specifically I&rsquo;ve identified some properties I think should describe the &lsquo;nightly&rsquo; icon:</p> <ul> <li>Dark (nightly)</li> <li>Modern (new stuff)</li> <li>Not as polished &ndash; dangling cables, open panels, dirty</li> <li>Unstable / indicating it can move (wheels, legs &hellip;)</li> </ul> <div class='image full'><h1></h1> <img alt='' src='index/builder-shell.png'> </div> <p>Next up is giving a stab at a few more apps and then it&rsquo;s time to develop some guidelines for these nightly app icons and emphasize it with some Shell styling. Overlaid emblems haven&rsquo;t particularly worked in the past, but perhaps some tag style for the label could do.</p> What 3 Words? http://jimmac.musichall.cz/blog/2018-03-08-what-3-words/ 2018-03-08T08:06:00+01:00 2018-03-08T08:26:45+01:00 Article Author <p>I dig online maps like everyone else, but it is somewhat clumsy sharing a location. The <a href="https://map.what3words.com">W3W</a> service addesses the issue by chunking up the whole world into 3x3m squares and assigning each a name (Supposedly around 57 trillion). Sometimes it&rsquo;s a bit of a tongue twister, but most of the time it&rsquo;s fun to say to meet at a &ldquo;<a href="http://w3w.co/massive.message.chuckle">massive message chuckle</a>&rdquo; for some fpv flying. I&rsquo;m really surprised this <a href="https://www.wired.com/2013/09/what3words/">didn&rsquo;t take off</a>.</p> Everything is Better in Slow Motion http://jimmac.musichall.cz/blog/2018-02-26-everything-is-better-in-slow-motion/ 2018-02-26T12:14:00+01:00 2018-02-26T12:17:09+01:00 Article Author <p class='image full'> <iframe src='https://player.vimeo.com/video/257369483' height='500' class='image full' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <small><a href='https://vimeo.com/257369483'>Powerslidin&rsquo; Sunday</a> from <a href='https://vimeo.com/jimmacfx'>jimmac</a> on <a href='https://vimeo.com'>Vimeo</a>.</small> </p> <p>Superb weather over the weekend, despite the thermometer dipping below 10°C. </p> CSS Grid http://jimmac.musichall.cz/blog/2018-02-20-css-grid/ 2018-02-20T11:25:00+01:00 2018-02-20T11:40:47+01:00 Article Author <p>This would totally have been a tweet or a facebook post, but I&rsquo;ve decided to invest a little more energy and post these on my blog, accessible to everybody. Getting old, I guess. We&rsquo;re all mortal and the web isn&rsquo;t open by its own. </p> <p>In the past few days I&rsquo;ve been learning about CSS grid while redesigning <a href="http://flatpak.org">Flatpak</a> and <a href="http://flathub.org">Flathub</a> sites (still coming). And with the knowledge of really grokking only a fraction of it, I&rsquo;m in love. So far I really dig:</p> <ul> <li>Graceful fallback</li> <li>Layout fully controlled by the theme</li> <li>Controlled whitespace (meaning the layout won&rsquo;t fall apart when you add or remove some whitespace)</li> <li>Reasonable code legibility</li> <li>Responsive layouts even without media queries</li> </ul> <p> <iframe width='100%' height='500' src='https://www.youtube.com/embed/YfIjFeBLhyA' frameborder='0' allowfullscreen> <a href='https://www.youtube.com/watch?v=YfIjFeBLhyA'></a>Whitespace on the Web</iframe> </p> <p>The fact that things are sized and defined very differently and getting grips with implicit sizing will take some time, but it seems to have all the answers to the problems I ran into so far. Do note that I never got super fluent in the flexbox, either. </p> <p>I love the few video bites that <a href="http://jensimmons.com">Jen Simmons</a> publishes periodically. The only downside to all this is seeing the mess with the legacy grid systems I have on the numerous websites like this one.</p> Shelved Wallpapers http://jimmac.musichall.cz/blog/2018-02-12-shelved-wallpapers/ 2018-02-12T20:13:00+01:00 2018-02-12T21:06:15+01:00 Article Author <p>GNOME 3.28 will release with another batch of new wallpapers that only a freaction of you will ever see. Apart from those I also made a few for different purposes that didn&rsquo;t end up being used, but it would be a shame to keep shelved.</p> <p>So here&rsquo;s a bit of isometric goodness I quite enjoy on my desktop, you might as well.</p> <p class="image nogap"> <a href="index/10.png" data-lightbox="wall"> <div class='image 6u'><h1></h1> <img alt='' src='index/10thumb.jpg'> </div> </a> <a href="index/10-1.png" data-lightbox="wall"> <div class='image 6u'><h1></h1> <img alt='' src='index/10-1thumb.jpg'> </div> </a> <a href="index/10-2.png" data-lightbox="wall"> <div class='image 6u'><h1></h1> <img alt='' src='index/10-2thumb.jpg'> </div> </a> <a href="index/10-3.png" data-lightbox="wall"> <div class='image 6u'><h1></h1> <img alt='' src='index/10-3thumb.jpg'> </div> </a> </p> London UX Hackfest http://jimmac.musichall.cz/blog/2017-11-27-london-ux-hackfest/ 2017-11-27T22:44:00+01:00 2017-11-27T23:01:03+01:00 Article Author <p class='image full'> <iframe src='https://player.vimeo.com/video/244096946' height='500' class='image full' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <small><a href='https://vimeo.com/244096946'>London UX Hackfest</a> from <a href='https://vimeo.com/jimmacfx'>jimmac</a> on <a href='https://vimeo.com'>Vimeo</a>.</small> </p> Thanks to the GNOME Foundation, a handful of designers and developers got together last week in London to refocus on the core element of the GNOME experience, the shell. <a href="https://blogs.gnome.org/aday/2017/11/22/gnome-shell-ux-hackfest/">Allan</a> and <a href="https://medium.com/system76/gnome-ux-hackfest-2017-3b3db7298155">Cassidy</a> have already summed up everything in their well written blog posts, so I&rsquo;d like to point to some pretty pictures and the video above. <p class="row"> <a data-flickr-embed="true" href="https://www.flickr.com/photos/jakubsteiner/38509516822/in/album-72157689461399504/" title="" class="image 4u"><img src="https://farm5.staticflickr.com/4551/38509516822_a21ee5f08e.jpg" alt=""></a> <a data-flickr-embed="true" href="https://www.flickr.com/photos/jakubsteiner/37653331355/in/album-72157689461399504/" title="" class="image 4u"><img src="https://farm5.staticflickr.com/4527/37653331355_182ff89271.jpg" alt=""></a> <a data-flickr-embed="true" href="https://www.flickr.com/photos/jakubsteiner/38484985396/in/album-72157689461399504/" title="" class="image 4u"><img src="https://farm5.staticflickr.com/4534/38484985396_5d917bcde6.jpg" alt=""></a> </p> <p>Stay tuned for some higher fidelity proposals in the areas of app switching &amp; launching and the lock/login experience.</p> <div class='image '><h1></h1> <img alt='' src='index/sponsored.png'> </div>