Tobias Ahlin Words by Tobias Ahlin http://tobiasahlin.com Wake <p>Bakken &amp; Bæck, <a href="https://medium.com/bakken-b%C3%A6ck/introducing-wake-2f3f0dcc1b20">announcing Wake</a>:</p> <blockquote> <p>We couldn’t find anything that would allow us to quickly share visual work as a team, and we needed a better tool to keep us all in sync. Our design process was fragmented across different tools and channels. We were storing files in Dropbox, and giving feedback on email, Skype or Slack.</p> <p>These tools are great for text-based communication, but they were not designed for the type of visual work we do. We needed a solution to keep everyone in the loop built specifically for designers.</p> <p>Together with Chris we started building a prototype for a tool that would improve our own design workflow.</p> </blockquote> <p><a href="http://wake.io">Wake</a> is a new tool by Bakken &amp; Bæck for collaborating around design, that let&#39;s you &quot;explain your thinking and get feedback&quot;. It looks gorgeous.</p> <iframe width="960" height="540" style="height: 540px;" src="https://www.youtube.com/embed/GIalL5fkhPM?rel=0" frameborder="0" allowfullscreen class="size-960"></iframe> Wed, 25 Feb 2015 12:28:00 +0000 http://tobiasahlin.com/blog/wake http://tobiasahlin.com/blog/wake Coding is not the new literacy <blockquote> <p>Alan Kay did a <a href="https://www.youtube.com/watch?v=oKg1hTOQXoY">talk</a> at OOPSLA in 1997 titled &quot;The computer revolution hasn&#39;t happened yet,&quot; in which he argued that we haven&#39;t realized the potential that computers can provide for us. Eighteen years later, I still agree with him - it hasn&#39;t happened yet. And teaching people how to loop over a list won&#39;t make it happen either. To realize the potential of computers, we have to focus on the fundamental skills that allow us to harness external computation. We have to create a new generation of tools that allow us to express our models without switching professions and a new generation of modelers who wield them.</p> </blockquote> <p>— Chris Granger in <a href="http://www.chris-granger.com/2015/01/26/coding-is-not-the-new-literacy/">Coding is not the new literacy</a></p> Wed, 25 Feb 2015 12:15:00 +0000 http://tobiasahlin.com/blog/coding%20is-not-the-new-literacy http://tobiasahlin.com/blog/coding%20is-not-the-new-literacy Origami Live <p><a href="https://code.facebook.com/posts/883904991672650/introducing-origami-live/">Brandon Walkin, on Facebook&#39;s engineering blog</a>:</p> <blockquote> <p>Today, we’re excited to release Origami Live for iOS, along with a major new version of Origami for Mac. Origami Live is a new app that lets you use your Origami prototypes on your iPhone or iPad. Alongside it, we’re releasing Origami 2.0, which has a lot of new features, including code exporting, powerful gesture support, Sketch integration, presentation mode, and more.</p> </blockquote> <p>They also launched a <a href="http://facebook.github.io/origami/">new site with tutorials and documentation</a> to get started with Origami.</p> Wed, 25 Feb 2015 12:10:00 +0000 http://tobiasahlin.com/blog/origami-live http://tobiasahlin.com/blog/origami-live Building the minimum Badass User <iframe src="//player.vimeo.com/video/54469442" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> Wed, 25 Feb 2015 12:03:00 +0000 http://tobiasahlin.com/blog/minimum-badass-user http://tobiasahlin.com/blog/minimum-badass-user Animating Link Underlines <style> .underlined-example { position: relative; color: #fff; text-decoration: none; font-size: 24px; margin-bottom: 15px; display:inline-block; } .underlined-example:hover { color: #fff; } .underlined-example:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #fff; visibility: hidden; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); } .underlined-example:hover:before { visibility: visible; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } </style> <div class="size-960 banner-red"> <a href="http://tobiasahlin.com/blog/" class="underlined-example">Hover this link</a> </div> <p>I recently added a simple visual effect to this blog that I quickly fell in love with: when you hover blog headers, the link&#39;s underline is revealed by animating it out from the center. You can try it in the banner above.</p> <p>Creating this effect is surprisingly easy, doesn&#39;t require any additional DOM elements to be added through HTML, and falls back nicely for browsers that don&#39;t support CSS animations (it will just show up as a regular underline).</p> <p>The first thing we need to do is turn off <code>text-decoration</code>, and set the link&#39;s <code>position</code> to <code>relative</code>. For simplicitiy&#39;s sake, we&#39;ll also make sure the link doesn&#39;t change color on hover. Here we&#39;re applying the effect to all link elements inside <code>h2</code>s:</p> <div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">h2</span> <span class="o">&gt;</span> <span class="nt">a</span> <span class="p">{</span> <span class="k">position</span><span class="o">:</span> <span class="k">relative</span><span class="p">;</span> <span class="k">color</span><span class="o">:</span> <span class="m">#000</span><span class="p">;</span> <span class="k">text-decoration</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h2</span> <span class="o">&gt;</span> <span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="m">#000</span><span class="p">;</span> <span class="p">}</span></code></pre></div> <p>Next, we want to add the border, and hide it through a transformation. We do this by inserting it with <code>:before</code>, and setting its X scale to <code>0</code>. As a fallback, we hide it with <code>visibility: hidden</code> for browsers that don&#39;t support CSS animations.</p> <div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">h2</span> <span class="o">&gt;</span> <span class="nt">a</span><span class="nd">:before</span> <span class="p">{</span> <span class="k">content</span><span class="o">:</span> <span class="s2">&quot;&quot;</span><span class="p">;</span> <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span> <span class="k">width</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> <span class="k">height</span><span class="o">:</span> <span class="m">2px</span><span class="p">;</span> <span class="k">bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">left</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">background-color</span><span class="o">:</span> <span class="m">#000</span><span class="p">;</span> <span class="k">visibility</span><span class="o">:</span> <span class="k">hidden</span><span class="p">;</span> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">transform</span><span class="o">:</span> <span class="n">scaleX</span><span class="p">(</span><span class="m">0</span><span class="p">);</span> <span class="n">transform</span><span class="o">:</span> <span class="n">scaleX</span><span class="p">(</span><span class="m">0</span><span class="p">);</span> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">transition</span><span class="o">:</span> <span class="n">all</span> <span class="m">0.3s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="o">-</span><span class="n">out</span> <span class="m">0s</span><span class="p">;</span> <span class="n">transition</span><span class="o">:</span> <span class="n">all</span> <span class="m">0.3s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="o">-</span><span class="n">out</span> <span class="m">0s</span><span class="p">;</span> <span class="p">}</span></code></pre></div> <p>At the very bottom we tell the element to animate all changes applied to it, with a duration of <code>0.3</code> seconds. For the animation to appear, now we just need to make the element visible again on <code>hover</code>, and set its X scale back to <code>1</code>:</p> <div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">h2</span> <span class="o">&gt;</span> <span class="nt">a</span><span class="nd">:hover:before</span> <span class="p">{</span> <span class="k">visibility</span><span class="o">:</span> <span class="k">visible</span><span class="p">;</span> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">transform</span><span class="o">:</span> <span class="n">scaleX</span><span class="p">(</span><span class="m">1</span><span class="p">);</span> <span class="n">transform</span><span class="o">:</span> <span class="n">scaleX</span><span class="p">(</span><span class="m">1</span><span class="p">);</span> <span class="p">}</span></code></pre></div> <p>And that&#39;s it! Firefox has had support for <code>animation</code> and <code>transform</code> without the <code>moz</code> prefix <a href="http://caniuse.com/css-animation">since version 16.0</a> (for over a year), so I&#39;ve left out the prefix in the code. If you want to be safe, you should add <code>-o</code> and <code>-moz</code> to all animations and transforms.</p> Sat, 04 Jan 2014 10:46:00 +0000 http://tobiasahlin.com/blog/css-trick-animating-link-underlines http://tobiasahlin.com/blog/css-trick-animating-link-underlines We’ve become obsessed with process and tools <blockquote> <p>Caught up in a race for money and fame, we lost our focus on the important. We talk of venture capital, recruiting tactics, dreams of disrupting industries, stock options, growth hacks, and the superiority of our tools. We do not talk of the bugs, the quirks, the difficulties of using our creations, the exploitation of the public, or the worst secret of all: software is broken, we are responsible, and we’re making a lot of money off it.</p> <p>We’ve become obsessed with process and tools. We’ve stopped caring about the product.</p> </blockquote> <p>— <a href="http://warpspire.com/posts/product/">Kyle Neath, in &quot;Product&quot;</a></p> Sat, 04 Jan 2014 10:21:00 +0000 http://tobiasahlin.com/blog/product-obsessed-with-process-and-tools http://tobiasahlin.com/blog/product-obsessed-with-process-and-tools Poole <div class="size-960 banner-gray"> <img src="/static/poole.svg" alt="Poole" width="80" /> </div> <p><a href="http://markdotto.com/2014/01/02/introducing-poole/">Mark Otto</a>:</p> <blockquote> <p><a href="http://getpoole.com">Poole</a> is the Jekyll butler. It&#39;s a fully furnished Jekyll setup, designed to be a consistent and flexible starting point for Jekyll projects.</p> </blockquote> <p>I wish I would&#39;ve had Poole when I made the transition to <a href="http://pages.github.com">GitHub Pages</a> and <a href="http://jekyllrb.com">Jekyll</a>. Out of the box, it offers layouts, a custom 404 page, RSS feeds, posts, and an example page.</p> <p>Along with Poole, Mark released two excellent Jekyll themes today: <a href="https://github.com/poole/hyde">Hyde 2</a> and <a href="https://github.com/poole/lanyon">Lanyon</a>.</p> Thu, 02 Jan 2014 22:40:00 +0000 http://tobiasahlin.com/blog/poole-the-jekyll-butler http://tobiasahlin.com/blog/poole-the-jekyll-butler Master Your Typographic Adventures <div class="size-960 banner-orange"> <img src="/static/book.svg" alt="Book" width="90" /> </div> <p><a href="http://www.typogui.de">Benedikt Lehnert</a>:</p> <blockquote> <p>Typography is the craft of arranging type with the goal to make language visible. We’re arranging type multiple times throughout the day; whether it be writing essays, summarizing meeting minutes or creating slides for a presentation. What usually happens is, we end up thinking more about what we write than how we write it.</p> </blockquote> <p><a href="http://www.typogui.de">The guide</a> is beautifully illustrated. If you want to contribute, it&#39;s <a href="https://github.com/benediktlehnert/typopocketguide">available on GitHub</a>.</p> Wed, 01 Jan 2014 12:00:00 +0000 http://tobiasahlin.com/blog/typographic-pocket-guide http://tobiasahlin.com/blog/typographic-pocket-guide Button Shapes <blockquote> <p>It’s easy to design something attractive that’s not very usable, and it’s easy to design something usable that’s unattractive. The challenge is striking a balance, and iOS 7 made too many usability sacrifices to achieve attractiveness.</p> </blockquote> <p>— <a href="http://www.marco.org/2013/12/15/button-shapes">Marco Arment</a></p> Wed, 01 Jan 2014 04:00:00 +0000 http://tobiasahlin.com/blog/thoughts-on-button-shapes http://tobiasahlin.com/blog/thoughts-on-button-shapes Illusions (Part One) <iframe src="//player.vimeo.com/video/63609012?title=0&amp;byline=0&amp;portrait=0" width="960" height="409" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> Wed, 01 Jan 2014 03:00:00 +0000 http://tobiasahlin.com/blog/illusions-part-one http://tobiasahlin.com/blog/illusions-part-one