<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:cc="http://cyber.law.harvard.edu/rss/creativeCommonsRssModule.html">
    <channel>
        <title><![CDATA[Stories by Marcin Wichary on Medium]]></title>
        <description><![CDATA[Stories by Marcin Wichary on Medium]]></description>
        <link>https://medium.com/@mwichary?source=rss-b55535a4ac78------2</link>
        <image>
            <url>https://cdn-images-1.medium.com/fit/c/150/150/1*8HlFWdpOF6vi0go1Hk8P4Q.jpeg</url>
            <title>Stories by Marcin Wichary on Medium</title>
            <link>https://medium.com/@mwichary?source=rss-b55535a4ac78------2</link>
        </image>
        <generator>Medium</generator>
        <lastBuildDate>Sun, 03 Jun 2018 17:24:15 GMT</lastBuildDate>
        <atom:link href="https://medium.com/feed/@mwichary" rel="self" type="application/rss+xml"/>
        <webMaster><![CDATA[yourfriends@medium.com]]></webMaster>
        <atom:link href="http://medium.superfeedr.com" rel="hub"/>
        <item>
            <title><![CDATA[Sorry, no time, but best of luck!]]></title>
            <link>https://medium.com/@mwichary/sorry-no-time-but-best-of-luck-31363b695df1?source=rss-b55535a4ac78------2</link>
            <guid isPermaLink="false">https://medium.com/p/31363b695df1</guid>
            <dc:creator><![CDATA[Marcin Wichary]]></dc:creator>
            <pubDate>Fri, 01 Jun 2018 21:30:09 GMT</pubDate>
            <atom:updated>2018-06-01T21:30:09.914Z</atom:updated>
            <content:encoded><![CDATA[<p>Sorry, no time, but best of luck!</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=31363b695df1" width="1" height="1">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Hi, I didn’t mean to endorse changing H at will and expecting the rest to be perfectly solid.]]></title>
            <link>https://medium.com/@mwichary/hi-i-didnt-mean-to-endorse-changing-h-at-will-and-expecting-the-rest-to-be-perfectly-solid-48be74e2d256?source=rss-b55535a4ac78------2</link>
            <guid isPermaLink="false">https://medium.com/p/48be74e2d256</guid>
            <dc:creator><![CDATA[Marcin Wichary]]></dc:creator>
            <pubDate>Wed, 23 May 2018 19:24:24 GMT</pubDate>
            <atom:updated>2018-05-23T19:24:24.589Z</atom:updated>
            <content:encoded><![CDATA[<p>Hi, I didn’t mean to endorse changing H at will and expecting the rest to be perfectly solid. (The visual with different H is just for testing.) The reason to make it a constant was to make it easier to see the relationships. I fully expect each particular color variable to be selected by hand after the specific H is figured out.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=48be74e2d256" width="1" height="1">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Hi! It’s called Maison Neue.]]></title>
            <link>https://medium.com/@mwichary/hi-its-called-maison-neue-d96d5751d17c?source=rss-b55535a4ac78------2</link>
            <guid isPermaLink="false">https://medium.com/p/d96d5751d17c</guid>
            <dc:creator><![CDATA[Marcin Wichary]]></dc:creator>
            <pubDate>Wed, 23 May 2018 00:08:01 GMT</pubDate>
            <atom:updated>2018-05-23T00:08:01.112Z</atom:updated>
            <content:encoded><![CDATA[<p>Hi! It’s called Maison Neue.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=d96d5751d17c" width="1" height="1">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[No worries. It’s an ongoing journey!]]></title>
            <link>https://medium.com/@mwichary/no-worries-its-an-ongoing-journey-df4eb46059c0?source=rss-b55535a4ac78------2</link>
            <guid isPermaLink="false">https://medium.com/p/df4eb46059c0</guid>
            <dc:creator><![CDATA[Marcin Wichary]]></dc:creator>
            <pubDate>Tue, 22 May 2018 15:53:00 GMT</pubDate>
            <atom:updated>2018-05-22T15:53:00.571Z</atom:updated>
            <content:encoded><![CDATA[<p>No worries. It’s an ongoing journey!</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=df4eb46059c0" width="1" height="1">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[I didn’t! Which key…?]]></title>
            <link>https://medium.com/@mwichary/i-didnt-which-key-d8043cc0e267?source=rss-b55535a4ac78------2</link>
            <guid isPermaLink="false">https://medium.com/p/d8043cc0e267</guid>
            <dc:creator><![CDATA[Marcin Wichary]]></dc:creator>
            <pubDate>Fri, 18 May 2018 14:38:57 GMT</pubDate>
            <atom:updated>2018-05-18T14:38:57.346Z</atom:updated>
            <content:encoded><![CDATA[<p>I didn’t! Which key…?</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=d8043cc0e267" width="1" height="1">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[I retyped it.]]></title>
            <link>https://medium.com/@mwichary/i-retyped-it-840bc8712799?source=rss-b55535a4ac78------2</link>
            <guid isPermaLink="false">https://medium.com/p/840bc8712799</guid>
            <dc:creator><![CDATA[Marcin Wichary]]></dc:creator>
            <pubDate>Fri, 18 May 2018 06:56:39 GMT</pubDate>
            <atom:updated>2018-05-18T06:56:39.820Z</atom:updated>
            <content:encoded><![CDATA[<p>I retyped it.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=840bc8712799" width="1" height="1">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Shift Happens newsletter issue #7: Shift + Shift]]></title>
            <link>https://medium.com/@mwichary/7-shift-shift-18602d339d1d?source=rss-b55535a4ac78------2</link>
            <guid isPermaLink="false">https://medium.com/p/18602d339d1d</guid>
            <category><![CDATA[rick-dickinson]]></category>
            <category><![CDATA[z88]]></category>
            <category><![CDATA[keyboard]]></category>
            <category><![CDATA[shift-happens-book]]></category>
            <category><![CDATA[newsletter]]></category>
            <dc:creator><![CDATA[Marcin Wichary]]></dc:creator>
            <pubDate>Thu, 17 May 2018 17:34:08 GMT</pubDate>
            <atom:updated>2018-05-24T03:28:06.337Z</atom:updated>
            <content:encoded><![CDATA[<h4>Shift Happens newsletter</h4><h3>#7: Shift + Shift</h3><p><em>This is </em><a href="https://www.getrevue.co/profile/shift-happens"><em>a newsletter for Shift happens</em></a><em>, an upcoming book about keyboards.</em></p><p>This happened about two years ago. It was close to the end of a workday. I was a little stressed out, more than a little tired, a coworker was standing next to me asking for a certain file, and so I went to my computer’s terminal, keyed in three simple characters: <strong>c:\</strong>…</p><p>…and then I froze.</p><p><strong>c:\</strong> is a perfectly fine incantation for when you want to find a file, and you intend to start at the very top. It will work on every PC ever made. Other computers have equivalent sequences that achieve the same purpose; on a Mac, for example, you would type in <strong>cd ~</strong>instead. The thing is, I <em>was</em> using a Mac that day. What was even more interesting: I’ve been using Macs — exclusively — for the past twelve years.</p><p>Somewhere in the depths of my muscle memory, <strong>c:\</strong> was still there from my long-gone PC days, dormant for over a decade, apparently just waiting to be awakened under certain conditions — such as being tired, stressed out, and absent-minded.</p><p>That seemed like the most incredible discovery (what else is hiding in there?) and some time later, in the course of researching the book, I ventured out to learn much more about muscle memory.</p><p>Lesson one: don’t call it that. The proper term is “motor memory.” Second discovery? Motor memory is completely independent from our main, declarative memory. Did you ever experience someone asking you about a keyboard shortcut, and realize <em>you had to watch your fingers perform it</em> in order to answer the question? Turns out, it’s just how we’re built.</p><p>But then, motor memory is also still <em>memory</em>. Which means it has that one counterintuitive property that we take for granted: you can’t actually forget anything. Sure, memories get reshaped, bundled with other memories, moved behind certain triggers — but they never truly disappear. It’s the same with motor memory. There were studies of people sitting down to a keyboard after <em>twenty-five years</em> — and picking up typing with very little trouble. Put two of these together and you will arrive at the same astonishing realization I once had: at some point in your life you might forget who you are, but <em>you will still know how to type.</em></p><p>I am writing this on a machine called Z88. It’s a British portable computer, made in the eponymous year, lent to me by my friend Scott in one of my favourite unexpected moments: <a href="https://twitter.com/scottjenson/status/848244720601976832">he simply brought it to a random lunch and showed it to me without fanfare</a> — and then, to top it all off, let me have it for a while.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aaKscvOtB3pki13mE_Y6BQ.jpeg" /><figcaption>The official photo of Z88</figcaption></figure><p>Z88 is a gorgeous computer. Just like <a href="https://www.getrevue.co/profile/shift-happens/issues/adult-onset-felinophilia-77437">Canon Cat</a>, released around the same time, its purpose is to allow you to write and do little else. But its demeanour couldn’t be any different. It’s a light, dark, flat slate, hinting at a faraway future filled with iPads. More than half of its face is occupied by a keyboard, and the rest by a small monochromatic screen. Z88 is elegant, and possibly the most beautiful machine of its kind: gentler than the reliable American journalistic workhorse <a href="https://arstechnica.com/information-technology/2015/07/back-to-the-future-the-trs-80-model-100/">TRS-80 Model 100</a>, simpler than the messy <a href="http://hackeducation.com/2015/07/25/alphasmart">AlphaSmart</a>, and with much more integrity all around than the modern hipster annoyance that is the <a href="https://getfreewrite.com/">FreeWrite</a>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*HliK68i2uRkonh_FllSXBA.jpeg" /><figcaption>If you think a mini map in your programming editor is cool, Z88 had one eons ago.</figcaption></figure><p>It also has one of my favourite keyboard shortcuts ever. There is no on/off switch, or a dedicated key to turn it on. To get the machine running, you press the left Shift and the right Shift together.</p><p>It’s a shortcut that’s easy to remember. It’s pleasant to press, as Shifts are among the biggest keys on most keyboards. But it’s also really clever. It breathes a new life to the first key ever added to a keyboard in its history, and criminally underused afterwards. And it immediately sets the tone: this machine might look simple, but it’s not <em>simplistic</em> — it’s a thoughtful tool that will reward mastery. Those two Shifts pressed together are just as good a prelude to using the Z88, as Slide To Unlock would be to the iPhone twenty years later.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*UR19jUZsqVCEvJoTAM15Sw.jpeg" /><figcaption>A prototype Z88 emphasized the importance of both Shifts.</figcaption></figure><p>When one day I took the Z88 to a café, it immediately became a conversation starter. Just like other thoughtful British computers — ZX81, ZX Spectrum, and Sinclair QL — you could put the 39-year-old Z88 on your desk today and it wouldn’t look terribly out of place. And just like all those computers, Z88 was designed by Rick Dickinson.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ybDNam0xj1Jb7ZoGGzIGqA.jpeg" /><figcaption>ZX81, ZX Spectrum, and QL on the cover of a popular magazine. Don’t ask me about the chimpanzee; Britain is weird.</figcaption></figure><p>I mentioned Rick in <a href="https://www.getrevue.co/profile/shift-happens/issues/the-worst-keyboard-ever-made-71678">the first issue of this newsletter</a>. I talked how much the interview with him meant to me (it <a href="https://twitter.com/mwichary/status/985661559392190464">wasn’t</a> the <a href="https://twitter.com/mwichary/status/955953663054249984">last time</a> I <a href="https://twitter.com/mwichary/status/890254742080733184">would</a>). One of my first “real” interviews for the book, it ended up being great fun, gave me a lot of material for the ZX Spectrum chapter, and assured me I’m not a complete disaster when interviewing. But it also did something else. It renewed my faith in storytelling about design. That way Rick enthralled me by telling me how he cared about the design of his products? That way was possibly mine to have, too.</p><p>But I’m not writing this to reminisce about the interview again, or focus on portable typewriters, or talk about the fascinating and — to America — exotic years of British computing. I’m writing this because Rick Dickinson died a few weeks ago, on April 24, after a failed battle with cancer.</p><p>I wasn’t ready for this aspect of writing the book. At all. I used to say it’s nice to be a historian of computers, since you can walk among the people who invented them. But I forgot that only works up until a point. The daughter of Dr. İhsan Sıtkı Yener, the inventor of Turkish keyboard <a href="https://medium.com/@mwichary/what-i-learned-about-languages-just-by-looking-at-a-turkish-typewriter-fc840aab1b0a">I wrote about in 2015</a>, contacted me and promised to put in touch with her father — but I procrastinated and was devastated to hear of his death a year later. After I did some serious digging, I found the (awesome) name of the project manager behind <a href="https://www.getrevue.co/profile/shift-happens/issues/the-worst-keyboard-ever-made-71678">the infamous PCjr keyboard</a> — Ralph Crawford Byxbee Jr. — and got excited about the prospects of talking to him, just in time to find his obituary <em>from a prior month.</em> Later on, I found out why Regis Magyar, an IBM keyboard designer I really wanted to talk to and tried to contact a few times, never responded to my letters.</p><p>And then, I learned of Rick’s death <a href="https://twitter.com/indy_slug/status/989787147887697920">through an offhand, semi-related tweet</a>.</p><p>I’d like to think Rick liked our interview, too. I was nervous and technical issues abounded — at one point my MacBook went haywire and <em>started playing back the beginning of our conversation to both of us.</em> But at the end of our chat, Rick said “We’ll talk again,” and I was genuinely excited to do so. I imagined I’d send him the finished book and say “hey, I have a whole chapter about your machine, and I feel I made a pretty great case for why it was actually a really well-designed one.” And then, one year, I’ll happen to be in the U.K., and perhaps we’d meet in person, now both civilians.</p><p>(Rick’s “we’ll talk again” sounds so much more different today, when I realize that he already knew his cancer was back then.)</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1020/1*ACXtMG0mAuUjwHdjMBhDcA.jpeg" /><figcaption>In one of my favourite moments of the interview, I’m showing Rick a battered, coverless copy of a Polish book “Przewodnik po ZX Spectrum.”</figcaption></figure><p>I don’t know if I was the last person that interviewed Rick, but I think I will be the last one to publish the interview. It’s a strange responsibility. I’ll pour over video and audio from our chat once again, to make sure I capture as much of that conversation, as much of what Rick tried to express, as much as who he <em>was,</em> as possible.</p><p>But I couldn’t wait until whenever in 2019 to tell you about him. I am sending this off newsletter cycle, the moment I figured out what to say. I struggled for a few weeks — how do you talk about a death of someone close to you in this unusual and abstract way? — until I grabbed the Z88, and turned it on by pressing both Shifts at the same time without even thinking about it.</p><p>Throughout his life, Rick designed keyboards that taught millions of people in the U.K. (and poorer countries like Poland) how to use computers. Most people don’t know that it was him; like with good design, most will not even realize it was <em>anyone at all.</em> I’ll be happy if my book makes the connection more obvious, in a chapter that talks as much about Rick’s keyboards, as it does about the beauty of design that appears pedestrian, and the importance of careful design that feels like it never even happened.</p><p>Rick will live on in the memories of people who knew him, who worked with him, who were lucky to get a bit of his time that one morning in early 2017, despite his advancing illness. But when you design a few great keyboards, something else happens, too.</p><p>In a strange way, Rick will also get to live on in the memories of all the hands that learned programming on the ZX81, hands that played games on the Spectrum, and hands that wrote office memos on the QL. And in the hands that typed on the black rectangle of Z88, hands that unbeknownst to their owners will forever wait for the right circumstances to once more, instantly, automatically, touch both Shifts to turn it on — something they learned in the fading years of the 1980s, and something they will never forget.</p><p>Marcin</p><p><em>This was newsletter №7 for </em><a href="https://medium.com/@mwichary/shift-happens-5b049f5a93a8"><em>Shift happens</em></a><em>, an upcoming book about keyboards.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=18602d339d1d" width="1" height="1">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Dark theme in a day]]></title>
            <link>https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a?source=rss-b55535a4ac78------2</link>
            <guid isPermaLink="false">https://medium.com/p/3518dde2955a</guid>
            <category><![CDATA[colors]]></category>
            <category><![CDATA[front-end-development]]></category>
            <category><![CDATA[css]]></category>
            <dc:creator><![CDATA[Marcin Wichary]]></dc:creator>
            <pubDate>Tue, 15 May 2018 20:22:59 GMT</pubDate>
            <atom:updated>2018-05-16T23:45:02.302Z</atom:updated>
            <content:encoded><![CDATA[<h4>Using a bunch of modern CSS to create a night mode for an app</h4><p>I recently spent some time with a startup called <a href="https://kite.com/">Kite</a> to work on the typography of their tools. Among their group of smart utilities helping programmers code, the centerpiece is a native/web app named Kite Copilot that sits by your editor to lend a helping hand. It looks like this:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ftfw60OYkLlm7t7ZmsZAhw.png" /></figure><p>One early afternoon, a programmer using Copilot wrote to us suggesting adding a second, dark colour theme: a way to convince the app to use light text on a darker background. It made sense. The dark theme is something preferred by many programmers — indeed, a default in many modern editors like <a href="https://atom.io/">Atom</a> or <a href="https://code.visualstudio.com/?wt.mc_id=adw-brand&amp;gclid=Cj0KCQjw5-TXBRCHARIsANLixNwqQDNNMqrtO8JMknNRxQm4qO36C43gQ0p_UtDDF2VPuqzPApQFUycaAomXEALw_wcB">Visual Studio Code</a>. Right next to an editor with a dark theme, Copilot can feel like it dressed up for a wrong kind of party:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lC7PMuelEfZR3XqoAJUzBA.png" /></figure><p>I started wondering if it was possible to add a dark theme <em>that very</em> <em>afternoon, </em>promising myself that I would move on to other things the next day rain or shine, whether I finish or not.</p><p>This is a story of how a few new-ish CSS options came together like a bunch of superheroes in a summer blockbuster movie, and allowed for this project to indeed take up <em>one afternoon,</em> <em>and not much more.</em></p><h3><strong>CSS variables</strong></h3><p>I knew immediately that this project could not happen without <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS variables</a>, and I was excited to try them for the first time in native CSS (I’ve only known them before courtesy of <a href="http://lesscss.org/features/">LESS</a>). I started by turning all the existing hardcoded colors into variables, and then reducing the number of variables to the absolute minimum. It looked something like this:</p><pre><strong>Before</strong></pre><pre>.main {<br>  background-color: #eef4f7;<br>  color: #0a244d;<br>}<br>.docs {<br>  color: #0c2959;<br>}</pre><pre><strong>After</strong></pre><pre>html {<br>  --background: #eef4f7;<br>  --text-color-normal: #0a244d;<br>}</pre><pre>.main {<br>  background: var(--background);<br>  color: var(--text-color-normal);<br>}<br>.docs {<br>  color: var(--text-color-normal);<br>}</pre><p>I didn’t, however, wait to systematize everything in the light theme, and only then come up with a nightly alternative. As a matter of fact, I did the exact opposite. I created the simplest scaffolding of the second theme… and immediately enabled it. The reason for this was simple: this approach made it easier to see which colours among the dozens of CSS files (most I have never traversed before) I missed and didn’t turn into variables yet. Anything that was off was easy to spot in the increasingly darker and darker universe:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wxkfpmvu-AQ1XNppiVLB0g.png" /></figure><p>I also cleaned up a few other adjacent areas. I removed any opacity that was paired with colours, and baked the lightness into the colours themselves. I removed any alpha values (rgba), too. That made it easier for me to trust them again, since some of the half-transparent colours could become backgrounds atop other elements with other background colours, and it was impossible to predict their interaction.</p><pre><strong>Before</strong></pre><pre>.home {<br>  color: #0a244d;<br>}<br>.home__version {<br>  opacity: 0.7;<br>} </pre><pre><strong>After</strong></pre><pre>html {<br>  --text-color-normal: #0a244d;<br>  --text-color-light: #8cabd9;<br>}<br>.home {<br>  color: var(--text-color);<br>}<br>.home__version {<br>  color: var(--text-color-light);<br>}</pre><p>The only opacity I kept was for disabled UI elements — its presence was well-defined, and made things simpler.</p><p>Lastly, I also created a variable for shadows used on popovers, as I needed the shadows to be more prominent in the dark theme.</p><h3><strong>Expressing colours</strong></h3><p>Then, I took variables one tiny step further. I didn’t want to assume that the colours would always come from the Design world and the job of Engineering would only be to plug them in. There was a practical reason, too: playing with colours live by editing the file seemed like the best way to optimize the palette.</p><p>And so, in order to make everyone’s life easier (starting with my own), I moved to describing all the colours as <a href="https://css-tricks.com/yay-for-hsla/">HSL</a>:</p><pre><strong>Before</strong></pre><pre>html {<br>  --text-color-normal: #0a244d;<br>  --text-color-light: #8cabd9;<br>}</pre><pre><strong>After</strong></pre><pre>html[data-theme=&#39;dark&#39;] {<br>  --text-color-normal: hsl(210, 10%, 62%);<br>  --text-color-light: hsl(210, 15%, 35%);<br>  --text-color-richer: hsl(210, 50%, 72%);<br>  --text-color-highlight: hsl(25, 70%, 45%);<br>}</pre><p>I find HSL the most satisfying way to navigate the world of colours, the three components having clearer responsibilities than the opaque and arbitrary dials of RGB (where brightness is a complicated formula rather than just a number, and saturation is buried very deeply).</p><p>But there was another benefit: I could add secondary variables for main hues of the colour theme.</p><pre>html[data-theme=&#39;dark&#39;] {<br>  --hue: 210; <em>/* Blue */</em><br>  --accent-hue: 25; <em>/* Orange */</em></pre><pre>  --text-color-normal: hsl(var(--hue), 10%, 62%);<br>  --text-color-highlight: hsl(var(--accent-hue), 70%, 45%);<br>}</pre><p>I wanted to make it easy for the person coming after me to understand the relationships between colours. Even without the hue variables, HSL would make it easier; all the colours starting with hsl(210 would be immediately recognizable as a family. But making 210 another tightened the screws a little bit. It was my way of saying “feel free to experiment with colours, but the act of adding another hue should be an intentional one.”</p><p>Plus, changing the hue value was another way to test the integrity of the theme. Any colour not changing would mean a colour accidentally left behind:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*puFET3hME2Ir9AYwbgIyNA.png" /></figure><p>I considered going even further, expressing some colours as variations on others. But that felt like overkill here. The slightly inelegant way CSS expresses variables, combined with the need for calc() would make this CSS much less readable.</p><p>And so, this is what I ended up with:</p><pre>html[data-theme=&#39;dark&#39;] {<br>  --hue: 210; <em>/* Blue */</em><br>  --accent-hue: 25;<em> /* Orange */</em></pre><pre>  --text-color-normal: hsl(var(--hue), 10%, 62%);<br>  --text-color-light: hsl(var(--hue), 15%, 35%);<br>  --text-color-richer: hsl(var(--hue), 50%, 72%);<br>  --text-color-highlight: hsl(var(--accent-hue), 70%, 45%);</pre><pre>  --link-color: hsl(var(--hue), 90%, 70%);<br>  --accent-color: hsl(var(--accent-hue), 100%, 70%);<br>  --error-color: rgb(240, 50, 50);</pre><pre>  --button-background: hsl(var(--hue), 63%, 43%);<br>  --button-text-color: black;</pre><pre>  --background: hsl(var(--hue), 20%, 12%);<br>}</pre><h3><strong>Switching between themes</strong></h3><p>The theme was applied to a data attribute on top of &lt;html&gt;. A class would be okay, too, but in my head classes feel like checkboxes, whereas data attributes act more like radio buttons. It felt like a moot distinction at this very point — we only had two themes — but I wanted to think a bit ahead.</p><pre><strong>Definition in CSS</strong></pre><pre>html {<br>  --hue: 210; <em>/* Blue */</em><br>  --text-color-normal: hsl(var(--hue), 77%, 17%);<br>  ...<br>}</pre><pre>html[data-theme=&#39;dark&#39;] {<br>  --text-color-normal: hsl(var(--hue), 10%, 62%);<br>  ...<br>}</pre><pre><strong>Invocation in JavaScript</strong></pre><pre>document.documentElement.setAttribute(&#39;data-theme&#39;, &#39;dark&#39;)<br>document.documentElement.setAttribute(&#39;data-theme&#39;, &#39;light&#39;)</pre><p>(Note that the default theme was expressed without any qualifiers. This ensured that if something went wrong and the data attribute disappeared, things would still remain readable.)</p><p>This was perfectly functional, but switching the theme back and forth felt abrupt. This was effectively a light switch, but there was a reason I installed fade-in and fade-out light switches in all the rooms I spend significant amount of time in. And so, I installed one in Copilot’s CSS, too:</p><pre>html.color-theme-in-transition,<br>html.color-theme-in-transition *,<br>html.color-theme-in-transition *:before,<br>html.color-theme-in-transition *:after {<br>  transition: all 750ms !important;<br>  transition-delay: 0 !important;<br>}</pre><p>This class, color-theme-in-transition, effectively tells the browser “for literally <em>any style that changes from now on, </em>make it a transition.”</p><p>Applied all the time, and every incidental hover color change or transition would become a slo-mo nightmare, belonging more in a Zack Snyder movie than in a productivity tool for programmers. But if we were to add this class tactically a moment before changing the theme, and remove as soon as the transition was over, it would give us in a beautiful crossfade:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*n5EzGYBTnh5twaVKqr398w.gif" /></figure><pre>document.documentElement.classList.add(&#39;color-theme-in-transition&#39;)<br>document.documentElement.setAttribute(&#39;data-theme&#39;, theme)<br>window.setTimeout(function() {<br>  document.documentElement.classList.remove(&#39;color-theme-in-transition&#39;)<br>}, 1000)</pre><p>This was possibly my favourite bit of the project, seeing different departments of CSS working together as a team. The change to the attribute made the new set of variables take over the old ones, automatically. After that, all of the new colours inside those variables would then slot themselves in all the places where they were used… but not before another department of CSS would hold them gently in place, stretching what would otherwise be a blink of an eye into a better part of second. Just one new class and one attribute change, and the complex machinery of CSS would come to life in one magically coördinated moment.</p><p>CSS often feels clunky and awkward. I can’t say I’m a fan of the way you express variables in it — it looks weird and I keep putting the double dashes in the exact wrong place. But when CSS goes, it <em>goes. </em>And in that very moment, it was fun to watch it go.</p><p>(Caveat: this worked really well in Firefox, but Chrome sometimes still struggled, transitioning some parts too late or not at all.)</p><h3><strong>Theming vector icons</strong></h3><p>The colour variables took great care of text. But then the dreaded moment came when it came to taking care of the visual elements. A bunch of iconography in Kite’s Copilot existed as vector SVGs as backgrounds:</p><pre>.sidebar__icon__settings {<br>  width: 2rem;<br>  height: 2rem;<br>  background-image: url(./icon-settings.svg);<br>}</pre><p>As far as I know, you can only colorize SVGs with CSS in some circumstances — when you embed them inline, or when you use them as images. But you couldn’t do it in this scenario. And without it, icons in the dark theme would look bad if not downright disappear:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AOn7_OF1dzmjeyuarQRgAA.png" /></figure><p>Fortunately, there was another way than creating two versions of all the SVG files. I could use a <em>mask</em> instead of a background:</p><pre>mask-image: url(./icon-refresh-white.svg);<br>mask-repeat: no-repeat;<br>mask-position: center;<br>background: blue;</pre><p>What the above bit means is “turn the entire thing blue, but then cut away everything that’s not covered by the shape of the SVG.” If the SVG has a transparent background, it works beautifully. And in that case, it did:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*L-ASu3nezgkVdvw_LJRTfw.png" /></figure><p>And, to make the transition even easier, the syntax for mask and background is basically interchangeable — with things like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background"><em>background-repeat,</em> <em>background-position, </em>and <em>background-size</em></a><em> </em>having perfect doppelgängers <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask">on the mask side</a>.</p><pre><strong>Before</strong></pre><pre>background-size: contain;<br>background-repeat: no-repeat;<br>background-position: center;<br>background-size: 1rem;<br>background-image: url(./icon-back.svg);</pre><pre><strong>After</strong></pre><pre>mask-size: contain;<br>mask-repeat: no-repeat;<br>mask-position: center;<br>mask-size: 1rem;<br>mask-image: url(./icon-back.svg);<br>background-color: var(--link-color);</pre><p>There are caveats, of course. You can only use a single colour this way. Plus masks, while <a href="https://caniuse.com/#feat=css-masks">supported relatively well</a>, still require to be prefixed for webkit.</p><p>Most importantly, applying a mask prevents you from doing anything else in the same element: any border, any outline, any text becomes masked away too. In a few instances I had to creatively demote the icon to a :before or :after <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">pseudo-element</a>, which fortunately can be masked independently of the main one.</p><p>Without this method, the project would probably stop in its tracks. The thing is I feared it was about to anyway, since there was one type of visuals standing in my way.</p><h3>Theming images</h3><p>Kite also has regular bitmapped images interspersed through some of the developer documentation. They looked something like this:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*I19P12klUjdEG4q21uKg1A.png" /></figure><p>Seeing a big rectangle of white scroll into view wasn’t just aesthetically displeasing. I imagined that while for some people a dark theme is just a visual choice, some — even many — might enable it to take a better care of their eyes. I didn’t want the theme to go 95% there, but then behave like an annoying moviegoer pulling out their smartphone on maximum brightness, and texting in the middle of the aforementioned Zack Snyder movie.</p><p>Fortunately, modern CSS saved me from redoing all the images by hand, or writing a script to process and re-save them. I could use a CSS filter to easily invert every image:</p><pre>html[data-theme=&#39;dark&#39;] img {<br>  filter: invert(100%);<br>}</pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mnh0Vhu2kPhVZeqnhUVxnA.png" /></figure><p>The image didn’t look quite right, though, with completely different colours. But I remembered a trick I picked up in Photoshop years ago: Invert the image image and then rotate its hue halfway through, and the image will look much more natural. It doesn’t work so well for photos, but for any charts and diagrams it is basically flawless. Luckily, those were the kind of photos you’d encounter in Kite app.</p><p>And, luckily once again, there was also a CSS filter that allowed me to do the exact same thing automatically:</p><pre>html[data-theme=&#39;dark&#39;] img {<br>  filter: invert(100%) hue-rotate(180deg);<br>}</pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-h7bSl10L1a4gFaTw5fJhw.png" /></figure><p>And then, I could go even further! Another once-photoshoppian thing is now available in CSS; using a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode">blending mode</a> I could make the visuals feel even more at home — by making its darkest pixels effectively become transparent:</p><pre>html[data-theme=&#39;dark&#39;] img {<br>  filter: invert(100%) hue-rotate(180deg);<br>  mix-blend-mode: screen;<br>}</pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*V3UeR0VEMro8s1VerslAoQ.png" /></figure><p>I could even bring back the blending mode to the original theme, and make that one better as well (multiply is the opposite of screen, so it’d work as well for outputting on light background). Once again, the addition of a dark theme ricocheted into improving the original one, too.</p><pre>img {<br>  mix-blend-mode: multiply;<br>}</pre><pre>html[data-theme=&#39;dark&#39;] img {<br>  filter: invert(100%) hue-rotate(180deg);<br>  mix-blend-mode: screen;<br>}</pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GaWevYyeZtMkI3q9QZEz7Q.png" /></figure><p>And that was it. Those few lines of CSS made the project complete. (Depending on your needs, you could consider simply reducing the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness">brightness</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast">contrast</a> rather than inverting — both also available <em>via</em> CSS filters.)</p><h3><strong>Theming the scrollbar</strong></h3><p>Well, almost complete. If images and icons kept their bright liveries and had to darkened, we faced the opposite issue with Mac’s autohiding scrollbar — it was black (and basically invisible) even in the dark mode.</p><p>I first started by experimenting with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar">vintage Webkit scrollbar CSS values</a> and got somewhere half-decent, but we soon learned it came with a terrible price: any change to those made the scrollbars visible all the time, even if your Mac option was set to have them hidden until you scroll.</p><p>I went back to the drawing board. It turned out I didn’t need to worry about styling the scrollbar, but <em>convincing the scrollbar to style itself.</em> Mac’s scrollbar can actually turn light when needed. Except we weren’t scrolling the whole page, just a smaller element inside it, and for some reason that confused the scrollbar’s inner chameleon. Applying the background again directly to that scrollable element, even though redundant, made the scrollbar understand that it should become lighter:</p><pre>.docs-page__content {<br>  background: var(--background);<br>  overflow-y: auto;<br>}</pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Y9OS0d13bV7stAlf3KvyNQ.png" /></figure><p>I also made sure that the scrollbar was glued to the edge. It’s annoying when the autohiding scrollbar sits in the middle and overlaps the content, and even more so in the dark theme. (And it makes it harder to grab if it’s <a href="https://en.wikipedia.org/wiki/Fitts%27s_law">by the edge of the screen</a>!)</p><p>The solution was as simple as taking the padding from the parent element that wrapping the scrolling content, and moving it inside the scrolling element instead:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CEosdPlUqM5rxkfDIrW97w.png" /></figure><h3><strong>A high contrast theme</strong></h3><p>I also wanted to extend this project in another direction. I added one more theme — a high contrast one:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TsnAWZe4YnWApcylf-7suA.png" /></figure><p>I will be the first to admit that this is not the best high contrast theme. Not only that: I am not even entirely sure what a good high contrast theme means. But I feel that it was important to at least start, to send the message that colours are not only about aesthetics, fashion, or comfort — to people with visual impairments, they might be the difference between being able to use the app or not.</p><p>The variables for the high contrast theme are beautiful in their simplicity…</p><pre>html[data-theme=&#39;high-contrast&#39;] {<br>  --text-color-normal: white;<br>  --text-color-light: white;<br>  --text-color-richer: white;<br>  --text-color-highlight: white;</pre><pre>  --link-color: white;<br>  --bright-color: white;<br>  --error-color: white;</pre><pre>  --button-background: white;<br>  --button-text-color: black;</pre><pre>  --background: black;<br>  --popup-background: black;<br>}</pre><p>…and the new theme also became another unexpected test for the integrity of my set of variables and how I applied them. If a high contrast theme ended up putting white text on white background — or black on black — it meant something went profoundly wrong in my thinking, and that the contrast on any of the other two themes was probably in trouble, too.</p><p>In this way, I once more experienced that tried-and-true effect: accessibility gives universally. Trying to increase accessibility doesn’t just benefit a certain group of people; it benefits <em>everybody.</em></p><p>(I do believe that a proper high contrast theme needs to have more borders and other elements for the eye to hang onto. Please let me know if you know. The one thing I changed was the shadow becoming more of a border, as demonstrated below.)</p><pre>html {<br>  --popup-shadow: 0 5px 16px rgba(0, 0, 0, .25);<br>}<br>html[data-theme=&#39;dark&#39;] {<br>  --popup-shadow: 0 5px 32px black;<br>}<br>html[data-theme=&#39;high-contrast&#39;] {<br>  --popup-shadow: 0 0 5px white, 0 0 5px white;<br>}</pre><p>That was it. I was done with the dark theme late afternoon, and I spent a few more hours over the next few days adding a couple of finishing touches and bug fixes.</p><p>I was kind of amazed that all of this could happen <em>via</em> CSS and CSS alone: the colours, the transitions, the vectors, and even the images:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*q0aTFq6ZrUdO2709viz52w@2x.gif" /></figure><p>I’m curious if you have any other tricks to share? Any other new CSS properties that could come in handy? Or a different understanding of dark themes? Please respond to this post or <a href="https://twitter.com/mwichary">let me know <em>via</em> Twitter</a>.</p><p><em>Thank you to Dane Bratz at Kite for overseeing the implementation, and to </em><a href="https://medium.com/u/48357292b09c"><em>Kathy Ahn</em></a><em> for being my writing buddy for this article.</em></p><p><em>BTW Kite is hiring! I had a great time there. If you’re a designer excited about engineering — or an engineer with strong interest in design, </em><a href="https://kite.com/jobs"><em>reach out to them</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=3518dde2955a" width="1" height="1">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Shift Happens newsletter issue #6: A love letter to the in-betweeners]]></title>
            <link>https://medium.com/@mwichary/shift-happens-newsletter-issue-6-a-love-letter-to-the-in-betweeners-7c90d39d32a7?source=rss-b55535a4ac78------2</link>
            <guid isPermaLink="false">https://medium.com/p/7c90d39d32a7</guid>
            <category><![CDATA[shift-happens-book]]></category>
            <category><![CDATA[newsletter]]></category>
            <category><![CDATA[keyboard]]></category>
            <dc:creator><![CDATA[Marcin Wichary]]></dc:creator>
            <pubDate>Thu, 10 May 2018 16:15:59 GMT</pubDate>
            <atom:updated>2018-05-10T16:15:59.350Z</atom:updated>
            <content:encoded><![CDATA[<h4>Shift Happens newsletter</h4><h3>#6: A love letter to the in-betweeners</h3><p><em>This is </em><a href="https://www.getrevue.co/profile/shift-happens"><em>a newsletter for Shift happens</em></a><em>, an upcoming book about keyboards.</em></p><h3>What am I typing this issue on?</h3><p>Here’s one thing that’s been bringing me a surprising amount of joy when writing the book. No, it wasn’t figuring out final answers to puzzling questions (there really aren’t many), or finding Some Thing’s definitive first appearance (history, it turns out, generally dislikes the word “first” as much as it does “best”). It was encountering all the seemingly confused concepts, machines that didn’t quite belong, ideas before or <em>after</em> their time. The in-betweeners.</p><p>For a hot 19th-century second, the first popular typewriter <a href="https://en.wikipedia.org/wiki/Sholes_and_Glidden_typewriter">looked like a sewing machine</a>, complete with a foot pedal for “return.” Early 1960s computer keyboards had an extra component inside to… hit the case and make <em>typewriter-like noise when typing.</em> Along the same lines, there was an early computer with typewriter knobs. And a joystick to be mounted on top of arrow keys. And a typewriter with AM radio built in:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*FKu-l1lfkv-7RkLU." /></figure><p>And many forgotten pocket keyboards:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ojI2lcHOxz2OweBf." /></figure><p>Both <a href="https://www.getrevue.co/profile/shift-happens/issues/adult-onset-felinophilia-77437">the Canon Cat</a> and <a href="https://www.getrevue.co/profile/shift-happens/issues/the-shattered-dreams-of-ryan-seacrest-71761">the Ryan Seacrest case</a> we talked about before are good examples, too. So are <a href="https://twitter.com/mwichary/status/970002263577001984">iPhones with built-in keyboards</a>, <a href="https://twitter.com/mwichary/status/915271587162554368">early screen-less teleprompters</a>, a Polish computer that <a href="https://twitter.com/mwichary/status/847254376037011456">repurposed a toy piano case</a>, many amazing <a href="https://twitter.com/mwichary/status/817877183897047040">watch keyboards</a>, or <a href="https://twitter.com/mwichary/status/993704229217824768">this monstrosity</a>. Even your very keyboard has a few in-betweeners: <em>Print Screen, Insert, Pause, Num Lock, </em>and<em> Scroll Lock </em>all once helped bridge a gap between two eras, only to be half-reinvented or simply… abandoned.</p><p>All these examples often seem funny today, each one a horseless carriage of its time. But each one has something to say if you care to listen: it might be a story of comfort and familiarity, of a once-needed connective tissue, of the negotiations with — or simply the fear of — that steamroller that is The Future.</p><p>I am typing this on Olivetti Praxis 48. This 1964 office machine is an in-betweener in more ways than one. It’s an electric typewriter, from that now-forgotten era of electrically assisted keyboards that came after typewriters and before computers. It’s also an office machine that does something few other office machines dare to do: it looks <em>absolutely gorgeous.</em> You can fall in love with its compact size, its cantilevered keyboard, its ultra-symmetric buttons, its floating keys dipped in green. Once you get closer, it becomes a catalogue of deliberate details: you can press any key to turn it on, ridges on the side make it slender, green accents reappear in different places.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*XpBGFoiOpq-VIYzF." /><figcaption>One more in-between aspect: Olivetti purchased the American stalwart typewriter manufacturer Underwood in 1959. My machine has markings of both of those companies.</figcaption></figure><p>There are many beautiful keyboards — I keep <a href="https://twitter.com/mwichary/status/855170146817552384">a running tally of them in a Twitter thread</a> — but the 48 goes one better. It tries to bring its playfulness and thoughtfulness into an environment that usually cares little about all of these things. There was no 47, and there would be no 49. In a worse world, the 48 wouldn’t exist and no one would miss it. In this one, we’re lucky that it did.</p><p>(Adam Richardson recently <a href="http://www.massmadesoul.com/olivetti-praxis-48/">wrote an ode to this machine</a>, filled with amazing photos. It’s worth checking out.)</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xeDaj-JGU4qe9PScBLtpMQ.jpeg" /><figcaption>This is not a filter, the paper inside is actually light blue to match the surroundings</figcaption></figure><p>Here’s a confession. I often feel like an in-betweener myself: an engineer turned designer, a European still getting used to America, someone that took a break from his professional career to write a random book. I am still figuring out how to navigate those largely unlabeled areas, and how to be less and less afraid of uncertainty. Your words of support help. Knowing kind people in similar situations does as well. But, in a strange way, so do the in-between machines. In all of them, I find comfort; in those that succeed — like the 48 did — I find <em>validation.</em></p><h3>What’s going on with the book?</h3><p>I finished reading the first draft. It was an unusual experience. It felt so familiar, and yet I learned new things — even new <em>words</em> — from my own writing. It was peculiar, being able to read a book and rewrite it on the spot if needed. There were (few) moments I stopped in frustration; other times I ended up thoroughly elated.</p><p>I was prepared to hate it all. I didn’t. The beginning needs to be rewritten, and there are many rough edges. But the book didn’t feel boring, or long, or confused. It came together as a whole. I felt proud of it.</p><p>But whether this is good or bad, I have no idea.</p><p>Here’s a confession. I’m not actually writing it on the 48. I can’t. I broke it while attempting to fix it. Turns out, trying to glue together a broken-in-transit spacebar is harder than it seems. Turns out, using toothpaste to make metal more shiny makes that toothpaste go inside the mechanism and clog the entire thing. Turns out, electric typewriters are much more complicated and deserve much more respect than I gave them.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Jhi5Mr1v_lqdmoNvqmkwgg.jpeg" /></figure><p>This is my first book. It’s hard for me to know how much to trust my own feelings, and how much to allow more experienced people to tell me what to do. I will continue trying to figure it out. I know I will bring my 48 to a mechanic and they’ll fix it. With the book, it’s more complicated; the more I look at it, the more it itself feels like an in-betweener. <a href="https://medium.com/@mwichary/shift-happens-books-that-are-influencing-my-book-30bcc2a925d2">Despite trying</a>, I honestly cannot point to another book quite like it.</p><p>Right now, I’m halfway through rewriting big parts of the book to arrive at the second manuscript. Then, it’ll be time to show a whole of it — or individual chapters — to other people. I hope you’ll be one of them.</p><h3>A mini milestone</h3><p><a href="https://twitter.com/mwichary/status/686968365273853952">From the first day</a>, I wanted to celebrate all the milestones, no matter how small — to reduce the pressure on the actual book having to live up to unreasonable expectations, and to help carry me through the arduous process. The most recent one? <a href="https://twitter.com/jscottpearson/status/984635837634629633">Someone just called me</a> “author of <em>Shift Happens,</em>” and… seeing it phrased this way, for the first time, felt wonderful.</p><h3>“I forgot what it’s called, but it’s this special typo machine.”</h3><p>I found the videos of <a href="https://www.youtube.com/watch?v=vfxRfkZdiAQ">kids reacting to typewriters</a> and <a href="https://www.youtube.com/watch?v=PF7EpEnglgk">an Apple II</a> a hilarious and refreshing way to cut through all the nostalgia — plus, I actually learned some things from these!</p><h3>A keyboard mystery</h3><p>Can you figure out why does this keyboard look unusual? (And if so, can you tell me how you arrived at the answer? I’m genuinely curious.)</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*0oC3UT0H3QYA-WsN." /></figure><h3>A secret document I’m sharing with you</h3><p>Here’s the <a href="https://medium.com/@mwichary/shift-happens-bibliography-973dd363aca9">bibliography for my book</a>, including links to things you can read online for free!</p><h3>Come hang out with me</h3><p>If you’re in Berlin in November, come see <a href="https://beyondtellerrand.com/events/berlin-2018">my talk at a conference called Beyond Tellerrand</a>! It’s titled “An abridged history of having fun with the keyboard,” and it will be recorded. Can’t wait for you to see it.</p><p>Marcin</p><p><em>This was newsletter №6 for </em><a href="https://medium.com/@mwichary/shift-happens-5b049f5a93a8"><em>Shift happens</em></a><em>, an upcoming book about keyboards. </em><a href="https://www.getrevue.co/profile/shift-happens/"><em>Read previous issues</em></a><em> or subscribe:</em></p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2F7a7cde%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2F7a7cde%2F&amp;image=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="480" frameborder="0" scrolling="no"><a href="https://medium.com/media/e8b346b1c4e0394e542b30647eca4772/href">https://medium.com/media/e8b346b1c4e0394e542b30647eca4772/href</a></iframe><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3xSSeSPmvzoBjAm4Z2fLjg.png" /></figure><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=7c90d39d32a7" width="1" height="1">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Thank you!!!]]></title>
            <link>https://medium.com/@mwichary/thank-you-4a79dc07208?source=rss-b55535a4ac78------2</link>
            <guid isPermaLink="false">https://medium.com/p/4a79dc07208</guid>
            <dc:creator><![CDATA[Marcin Wichary]]></dc:creator>
            <pubDate>Sun, 15 Apr 2018 00:35:08 GMT</pubDate>
            <atom:updated>2018-04-15T00:35:08.790Z</atom:updated>
            <content:encoded><![CDATA[<p>Thank you!!!</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=4a79dc07208" width="1" height="1">]]></content:encoded>
        </item>
    </channel>
</rss>