RSS/Atom Feed Analysis
Analysis of https://thomaspark.co/feed/
Feed fetched in 1,114 ms.
Warning Content type is application/rss+xml; charset=UTF-8, not text/xml.
Feed is 603,969 characters long.
Feed has an ETag of W/"7451ebf86d1d43d78084c0b235b16c4a".
Feed has a last modified date of Tue, 01 Apr 2025 03:36:00 GMT.
Warning This feed does not have a stylesheet.
This appears to be an RSS feed.
Feed title: Thomas Park
Feed self link matches feed URL.
Feed has 80 items.
First item published on 2025-02-24T15:08:55.000Z
Last item published on 2011-04-07T03:37:16.000Z
Home page URL: https://thomaspark.co/
Home page has feed discovery link in <head>.
Home page has a link to the feed in the <body>
Formatted XML
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/">
<channel>
<title>Thomas Park</title>
<atom:link href="https://thomaspark.co/feed/" rel="self" type="application/rss+xml"/>
<link>https://thomaspark.co</link>
<description>On web development, interface design, user research, and all the rest</description>
<lastBuildDate>Sat, 01 Mar 2025 17:29:51 +0000</lastBuildDate>
<language>en-US</language>
<sy:updatePeriod>hourly</sy:updatePeriod>
<sy:updateFrequency>1</sy:updateFrequency>
<generator>https://wordpress.org/?v=6.7.2</generator>
<item>
<title>Redesigning Hanafuda & Hwatu Cards for Beginners</title>
<link>https://thomaspark.co/2025/02/redesigning-hanafuda-hwatu-cards-for-beginners/</link>
<comments>https://thomaspark.co/2025/02/redesigning-hanafuda-hwatu-cards-for-beginners/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 24 Feb 2025 15:08:55 +0000</pubDate>
<category><![CDATA[Games]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=14005</guid>
<description><![CDATA[I’ve been working on a redesign of hanafuda and hwatu cards to make them more approachable for beginners. Here’s what a recent iteration looks like. There’s two main goals with the redesign. First is to … <a href="https://thomaspark.co/2025/02/redesigning-hanafuda-hwatu-cards-for-beginners/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I’ve been working on a redesign of hanafuda and hwatu cards to make them more approachable for beginners. Here’s what a recent iteration looks like.</p>
<p><img fetchpriority="high" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-1600x1064.webp" alt="Hanafuda Neo" width="800" height="532" class="aligncenter size-large wp-image-14055" srcset="https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-1600x1064.webp 1600w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-800x532.webp 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-768x511.webp 768w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-1536x1022.webp 1536w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-2048x1362.webp 2048w" sizes="(max-width: 800px) 100vw, 800px" /></p>
<p>There’s two main goals with the redesign. First is to make the cards more vibrant and interpretable than the traditional black-heavy artwork. Second is to give some guidance on how the cards should be used by adding a caption with the plant species, month, and value each card represents.</p>
<p>This is a work-in-progress. I’ve improved on the captions since this version. As always, I welcome your feedback.</p>
<h2>Motivation</h2>
<p>Hanafuda and hwatu cards are gorgeous pieces of tiny art. These playing cards from Japan and Korea respectively entice adults and children alike, prompting them to ask, “how do you play?” That’s when you take a deep breath.</p>
<div id="attachment_14017" style="width: 1610px" class="wp-caption aligncenter"><img decoding="async" aria-describedby="caption-attachment-14017" src="https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda.webp" alt="Traditional Hanafuda" width="1600" height="1317" class="size-full wp-image-14017" srcset="https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda.webp 1600w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda-800x659.webp 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda-1458x1200.webp 1458w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda-768x632.webp 768w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda-1536x1264.webp 1536w" sizes="(max-width: 1600px) 100vw, 1600px" /><p id="caption-attachment-14017" class="wp-caption-text">Credit: Roy Levien</p></div>
<p>In broad strokes, hanafuda and hwatu cards have a scheme similar to poker cards. Poker has 4 suits — hearts, diamonds, clubs, spades — and each suit has 13 face values: Ace, 2, 3,… Jack, Queen, King.</p>
<p>Hanafuda and hwatu cards are transposed. They have 12 months of the year, and each month has 4 cards of different value, ranging from bright (20 points), animal (10), ribbon (5), to chaff (1).</p>
<p>The months are represented as plants: March is cherry blossom, October is maple, November is willow, and so on. Much of the symbolism of the plants, as well as the animals and other objects found on these cards can be lost to Westerners, myself included. It doesn’t help that leaves and grass are traditionally painted as black, making the art all the more inscrutable. And that all 48 cards have unique artwork. But part of the fun is learning about them.</p>
<p>The trouble comes with the inconsistency in their values. You’d think easy peasy: each month gets 1 bright, 1 animal, 1 ribbon, and 1 chaff card. But not so fast. Each month is made up differently to spice up gameplay. For example, January has 1 bright, 1 ribbon, and 2 chaffs. February has 1 animal, 1 ribbon, and 2 chaffs. December has 1 bright and 3 chaffs.</p>
<p>Simply refer to the drawings on the cards, you say. But then you learn an animal is not an animal — sometimes it’s a bright, as in the case of the crane. And objects like the wooden bridge and drinking cup are animals.</p>
<p>And don’t get me started on the convoluted scoring system for <a href="https://en.wikipedia.org/wiki/Go-Stop" rel="noopener" target="_blank">Go-Stop</a>, the predominate way that Hwatu is played in Korea.</p>
<div id="attachment_14075" style="width: 810px" class="wp-caption aligncenter"><img decoding="async" aria-describedby="caption-attachment-14075" src="https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-800x483.webp" alt="" width="800" height="483" class="size-medium wp-image-14075" srcset="https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-800x483.webp 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-1600x965.webp 1600w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-768x463.webp 768w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-1536x927.webp 1536w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-2048x1236.webp 2048w" sizes="(max-width: 800px) 100vw, 800px" /><p id="caption-attachment-14075" class="wp-caption-text">In Go-Stop, the cup and bridge cards can be played as either animal or double junk.</p></div>
<p>Needless to say, keeping straight the months, and more importantly for gameplay, point values poses a barrier. This redesign is my attempt to address that.</p>
<p>There have been plenty of alternative designs, like this <a href="https://www.nintendo.com/us/store/products/hanafuda-cards-mario-red-119579/" rel="noopener" target="_blank">Nintendo deck</a> with Mario characters. While fun, they don’t clarify the meaning or value of the cards for newcomers.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2025/02/Nintendo-Hwatu.png" alt="Nintendo Hwatu" width="1050" height="591" class="aligncenter size-full wp-image-14026" srcset="https://thomaspark.co/wp/wp-content/uploads/2025/02/Nintendo-Hwatu.png 1050w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Nintendo-Hwatu-800x450.png 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Nintendo-Hwatu-768x432.png 768w" sizes="auto, (max-width: 1050px) 100vw, 1050px" /></p>
<h2>Credits</h2>
<p>The artwork is designed by <a href="https://lmnt.me/" rel="noopener" target="_blank">Louie Mantia</a>, who’s also the talented designer behind the gorgeous <a href="https://www.junior.cards/" rel="noopener" target="_blank">Junior Hanafuda decks</a>.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda.png" alt="Junior Hanafuda" width="2474" height="1174" class="aligncenter size-full wp-image-14012" srcset="https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda.png 2474w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-800x380.png 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-1600x759.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-768x364.png 768w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-1536x729.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-2048x972.png 2048w" sizes="auto, (max-width: 2474px) 100vw, 2474px" /></p>
<p>The printed the initial runs through <a href="https://makeplayingcards.com/" rel="noopener" target="_blank">Make Playing Cards</a>. Traditional hwatu cards measure about 35mm x 54mm and are made of thick rigid plastic that makes a satisfying sound when slapped down on each other. Mine are made of thinner flexible plastic and are slightly larger at 44mm x 89mm.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2025/02/redesigning-hanafuda-hwatu-cards-for-beginners/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>575: A Daily Haiku Game for Reddit</title>
<link>https://thomaspark.co/2025/01/575-a-daily-haiku-game-for-reddit/</link>
<comments>https://thomaspark.co/2025/01/575-a-daily-haiku-game-for-reddit/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 14 Jan 2025 20:51:58 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Language]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13748</guid>
<description><![CDATA[For the 2024 Reddit Games and Puzzles Hackathon, I submitted 575, a daily word game where you compose a haiku using the words of the day. How to Play 575 Each day, a new set … <a href="https://thomaspark.co/2025/01/575-a-daily-haiku-game-for-reddit/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>For the <a href="https://redditgamesandpuzzles.devpost.com/" rel="noopener" target="_blank">2024 Reddit Games and Puzzles Hackathon</a>, I submitted 575, a daily word game where you compose a haiku using the words of the day. </p>
<h2>How to Play 575</h2>
<p>Each day, a new set of words is posted. Players can add any words from this bank to their poem. Your poem is limited, however, to three lines with 5, 7, and 7 syllables in the traditional haiku format. The challenge is to pen something beautiful or witty within these constraints.</p>
<p>After you’ve finalized your poem, you can give it a title and post it as a comment in the thread. Other Redditors can view and upvote your creation.</p>
<p>Try 575 out for yourself on the <a href="https://www.reddit.com/r/575game/">r/575game</a> subreddit.</p>
<div class="center">
<a class="standard-btn xlarge-btn blue-btn" href="https://www.reddit.com/r/575game/" target="_blank" rel="noopener">Play 575</a>
</div>
<p>Or watch the <a href="https://www.youtube.com/watch?v=jJTqXl5tJZ4" rel="noopener" target="_blank">video trailer</a>:</p>
<p><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/jJTqXl5tJZ4?si=h1cpt7YGt69S-uWE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h2>Inspirations</h2>
<p>The unique design challenges of a Reddit game are that it needs to be social, short and sweet, but replayable.</p>
<p>One of my inspirations were <a href="https://www.amazon.com/Magnetic-Poetry-Original-Essential-Refrigerator/dp/1890560014/" rel="noopener" target="_blank">magnetic poetry tiles</a> you combine to create unique messages. Using these, you can express yourself and be creative by simply selecting and arranging individual words on your fridge.</p>
<p>I settled on the 5-7-5 format of Japanese haikus to provide additional constraints, which makes it a more game-like experience. It also puts a ceiling on the playtime required.</p>
<p>The idea of having the word bank that changes daily came from popular word games like <a href="https://www.nytimes.com/games/wordle/" rel="noopener" target="_blank">Wordle</a> and <a href="https://www.nytimes.com/puzzles/spelling-bee" rel="noopener" target="_blank">Spelling Bee</a> which give players a reason to keep coming back.</p>
<h2>Implementing on Devvit</h2>
<p>Until this hackathon, I didn’t realize the rich support for interactive posts that <a href="https://developers.reddit.com/docs/" rel="noopener" target="_blank">Reddit’s Developer Platform</a> (playfully called Devvit) provides.</p>
<p>The Devvit boilerplate gets you up and running with a basic app, and supports block posts and a newer webview option. I opted for the latter.</p>
<p>There were a few technical issues I ran into that were unique to developing for Reddit.</p>
<p>First is that the space you have to work with is limited. Not only can the viewport be small, as in the case of mobile, but you have to account for the additional “chrome” of Reddit’s own interface. Not easy to squeeze 100 words in the remaining space.</p>
<p>For now, interactions on Devvit are limited to clicks — more advanced gestures like dragging aren’t well-supported. Fortunately, the click-only approach turned out to mesh with 575 just fine.</p>
<p>In webview, I found no way to detect whether the user was in light and dark mode. This meant a single set of styles had to look decent in both. Something for the API to support down the line.</p>
<h2>Future Plans</h2>
<p>575 could be improved by refining the pool of words the daily word bank draws from to strike a balance in terms of fun and usable words.</p>
<p>The word bank could run with themes, for example holiday words this time of year, or silly or provocative or timely themes for other occasions.</p>
<p>Lastly, there’s potential to add 575 to an established subreddit like <a href="https://www.reddit.com/r/Poetry/" rel="noopener" target="_blank">r/Poetry</a> as a weekly challenge.</p>
<h2>Hackathon Results</h2>
<p>Back to the hackathon, I’m pleased to say 575 was recognized with the UGC Award for best use of user-generated content (i.e. Reddit posts or comments) in a game.</p>
<p>The hackathon attracted nearly 2000 entrants, with many, many impressive entries. My favorites were <a href="https://devpost.com/software/emoji-charades" rel="noopener" target="_blank">Emoji Charades</a>, <a href="https://devpost.com/software/pixel-together" rel="noopener" target="_blank">Pixel Together</a>, and <a href="https://devpost.com/software/laddergram" rel="noopener" target="_blank">Laddergram</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2025/01/575-a-daily-haiku-game-for-reddit/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Learning CSS Anchor Positioning with Anchoreum</title>
<link>https://thomaspark.co/2024/11/learning-css-anchor-positioning-with-anchoreum/</link>
<comments>https://thomaspark.co/2024/11/learning-css-anchor-positioning-with-anchoreum/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 18 Nov 2024 13:46:30 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13575</guid>
<description><![CDATA[Way back when, vertically centering an element was a tall task. Setting consistent gaps between elements took some thinking and several lines of code. Then came flexbox and grid. Both were new and, at the … <a href="https://thomaspark.co/2024/11/learning-css-anchor-positioning-with-anchoreum/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-1600x1066.png" alt="anchoreum.com" width="800" height="533" class="aligncenter size-large wp-image-13618" srcset="https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-1600x1066.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-800x533.png 800w, https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-768x512.png 768w, https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-1536x1024.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-2048x1365.png 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Way back when, <a href="https://build-your-own.org/blog/20240813_css_vertical_center/" rel="noopener" target="_blank">vertically centering an element was a tall task</a>. Setting consistent gaps between elements took some thinking and several lines of code. Then came flexbox and grid. Both were new and, at the time, magical features of CSS. Those were the times in which I <a href="https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/">released Flexbox Froggy</a> and <a href="https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/">Grid Garden</a>.</p>
<p>Well now we have a new CSS layout module on the horizon: anchor positioning.</p>
<p>And with it comes the release of my new coding game, <a href="https://anchoreum.com" rel="noopener" target="_blank">Anchoreum</a>! Play it for free today.</p>
<div class="center">
<a class="standard-btn xlarge-btn blue-btn" href="https://anchoreum.com" target="_blank" rel="noopener">Anchoreum</a>
</div>
<p>Like its predecessors, Anchoreum is free to play with no registration required at <a href="https://anchoreum.com" rel="noopener" target="_blank">anchoreum.com</a>. Take a quick dive or refresher whenever you feel motivated.</p>
<p>You can also play Anchoreum for free on <a href="https://codepip.com">Codepip</a>. This is my platform of 19 coding games that touch on topics like <a href="https://codepip.com/games/css-scoops/" rel="noopener" target="_blank">CSS selectors</a>, <a href="https://codepip.com/games/disarray/" rel="noopener" target="_blank">JavaScript array methods</a>, <a href="https://codepip.com/games/regex-machina/">regular expressions</a>, and <a href="https://codepip.com/games/querymon/" rel="noopener" target="_blank">SQL</a>. Register a free account there to save your progress and get access to 10 bonus levels.</p>
<p>In Anchoreum, you use CSS anchor positioning to help a museum set up its new exhibit by affixing labels to each anchor display. It’s inspired in part by <a href="https://chrome.dev/anchor-tool/">this nifty anchor tool from Una Kravets</a>.</p>
<p>To get a taste of the game, here’s the video trailer.</p>
<p><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/_Ub5Aejoi7Q?si=UkXXw3CI53KOz98S" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h2>What Exactly is Anchor Positioning?</h2>
<p>The best way to answer to this is to play Anchoreum. But in a nutshell, CSS anchor positioning is a new layout module that let’s you position and size one element relative to another. There are also options to set fallback behaviors when the element is scrolled off the page. You can tether one element to another, useful for building components like tooltips, dialogs, and dropdown menus.</p>
<p>It introduces new CSS properties like <code>position-area</code>, <code>position-anchor</code>, <code>anchor-name</code>, <code>position-visibility</code>, and <code>position-try</code>, functions like <code>anchor()</code> and <code>anchor-size()</code>, and the <code>anchor-center</code> value. Take a deep dive on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning" rel="noopener" target="_blank">MDN</a>.</p>
<h2>How’s Support?</h2>
<p>Anchoreum can be played on Google Chrome or Microsoft edge as of today, and on other browsers as they implement CSS anchor thanks to feature detection.</p>
<p>CSS anchor is a bleeding-edge feature. Support is far from 100% — <a href="https://caniuse.com/?search=position-area" rel="noopener" target="_blank">at the time of this writing, it sits at 49%</a>. And as far as I can tell, no suitable polyfill exists. Here’s hoping Firefox and Safari get on board soon.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2024/11/learning-css-anchor-positioning-with-anchoreum/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>3D Printing a Whiteboard Template for NYT Spelling Bee</title>
<link>https://thomaspark.co/2024/09/3d-printing-a-whiteboard-template-for-nyt-spelling-bee/</link>
<comments>https://thomaspark.co/2024/09/3d-printing-a-whiteboard-template-for-nyt-spelling-bee/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 09 Sep 2024 12:10:29 +0000</pubDate>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13514</guid>
<description><![CDATA[My son’s current obsession is the New York Times word game Spelling Bee. Every day, he looks up the letters (he says it’s gonna be a good one if the puzzle has e & d, … <a href="https://thomaspark.co/2024/09/3d-printing-a-whiteboard-template-for-nyt-spelling-bee/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>My son’s current obsession is the New York Times word game <a href="https://www.nytimes.com/puzzles/spelling-bee" rel="noopener" target="_blank">Spelling Bee</a>. Every day, he looks up the letters (he says it’s gonna be a good one if the puzzle has e & d, or i & n & g). Then it’s time to work our way up the ranks to “genius”.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-1600x1018.png" alt="NYT Spelling Bee" width="800" height="509" class="border aligncenter size-large wp-image-13519" srcset="https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-1600x1018.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-800x509.png 800w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-768x488.png 768w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-1536x977.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-2048x1303.png 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Our routine is to put the daily puzzle on our whiteboard. We keep the honeycomb grid drawn on, and fill in the letters every morning. The problem with this is the hexagons frequently get smudged, and become crookeder and crookeder each time they’re redrawn. </p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-1412x1200.jpg" alt="Whiteboard" width="800" height="680" class="aligncenter size-large wp-image-13547" srcset="https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-1412x1200.jpg 1412w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-800x680.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-768x653.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-1536x1306.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2.jpg 1600w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>To address this, I 3D printed the honeycomb grid. The model is a simple one I made in <a href="https://www.tinkercad.com/" rel="noopener" target="_blank">Tinkercad</a>. An arrangement of hexagons, the Spelling Bee mascot on top, and insets on the back for neodymium magnets that can be attached to our magnetic whiteboard.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2024/09/Tinkercad.png" alt="Tinkercad" width="1400" height="914" class="aligncenter size-full wp-image-13528" srcset="https://thomaspark.co/wp/wp-content/uploads/2024/09/Tinkercad.png 1400w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Tinkercad-800x522.png 800w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Tinkercad-768x501.png 768w" sizes="auto, (max-width: 1400px) 100vw, 1400px" /></p>
<p>I uploaded this model to <a href="https://craftcloud3d.com/">Craftcloud</a> and ordered it in yellow PLA.</p>
<p>When the print arrived, I inserted in the magnets. Unfortunately, the magnetic force of <a href="https://www.amazon.com/dp/B0BRZSRPMP/" rel="noopener" target="_blank">my whiteboard</a> is weak due to its glass surface layer, and the 4mm magnets I used weren’t quite strong enough. That’ll have to be worked out in v2. I ended up reinforcing the bond with <a href="https://www.amazon.com/gp/product/B07VNSXY31/" rel="noopener" target="_blank">reusable double-sided tape</a>. Here’s the result.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-Whiteboard.jpg" alt="Spelling Bee Whiteboard" width="1400" height="1050" class="aligncenter size-full wp-image-13557" srcset="https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-Whiteboard.jpg 1400w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-Whiteboard-800x600.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-Whiteboard-768x576.jpg 768w" sizes="auto, (max-width: 1400px) 100vw, 1400px" /></p>
<p>On a side note, if you’re a developer, check out <a href="https://codepip.com/codections/">my code-themed homage</a> to another NYT word game, Connections. Be warned, it’s a challenge.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2024/09/3d-printing-a-whiteboard-template-for-nyt-spelling-bee/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
<item>
<title>Buttonhole: A Button You Can Unbutton</title>
<link>https://thomaspark.co/2023/09/buttonhole-a-button-you-can-unbutton/</link>
<comments>https://thomaspark.co/2023/09/buttonhole-a-button-you-can-unbutton/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 26 Sep 2023 12:49:10 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Humor]]></category>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13448</guid>
<description><![CDATA[Skeuomorphism taken to the extreme rarely works. But it can be fun. Like a turntable interface for playing YouTube music or a rotary telephone dial for number inputs. For buttons, skeuomorphic design usually takes form … <a href="https://thomaspark.co/2023/09/buttonhole-a-button-you-can-unbutton/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2023/09/buttonhole.gif" alt="Buttonhole Demo" width="791" height="392" class="aligncenter size-full wp-image-13483" /></p>
<p>Skeuomorphism taken to the extreme rarely works. But it can be fun. Like a <a href="https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/">turntable interface for playing YouTube music</a> or a <a href="https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/">rotary telephone dial for number inputs</a>.</p>
<p>For buttons, skeuomorphic design usually takes form of a physical switch or push button. But what about one that takes the form, and even the behavior, of that <em>other</em> button — the sartorial kind?</p>
<p>Enter <a href="https://thomaspark.co/projects/buttonhole/" rel="noopener" target="_blank">Buttonhole</a>, the UI button you can unbutton.</p>
<h2>Demo</h2>
<p>Drag the button below and observe the change in value:</p>
<p><iframe style="width: 100%; height: 420px; border: none;" src="https://thomaspark.co/projects/buttonhole/"></iframe></p>
<h2>Details</h2>
<p>Buttonhole is implemented as a custom element. Include <a href="https://thomaspark.co/projects/buttonhole/buttonhole.js"><code>buttonhole.js</code></a> on your page and start using the HTML element <code><button-hole></code>:</p>
<pre>
<code class="language-markup"><button-hole buttoned="false"></button-hole></code>
</pre>
<p>Besides dragging the button, you can set the <code>buttoned</code> attribute to <code>true</code> to button the button, and <code>false</code> to unbutton it and return to its initial position.</p>
<p>The element can be customized by setting the following CSS variables:</p>
<pre class="language-css">
<code class="language-css">
--buttonhole-bg-color-left: rgba(0, 0, 0, 1);
--buttonhole-bg-color-right: rgba(0, 0, 0, 0.7);
--buttonhole-button-color: yellow;
--buttonhole-button-size: 2.5rem;
--buttonhole-hole-size: 3rem;
</code>
</pre>
<p>Go on and ditch that dull checkbox!</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2023/09/buttonhole-a-button-you-can-unbutton/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>CarPlay Karaoke: Playing Music Videos and Lyrics Through Cover Art</title>
<link>https://thomaspark.co/2023/05/carplay-karaoke-playing-music-videos-and-lyrics-through-cover-art/</link>
<comments>https://thomaspark.co/2023/05/carplay-karaoke-playing-music-videos-and-lyrics-through-cover-art/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 19 May 2023 14:10:47 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13321</guid>
<description><![CDATA[Can you play videos natively through CarPlay? That is, without jailbreaking your phone or buying expensive hardware. The short answer is, no. The longer answer is, poorly. Poorly as in, slice up a video’s audio … <a href="https://thomaspark.co/2023/05/carplay-karaoke-playing-music-videos-and-lyrics-through-cover-art/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Can you play videos natively through CarPlay? That is, without <a href="https://carbridge.app/" rel="noopener nofollow" target="_blank">jailbreaking your phone</a> or <a href="https://www.amazon.com/s?k=carplay+ai+box&linkCode=ll2&tag=thomasparkco-20&linkId=b5f9131fd059d8df3f30ddc967853f57&language=en_US&ref_=as_li_ss_tl" rel="noopener nofollow" target="_blank">buying expensive hardware</a>. The short answer is, no.</p>
<p>The longer answer is, poorly.</p>
<p>Poorly as in, slice up a video’s audio track, treat each slice’s album art as a video frame, and play it back as a gapless album. How well can this simulate video? What follows is my experimentation with this hack.</p>
<p>Note: Apple restricts video from CarPlay for a reason. Keep your eyes on the road while driving.</p>
<h2>From Music Videos to Slideshows</h2>
<p>For my first test subject, I used the music video for A-Ha’s 1985 classic <em>Take On Me</em>. For my scalpel, I grabbed <a href="https://ffmpeg.org/" rel="noopener" target="_blank">FFmpeg</a>, the ultimate open source tool for manipulating audio and video.</p>
<p>I started ambitious, splitting the song’s audio track into 100-millisecond segments. This netted 2,271 MP3s and a theoretical frame rate of 10fps. Each MP3’s cover art was a still generated from its video segment. The MP3s were then loaded onto an Apple Music playlist and synced to CarPlay.</p>
<p>Predictably, this playlist stalled. The Music app had trouble playing a single MP3.</p>
<p>I bumped up the segments to 1 second. Lo and behold, Apple Music was able to start this playlist. Both the song and music video were recognizable now.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-1600x829.png" alt="Take On Me on CarPlay" width="800" height="415" class="aligncenter size-large wp-image-13431" srcset="https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-1600x829.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-800x415.png 800w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-768x398.png 768w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-1536x796.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay.png 1920w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Yet, it struggled. The biggest hiccups were in the transition from one MP3 to the next. Tracks would start too soon, leaving a tiny but perceptible gap of silence, or too late, skipping a beat. Sometimes the player would freeze.</p>
<p>Next I tried 10 seconds. Much improved, but by now the experience was less a video and more a slideshow. And the transitions between tracks still wasn’t perfectly smooth. Some tracks also suffered from pops and squelches at their start. This was the case on CarPlay, on iPhone, and on Mac.</p>
<p>Switching from a lossy format like MP3 to a lossless one — ALAC (Apple Lossless Audio Codec), fixed most of this. But it introduced even worse staticky noise at the end of a few tracks.</p>
<p>Trying to diagnose all this — was it the encoder or the player? — I played the same MP3 and ALAC files through <a href="https://mpv.io/" rel="noopener" target="_blank">mpv</a>. The MP3s were better, and the ALACs were flawless!</p>
<p>Apple Music, not the encoding process, appears to be the root of the problem. The part I have no control over. </p>
<p>My fears were confirmed when I tested Abbey Road, a gapless album purchased and downloaded from the iTunes Store. During the side 2 medley, I heard those same gaps.</p>
<p>This was about as a good as I was gonna get.</p>
<h2>Generating Lyrics from Subtitles</h2>
<p>With full-motion video out of reach, I pivoted from music videos to lyrics. This is actually a feature I’ve wanted in CarPlay. Who doesn’t want to host their own carpool karaoke?</p>
<p>As a quick test, I sliced up one of those lyric videos with a cheesy Hawaiian sunset background from YouTube. The text was a tad small, but the results were promising.</p>
<p>I took it a step further and generated my own images, keeping the stills from the music videos, overlaid with lyrics plucked from the associated SRT (SubRip subtitle file). SRTs contain timestamps for each line of the lyrics, which I used to mark the segments.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-1600x829.png" alt="Take On Me Lyrics on CarPlay" width="800" height="415" class="aligncenter size-large wp-image-13406" srcset="https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-1600x829.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-800x415.png 800w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-768x398.png 768w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-1536x796.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay.png 1920w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Success. But judge for yourself. Here are videos of it in action.</p>
<p>Judy Garland’s <em>Somewhere Over the Rainbow</em>:</p>
<p><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/CMPIw6EQrsI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></p>
<p>And Encanto’s <em>We Don’t Talk About Bruno</em>:</p>
<p><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/XjqrSSwgzbk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></p>
<h2>Flexing FFmpeg</h2>
<p>None of this would have been possible without FFmpeg. Using only FFmpeg, I was able to:</p>
<ul>
<li>Burn lyrics to the music video using subtitles from an SRT file</li>
<li>Re-encode the video with new keyframes to force segments at precise frames</li>
<li>Segment the video at timestamps to produce audio segments</li>
<li>Attach metadata to each audio segment including a screenshot from the video as cover art</li>
</ul>
<p>Here’s the full shell script if you want to try it out. To all the FFmpeg pros out there, please suggest any improvements to the code.</p>
<pre>
<code class="language-bash">
# settings
mp4="take-on-me.mp4"
srt="take-on-me.srt"
title="Take On Me"
artist="A-Ha"
album="Hunting High and Low"
date="1985"
# get timestamps from srt
timestamps=$(grep -oE "^\d+:\d+:\d+," $srt | sed -e "s/,/.999/" | paste -sd "," -)
# hardcode subtitles
mkdir temp
ffmpeg -i $mp4 \
-vf "subtitles=$srt:force_style='Fontsize=48,Alignment=10,PrimaryColour=&Hffffff&'" \
-c:a copy \
temp/subtitles.mp4
# add keyframes for exact segments
ffmpeg -i temp/subtitles.mp4 \
-force_key_frames $timestamps \
temp/keyframes.mp4
# segment mp4s
mkdir -p temp/mp4
ffmpeg -i temp/keyframes.mp4 \
-c copy \
-f segment \
-segment_times $timestamps \
-segment_start_number 1 \
-reset_timestamps 1 \
temp/mp4/%d.mp4
# add metadata to mp3s
mkdir output
files=(temp/mp4/*.mp4)
for ((i=1; i<=${#files[@]}; i++)); do
ffmpeg -y -i temp/mp4/$i.mp4 \
-map 0:a:0 \
-map 0:v:0 \
-c:a libmp3lame \
-metadata title="$title" \
-metadata artist="$artist" \
-metadata album="$album" \
-metadata date="$date" \
-metadata track="$i/${#files[@]}" \
output/"$title $(printf '%04d' $i)".mp3
done
# delete temp files
rm -r temp
</code>
</pre>
<h2>Next Chapter</h2>
<p>Two other avenues worth exploring are audiobooks and podcasts with chapter artwork. Wonder how far they could be pushed.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2023/05/carplay-karaoke-playing-music-videos-and-lyrics-through-cover-art/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>Needledrop: A Turntable Interface for Music Playback</title>
<link>https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/</link>
<comments>https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 03 Mar 2021 14:17:37 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13148</guid>
<description><![CDATA[My latest experiment is Needledrop, a turntable interface for playing music from YouTube. Enjoy chill vibes as you spin a virtual vinyl of your favorite album from YouTube. You can try it for yourself here: … <a href="https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/">Read more</a>]]></description>
<content:encoded><![CDATA[<div style="margin-bottom: 4rem;"><div style="width: 800px;" class="wp-video"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
<video class="wp-video-shortcode" id="video-13148-1" width="800" height="567" preload="metadata" controls="controls"><source type="video/mp4" src="https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop.mp4?_=1" /><a href="https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop.mp4">https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop.mp4</a></video></div></div>
<p>My latest experiment is <a href="https://thomaspark.co/projects/needledrop/" rel="noopener" target="_blank">Needledrop</a>, a turntable interface for playing music from YouTube. Enjoy chill vibes as you spin a virtual vinyl of your favorite album from YouTube. You can try it for yourself here:</p>
<div class="center"><a class="standard-btn black-btn xlarge-btn" href="https://thomaspark.co/projects/needledrop/" target="_blank" rel="noopener">Needledrop</a></div>
<p>With Needledrop, I went for the Dieter Rams school of design. It’s inspired by unapologetically skeuomorphic interfaces like Apple’s original Podcasts app, which featured a reel-to-reel tape machine. While I preferred the digitally native approach of <a href="https://apps.apple.com/us/app/overcast/id888422857" rel="noopener" target="_blank">Overcast</a> for day-to-day use, Apple’s approach was visually striking.</p>
<div id="attachment_13195" style="width: 460px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-13195" src="https://thomaspark.co/wp/wp-content/uploads/2021/03/apple-podcasts-600x800.jpg" alt="Apple Podcasts" width="450" height="600" class="size-medium wp-image-13195" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/03/apple-podcasts-600x800.jpg 600w, https://thomaspark.co/wp/wp-content/uploads/2021/03/apple-podcasts.jpg 768w" sizes="auto, (max-width: 450px) 100vw, 450px" /><p id="caption-attachment-13195" class="wp-caption-text">Photo by <a href="https://www.flickr.com/photos/atmasphere/8320805931/" rel="noopener" target="_blank">Jonathan Greene</a></p></div>
<p>Podcast’s interface wasn’t just veneer; the reels would progress as the podcast did, providing a subtle visual cue alongside the progress bar. Likewise in Needledrop, the tone arm travels across the record.</p>
<p>But Needledrop takes the interactivity one step further. Drop the needle and find your favorite track, more or less. It’s fuzzy and inexact, and emphasizes the continuous listening experience an album can be.</p>
<h2>Pick Your Track</h2>
<p>Click the “Track” button, paste the link to your favorite album from YouTube, and it’ll load on the platter. You can bookmark the URL for easy access and share it with friends.</p>
<p>A few quick picks:</p>
<ul>
<li><a href="https://thomaspark.co/projects/needledrop/?-3frA_rj918" rel="noopener" target="_blank">Beach House – Bloom</a></li>
<li><a href="https://thomaspark.co/projects/needledrop/?7OaKSeEX3ow" rel="noopener" target="_blank">Clairo – Best Of</a></li>
<li><a href="https://thomaspark.co/projects/needledrop/?X4YlPELZKdQ" rel="noopener" target="_blank">Joji – Nectar</a></li>
<li><a href="https://thomaspark.co/projects/needledrop/?sLKMmEpcogQ" rel="noopener" target="_blank">Radiohead – A Moon Shaped Pool</a></li>
<li><a href="https://thomaspark.co/projects/needledrop/?OB12BslMI3Q" rel="noopener" target="_blank">Tyler the Creator – Flower Boy</a></li>
</ul>
<p>Singles and podcasts work, and streams like <a href="https://thomaspark.co/projects/needledrop/?5qap5aO4i9A" rel="noopener" target="_blank">lofi hip hop radio</a> sorta work. And of course <a href="https://thomaspark.co/projects/needledrop/?VN562bgJRZ4" rel="noopener" target="_blank"><em>the</em> needle drop</a>.</p>
<p>Fun fact: <a href="https://www.bradyharanblog.com/vinyl/mount-doom" rel="noopener" target="_blank">podcasts have actually been pressed on vinyl</a>.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-1600x1133.jpg" alt="Hello Internet" width="800" height="567" class="aligncenter size-large wp-image-13254" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-1600x1133.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-800x567.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-768x544.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-1536x1088.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-2048x1451.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<h2>Skeuomorphic Effects in CSS</h2>
<p>Of course this post wouldn’t be complete if I didn’t geek out on implementation details.</p>
<p>First, to achieve spinning record, the following CSS animation was used. The 1.8 second duration corresponds with 33 1/3 rpm.</p>
<pre class="language-css">
<code class="language-css">
#record {
animation: spin 1.8s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
</code>
</pre>
<p>To pause the animation when the “Stop” button is tapped, I first tried <code class="language-css">animation: none;</code>. I quickly noticed that when you resume play, the animation will reset and the record jumps back to its initial position. To smooth out the animation, use this instead:</p>
<pre class="language-css">
<code class="language-css">
.pause #record {
animation-play-state: paused;
}
</code>
</pre>
<p>Needledrop can switch between 33 and 45 rpm. When changing the animation duration to account for this, I ran into a similar problem with the spinning animation being jerky. This happened even if I used a CSS variable like <code class="language-css">animation-duration: var(--duration);</code>.</p>
<p>To work around this, I nested two elements. When the mode is changed to 45 rpm, the second element activates a spin animation as well. After some quick maths, I set the duration of the second spin to 5.1428 seconds.</p>
<p>I also offset the rotation slightly with <code class="language-css">transform-origin</code>, creating a slight wobble effect.</p>
<p>To finish the record’s styles, I added grooves with:</p>
<pre class="language-css">
<code class="language-css">
background: repeating-radial-gradient(var(--record-color),
var(--record-groove-color) 3px,
var(--record-groove-color) 3px);
</code>
</pre>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-1600x962.jpg" alt="Needledrop Record" width="800" height="481" class="aligncenter size-large wp-image-13249" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-1600x962.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-800x481.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-768x462.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-1536x924.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record.jpg 1776w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>I also gave it a shine by positioning an element over the record with a conic background. A separate element was used so the shine wouldn’t rotate with the record.</p>
<pre class="language-css">
<code class="language-css">
background: conic-gradient(transparent 20deg,
rgba(255, 255, 255, .1) 40deg,
rgba(255, 255, 255, .1) 50deg,
transparent 60deg,
transparent 200deg,
rgba(255, 255, 255, .08) 220deg,
rgba(255, 255, 255, .08) 240deg,
transparent 250deg,
transparent 340deg);
</code>
</pre>
<p>To move the arm of the record player, I used <code class="language-css">transform: rotate(45deg);</code> and set a transition delay, calculating how long it should take for the arm to reach its final position in JavaScript. </p>
<h2>YouTube API</h2>
<p>Needledrop is built using the <a target="_blank" href="https://developers.google.com/youtube/iframe_api_reference" rel="noopener">YouTube Player API</a>.</p>
<p>The API makes it easy to speed up the video when set to 45 rpm, among other things:</p>
<pre class="language-javascript">
<code class="language-javascript">
player.setPlaybackRate(1.35);
</code>
</pre>
<p>Of course when you’re using a third-party API, you’re beholden to their terms of service. In this case, the key sections of <a href="https://developers.google.com/youtube/terms/developer-policies#i.-additional-prohibitions">Google’s TOS</a> are:</p>
<blockquote><p>
You and your API Clients must not, and must not encourage, enable, or require others to:</p>
<p>6. modify, build upon, or block any portion or functionality of a YouTube player;</p>
<p>7. separate, isolate, or modify the audio or video components of any YouTube audiovisual content made available as part of, or in connection with, YouTube API Services. For example, you must not apply alternate audio tracks to videos;</p>
<p>8. promote separately the audio or video components of any YouTube audiovisual content made available as part of, or in connection with, the YouTube API Services;</p>
<p>9. create, include, or promote features that play content, including audio or video components, from a background player, meaning a player that is not displayed in the page, tab, or screen that the user is viewing;
</p></blockquote>
<p>So yeah. Hiding the video so only the audio track is used was definitely out. To the label it goes. As for the rest, we’re probably pushing it.</p>
<p>Anyway, much of digital design is influenced by its analog analogue. It was fun to bring that to the foreground with Needledrop.</p>
<p>As far as next steps, stay tuned for YouTube playlist and Spotify support.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/feed/</wfw:commentRss>
<slash:comments>16</slash:comments>
<enclosure url="https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop.mp4" length="8852706" type="video/mp4"/>
</item>
<item>
<title>Custom Dutch Blitz Cards</title>
<link>https://thomaspark.co/2021/02/custom-dutch-blitz-cards/</link>
<comments>https://thomaspark.co/2021/02/custom-dutch-blitz-cards/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 17 Feb 2021 14:26:07 +0000</pubDate>
<category><![CDATA[Games]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13065</guid>
<description><![CDATA[The Obsession My family gets competitive with card games. Our latest obsession is Dutch Blitz, a fast-paced game that seems somewhat regional due to the Pennsylvania Dutch influence. To give you an idea of just … <a href="https://thomaspark.co/2021/02/custom-dutch-blitz-cards/">Read more</a>]]></description>
<content:encoded><![CDATA[<h2>The Obsession</h2>
<p>My family gets competitive with card games. Our latest obsession is <a href="https://www.amazon.com/Dutch-Blitz-201/dp/B000BBU0KS/?tag=thomasparkco-20" rel="noopener" target="_blank">Dutch Blitz</a>, a fast-paced game that seems somewhat regional due to the Pennsylvania Dutch influence. </p>
<p>To give you an idea of just how seriously we take it, we have a <a href="https://docs.google.com/spreadsheets/d/1v0TMuj690-1lNP0l-GEXHF-hD3uy70pEnL5LCLYhWAY/edit?usp=sharing" rel="noopener" target="_blank">spreadsheet</a> to keep score and maintain lifetime stats. Feel free to fork it for your own use.</p>
<p>We’ve also purpose-built a Dutch Blitz table with green felt.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-1600x1200.jpg" alt="Dutch Blitz Table" width="800" height="600" class="aligncenter size-large wp-image-13084" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-1600x1200.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-800x600.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-1536x1152.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-2048x1536.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>The latest endeavor? To create custom cards in the style of Dutch Blitz / Ligretto / Nerts.</p>
<h2>The Design</h2>
<p>The Dutch Blitz cards definitely have a charm, but they’ve also got some usability issues. The color combinations have poor contrast, black on blue in particular. Differentiating the boy and girl takes an extra second, which matters in the heat of the moment. The numbers are small and can be tough to read from across the table.</p>
<p>Flip the cards over, and the vintage etchings — the pump, carriage, plow, and pail — are endearing but have no personal significance to us. One is assigned to each player, but keeping straight which is whose takes a few rounds.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/expansion-pack.jpg" alt="Expansion Pack" width="600" height="322" class="aligncenter size-full wp-image-13107" /></p>
<p>For more than 4 players, <a href="https://www.amazon.com/Dutch-Blitz-DB-202-Expansion/dp/B00JJ4PNHI/?tag=thomasparkco-20" rel="noopener" target="_blank">the expansion pack</a> is just a palette swap of the same four objects.</p>
<p>If <a href="https://www.jamesrobertwatson.com/deck6.html" rel="noopener" target="_blank">a 5th and 6th suit</a> can be devised to fit with classic poker cards, it shouldn’t be tough to spot more things around the farm for Dutch Blitz.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/deck6.jpg" alt="Deck6" width="800" height="522" class="aligncenter size-full wp-image-13078" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/02/deck6.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/deck6-768x501.jpg 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<h2>The Redesign</h2>
<p>And so I took the opportunity to design custom cards and have some fun with personalized illustrations.</p>
<p>For the redesigned faces, I took a modern, minimalist style inspired by <a href="https://www.areaware.com/products/minim-playing-cards?variant=472356541">Minim playing cards</a> and <a href="https://www.amazon.com/Mattel-Games-GYH69-UNO-Minimalista/dp/B089DR3N7S/?tag=thomasparkco-20">UNO Minimalista</a>.</p>
<p>For the backs, I went with branded objects we already associate with different members of the family. Here are the results.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-1600x1065.jpg" alt="Custom Blitz Cards" width="800" height="533" class="aligncenter size-large wp-image-13112" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-1600x1065.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-800x532.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-768x511.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-1536x1022.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-2048x1363.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>You might be able to guess which object is mine.</p>
<p>Here are some alternative backs I had printed up for a gift.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-1600x900.jpg" alt="Custom Dutch Blitz Illustrations" width="800" height="450" class="aligncenter size-large wp-image-13072" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-1600x900.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-800x450.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-768x432.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-1536x864.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Now to playtest this deck and no doubt iterate on it, getting ever closer to the ultimate Dutch Blitz experience.</p>
<h2>Update</h2>
<p>Leeanne has graciously shared her own spin — silly animals in silly hats! They capture the art style of the original game perfectly. My personal favorite is the raccoon in a Croc. What’s yours?</p>
<p>Download her designs <a href="https://thomaspark.co/wp/wp-content/uploads/2021/02/v2PNGSVG.zip">in PNG and SVG format</a>.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-1600x892.png" alt="AnimalsinHats" width="800" height="446" class="aligncenter size-large wp-image-13310" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-1600x892.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-800x446.png 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-768x428.png 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-1536x856.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-2048x1142.png 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Lance Smith also shared his take, representing his family’s ties to DC, VA, OK, and FL.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2-1159x1200.png" alt="Dutch Blitz Lance" width="800" height="828" class="aligncenter size-large wp-image-13444" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2-1159x1200.png 1159w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2-773x800.png 773w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2-768x795.png 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2.png 1200w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2021/02/custom-dutch-blitz-cards/feed/</wfw:commentRss>
<slash:comments>14</slash:comments>
</item>
<item>
<title>Chess Patch Notes</title>
<link>https://thomaspark.co/2020/09/chess-patch-notes/</link>
<comments>https://thomaspark.co/2020/09/chess-patch-notes/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 23 Sep 2020 12:39:38 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Humor]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12928</guid>
<description><![CDATA[Chess is a continuously evolving game. Technically. There have been many rule changes, but each one has taken centuries to be introduced and widely adopted. That might all change though with the latest work from … <a href="https://thomaspark.co/2020/09/chess-patch-notes/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Chess is a continuously evolving game. Technically. There have been many rule changes, but each one has taken centuries to be introduced and widely adopted.</p>
<p>That might all change though with <a href="https://www.chess.com/news/view/new-alphazero-paper-explores-chess-variants" rel="noopener noreferrer" target="_blank">the latest work from AlphaZero</a>, where the self-learning engine was used to evaluate 9 proposed variants of chess. These variants range from reverting the castling rule, to buffing pawns to move 2 square anywhere on the board (called torpedo), to allowing self-capture, all trying to enable more dynamic and creative gameplay.</p>
<p>Coupled with this, the chess and gaming worlds have collided. Led by collaborations like chess grandmaster Hikaru Nakamura mentoring Overwatch grandmaster xQc (or <a href="https://livestreamfails.com/post/81335" rel="noopener noreferrer" target="_blank">vice versa</a>), this has created an online chess boom, especially among younger generations.</p>
<p>Given these developments, it’s hard not to see chess through the lens of modern video games on multiple levels. <a href="https://www.mcsweeneys.net/articles/official-patch-notes-for-chesss-first-major-update-in-1500-years" rel="noopener noreferrer" target="_blank">Could microtransactions be right around the corner?</a></p>
<p>Probably not, but I wanted to show what the history of chess rules looks like presented as patch notes from Blizzard. Check it out:</p>
<div class="center"><a class="standard-btn blue-btn xlarge-btn" href="https://thomaspark.co/projects/chess-patch-notes/">Chess Patch Notes</a></div>
<p>The notes are best read bottom to top. Version numbers roughly correspond with the century in which each change was introduced. Credit to ToastyKen who first shared the patch notes <a href="https://www.reddit.com/r/AnarchyChess/comments/aapg9h/chess_patch_notes_in_the_style_of_video_game/" rel="noopener noreferrer" target="_blank">on Reddit</a> and gave me permission to style them up — PTR is in the works… Chess piece icons provided by <a href="https://www.vecteezy.com/vector-art/297860-four-set-of-chess-pieces" rel="noopener noreferrer" target="_blank">Vecteezy</a>.</p>
<p>Can’t wait to see what v2.1 holds.</p>
<p><a href="https://thomaspark.co/projects/chess-patch-notes/"><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-1600x1102.png" alt="Chess Patch Notes" width="800" height="551" class="aligncenter size-large wp-image-12954" srcset="https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-1600x1102.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-800x551.png 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-768x529.png 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-1536x1058.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes.png 1806w" sizes="auto, (max-width: 800px) 100vw, 800px" /></a></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2020/09/chess-patch-notes/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
<item>
<title>The IKEA Packout</title>
<link>https://thomaspark.co/2020/09/the-ikea-packout/</link>
<comments>https://thomaspark.co/2020/09/the-ikea-packout/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 16 Sep 2020 12:29:11 +0000</pubDate>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12815</guid>
<description><![CDATA[If you’re into tools — think hammers and drills — you’re probably familiar with the extremes people go to protect their prized possessions. The most popular system right now, based on my hours watching carpenter and electrician … <a href="https://thomaspark.co/2020/09/the-ikea-packout/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>If you’re into tools — think hammers and drills — you’re probably familiar with the extremes people go to protect their prized possessions. The most popular system right now, based on my hours watching carpenter and electrician setups on YouTube, is <a href="https://www.milwaukeetool.com/Products/Storage-Solutions/PACKOUT">Milwaukee Packout</a>, an expansive line of interlocking boxes in all shapes and sizes (check out the drag-and-drop builder halfway down the page). These packouts are often fitted with <a href="https://www.fastcap.com/product/kaizen-foam">Kaizen foam</a> to further organize the Milwaukee, Makita, and Knipex therein.</p>
<p>If these brands get this kind of treatment, I figure there’s one more company that deserves the same: IKEA. So I made the IKEA Packout, an ode to the most widely used tools in the world.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-1600x1200.jpg" alt="The IKEA Packout closed" width="800" height="600" class="aligncenter size-large wp-image-12893" srcset="https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-1600x1200.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-800x600.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-1536x1152.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-2048x1536.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<h2>The Parts List</h2>
<p>The IKEA Packout holds one of every single tool I could my hands on, mostly picked from the old IKEA hardware I had laying around. Grab this kit and you’re ready to assemble or disassemble any Swedish furniture thrown your way.</p>
<p>This is a complete collection of IKEA tools available as far as I can tell. But the part numbers do tell a different story. So let me know what I’m missing. Here’s the full list.</p>
<table class="table">
<thead>
<tr>
<th>Part No.</th>
<th>Description</th>
<th>Qty.</th>
</tr>
</thead>
<tbody>
<tr>
<td>100001</td>
<td>S-shaped hex key (4mm)</td>
<td>1</td>
</tr>
<tr>
<td>100002</td>
<td>S-shaped hex key (5mm)</td>
<td>1</td>
</tr>
<tr>
<td>110084</td>
<td>L-shaped hex key (2mm)</td>
<td>1</td>
</tr>
<tr>
<td>100006</td>
<td>L-shaped hex key (3mm)</td>
<td>1</td>
</tr>
<tr>
<td>100092</td>
<td>L-shaped hex key (4mm)</td>
<td>1</td>
</tr>
<tr>
<td>108490</td>
<td>L-shaped hex key (5mm)</td>
<td>1</td>
</tr>
<tr>
<td>100049</td>
<td>L-shaped hex key (6mm)</td>
<td>1</td>
</tr>
<tr>
<td>130445</td>
<td>Long ball-end L-shaped hex key (4mm)</td>
<td>1</td>
</tr>
<tr>
<td>100003</td>
<td>Short ball-end L-shaped hex key (5mm)</td>
<td>1</td>
</tr>
<tr>
<td>121030</td>
<td>Tool handle for hex keys (4mm and 5mm)</td>
<td>1</td>
</tr>
<tr>
<td>100089</td>
<td>Open spanner (8mm and 10mm)</td>
<td>1</td>
</tr>
<tr>
<td>108184</td>
<td>Ring spanner (11mm)</td>
<td>1</td>
</tr>
<tr>
<td>113453</td>
<td>Ring/open Z-shaped spanner (6mm and 13mm)</td>
<td>1</td>
</tr>
<tr>
<td>120202</td>
<td>Hollow wrench (13mm)</td>
<td>1</td>
</tr>
<tr>
<td>106699</td>
<td>Phillips #2 and slot S-shaped screwdriver</td>
<td>1</td>
</tr>
</tbody>
</table>
<p>For the container, I took a <a href="https://www.ikea.com/us/en/p/fixa-200-piece-wood-screw-set-70224228/">FIXA screw set</a>, retailing for $4.99, and removed the orange insert. I cut some 30mm Kaizen foam to size and arranged the tools to fit.</p>
<p>With that, the kit was complete. But who knows, mounting feet to make it compatible with Milwaukee’s stack might be in its future.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-1600x810.jpg" alt="The IKEA Packout open" width="800" height="405" class="aligncenter size-large wp-image-12895" srcset="https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-1600x810.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-800x405.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-768x389.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-1536x777.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-2048x1036.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<h2>The Golden Rule of Assembling IKEA Furniture</h2>
<p>Of course putting together your own IKEA Packout isn’t at all practical. There are far better ways to equip yourself than scrounging around for stamped tools. In fact, this leads to the golden rule: using the right tool for the job.</p>
<p>The IKEA experience has a reputation for being frustrating, with screws stripping and absolutely nothing level, square, plumb, or true. But this is actually the one case you can safely blame your tools.</p>
<h3>Put Down the Phillips</h3>
<p>When you open the instructions booklet, you might see something like this.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-1600x542.png" alt="IKEA screwdriver" width="800" height="271" class="aligncenter size-large wp-image-12903" srcset="https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-1600x542.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-800x271.png 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-768x260.png 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-1536x521.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver.png 1682w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>No text of course, but you see the cross symbol so naturally reach for your Phillips screwdriver. Put it down.</p>
<p>Being a European company and all, IKEA hardly uses Phillips screws, but rather the superior Pozidriv. Size #2. You can tell the difference by the screw head. If it’s a simple cross, it’s a Phillips. If it’s a cross with small hash lines on the diagonals, it’s a Pozi.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-1600x945.jpg" alt="Phillips vs Pozidriv" width="800" height="473" class="aligncenter size-large wp-image-12912" srcset="https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-1600x945.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-800x472.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-768x454.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-1536x907.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-2048x1209.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>While nearly everyone gets by with a Phillips, it’s what strips all the screws. You don’t get the perfect fit.</p>
<p><a href="https://www.ikea.com/us/en/p/fixa-17-piece-tool-kit-00169254/">This Fixa 17-piece tool kit</a> comes with a PZ2 bit along with a bunch of other tools for cheap. Or pick up a high quality one like <a href="https://amzn.to/35IF4qK">this Wera</a> and be set for life.</p>
<h3>Make it Metric</h3>
<p>If you’ve misplaced the hex key that came with your flat pack, fear not. There’s nothing special about them. Hex keys, aka Allen wrenches, can be found at any hardware store.</p>
<p>If you’re reaching for the hex keys in your toolbox, they’re most likely in imperial units. Being a European company, IKEA goes with the superior metric. You need millimeters instead of inches. As long as it covers from 2mm to 8mm (4mm being the classic IKEA size), like <a href="https://amzn.to/2FHvE3K">this Wera set</a>, you’re good to go.</p>
<p>Armed with a Pozidriv #2 screwdriver and metric hex keys, you’ll have the right tools to take on IKEA and beyond.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2020/09/the-ikea-packout/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>The Mad Magazine Fold-In Effect in CSS</title>
<link>https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/</link>
<comments>https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 08 Jun 2020 13:27:40 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Humor]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12754</guid>
<description><![CDATA[After 65 years at Mad Magazine, comic artist Al Jaffee announced his retirement. Jaffee was best known for his Mad Fold-Ins, where folding the page would reveal a hidden message in the artwork. Plenty of … <a href="https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>After 65 years at Mad Magazine, comic artist Al Jaffee <a href="https://www.washingtonpost.com/arts-entertainment/2020/06/06/al-jaffee-mad-magazine-retires/">announced his retirement</a>. Jaffee was best known for his Mad Fold-Ins, where folding the page would reveal a hidden message in the artwork. Plenty of examples can be found on the web. The problem is, they all show the before and after statically, side by side, which diminishes the magic (see <a href="https://en.wikipedia.org/wiki/Mad_Fold-in">here</a> and <a href="https://13thdimension.com/13-mad-fold-ins-an-al-jaffee-celebration/">here</a>). There’s a whole generation who may have only seen the fold-ins in this format.</p>
<p>Of course I had to create the paper folding effect for the web. There’s many different ways to achieve this, but this approach is nice because:</p>
<ul>
<li>It’s CSS only, relying on no JavaScript.</li>
<li>Uses a single image instead of requiring the image to be sliced up in Photoshop.</li>
<li>Can be configured with just HTML by setting CSS variables in a style attribute.</li>
</ul>
<p>Here’s a demo of it in action, using artwork by Johnny Sampson <a href="https://www.madmagazine.com/blog/2019/03/13/a-special-98th-birthday-fold-in-for-al-jaffee">in an issue that celebrated Jaffee’s 98th birthday</a>. Hover or tap to fold.</p>
<div class="jaffee-wrapper"><span class="jaffee" style="--bg: url('https://thomaspark.co/wp/wp-content/uploads/2020/06/jaffee.png');"><span class="a"></span><span class="bc"><span class="b"></span><span class="c"></span></span><img decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/06/jaffee.png"></span></div>
<p>And another by Jaffee himself.</p>
<div class="jaffee-wrapper"><span class="jaffee" style="--bg: url('https://thomaspark.co/wp/wp-content/uploads/2020/06/MAD-Magazine-520-Fold-in.jpg');"><span class="a"></span><span class="bc"><span class="b"></span><span class="c"></span></span><img decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/06/MAD-Magazine-520-Fold-in.jpg"></span></div>
<h3>The Code</h3>
<p>The HTML for the effect is fairly straightforward. You might be wondering about the standalone image element — it’s hidden but used to set the size and aspect ratio of the component. The image path is specified there and once again as a CSS variable to set the background image of the other elements.</p>
<pre class="language-markup">
<code class="language-markup">
<span class="jaffee" style="--bg: url('path/to/image.png');">
<span class="a"></span>
<span class="bc">
<span class="b"></span>
<span class="c"></span>
</span>
<img src="path/to/image.png">
</span>
</code>
</pre>
<p>And here is the CSS used to set the positioning, 3D transforms, and transitions.</p>
<pre class="language-css">
<code class="language-css">
.jaffee {
position: relative;
display: inline-flex;
transform: rotateX(10deg);
transform-style: preserve-3d;
cursor: grab;
}
.jaffee img {
width: auto;
height: auto;
max-width: 100%;
max-height: 56vh;
opacity: 0;
}
.jaffee .a,
.jaffee .b,
.jaffee .c {
top: 0;
display: inline-block;
height: 100%;
background-image: var(--bg);
background-size: cover;
background-repeat: no-repeat;
}
.jaffee .a {
position: absolute;
left: 0;
width: 50%;
background-position: 0 0;
}
.jaffee .bc {
position: absolute;
display: inline-flex;
width: 50%;
height: 100%;
left: 50%;
transform-origin: left;
transition: transform 3s;
transform-style: preserve-3d;
}
.jaffee .b,
.jaffee .c {
position: relative;
width: 50%;
backface-visibility: hidden;
}
.jaffee .b {
background-position: 66.666667% 0;
transform-style: preserve-3d;
}
.jaffee .b:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
transform: rotateY(180deg) translateZ(1px);
transform-style: preserve-3d;
backface-visibility: hidden;
}
.jaffee .c {
background-position: 100% 0;
transform-origin: left;
transition: transform 2s;
}
.jaffee:hover .bc,
.jaffee:active .bc {
transform: rotateY(-180deg) translateZ(-1px);
transition: transform 2s;
}
.jaffee:hover .c,
.jaffee:active .c {
transform: rotateY(180deg) translateZ(2px);
transition: transform 3s;
}
</code>
</pre>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/feed/</wfw:commentRss>
<slash:comments>28</slash:comments>
</item>
<item>
<title>No Scary Parts: A Browser Extension for Skipping Scary Scenes in Disney+ Movies</title>
<link>https://thomaspark.co/2020/05/no-scary-parts-a-browser-extension-for-skipping-scary-scenes-in-disney-movies/</link>
<comments>https://thomaspark.co/2020/05/no-scary-parts-a-browser-extension-for-skipping-scary-scenes-in-disney-movies/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 07 May 2020 12:11:37 +0000</pubDate>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12660</guid>
<description><![CDATA[I’ve made a Chrome browser extension called No Scary Parts. It automatically skips the scary scenes in family movies on Disney+, for the sake of your sensitive kids from age 1 to 100. Install it … <a href="https://thomaspark.co/2020/05/no-scary-parts-a-browser-extension-for-skipping-scary-scenes-in-disney-movies/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><a href="https://thomaspark.co/projects/no-scary-parts/"></p>
<div class="player">
<div class="toolbar">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="field"></div>
</p></div>
<div class="controls">
<div class="progress-bar">
<div class="scene scene-1"></div>
<div class="scene scene-2"></div>
<div class="bar"></div>
</p></div>
<div class="dot"></div>
</p></div>
<div class="video">
<img decoding="async" class="img-fluid" src="https://thomaspark.co/wp/wp-content/uploads/2020/05/scene-a.jpg"><img decoding="async" class="img-fluid" src="https://thomaspark.co/wp/wp-content/uploads/2020/05/scene-b.jpg">
</div>
</div>
<p></a></p>
<p>I’ve made a Chrome browser extension called No Scary Parts. It automatically skips the scary scenes in family movies on Disney+, for the sake of your sensitive kids from age 1 to 100. Install it or learn more by clicking the button below.</p>
<div class="center"><a class="standard-btn purple-btn xlarge-btn" href="https://thomaspark.co/projects/no-scary-parts/">No Scary Parts</a></div>
<h2>Background</h2>
<p>With the COVID-19 quarantine in effect and two little ones at home, Disney+ has provided some much-needed entertainment. But despite being aimed at kids, most Disney movies inevitably include <a href="https://www.buzzfeed.com/eleanorbate/scary-as-shit-disney-moments" rel="noopener noreferrer" target="_blank">a scene or two that ramp up the creepiness</a>. I mean, who wasn’t scarred by the pink elephants in Dumbo or “Night on Bald Mountain” in Fantasia as a youngin? Storytelling and character-building aside, at their age, my kids just want to enjoy the familiar characters and fun music. Other parents have relayed these sentiments to me too.</p>
<p>I could sit by, remote at the ready, fast forwarding scary scenes long burned into my memory. Maybe you already do that. But fortunately, having already written an extension with similar functionality, it didn’t take much code to do that work for me.</p>
<h2>Implementation</h2>
<p>Controlling video in Disney+ isn’t too different from Netflix, so much of the code outlined in <a href="https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/">the post about Slow Down x Terrace House</a> could be reused.</p>
<p>A new facet of this project however was highlighting upcoming scary scenes in the progress bar. As a React app, Disney+’s progress bar is added and removed from the DOM as the user hovers and unhovers the video. To detect each time the progress bar is added and then add our own highlights, <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="noopener noreferrer" target="_blank">MutationObserver</a> could be used.</p>
<p>Instead, I opted for CSS. A style rule is created that applies a linear gradient to the progress bar, with hard stops alternating between the highlight color and transparent to indicate skipped scenes.</p>
<p>As a side note, I quickly ran into <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=892711" rel="noopener noreferrer" target="_blank">Chrome bug 892711</a>, where if you have more than eight intervals (or basically three highlights) in your linear gradient, hard stops are rendered with blurry boundaries. It wasn’t a dealbreaker, but hopefully will get fixed.</p>
<h2>Future Work</h2>
<p>No Scary Parts currently supports Frozen, Moana, Beauty and the Beast, The Little Mermaid, and Fantasia. If there’s interest, more can be added. Leave your requests in the comments below.</p>
<p>Other streaming services like Netflix and Amazon Prime could be supported in the future, but I suspect my hands will be plenty full with creepy Disney scenes.</p>
<p>Everyone differs in their sensitivity, so setting your own level of filters, or time-stamping your own scenes, would be nice to add.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2020/05/no-scary-parts-a-browser-extension-for-skipping-scary-scenes-in-disney-movies/feed/</wfw:commentRss>
<slash:comments>33</slash:comments>
</item>
<item>
<title>Korean Keycaps for Your MacBook Pro</title>
<link>https://thomaspark.co/2019/11/korean-keycaps-for-the-macbook-pro/</link>
<comments>https://thomaspark.co/2019/11/korean-keycaps-for-the-macbook-pro/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 19 Nov 2019 13:33:20 +0000</pubDate>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12587</guid>
<description><![CDATA[So you want a different language keyboard for your MacBook Pro. And it’s too late to pick that option at checkout. Apple Support won’t be much help here. They won’t change your keyboard language after … <a href="https://thomaspark.co/2019/11/korean-keycaps-for-the-macbook-pro/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-scaled.jpg" alt="Korean Keycaps for MacBook Pro" width="2560" height="1199" class="aligncenter size-full wp-image-12588" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-scaled.jpg 2560w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-800x375.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-1600x749.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-768x360.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-1536x719.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-2048x959.jpg 2048w" sizes="auto, (max-width: 2560px) 100vw, 2560px" /></p>
<p>So you want a different language keyboard for your MacBook Pro. And it’s too late to <a href="http://thomaspark.co/wp/wp-content/uploads/2019/11/apple-keyboard-language-option.png">pick that option at checkout</a>.</p>
<p>Apple Support won’t be much help here. They won’t change your keyboard language after it’s been delivered. Even if they wanted to, they don’t carry the right parts for your “vintage model”, so they say.</p>
<p>You still have options.</p>
<h2>Keyboard Stickers</h2>
<p>The cheapest route are <a href="https://www.amazon.com/FORITO-Keyboard-Stickers-Background-Lettering/dp/B01N7R4EWC/?tag=thomasparkco-20">decals</a> you apply to your existing keys. But for someone as OCD as me, centering all of those stickers perfectly is a frustrating proposition. And before long, the stickers fade and peel.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-stickers.jpg" alt="Silicone Keyboard Cover" width="1024" height="498" class="aligncenter size-full wp-image-12622" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-stickers.jpg 1024w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-stickers-800x389.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-stickers-768x374.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></p>
<h2>Silicon Cover</h2>
<p>You can also go with a <a href="https://www.amazon.com/Kuzy-Language-Keyboard-MacBook-Silicone/dp/B00FX0KPN4/?tag=thomasparkco-20">silicone skin</a> that you lay over your keyboard. It looks nicer, and as a bonus, keeps Cheeto crumbs out of your keyboard. But as thin as it is, it still affects the feel of your keyboard, giving keys a spongier travel as you type. Also having the cover shift or flop around from time to time is an annoyance.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2019/11/silicone-keyboard-cover.jpg" alt="Silicone Keyboard Cover" width="1200" height="1006" class="aligncenter size-full wp-image-12619" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/11/silicone-keyboard-cover.jpg 1200w, https://thomaspark.co/wp/wp-content/uploads/2019/11/silicone-keyboard-cover-800x671.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/11/silicone-keyboard-cover-768x644.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h2>Replacement Keycaps</h2>
<p>There are vendors offering replacement keycaps, <a href="https://www.thebookyard.com/apple-keycaps.php">TheBookyard</a> carrying the most inventory. But at $6 per key, you’ll be dropping serious cash to switch 26 keys. They only carry EU languages too, so I was out of luck in my quest for Korean keys. Chinese and Japanese are also missing. I was surprised to find no sources for these languages anywhere.</p>
<h2>Salvage Keyboard Parts</h2>
<p>The best option I found was to salvage a third-party replacement keyboard part for keycaps. I got mine from <a href="https://www.ebay.com/itm/New-AC07-Korean-Keyboard-For-Macbook-Pro-Retina-15-A1398-2012-2013-2014-2015/392509473524">eBay here</a> and can vouch that the keys fit my late-2013 MacBook Pro 15 perfectly.</p>
<p><a href="https://www.ebay.com/itm/New-AC07-Korean-Keyboard-For-Macbook-Pro-Retina-15-A1398-2012-2013-2014-2015/392509473524"><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-part.jpg" alt="Korean Keyboard Part" width="900" height="553" class="aligncenter size-full wp-image-12614" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-part.jpg 900w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-part-800x492.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-part-768x472.jpg 768w" sizes="auto, (max-width: 900px) 100vw, 900px" /></a></p>
<p>You’ll want to make absolutely sure you get the right key type based on the different hinge mechanisms. For instance, the late-2013 model came in two different types — Type AC06 also referred to as Type J, and AC07 or K. You can determine yours by removing your keys and comparing the hinge with the reference photos <a href="https://thomaspark.co/wp/wp-content/uploads/2019/11/type-ac06-ac07-keys.png">here</a> and <a href="https://thomaspark.co/wp/wp-content/uploads/2019/11/type-j-k-keys.jpg">here</a>.</p>
<p>Be sure to also avoid damage when <a href="https://www.youtube.com/watch?v=kh88cn_rtLo">prying off the old and new keycaps</a>.</p>
<p>With care, you’ll get new language keys for relatively cheap, pretty much indistinguishable from Apple’s official keyboard.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2019/11/korean-keycaps-for-the-macbook-pro/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>A Simple Hack to get Impact Mode on your PixMob Band</title>
<link>https://thomaspark.co/2019/10/a-simple-hack-to-get-impact-mode-on-your-pixmob-band/</link>
<comments>https://thomaspark.co/2019/10/a-simple-hack-to-get-impact-mode-on-your-pixmob-band/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 02 Oct 2019 23:49:03 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12538</guid>
<description><![CDATA[At the Overwatch League Grand Finals in Philadelphia, attendees received white wristbands that blink different colors in sync with each other during the event. When the San Francisco Shock won a round, they flashed orange … <a href="https://thomaspark.co/2019/10/a-simple-hack-to-get-impact-mode-on-your-pixmob-band/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>At the <a href="https://carboncostume.com/cosplay-at-the-overwatch-league-grand-finals-2019-in-philadelphia/">Overwatch League Grand Finals in Philadelphia</a>, attendees received white wristbands that <a href="https://streamable.com/jnm6q">blink</a> different colors in sync with each other during the event. When the San Francisco Shock won a round, they flashed orange and white in unison. When the Vancouver Titans — well, nevermind…</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/10/sfshock-win.gif" alt="SF Shock Win" width="500" height="300" class="aligncenter size-full wp-image-12554" /></p>
<p>These bands, made by <a href="https://www.pixmob.com/">PixMob</a>, have been used at various sporting events and concerts, most famously on <a href="https://www.pixmob.com/projects/detail/taylor-swift-reputation-stadium-tour">Taylor Swift’s tours</a>. They’re synchronized using an array of infrared transmitters set up in the arena, each sending signals to a different seating section.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band.jpg" alt="PixMob Band from Overwatch League Grand Finals" width="1800" height="1149" class="aligncenter size-full wp-image-12548" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band.jpg 1800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-800x511.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-768x490.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-1600x1021.jpg 1600w" sizes="auto, (max-width: 1800px) 100vw, 1800px" /></p>
<p>Now you’re home from the event, and you don’t have an IR installation in your living room. But that doesn’t mean you have to throw your PixMob band away.</p>
<p>Instead, you can activate something called Impact Mode. Once it’s set, the band will blink different colors as you tap or shake it. Older PixMob models required <a href="https://www.youtube.com/watch?v=UQHpJ0dJJXQ">some disassembly</a> to achieve this. Fortunately, with the latest model, PixMob have made it easier than ever.</p>
<p>First open up the battery compartment on the back of the band and remove the two coin batteries.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open.jpg" alt="Open PixMob Band" width="1800" height="1200" class="aligncenter size-full wp-image-12549" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open.jpg 1800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open-800x533.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open-768x512.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open-1600x1067.jpg 1600w" sizes="auto, (max-width: 1800px) 100vw, 1800px" /></p>
<p>Underneath, you’ll find a circuit board. Locate the contact labeled “OPEN MODE”. Break this contact along the yellow line I drew in the photo below. I scratched mine off using the smallest screwdriver I could find.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-zoom.jpg" alt="PixMob Band Zoomed" width="1279" height="636" class="aligncenter size-full wp-image-12551" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-zoom.jpg 1279w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-zoom-800x398.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-zoom-768x382.jpg 768w" sizes="auto, (max-width: 1279px) 100vw, 1279px" /></p>
<p>Replace your batteries and enjoy your PixMob band back from the dead. Now you have proof that the band can also flash blue and green.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-band-hack.gif" alt="PixMob Band Hack" width="480" height="240" class="aligncenter size-full wp-image-12568" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2019/10/a-simple-hack-to-get-impact-mode-on-your-pixmob-band/feed/</wfw:commentRss>
<slash:comments>9</slash:comments>
</item>
<item>
<title>Querying Nearby Locations in WordPress using Geo Coordinates</title>
<link>https://thomaspark.co/2019/09/querying-nearby-locations-in-wordpress-using-geo-coordinates/</link>
<comments>https://thomaspark.co/2019/09/querying-nearby-locations-in-wordpress-using-geo-coordinates/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 16 Sep 2019 12:31:17 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12502</guid>
<description><![CDATA[In the course of developing Campus Arrival, a WordPress site that provides school-specific packing lists, we added a feature to suggest nearby universities. When viewing a school’s checklist, this feature displays other, nearby colleges. When … <a href="https://thomaspark.co/2019/09/querying-nearby-locations-in-wordpress-using-geo-coordinates/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>In the course of developing <a href="https://campusarrival.com" rel="noopener noreferrer" target="_blank">Campus Arrival</a>, a WordPress site that provides school-specific packing lists, we added a feature to suggest nearby universities. When viewing a school’s checklist, this feature displays other, nearby colleges. When viewing the front page, it suggests colleges near the visitor’s own location. For example, check out the suggestions for <a href="https://campusarrival.com/schools/massachusetts-institute-of-technology/#local">MIT</a>, <a href="https://campusarrival.com/schools/university-of-california-los-angeles/#local">UCLA</a>, or <a href="https://campusarrival.com/">your own location</a>.</p>
<p><a href="https://campusarrival.com" rel="noopener noreferrer" target="_blank"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_.png" alt="Campus Arrival nearby schools" width="2422" height="1366" class="aligncenter size-full wp-image-12511" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_.png 2422w, https://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_-800x451.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_-768x433.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_-1600x902.png 1600w" sizes="auto, (max-width: 2422px) 100vw, 2422px" /></a></p>
<p>This was implemented in WordPress by querying nearby schools based on geo coordinates, i.e., latitude and longitude. (Our first pass used a custom taxonomy with in-state schools, but we knew the results could be improved.)</p>
<p>If you’d like to do something similar, follow the steps in this guide.</p>
<h1>Post Meta</h1>
<p>Start by adding custom post meta fields for <code>latitude</code> and <code>longitude</code>. The WP plugin <a href="https://www.advancedcustomfields.com" rel="noopener noreferrer" target="_blank">Advanced Custom Fields</a> is a godsend for creating nice admin-facing interfaces to manage custom post meta.</p>
<h1>The Hooks</h1>
<p>First we start with the PHP code. The meat of the implementation is this function, cobbled together from <a href="https://wordpress.stackexchange.com/a/183503/154090" rel="noopener noreferrer" target="_blank">this comment</a> on the WordPress StackExchange, that accepts a set of coordinates, along with a few other parameters like the max search distance and number of posts to return, and returns the posts with the nearest latitude and longitude.</p>
<pre>
<code class="lang-php">
function query_neighbors( $latitude, $longitude, $post_id = -1, $distance = 400, $limit = 6 ) {
global $wpdb;
$earth_radius = 3959; // miles
$sql = $wpdb->prepare( "
SELECT DISTINCT
p.ID,
p.post_title,
map_lat.meta_value,
map_lng.meta_value,
( %d * acos(
cos( radians( %s ) )
* cos( radians( map_lat.meta_value ) )
* cos( radians( map_lng.meta_value ) - radians( %s ) )
+ sin( radians( %s ) )
* sin( radians( map_lat.meta_value ) )
) )
AS distance
FROM $wpdb->posts p
INNER JOIN $wpdb->postmeta map_lat ON p.ID = map_lat.post_id
INNER JOIN $wpdb->postmeta map_lng ON p.ID = map_lng.post_id
WHERE p.post_type = 'school'
AND p.post_status = 'publish'
AND p.ID != %d
AND map_lat.meta_key = 'latitude'
AND map_lng.meta_key = 'longitude'
HAVING distance < %s
ORDER BY distance ASC
LIMIT %d",
$earth_radius,
$latitude,
$longitude,
$latitude,
$post_id,
$distance,
$limit
);
$neighbors = $wpdb->get_results( $sql );
return $neighbors;
}
</code>
</pre>
<p>This function, along with the AJAX hook below, should be added to your custom plugin or <code>functions.php</code>. In the “do your thing” section, construct your markup, perhaps using a template.</p>
<pre>
<code class="lang-php">
function process_neighbors() {
check_ajax_referer( 'neighbors_validation', 'security');
$location = $_POST['location'];
$url = wp_get_referer();
$post_id = url_to_postid( $url );
if ( isset( $location ) ) {
$neighbors = query_neighbors( $location['latitude'], $location['longitude'], $post_id, 400, 6 );
$response = '';
if ( $neighbors ) {
foreach( $neighbors as $neighbor ) {
setup_postdata( $neighbor );
// do your thing
wp_reset_postdata();
}
}
if ( strlen( trim( $response ) ) > 0 ) {
wp_send_json_success( $response );
} else {
wp_send_json_error();
}
}
die();
}
add_action( 'wp_ajax_nopriv_post_neighbors', 'process_neighbors' );
add_action( 'wp_ajax_post_neighbors', 'process_neighbors' );
</code>
</pre>
<p>Next, enqueue the JS script that you’ll be creating in the next section.</p>
<pre>
<code class="lang-php">
function load_custom_js() {
$post_id = get_the_ID();
$location = array(
'latitude' => get_post_meta( $post_id, 'latitude', true ),
'longitude' => get_post_meta( $post_id, 'longitude', true ),
'post_id' => $post_id
);
$url = plugins_url( 'scripts/neighbors.js', __FILE__ );
wp_enqueue_script( 'neighbors_js', $url, array( 'jquery' ), '', true );
wp_localize_script( 'neighbors_js', 'ajax_neighbors_object', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'neighbors_validation' ),
'location' => $location
));
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );
</code>
</pre>
<h1>The Script</h1>
<p>Now we write the JavaScript code that makes the AJAX call to the PHP code to find nearby neighbors, then formats the results and appends them to the current page.</p>
<p>Start with a function that takes a location and sends a <code>POST</code> request to the hook above.</p>
<pre>
<code class="lang-javascript">
async function postNeighbors(location) {
let response;
try {
response = await $.ajax({
type: 'POST',
dataType: 'json',
url: ajax_neighbors_object.ajax_url,
data: {action: 'post_neighbors', security: ajax_neighbors_object.nonce, location: location}
});
return response;
} catch (error) {
console.error(error);
}
}
</code>
</pre>
<p>To compare with another school, call <code>postNeighbors</code> like so. In the <code>doYourThing</code> function, you’ll handle the markup you got in your response, perhaps injecting it into the page and sliding it into view.</p>
<pre>
<code class="lang-javascript">
postNeighbors(ajax_neighbors_object.location)
.then(({data})=>doYourThing(data));
</code>
</pre>
<p>To compare with the user’s own location, you just need to add one more step, making use of the handy WordPress geo API.</p>
<pre>
<code class="lang-javascript">
getUserLocation()
.then(postNeighbors)
.then(({data})=>doYourThing(data));
async function getUserLocation() {
const response = await fetch('https://public-api.wordpress.com/geo/');
const json = await response.json();
return json;
}
</code>
</pre>
<p>Check out <a href="https://campusarrival.com" rel="noopener noreferrer" target="_blank">Campus Arrival</a> to see all this in action.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2019/09/querying-nearby-locations-in-wordpress-using-geo-coordinates/feed/</wfw:commentRss>
<slash:comments>6</slash:comments>
</item>
<item>
<title>Integrating Video and Web Content: Lessons in User Interface Design</title>
<link>https://thomaspark.co/2019/09/integrating-video-and-web-content-lessons-in-user-interface-design/</link>
<comments>https://thomaspark.co/2019/09/integrating-video-and-web-content-lessons-in-user-interface-design/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 11 Sep 2019 12:21:05 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12385</guid>
<description><![CDATA[Recently I’ve been working on The Beautube, a site that integrates video tutorials with details about the products being mentioned in the videos, specifically in the realm of cosmetics. This project has presented numerous challenges … <a href="https://thomaspark.co/2019/09/integrating-video-and-web-content-lessons-in-user-interface-design/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Recently I’ve been working on <a href="https://thebeautube.com">The Beautube</a>, a site that integrates video tutorials with details about the products being mentioned in the videos, specifically in the realm of cosmetics.</p>
<p>This project has presented numerous challenges for how to design a tight, intuitive UI that makes efficient use of the available screen space when both video and web content are begging for more room.</p>
<p>Here I’d like to share a few lessons based on my experiences so far.</p>
<h1>Vertical scrolling trumps horizontal scrolling</h1>
<p>The basic requirements of the site are to display an embedded YouTube video, and alongside this, a list of elements containing product details. This list can be rather lengthy, so scrolling somehow has be involved. The question is how.</p>
<p>In our initial prototypes, I played with both vertical scrolling of the products adjacent to the video, and horizontal scrolling below the video. For horizontal scrolling, both a standard browser overflow scroll and a carousel were explored, even though <a href="http://shouldiuseacarousel.com/">carousels have been found to be ineffective</a>.</p>
<p>At first blush, horizontal scrolling is appealing. For desktops, the horizontal axis gives room for more products to be displayed at once. Horizontal scrolling also harmonizes well with the playback bar of the video itself.</p>
<p>In action, it’s a different story. Vertical scrolling is the standard behavior on webpages, and so familiar to users at this point that they instinctively know when to scroll down even when <a href="https://www.nytimes.com/2017/02/02/technology/personaltech/solving-the-case-of-the-disappearing-scroll-bars.html" >scrollbars have been removed</a>. Horizontal scrolling not so much. Additionally, scrolling down with a swipe of your finger is an engrained and comfortable motion compared to horizontal flicking, especially for long periods of time. And most computer mouses have a scroll wheel in just one direction — you guessed it, vertical.</p>
<p>In the end, one of our early design decisions was to go with vertical scrolling and have the rest of UI accommodate it, even if it added some tradeoffs to deal with.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling.png" alt="Vertical vs horizontal scrolling" width="2102" height="720" class="aligncenter size-full wp-image-12465" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling-1600x548.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<p>That’s not to say horizontal scrolling should be verboten. I imagine a strong case could be made for horizontal scrolling when there’s close integration with video playback with minimal user interaction. Or for <a href="https://uxplanet.org/bidirectional-scrolling-is-here-to-save-responsive-design-be1afe53206d">bidirectional scrolling</a>, as a secondary navigation.</p>
<p>Netflix is a good example of this, where users vertically scroll through categories, and then horizontally scroll through videos within a category.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu.png" alt="Netflix" width="2882" height="1550" class="aligncenter size-full wp-image-12425" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu.png 2882w, https://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu-800x430.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu-768x413.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu-1600x861.png 1600w" sizes="auto, (max-width: 2882px) 100vw, 2882px" /></p>
<h1>Limit lists to a single dimension when possible</h1>
<p>Having settled on a vertical list, I experimented with multiple columns, with the idea of increasing the information density. While I was able to squeeze a few more items into the visible part of the list, it came at the cost of readability. With a single column, users can quickly scan down the list to view all of the product images, all of the product titles, etc. When multiple columns are added, the user’s eyes have to dance back-and-forth as they make their way down the list, tiring faster and losing their place.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/columns.png" alt="Multiple vs single column" width="2102" height="720" class="aligncenter size-full wp-image-12467" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/columns.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/columns-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/columns-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/columns-1600x548.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<p>A single column works out in this case because the space available to the list is rather narrow to begin with. If the space were much wider, staying with a single column could lead to text that pushes beyond the <a href="https://baymard.com/blog/line-length-readability">optimal line length</a>, causing readability to suffer in a new way.</p>
<h1>Keep video in view with sticky positioning</h1>
<p>By default, when scrolling through the list of products, the video will also scroll off the page. This forces the user to jump back and forth, when the ideal behavior is to be able to reference both at the same time. Fortunately, the CSS property <code>position: sticky</code> comes to the rescue. Setting this on the video will keep it in the viewport, sticking to the top or bottom edge of the widow, so long as the list is on screen as well.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1.png" alt="Sticky positioning" width="2102" height="720" class="aligncenter size-full wp-image-12481" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1-1600x548.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<h1>For media queries, make use of orientation and aspect-ratio</h1>
<p>When using media queries, both developers and frameworks often rely solely on breakpoints set at different widths. For basic cases, such as turning two columns of text into one for mobile, this approach suffices. But for more complex situations, adding the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation">orientation</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio">aspect-ratio</a> features to media queries can make all the difference.</p>
<p>Consider our project, which needs to squeeze in both the video player, which is always present at its 16:9 aspect ratio, and the product list, whose design we have more room to play with. The naive approach of moving to a single column for smaller devices only works if the device is being held in portrait mode. If rotated to landscape however, the two-column layout will make better use of the space.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/orientation.png" alt="Orientation" width="2102" height="720" class="aligncenter size-full wp-image-12471" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/orientation.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/orientation-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/orientation-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/orientation-1600x548.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<p>As a side-note, remember to make your videos responsive. If you’re delivering your video in an iframe, as is the case with YouTube embeds, you’ll need <a href="https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php">some CSS trickery</a> to get this done.</p>
<h1>Disable the default fullscreen behavior on mobile</h1>
<p>One gotcha to watch out for is that on iOS by default, YouTube will automatically play embedded videos in full-screen, rendering all of the above design improvements moot. To allow mobile users to view all of our content simultaneously, <a href="https://developers.google.com/youtube/player_parameters#playsinline">enable inline playback</a> with the <code>playsinline</code> parameter.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen.png" alt="Fullscreen" width="2102" height="1200" class="aligncenter size-full wp-image-12472" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen-800x457.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen-768x438.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen-1600x913.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<h1>Two-way coupling between video and web content</h1>
<p>Everything up to this point has been about layout and positioning. But integrating video content with the web also affords integrated behaviors. For this project, two-way coupling was implemented, meaning that the state of the video content affects the web content, and vice versa. Communicating between the two is made possible by the <a href="https://developers.google.com/youtube/iframe_api_reference">YouTube Player API</a>, which exposes video player events like <code>onReady</code> and methods like <code>seekTo()</code> and <code>getCurrentTime()</code>.</p>
<p>In the list, each item has a clickable timestamp that seeks the player to that time in the video. On the video side, a listener checks when the current time elapses past a new timestamp, highlighting the respective item and scrolling it into view with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView">the native method</a> <code>scrollIntoView()</code>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/coupling.png" alt="Two-way coupling" width="2102" height="720" class="aligncenter size-full wp-image-12474" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/coupling.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/coupling-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/coupling-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/coupling-1600x548.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<h1>The lazy auto-scroll</h1>
<p>Lastly, I adopted what I call the lazy auto-scroll. By this principle, the current active list item is:</p>
<ol>
<li>always kept in the viewport</li>
<li>but by scrolling with the least amount of movement possible</li>
</ol>
<p>Let’s take a few concrete examples. When the newly active item is already within the viewport, no auto-scrolling happens, regardless of the item’s position. When the active item is above the fold, which can happen when the user has browsed around the list, the list auto-scrolls to put the item on the top edge of the viewport. When the active item is below the fold, the list auto-scrolls the item to the bottom edge of the viewport. And the auto-scrolling check happens only when the video reaches a new timestamp.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll.png" alt="Lazy autoscroll" width="2102" height="720" class="aligncenter size-full wp-image-12476" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll-1600x548.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<p>The effect of this lazy auto-scrolling is that there’s less unnecessary movement creating distraction and a chance for the user to lose their place. If the active item is a few pixels off from the top or center of the list, does it really need to scroll those measly pixels?</p>
<p>Lazy auto-scrolling also gives users freedom to browse around a bit without auto-scroll hijacking their actions. Only when the video reaches a new timestamp, the list re-orients itself, benefiting users who do want to navigate back to the current active item eventually.</p>
<h1>Putting it all into practice</h1>
<p>Applying all of the lessons above, here’s the current, though likely not the final, state of <a href="https://thebeautube.com">The Beautube</a>.</p>
<p><a href="https://thebeautube.com"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube.png" alt="The Beautube" width="2420" height="1460" class="aligncenter size-full wp-image-12413 shadow" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube.png 2420w, https://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube-500x302.png 500w, https://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube-768x463.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube-800x483.png 800w" sizes="auto, (max-width: 2420px) 100vw, 2420px" /></a></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2019/09/integrating-video-and-web-content-lessons-in-user-interface-design/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>Verifying Money Inputs on the Web à la Personal Checks</title>
<link>https://thomaspark.co/2018/12/verifying-money-inputs-on-the-web-a-la-personal-checks/</link>
<comments>https://thomaspark.co/2018/12/verifying-money-inputs-on-the-web-a-la-personal-checks/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 13 Dec 2018 14:35:35 +0000</pubDate>
<category><![CDATA[Humor]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12287</guid>
<description><![CDATA[With the era of the humble unstyled and unscripted input field behind us, there’s increasing variety in how monetary inputs work on the web. And this inconsistency can lead to big mistakes. Take two cases … <a href="https://thomaspark.co/2018/12/verifying-money-inputs-on-the-web-a-la-personal-checks/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>With the era of the humble unstyled and unscripted input field behind us, there’s increasing variety in how monetary inputs work on the web. And this inconsistency can lead to big mistakes.</p>
<p>Take two cases from the same company. PayPal has you input money amounts by the cent. To input fifty dollars, you type <code>5</code> <code>0</code> <code>0</code> <code>0</code>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/12/paypal-500x342.png" alt="PayPal" width="500" height="342" class="aligncenter size-medium wp-image-12297" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/12/paypal-500x342.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/12/paypal-768x525.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/12/paypal-800x547.png 800w, https://thomaspark.co/wp/wp-content/uploads/2018/12/paypal.png 1250w" sizes="auto, (max-width: 500px) 100vw, 500px" /></p>
<p>Paypal-owned Venmo on the other hand, has you input money by the dollar, typing <code>5</code> <code>0</code>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/12/venmo-231x500.png" alt="Venmo" width="231" height="500" class="aligncenter size-medium wp-image-12298 border" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/12/venmo-231x500.png 231w, https://thomaspark.co/wp/wp-content/uploads/2018/12/venmo-768x1663.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/12/venmo-277x600.png 277w, https://thomaspark.co/wp/wp-content/uploads/2018/12/venmo.png 1125w" sizes="auto, (max-width: 231px) 100vw, 231px" /></p>
<p>Other sites have <a href="http://thomaspark.co/wp/wp-content/uploads/2018/12/capitalone.png">yet other variations</a>.</p>
<p>Carelessly mixing them up leads to overpaying or underpaying by two orders of magnitude. You end up paying $0.20 for your share of dinner, or worse yet, $2,000 for a pizza. Thankfully, most websites mitigate this by showing a confirmation screen or prompting a warning. But where’s the fun in that?</p>
<p>Instead, I propose we take inspiration from personal checks, the ones Grandma uses to pay for her groceries. Personal checks don’t have the tight feedback loop websites do, so how do they verify the amount you wrote is actually the intended value? That the decimal space isn’t a comma or an ink smudge? They have you spell out the dollar amount as text.</p>
<p><a href="https://en.wikipedia.org/wiki/Cheque"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/12/CanadianChequeSample.png" alt="" width="708" height="310" class="aligncenter size-full wp-image-12314" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/12/CanadianChequeSample.png 708w, https://thomaspark.co/wp/wp-content/uploads/2018/12/CanadianChequeSample-500x219.png 500w" sizes="auto, (max-width: 708px) 100vw, 708px" /></a></p>
<p>This design pattern isn’t unheard of on the web. On GitHub, high-stakes operations like deleting a repo require typing out the full name of the repository. The act of figuring out what to type and then typing it out is often enough to snap the user out of mindless, routine clicking when a catastrophic error could be made.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/12/github-500x423.png" alt="GitHub" width="500" height="423" class="aligncenter size-medium wp-image-12308" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/12/github-500x423.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/12/github-768x650.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/12/github-709x600.png 709w, https://thomaspark.co/wp/wp-content/uploads/2018/12/github.png 1032w" sizes="auto, (max-width: 500px) 100vw, 500px" /></p>
<p>So why not for big dollar amounts as well? Here’s a quick <a href="https://thomaspark.co/projects/moneycheck/">demo</a> made using <a href="https://github.com/finnfiddle/words-to-numbers">words-to-numbers</a>. Give it a spin.</p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" style="width: 100%; height: 300px; border: none;" src="https://thomaspark.co/projects/moneycheck/" width="100%" height="500" scrolling="yes" class="iframe-class" frameborder="0"></iframe>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2018/12/verifying-money-inputs-on-the-web-a-la-personal-checks/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
<item>
<title>Slow Down × Terrace House: Writing a Browser Extension to Change a Theme Song on Netflix</title>
<link>https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/</link>
<comments>https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 31 Jul 2018 13:24:43 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12042</guid>
<description><![CDATA[I just finished binging the latest release of Terrace House, a reality TV show from Japan. If you’re not familiar, Terrace House is hands down the slowest and quietest reality television you’ll find, although not … <a href="https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/06/slowdown-500x313.png" alt="Slow Down × Terrace House" width="500" height="313" class="aligncenter size-medium wp-image-12068" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/06/slowdown-500x313.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/06/slowdown-768x480.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/06/slowdown.png 800w" sizes="auto, (max-width: 500px) 100vw, 500px" /></p>
<p>I just finished binging <a href="https://www.theverge.com/2018/3/13/17114364/netflix-terrace-house-opening-new-doors">the latest release of Terrace House</a>, a reality TV show from Japan. If you’re not familiar, Terrace House is hands down <a href="https://www.polygon.com/tv/2016/12/8/13882986/terrace-house-netflix">the slowest and quietest reality television you’ll find</a>, although not without its own kind of drama. And while the fourth installment, Opening New Doors, kept a lot of what made the show an international hit, there’s one big problem: they changed the opening theme song.</p>
<p>The new song is fine. The problem is the song used in earlier series, “Slow Down” by Lights Follow, was a perfect fit. It set the mood for each episode with its theme of figuring yourself out and its relaxed, bittersweet vibe. <a href="https://www.reddit.com/r/terracehouse/comments/8nu0lf/do_you_guys_miss_slow_down/">I’m not the only one to feel this way</a>. One fan went so far as to <a href="https://www.youtube.com/watch?v=0LAVQA-DBpU">re-cut the new intro with the old theme song</a>.</p>
<p>Well, I decided to go a step further by writing a browser extension for Chrome, <a href="https://chrome.google.com/webstore/detail/slow-down-terrace-house/ohccpkjiolefjbdgakkaihamdcdfgdnm?hl=en-US">Slow Down × Terrace House</a>, that switches the theme song back for new episodes of Terrace House on Netflix. You can try it out on the Chrome Web Store:</p>
<div class="center"><a class="standard-btn green-btn xlarge-btn" href="https://chrome.google.com/webstore/detail/slow-down-terrace-house/ohccpkjiolefjbdgakkaihamdcdfgdnm?hl=en-US"><span>Slow Down × Terrace House on Chrome Web Store</span></a></div>
<p>Here I wanted to share my general approach and some specifics for anyone interested in making a similar browser extension. Maybe this will put you on the path to giving every season of The Wire your favorite rendition of “Way Down in the Hole”. Or blasting “Immigrant Song” over every battle scene involving Thor. The possibilities are endless.</p>
<h2>The Plan</h2>
<p>The general plan for the extension is simple:</p>
<ol>
<li>Check if an episode of Terrace House: Opening New Doors is playing on Netflix.
<li>Detect when the opening credits are about to start.
<li>Mute the Netflix player and play “Slow Down” instead.
<li>Unmute the Netflix player when the credits end.
</ol>
<p>As for knowing when the opening credits start, it unfortunately varies quite a bit by episode, starting as late as 17 minutes in. With only 16 episodes so far (and finding no better solution), I took the brute-force approach of hard-coding timestamps for all of the episodes. This added a step 1b for detecting the episode number and looking up the timestamp.</p>
<h2>Inside the Extension</h2>
<p>With this plan in hand, I created the skeleton of the Chrome extension by diving <a href="https://developer.chrome.com/extensions">into the docs</a>. I recommend you do the same.</p>
<p>But in a nutshell, there are two contexts: content scripts are injected into the active web page, in this case Netflix; and background scripts, which you can think of as your extension’s own context, which can detect browser actions like adding a bookmark and switching tabs, as well as communicate with your content scripts.</p>
<p>The content and background scripts, along with the extension’s metadata, are defined in a <code>manifest.json</code> file. Here’s what it looks like:</p>
<pre>
<code lang="javascript" class="lang-javascript">
{
"name": "Slow Down x Terrace House",
"short_name": "SD x TH",
"version": "1.0.0",
"manifest_version": 2,
"description": "Replace the Terrace House theme song on Netflix with \\"Slow Down\\" by Lights Follow.",
"homepage_url": "https://thomaspark.co",
"icons": {
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"content_scripts": [
{
"matches": ["https://www.netflix.com/*"],
"js": ["content.js"]
}
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": ["webNavigation"],
"web_accessible_resources": ["audio/slowdown.mp3"]
}
</code>
</pre>
<h2>Detecting Series, Season, Episode</h2>
<p>Detecting when Terrace House is being watched and grabbing the episode number happens in, you guessed it, the content script. Here, the script returns early if it’s on something other than an active video page (for example, the main menu or episode list), and keeps checking the page until the video is loaded. Then it grabs the series, season, and episode from the DOM.</p>
<pre>
<code lang="javascript" class="lang-javascript">
function init() {
if (!window.location.href.startsWith("https://www.netflix.com/watch/")) {
return;
}
const videoCheckInterval = setInterval(function() {
const video = document.querySelector(".VideoContainer video");
const titleElem = document.querySelector(".video-title h4");
if (video !== null && titleElem !== null) {
clearInterval(videoCheckInterval);
const title = document.querySelector(".video-title h4").innerText;
if (title.startsWith("Terrace House")) {
const id = video.parentElement.id;
const series = title.split(":")[1].trim();
const [season, episode] = document.querySelector(".video-title h4").nextSibling.innerText.split(":");
// The fun starts here.
}
}
}, 10);
}
</code>
</pre>
<h2>Messaging Between Contexts</h2>
<p>Once a Terrace House: Opening New Doors episode is detected, the content script needs to tell the background script to set up the “Slow Dive” audio. This starts by opening a connection and then passing a message.</p>
<p>In <code>content.js</code>, you can add the following:</p>
<pre>
<code lang="javascript" class="lang-javascript">
const port = chrome.runtime.connect({name: "slowdown"});
</code>
</pre>
<p>And wherever you need it in the meat of your function:</p>
<pre>
<code lang="javascript" class="lang-javascript">
port.postMessage({action: "play"});
</code>
</pre>
<p>In <code>background.js</code>, you’re listening for the connection and the play message:</p>
<pre>
<code lang="javascript" class="lang-javascript">
chrome.runtime.onConnect.addListener(function(port) {
const audio = new Audio("audio/slowdown.mp3");
port.onMessage.addListener(function(msg) {
if (msg.action == "play") {
audio.play();
}
}
}
</code>
</pre>
<p>Keep in mind that you can also send messages in the other direction, from <code>background.js</code> to <code>content.js</code>.</p>
<h2>Controlling Video & Audio</h2>
<p>If you’ve been paying close attention to the code snippets above, you’ll notice that we already have our references to the video element on Netflix’s site in <code>content.js</code> and the audio element for “Slow Down” in <code>background.js</code>. We can control these elements using JavaScript with some handy methods.</p>
<p>To mute and unmute:</p>
<pre>
<code lang="javascript" class="lang-javascript">
video.muted = true;
video.muted = false;
</code>
</pre>
<p>To play and pause:</p>
<pre>
<code lang="javascript" class="lang-javascript">
audio.play();
audio.pause();
</code>
</pre>
<p>To get and set the current time:</p>
<pre>
<code lang="javascript" class="lang-javascript">
const time = video.currentTime;
audio.currentTime = 500;
</code>
</pre>
<p>The video and audio elements also fire events. For example, in <code>inject.js</code>, this code will listen for when the video is paused, then send a message to <code>background.js</code> to also pause the song.</p>
<pre>
<code lang="javascript" class="lang-javascript">
video.addEventListener("pause", function() {
port.postMessage({action: "pause"});
});
</code>
</pre>
<p>And then in <code>background.js</code>:</p>
<pre>
<code lang="javascript" class="lang-javascript">
if (msg.action == "pause") {
audio.pause();
}
</code>
</pre>
<p>Another valuable event is <code>timeupdate</code>, which fires every time the play position of a video or audio file has changed. Use this to continuously check whether the opening credits start. Here’s a simplified version:</p>
<pre>
<code lang="javascript" class="lang-javascript">
video.addEventListener("timeupdate", function() {
if (video.currentTime === START_TIME) {
video.muted = true;
port.postMessage({action: "play"});
}
}
</code>
</pre>
<p>This is pretty much everything you need. Put it all together and you have the basic functionality of the extension.</p>
<p>With that said, there are a lot of edge cases and other details to account for that’ll considerably complicate your code. For example, in past series, the “Slow Down” theme song would begin fading in over the dialogue. To replicate this, you need to start playing the song first, then muting the video after a ten second delay, instead of simply having both events coincide.</p>
<p>Another hurdle I encountered is that Netflix behaves as a single-page app. When you navigate from one episode to another on Netflix’s site, a new page isn’t loaded, meaning whatever initialization your extension needs to make on the new video won’t run again. To work around this, <code>background.js</code> needs to listen for when <code>history.pushState()</code> is used by Netflix to display a new URL, and then send a message to <code>content.js</code> to re-initialize.</p>
<pre>
<code lang="javascript" class="lang-javascript">
chrome.webNavigation.onHistoryStateUpdated.addListener(function() {
audio.pause();
port.postMessage({action: "init"});
});
</code>
</pre>
<h2>Publishing to the Chrome Web Store</h2>
<p>Once you’ve finished your extension, you’ll want to distribute the fruits of your labor through the <a href="https://chrome.google.com/webstore/category/extensions">Chrome Web Store</a>. Pay the one-time developer fee of $5 and you can submit your extension. The process is short and sweet. Zip and upload your extension, then fill out some fields. Your listing will go live in a few minutes.</p>
<p>If you’re a fan of Terrace House, I hope you enjoy the <a href="https://chrome.google.com/webstore/detail/slow-down-terrace-house/ohccpkjiolefjbdgakkaihamdcdfgdnm?hl=en-US">Slow Down × Terrace House extension</a>.</p>
<p>Cue closing door sound.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/06/closing-1024x524.png" alt="Terrace House: Opening New Doors" width="780" height="399" class="aligncenter size-large wp-image-12116" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/06/closing-1024x524.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2018/06/closing-500x256.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/06/closing-768x393.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/06/closing.png 1600w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>Overwatch Collective</title>
<link>https://thomaspark.co/2018/06/overwatch-collective/</link>
<comments>https://thomaspark.co/2018/06/overwatch-collective/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 19 Jun 2018 12:17:16 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Language]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12159</guid>
<description><![CDATA[Welcome to another installment of the collective nouns survey. This time we focus on Overwatch, following surveys for Team Fortress 2 and Starcraft. In Overwatch, there are 27 playable heroes so far, each with unique … <a href="https://thomaspark.co/2018/06/overwatch-collective/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis-800x486.jpg" alt="A Flurry of Meis" width="800" height="486" class="aligncenter size-large wp-image-12205" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis-800x486.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis-500x304.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis-768x467.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis.jpg 1480w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Welcome to another installment of the collective nouns survey. This time we focus on Overwatch, following surveys for <a href="https://thomaspark.co/2014/02/tf2-collective/">Team Fortress 2</a> and <a href="https://thomaspark.co/2011/05/starcraft-collective/">Starcraft</a>. </p>
<p>In Overwatch, there are <a href="https://playoverwatch.com/en-us/heroes/">27 playable heroes</a> so far, each with unique personalities and complementary abilities. When talking about a six-stack of McCrees or Meis (which isn’t seen outside of arcade mode anymore), it’s adequate but boring to refer to them as a “group” or “bunch”.</p>
<p>Better to invent language like the <a href="http://www.thealmightyguru.com/Pointless/AnimalGroups.html">terms of venery used for animals</a>. You’ve got familiar terms like a pride of lions and a swarm of bees. And even more evocative ones likes a murder of crows, a parliament of owls, a prickle of porcupines, and a flamboyance of flamingos.</p>
<p>To choose the terms that best evoke each hero, I polled the Overwatch community. I presented four randomized choices and the option to write in your own. A final question asked respondents to give their main hero. Check out the <a href="https://goo.gl/forms/B5ZxKETX6jUUVVXs1">survey</a> and the <a href="https://www.reddit.com/r/Overwatch/comments/8qlafc/">solicitation on r/Overwatch</a>.</p>
<p>The survey received 1,745 responses. I was surprised to find that many respondents placed little importance on alliteration. As far as the write-ins, some were so good that I kicked myself for not thinking of them. The best of these were given honorable mentions.</p>
<p>Here are the results. The full tally is given below.</p>
<h2>Update (May 14, 2020)</h2>
<p>I re-ran the survey for all heroes introduced since this post, including Ashe, Baptiste, Echo, Sigma, and Wrecking Ball, since there are no more heroes until Overwatch 2’s release. Those have been added to the results.</p>
<p class="hero-list">
<span class="column"><br />
<a href="#ana">An Assembly of Anas</a><br />
<a href="#ashe">An Ambush of Ashes</a><br />
<a href="#baptiste">A Band of Baptistes</a><br />
<a href="#bastion">A Battalion of Bastions</a><br />
<a href="#brigitte">A Brigade of Brigittes</a><br />
<a href="#dva">A Division of D.Vas</a><br />
<a href="#doomfist">A Drove of Doomfists</a><br />
<a href="#echo">An Array of Echoes</a><br />
<a href="#genji">A Gaggle of Genjis</a><br />
<a href="#hanzo">A Horde of Hanzos</a><br />
<a href="#junkrat">A Bombardment of Junkrats</a><br />
</span><br />
<span class="column"><br />
<a href="#lucio">A Rave of Lúcios</a><br />
<a href="#mccree">A Posse of McCrees</a><br />
<a href="#mei">A Flurry of Meis</a><br />
<a href="#mercy">A Mirage of Mercys</a><br />
<a href="#moira">A Mob of Moiras</a><br />
<a href="#orisa">A Stampede of Orisas</a><br />
<a href="#pharah">A Flock of Pharahs</a><br />
<a href="#reaper">A Wrath of Reapers</a><br />
<a href="#reinhardt">A Regiment of Reinhardts</a><br />
<a href="#roadhog">A Rodeo of Roadhogs</a><br />
<a href="#sigma">A Surge of Sigmas</a><br />
</span><br />
<span class="column"><br />
<a href="#soldier76">A Squad of Soldier: 76s</a><br />
<a href="#sombra">A Syndicate of Sombras</a><br />
<a href="#symmetra">A Spectrum of Symmetras</a><br />
<a href="#torbjorn">A Troupe of Torbjörns</a><br />
<a href="#tracer">A Trail of Tracers</a><br />
<a href="#widowmaker">A Web of Widowmakers</a><br />
<a href="#winston">A Troop of Winstons</a><br />
<a href="#wreckingball">A Rumble of Wrecking Balls</a><br />
<a href="#zarya">A Zeal of Zaryas</a><br />
<a href="#zenyatta">A Harmony of Zenyattas</a><br />
</span>
</p>
<h2 id="ana">An Assembly of Anas</h2>
<p class="ana">
<span class="option">Assembly</span><span class="progress"><span class="progress-bar" style="width: 37%;">37%</span></span><br />
<span class="option">Army</span><span class="progress"><span class="progress-bar" style="width: 35%;">35%</span></span><br />
<span class="option">Admonishment</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span><br />
<span class="option">Association</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span>
</p>
<p><strong>Ana Mains Call Themselves:</strong> Tie between Assembly and Army, which shows how close this one was.</p>
<p><strong>Honorable Mention:</strong> Annoyance, both in that Ana can annoy you with anti-heal and sleep, and that she seems perpetually disappointed in you.</p>
<p><strong>Other Write-Ins:</strong> Armada, Apocalypse, Tea Party, Retirement, Peek, Array, Eyeful, Arena, Parliament, Hobble, Administration, Arrangement, Abundance, Aviary</p>
<h2 id="ashe">An Ambush of Ashes</h2>
<p class="ashe">
<span class="option">Ambush</span><span class="progress"><span class="progress-bar" style="width: 55%;">55%</span></span><br />
<span class="option">Anger</span><span class="progress"><span class="progress-bar" style="width: 18%;">18%</span></span><br />
<span class="option">Association</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span><br />
<span class="option">Admonishment</span><span class="progress"><span class="progress-bar" style="width: 6%;">6%</span></span>
</p>
<p><strong>Ashe Mains Call Themselves:</strong> Tie between Ambush and Anger.</p>
<p><strong>Honorable Mention:</strong> Atonement, suggesting Ashe has turned the page on her criminal life.</p>
<p><strong>Other Write-Ins:</strong> Assembly, Urn, Arsenal, Phoenix, Posse, Gang</p>
<h2 id="baptiste">A Band of Baptistes</h2>
<p class="baptiste">
<span class="option">Band</span><span class="progress"><span class="progress-bar" style="width: 32%;">32%</span></span><br />
<span class="option">Battery</span><span class="progress"><span class="progress-bar" style="width: 29%;">29%</span></span><br />
<span class="option">Bundle</span><span class="progress"><span class="progress-bar" style="width: 21%;">21%</span></span><br />
<span class="option">Batch</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span>
</p>
<p><strong>Baptiste Mains Call Themselves:</strong> Band</p>
<p><strong>Honorable Mention:</strong> Bunch, not as evocative as some of the other terms but rolls off the tongue.</p>
<p><strong>Other Write-Ins:</strong> Bounce, Bevy, Brood, Battalion, Bond, Congregation</p>
<h2 id="bastion">A Battalion of Bastions</h2>
<p class="bastion">
<span class="option">Battalion</span><span class="progress"><span class="progress-bar" style="width: 53%;">53%</span></span><br />
<span class="option">Battery</span><span class="progress"><span class="progress-bar" style="width: 23%;">23%</span></span><br />
<span class="option">Band</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span><br />
<span class="option">Bulwark</span><span class="progress"><span class="progress-bar" style="width: 9%;">9%</span></span>
</p>
<p><strong>Bastion Mains Call Themselves:</strong> Battalion</p>
<p><strong>Honorable Mention:</strong> Bunch, which fits the subtlety and grace of Bastion. </p>
<p><strong>Other Write-Ins:</strong> Bevy, Balustrade, Boom, Brothel</p>
<h2 id="brigitte">A Brigade of Brigittes</h2>
<p class="brigitte">
<span class="option">Brigade</span><span class="progress"><span class="progress-bar" style="width: 69%;">69%</span></span><br />
<span class="option">Bunch</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span><br />
<span class="option">Bash</span><span class="progress"><span class="progress-bar" style="width: 9%;">9%</span></span><br />
<span class="option">Bombardment</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span>
</p>
<p><strong>Brigitte Mains Call Themselves:</strong> Brigade</p>
<p><strong>Honorable Mention:</strong> Crusade, it works nicely with Brigitte’s backstory, but can’t overcome the winner.</p>
<p><strong>Other Write-Ins:</strong> Barricade, Baguette, Bruschetta, Phalanx, Bonanza, Terror, Bestiary, Battalion</p>
<h2 id="dva">A Division of D.Vas</h2>
<p class="dva">
<span class="option">Division</span><span class="progress"><span class="progress-bar" style="width: 51%;">51%</span></span><br />
<span class="option">Dazzle</span><span class="progress"><span class="progress-bar" style="width: 28%;">28%</span></span><br />
<span class="option">Detachment</span><span class="progress"><span class="progress-bar" style="width: 12%;">12%</span></span><br />
<span class="option">Destruction</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span>
</p>
<p><strong>D.Va Mains Call Themselves:</strong> Division</p>
<p><strong>Honorable Mention:</strong> Dervish, nothing better to call six D.Va mechs boosting around you than a whirling dervish.</p>
<p><strong>Other Write-Ins:</strong> Defense, LAN Party, Deletion, Drove, Demolition, Dominion, Devotion, Detonation, Diversion, Dorito</p>
<h2 id="doomfist">A Drove of Doomfists</h2>
<p class="doomfist">
<span class="option">Drove</span><span class="progress"><span class="progress-bar" style="width: 36%;">36%</span></span><br />
<span class="option">Flurry</span><span class="progress"><span class="progress-bar" style="width: 30%;">30%</span></span><br />
<span class="option">Danger</span><span class="progress"><span class="progress-bar" style="width: 16%;">16%</span></span><br />
<span class="option">Flog</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span>
</p>
<p><strong>Doomfist Mains Call Themselves:</strong> Flurry, they might have to fight Mei mains for it though.</p>
<p><strong>Honorable Mention:</strong> Defenestration, because you have to use that word whenever possible.</p>
<p><strong>Other Write-Ins:</strong> Disorder, Fistful, Crater, Handful, Domination, Dojo, Damnation, Dominion, Dragoon</p>
<h2 id="echo">An Array of Echoes</h2>
<p class="echo">
<span class="option">Array</span><span class="progress"><span class="progress-bar" style="width: 47%;">47%</span></span><br />
<span class="option">Echelon</span><span class="progress"><span class="progress-bar" style="width: 33%;">33%</span></span><br />
<span class="option">Exaltation</span><span class="progress"><span class="progress-bar" style="width: 9%;">9%</span></span><br />
<span class="option">Reverberation</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span>
</p>
<p><strong>Echo Mains Call Themselves:</strong> Array.</p>
<p><strong>Honorable Mention:</strong> Echo, as in an Echo of Echoes… is there an echo in here?</p>
<p><strong>Other Write-Ins:</strong> Ring, Choir, Flight, Sound, Squadron</p>
<h2 id="genji">A Gaggle of Genjis</h2>
<p class="genji">
<span class="option">Gaggle</span><span class="progress"><span class="progress-bar" style="width: 50%;">50%</span></span><br />
<span class="option">Gang</span><span class="progress"><span class="progress-bar" style="width: 37%;">37%</span></span><br />
<span class="option">Group</span><span class="progress"><span class="progress-bar" style="width: 6%;">6%</span></span><br />
<span class="option">Gulp</span><span class="progress"><span class="progress-bar" style="width: 3%;">3%</span></span>
</p>
<p><strong>Genji Mains Call Themselves:</strong> Gang, because apparently Genji mains seem to take themselves much more seriously than other Overwatch players do.</p>
<p><strong>Honorable Mention:</strong> Clan</p>
<p><strong>Other Write-Ins:</strong> Dash, Gale, Gathering, Gimmick, Brotherhood, Gradient</p>
<h2 id="hanzo">A Horde of Hanzos</h2>
<p class="hanzo">
<span class="option">Horde</span><span class="progress"><span class="progress-bar" style="width: 33%;">33%</span></span><br />
<span class="option">Quiver</span><span class="progress"><span class="progress-bar" style="width: 28%;">28%</span></span><br />
<span class="option">Herd</span><span class="progress"><span class="progress-bar" style="width: 28%;">28%</span></span><br />
<span class="option">Host</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span>
</p>
<p><strong>Hanzo Mains Call Themselves:</strong> Horde</p>
<p><strong>Honorable Mention:</strong> Scatter, because now that the ability has been patched out of the game, we have to honor its memory somehow.</p>
<p><strong>Other Write-Ins:</strong> Hierarchy, Geometry Class, Clan, Hazard, Harem</p>
<h2 id="junkrat">A Bombardment of Junkrats</h2>
<p class="junkrat">
<span class="option">Bombardment</span><span class="progress"><span class="progress-bar" style="width: 34%;">34%</span></span><br />
<span class="option">Jalopy</span><span class="progress"><span class="progress-bar" style="width: 29%;">29%</span></span><br />
<span class="option">Jury</span><span class="progress"><span class="progress-bar" style="width: 20%;">20%</span></span><br />
<span class="option">Drove</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span>
</p>
<p><strong>Junkrat Mains Call Themselves:</strong> Bombardment</p>
<p><strong>Honorable Mention:</strong> Heap, another common write-in was Spam which was the winner for Junkrat’s TF2 counterpart, Demoman.</p>
<p><strong>Other Write-Ins:</strong> Juggle, Jank, Dumpster, Jamboree, Jive, Spam, Cackle, Cluster, Jumble</p>
<h2 id="lucio">A Rave of Lúcios</h2>
<p class="lucio">
<span class="option">Rave</span><span class="progress"><span class="progress-bar" style="width: 39%;">39%</span></span><br />
<span class="option">Legion</span><span class="progress"><span class="progress-bar" style="width: 26%;">26%</span></span><br />
<span class="option">League</span><span class="progress"><span class="progress-bar" style="width: 22%;">22%</span></span><br />
<span class="option">Leap</span><span class="progress"><span class="progress-bar" style="width: 10%;">10%</span></span>
</p>
<p><strong>Lúcio Mains Call Themselves:</strong> Legion</p>
<p><strong>Honorable Mention:</strong> Wave, let’s be honest… pickings were slim here, but at least this plays off the idea of a sound wave.</p>
<p><strong>Other Write-Ins:</strong> Loop, Line, Favela, Wall</p>
<h2 id="mccree">A Posse of McCrees</h2>
<p class="mccree">
<span class="option">Posse</span><span class="progress"><span class="progress-bar" style="width: 48%;">48%</span></span><br />
<span class="option">Murder</span><span class="progress"><span class="progress-bar" style="width: 21%;">21%</span></span><br />
<span class="option">Maraud</span><span class="progress"><span class="progress-bar" style="width: 14%;">14%</span></span><br />
<span class="option">Maelstrom</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span>
</p>
<p><strong>McCree Mains Call Themselves:</strong> Posse</p>
<p><strong>Honorable Mention:</strong> Mishap, because McCree’s ultimate “High Noon” goes sideways more often than not.</p>
<p><strong>Other Write-Ins:</strong> Misery, Meddling, Gang, Mass, Saloon, Mob, Hoedown, Passel, Mischief, Mid-Day, Magazine</p>
<h2 id="mei">A Flurry of Meis</h2>
<p class="mei">
<span class="option">Flurry</span><span class="progress"><span class="progress-bar" style="width: 38%;">38%</span></span><br />
<span class="option">Mob</span><span class="progress"><span class="progress-bar" style="width: 35%;">35%</span></span><br />
<span class="option">Monsoon</span><span class="progress"><span class="progress-bar" style="width: 16%;">16%</span></span><br />
<span class="option">Squall</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span>
</p>
<p><strong>Mei Mains Call Themselves:</strong> Flurry</p>
<p><strong>Honorable Mention:</strong> Malefaction, because a lineup of Meis is about as evil and terrifying as you can get. See image at top of post.</p>
<p><strong>Other Write-Ins:</strong> Malady, Medley, Murder, Mash, Storm, Manifold, Maze, Maelstrom</p>
<h2 id="mercy">A Mirage of Mercys</h2>
<p class="mercy">
<span class="option">Mirage</span><span class="progress"><span class="progress-bar" style="width: 34%;">34%</span></span><br />
<span class="option">Vale</span><span class="progress"><span class="progress-bar" style="width: 27%;">27%</span></span><br />
<span class="option">Mend</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span><br />
<span class="option">Remedy</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span>
</p>
<p><strong>Mercy Mains Call Themselves:</strong> Mirage</p>
<p><strong>Honorable Mention:</strong> Martyrdom, for the suffering Mercy players endure just to have a shot at winning the match.</p>
<p><strong>Other Write-Ins:</strong> Chorus, Menagerie, Murmur, Cloud, Miracle, Mob, Choir, Staff, Marvel, Mound, Flutter, Mangle, Myriad, Wainscot, Mothball, Coterie, Menage, Mottle, Marquee</p>
<h2 id="moira">A Mob of Moiras</h2>
<p class="moira">
<span class="option">Mob</span><span class="progress"><span class="progress-bar" style="width: 41%;">41%</span></span><br />
<span class="option">Marvel</span><span class="progress"><span class="progress-bar" style="width: 25%;">25%</span></span><br />
<span class="option">Mania</span><span class="progress"><span class="progress-bar" style="width: 22%;">22%</span></span><br />
<span class="option">Midnight</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span>
</p>
<p><strong>Moira Mains Call Themselves:</strong> Mob</p>
<p><strong>Honorable Mention:</strong> Miasma, which reflects the visual vomit on your screen whenever a Moira ults, although masquerade and malevolence were also inspired.</p>
<p><strong>Other Write-Ins:</strong> Masquerade, Malevolence, Aura, Massacre, Mosh, Coven</p>
<h2 id="orisa">A Stampede of Orisas</h2>
<p class="orisa">
<span class="option">Stampede</span><span class="progress"><span class="progress-bar" style="width: 50%;">50%</span></span><br />
<span class="option">Onslaught</span><span class="progress"><span class="progress-bar" style="width: 23%;">23%</span></span><br />
<span class="option">Orchestra</span><span class="progress"><span class="progress-bar" style="width: 20%;">20%</span></span><br />
<span class="option">Observance</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span>
</p>
<p><strong>Orisa Mains Call Themselves:</strong> Stampede</p>
<p><strong>Honorable Mention:</strong> Orgy, it’s fun to say, although not to imagine.</p>
<p><strong>Other Write-Ins:</strong> Obstruction, Optimization, Fortitude, Orchard, March, Omnibus, Enforcement, Oasis, Innocence</p>
<h2 id="pharah">A Flock of Pharahs</h2>
<p class="pharah">
<span class="option">Flock</span><span class="progress"><span class="progress-bar" style="width: 43%;">43%</span></span><br />
<span class="option">Fleet</span><span class="progress"><span class="progress-bar" style="width: 26%;">26%</span></span><br />
<span class="option">Phalanx</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span><br />
<span class="option">Flight</span><span class="progress"><span class="progress-bar" style="width: 12%;">12%</span></span>
</p>
<p><strong>Pharah Mains Call Themselves:</strong> Flock</p>
<p><strong>Honorable Mention:</strong> Formation, who wouldn’t want to watch a team of Pharahs try to do precision air acrobatics like the Blue Angels.</p>
<p><strong>Other Write-Ins:</strong> Flank, Parade, Plunge, Flimflam, Pandemonium, Barrage, Justice, Phoenix, Flotilla, Squadron</p>
<h2 id="reaper">A Wrath of Reapers</h2>
<p class="reaper">
<span class="option">Wrath</span><span class="progress"><span class="progress-bar" style="width: 35%;">35%</span></span><br />
<span class="option">Revenant</span><span class="progress"><span class="progress-bar" style="width: 26%;">26%</span></span><br />
<span class="option">Ravage</span><span class="progress"><span class="progress-bar" style="width: 23%;">23%</span></span><br />
<span class="option">Revenge</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span>
</p>
<p><strong>Reaper Mains Call Themselves:</strong> Wrath</p>
<p><strong>Honorable Mention:</strong> Ring, which is the arrangement a bunch of edgy Reapers would make to practice the occult.</p>
<p><strong>Other Write-Ins:</strong> Murder, Edge, Wrangle, Wraith, Rout, Haunt, Blossom, Heap, Host, Blight, Rampage, Coven, Ruse, Resurgence, Renegade, Rally, Spook, Hot Topic</p>
<h2 id="reinhardt">A Regiment of Reinhardts</h2>
<p class="reinhardt">
<span class="option">Regiment</span><span class="progress"><span class="progress-bar" style="width: 48%;">48%</span></span><br />
<span class="option">Rampage</span><span class="progress"><span class="progress-bar" style="width: 18%;">18%</span></span><br />
<span class="option">Charge</span><span class="progress"><span class="progress-bar" style="width: 16%;">16%</span></span><br />
<span class="option">Rampart</span><span class="progress"><span class="progress-bar" style="width: 15%;">15%</span></span>
</p>
<p><strong>Reinhardt Mains Call Themselves:</strong> Regiment</p>
<p><strong>Honorable Mention:</strong> Triumph, just sounds so knightly alongside a crusade of Brigittes.</p>
<p><strong>Other Write-Ins:</strong> Bombast, Army, Wall, Crusade, Radiance, Romp, Rutting, Glory, Crash</p>
<h2 id="roadhog">A Rodeo of Roadhogs</h2>
<p class="roadhog">
<span class="option">Rodeo</span><span class="progress"><span class="progress-bar" style="width: 51%;">51%</span></span><br />
<span class="option">Ragtag</span><span class="progress"><span class="progress-bar" style="width: 16%;">16%</span></span><br />
<span class="option">Rash</span><span class="progress"><span class="progress-bar" style="width: 15%;">15%</span></span><br />
<span class="option">Rout</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span>
</p>
<p><strong>Roadhog Mains Call Themselves:</strong> Rodeo</p>
<p><strong>Honorable Mention:</strong> Rasher, imagine all the bacon you could get out of a Roadhog. Mmmm.</p>
<p><strong>Other Write-Ins:</strong> Rumble, Rebuff, Rebellion, Chain Gang, Wall, Absolute Unit, Drove, Rotund, Onslaught, Ravage, Glut, Riot, Rack</p>
<h2 id="sigma">A Surge of Sigmas</h2>
<p class="sigma">
<span class="option">Surge</span><span class="progress"><span class="progress-bar" style="width: 34%;">34%</span></span><br />
<span class="option">School</span><span class="progress"><span class="progress-bar" style="width: 32%;">32%</span></span><br />
<span class="option">Study</span><span class="progress"><span class="progress-bar" style="width: 21%;">21%</span></span><br />
<span class="option">Set</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span>
</p>
<p><strong>Sigma Mains Call Themselves:</strong> School</p>
<p><strong>Honorable Mention:</strong> Symposium, a nod to Sigma’s background in space and science, not to mention his obsession with music.</p>
<p><strong>Other Write-Ins:</strong> Symphony, Asylum, System, Whisper, Schism</p>
<h2 id="soldier76">A Squad of Soldier: 76s</h2>
<p class="soldier76">
<span class="option">Squad</span><span class="progress"><span class="progress-bar" style="width: 81%;">81%</span></span><br />
<span class="option">Service</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span><br />
<span class="option">Sprint</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span><br />
<span class="option">Slaughter</span><span class="progress"><span class="progress-bar" style="width: 4%;">4%</span></span>
</p>
<p><strong>Soldier: 76 Mains Call Themselves:</strong> Squad</p>
<p><strong>Honorable Mention:</strong> Salvo, as in a stream of Soldiers who fire their helix rockets and then immediately sprint away from the danger.</p>
<p><strong>Other Write-Ins:</strong> Salute, Platoon, Army, Slew, Barracks, Retirement Home</p>
<h2 id="sombra">A Syndicate of Sombras</h2>
<p class="sombra">
<span class="option">Syndicate</span><span class="progress"><span class="progress-bar" style="width: 67%;">67%</span></span><br />
<span class="option">Shade</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span><br />
<span class="option">Stealth</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span><br />
<span class="option">Sovereign</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span>
</p>
<p><strong>Sombra Mains Call Themselves:</strong> Syndicate</p>
<p><strong>Honorable Mention:</strong> Conspiracy, nearly as good as the winning choice.</p>
<p><strong>Other Write-Ins:</strong> Breach, Collective, Sneak, Sample, Shimmer, Swarm, Scurry, Murder, Suite, Cell, Sheen, Score</p>
<h2 id="symmetra">A Spectrum of Symmetras</h2>
<p class="symmetra">
<span class="option">Spectrum</span><span class="progress"><span class="progress-bar" style="width: 42%;">42%</span></span><br />
<span class="option">System</span><span class="progress"><span class="progress-bar" style="width: 27%;">27%</span></span><br />
<span class="option">Surplus</span><span class="progress"><span class="progress-bar" style="width: 19%;">19%</span></span><br />
<span class="option">Sentinel</span><span class="progress"><span class="progress-bar" style="width: 10%;">10%</span></span>
</p>
<p><strong>Symmetra Mains Call Themselves:</strong> Spectrum, as in the electromagnetic spectrum of course.</p>
<p><strong>Honorable Mention:</strong> Circuit</p>
<p><strong>Other Write-Ins:</strong> Council, Symmetry, Sandbox, Sovereign, Suffering, Projection, Assembly</p>
<h2 id="torbjorn">A Troupe of Torbjörns</h2>
<p class="torbjorn">
<span class="option">Troupe</span><span class="progress"><span class="progress-bar" style="width: 47%;">47%</span></span><br />
<span class="option">Team</span><span class="progress"><span class="progress-bar" style="width: 22%;">22%</span></span><br />
<span class="option">Temper</span><span class="progress"><span class="progress-bar" style="width: 14%;">14%</span></span><br />
<span class="option">Tempest</span><span class="progress"><span class="progress-bar" style="width: 12%;">12%</span></span>
</p>
<p><strong>Torbjörn Mains Call Themselves:</strong> Troupe, because a bunch of Torbs seem like they’d be boisterous and merry.</p>
<p><strong>Honorable Mention:</strong> Tango, Tumescence</p>
<p><strong>Other Write-Ins:</strong> Torrent, Trebuchet, Temblor, Workshop, Turret, Tragedy, Travesty, Tinker, Tumor, Thunder, Trove, Cast, Torment, Testament, Tsunami, Trollful, Letterbox, Gäng, Blight</p>
<h2 id="tracer">A Trail of Tracers</h2>
<p class="tracer">
<span class="option">Trail</span><span class="progress"><span class="progress-bar" style="width: 36%;">36%</span></span><br />
<span class="option">Torment</span><span class="progress"><span class="progress-bar" style="width: 22%;">22%</span></span><br />
<span class="option">Twitch</span><span class="progress"><span class="progress-bar" style="width: 20%;">20%</span></span><br />
<span class="option">Trace</span><span class="progress"><span class="progress-bar" style="width: 16%;">16%</span></span>
</p>
<p><strong>Tracer Mains Call Themselves:</strong> Torment</p>
<p><strong>Honorable Mention:</strong> Cavalcade, a callback to Tracer’s voiceline, “The cavalry’s here!”</p>
<p><strong>Other Write-Ins:</strong> Zip, Blink, Troupe, Team, Swarm, Trounce, Flash, Flit, Cavalry, Gaggle, Fleet, Tribe, Marathon, Stream, Rush, Slipstream, Track, Trope</p>
<h2 id="widowmaker">A Web of Widowmakers</h2>
<p class="widowmaker">
<span class="option">Web</span><span class="progress"><span class="progress-bar" style="width: 52%;">52%</span></span><br />
<span class="option">Nest</span><span class="progress"><span class="progress-bar" style="width: 33%;">33%</span></span><br />
<span class="option">Wave</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span><br />
<span class="option">Ward</span><span class="progress"><span class="progress-bar" style="width: 6%;">6%</span></span>
</p>
<p><strong>Widowmaker Mains Call Themselves:</strong> Web</p>
<p><strong>Honorable Mention:</strong> Whisper, even though after Widowmaker’s nerf she’s practically screaming her infra-sight voiceline.</p>
<p><strong>Other Write-Ins:</strong> Weave, Murder, Sight, Wake, Baguette, Waste, Ballet, Wedding, Window, Wrath, Range</p>
<h2 id="winston">A Troop of Winstons</h2>
<p class="winston">
<span class="option">Troop</span><span class="progress"><span class="progress-bar" style="width: 35%;">35%</span></span><br />
<span class="option">Wrangle</span><span class="progress"><span class="progress-bar" style="width: 30%;">30%</span></span><br />
<span class="option">Warren</span><span class="progress"><span class="progress-bar" style="width: 18%;">18%</span></span><br />
<span class="option">Wisdom</span><span class="progress"><span class="progress-bar" style="width: 12%;">12%</span></span>
</p>
<p><strong>Winston Mains Call Themselves:</strong> Troop</p>
<p><strong>Honorable Mention:</strong> Barrel, either a group of raging apes barreling through you, or the chaos of a barrel full of monkeys.</p>
<p><strong>Other Write-Ins:</strong> Family, Band, Jungle, Coalition, Shrewdness, Wince, Rampage, Faculty, Whoop, Waddle, Warmth, Wallop</p>
<h2 id="wreckingball">A Rumble of Wrecking Balls</h2>
<p class="wreckingball">
<span class="option">Rumble</span><span class="progress"><span class="progress-bar" style="width: 39%;">39%</span></span><br />
<span class="option">Cluster</span><span class="progress"><span class="progress-bar" style="width: 33%;">33%</span></span><br />
<span class="option">Bobble</span><span class="progress"><span class="progress-bar" style="width: 15%;">15%</span></span><br />
<span class="option">Hail</span><span class="progress"><span class="progress-bar" style="width: 9%;">9%</span></span>
</p>
<p><strong>Wrecking Ball Mains Call Themselves:</strong> Cluster</p>
<p><strong>Honorable Mention:</strong> Hail, as in a Hail of Hammonds.</p>
<p><strong>Other Write-Ins:</strong> Bobble, Crash, Crew, Hail, Roll, Buttload, Orbit, Round, Rabble, Rout, Bombardment, Bunch</p>
<h2 id="zarya">A Zeal of Zaryas</h2>
<p class="zarya">
<span class="option">Zeal</span><span class="progress"><span class="progress-bar" style="width: 34%;">34%</span></span><br />
<span class="option">Ray</span><span class="progress"><span class="progress-bar" style="width: 23%;">23%</span></span><br />
<span class="option">Buzz</span><span class="progress"><span class="progress-bar" style="width: 22%;">22%</span></span><br />
<span class="option">Glow</span><span class="progress"><span class="progress-bar" style="width: 14%;">14%</span></span>
</p>
<p><strong>Zarya Mains Call Themselves:</strong> Zeal</p>
<p><strong>Honorable Mention:</strong> Surge, it was right there in the ultimate name all along.</p>
<p><strong>Other Write-Ins:</strong> Mass, Motherland, Bubble, Gulag, Zest, Zamboni, Commune, Pack, Girth, Regime, Flex, Army, Attraction, Zap, Accretion, Burst, Zephyr, Zenith, команда</p>
<h2 id="zenyatta">A Harmony of Zenyattas</h2>
<p class="zenyatta">
<span class="option">Harmony</span><span class="progress"><span class="progress-bar" style="width: 38%;">38%</span></span><br />
<span class="option">Nirvana</span><span class="progress"><span class="progress-bar" style="width: 27%;">27%</span></span><br />
<span class="option">Om</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span><br />
<span class="option">Tranquility</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span>
</p>
<p><strong>Zenyatta Mains Call Themselves:</strong> Harmony</p>
<p><strong>Honorable Mention:</strong> Zenith, far and away the best write-in. There just aren’t that many words that start with Z.</p>
<p><strong>Other Write-Ins:</strong> Zoom, Zoo, Order, Zephyr, Monastery, Collective, Meditation, Mandala, Float, Unity, Ziggurat, A Lotta, Embrace, Trance, Zeppelin, Cult, Zeitgeist, Zealot, Singularity</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2018/06/overwatch-collective/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>3D Printing a Wireless Charging Case for the Apple TV Remote</title>
<link>https://thomaspark.co/2018/03/3d-printing-a-wireless-charging-case-for-the-apple-tv-remote/</link>
<comments>https://thomaspark.co/2018/03/3d-printing-a-wireless-charging-case-for-the-apple-tv-remote/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 08 Mar 2018 13:29:25 +0000</pubDate>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=11983</guid>
<description><![CDATA[I recently got a new phone that supports wireless charging, allowing me to switch out my rather hefty clock radio dock for a teeny wireless charging pad, continuing the minimalist march in my living room. … <a href="https://thomaspark.co/2018/03/3d-printing-a-wireless-charging-case-for-the-apple-tv-remote/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup.jpg" alt="Wireless Charging Setup" width="3803" height="2751" class="aligncenter size-full wp-image-11997" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup.jpg 3803w, https://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup-500x362.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup-768x556.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup-1024x741.jpg 1024w" sizes="auto, (max-width: 3803px) 100vw, 3803px" /></p>
<p>I recently got a new phone that supports wireless charging, allowing me to switch out <a href="https://www.amazon.com/gp/product/B001U086NC?ie=UTF8&tag=bigicecube-20&camp=1789&linkCode=xm2&creativeASIN=B001U086NC">my rather hefty clock radio dock</a> for <a href="https://www.amazon.com/gp/product/B0756Z8X82?ie=UTF8&tag=bigicecube-20&camp=1789&linkCode=xm2&creativeASIN=B0756Z8X82">a teeny wireless charging pad</a>, continuing the <a href="https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/">minimalist march in my living room</a>. Things were good until my Apple TV remote needed a recharge, and I had to dig out my old lightning cable anyway.</p>
<p>Apple will likely add wireless charging to the ATV remote eventually, bolstering support for AirPower, but I decided to come up with my own solution in the meantime.</p>
<p>I started with a <a href="https://www.amazon.com/gp/product/B077QJQXMJ?ie=UTF8&tag=bigicecube-20&camp=1789&linkCode=xm2&creativeASIN=B077QJQXMJ">Lightning to QI wireless charging receiver module</a>, which worked well but didn’t look so great dangling from the remote.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver.jpg" alt="Wireless Charging Receiver" width="3024" height="2068" class="aligncenter size-full wp-image-12015" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver.jpg 3024w, https://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver-500x342.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver-768x525.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver-1024x700.jpg 1024w" sizes="auto, (max-width: 3024px) 100vw, 3024px" /></p>
<p>What I needed next was a case to tuck the receiver into. I decided to go the 3D printing route.</p>
<p>After taking some measurements with a caliper borrowed from a friend, I built a 3D model using <a href="https://www.tinkercad.com/">Tinkercad</a>. I strongly recommend Tinkercad if you’re a beginner, as I was able to get up to speed with it very quickly and accomplish everything I needed.</p>
<p>I started with a basic case shape that had a hollowed out area to tuck the charging receiver into. After a few iterations, I arrived at a case with a separate cover piece that hid away the receiver and allowed the Lightning plug to be snapped into it, exposing only the plug end when the two pieces cases were assembled.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/03/tinkercad-model.png" alt="TinkerCAD model" width="909" height="522" class="aligncenter size-full wp-image-12009" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/03/tinkercad-model.png 909w, https://thomaspark.co/wp/wp-content/uploads/2018/03/tinkercad-model-500x287.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/tinkercad-model-768x441.png 768w" sizes="auto, (max-width: 909px) 100vw, 909px" /></p>
<p>I exported the model and submitted it to <a href="https://www.shapeways.com/">Shapeways</a>, a popular 3D printing service. I also got the more basic model printed to compare. About a week later, the pieces arrived.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces.jpg" alt="3D Printed Case Pieces" width="3916" height="2939" class="aligncenter size-full wp-image-12022" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces.jpg 3916w, https://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces-500x375.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces-1024x769.jpg 1024w" sizes="auto, (max-width: 3916px) 100vw, 3916px" /></p>
<p>Here’s the assembly. You can see how the charging receiver gets plugged into the cover piece, which then slides into the main piece. The fit between the pieces was snug and the seam barely noticeable.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/03/assembly.jpg" alt="3D Printed Apple TV 4 Wireless Charging Case Assembly" width="6000" height="3613" class="aligncenter size-full wp-image-12014" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/03/assembly.jpg 6000w, https://thomaspark.co/wp/wp-content/uploads/2018/03/assembly-500x301.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/assembly-768x462.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/assembly-1024x617.jpg 1024w" sizes="auto, (max-width: 6000px) 100vw, 6000px" /></p>
<p>Here’s the final product. Now the lightning cable can be packed away for good.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase.jpg" alt="Apple TV 4 Remote Wireless Charging Case" width="3890" height="2954" class="aligncenter size-full wp-image-12016" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase.jpg 3890w, https://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase-500x380.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase-768x583.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase-1024x778.jpg 1024w" sizes="auto, (max-width: 3890px) 100vw, 3890px" /></p>
<h2>Notes</h2>
<h3>Fit</h3>
<p>I modeled the case to have tight tolerances between the pieces and the remote. Since this was the first time I used 3D printing, I didn’t know what I was gonna get. The 3D print job was as precise as hoped for, but the tolerances ended up being a bit too tight. Even after sanding down the pieces, the remote was a tight squeeze and required some muscle to remove. For the next version, I’d leave bigger gaps and add little nubs (not sure the right term) inside the case to hold the remote in place instead.</p>
<h3>Finish</h3>
<p>The texture of the Shapeways pieces wasn’t as rough as other 3D printed works I’ve seen in the past. Still, they were far from the smooth or even matte surfaces you get in commercial products. Finishing them using the methods described <a href="https://www.fictiv.com/hwg/fabricate/ultimate-guide-to-finishing-3d-printed-parts">in this guide</a> would go a long way.</p>
<h3>Financials</h3>
<p>Getting the pieces printed by Shapeways was quite pricey. The model could definitely be optimized to reduce the amount of materials used, or if these were to be made in bulk, an entirely different, cheaper process could be taken. But given that this was a one-off project and as much a learning experience as anything else, cost wasn’t a big consideration.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2018/03/3d-printing-a-wireless-charging-case-for-the-apple-tv-remote/feed/</wfw:commentRss>
<slash:comments>3</slash:comments>
</item>
<item>
<title>Putting TV Clutter Out of Sight</title>
<link>https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/</link>
<comments>https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 13 Oct 2017 13:18:44 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=11919</guid>
<description><![CDATA[The Problem The clutter. While I admit this setup is cleaner than most, there’s still the white power strip peeking out and the Nintendo Switch obscuring a corner of the TV. Then there’s the random … <a href="https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/">Read more</a>]]></description>
<content:encoded><![CDATA[<h2>The Problem</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before.jpg" alt="" width="1600" height="1200" class="aligncenter size-full wp-image-11939" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before-500x375.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before-1024x768.jpg 1024w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></p>
<p>The clutter. While I admit this setup is cleaner than most, there’s still the white power strip peeking out and the Nintendo Switch obscuring a corner of the TV. Then there’s the random cables drooping here and there. You might say I’m obsessive about cable management, decluttering, and minimalism in general.</p>
<p>But while I’ve endured this setup to this point, clearing it became an urgent matter once Baby Clara entered the picture. To her, it’s all strings to be pulled and toys to be tossed.</p>
<h2>The Solution</h2>
<p>To hide the clutter, I decided to mount everything onto the back of the TV.</p>
<p>I picked up black MDF board, cut it to size, and drilled holes that lined up with the VESA mounting holes. Long bolts that fit the VESA holes (M8 x 55mm in my case) are paired with nuts to secure the board several centimeters away from the TV. By not being flush, there’s still room to ventilate both the TV and devices.</p>
<p>Throw in a couple of custom mounts for the <a href="https://www.amazon.com/TotalMount-Nintendo-Switch-Mounts-wall/dp/B071HLJL4Q/?tag=bigicecube-20">Nintendo Switch</a> and <a href="https://www.amazon.com/TotalMount-Apple-Mount-Compatible-including/dp/B017K17PQ8/?tag=bigicecube-20">Apple TV</a>, a dash of velcro and Command strips, and this is what I got.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount.jpg" alt="" width="1600" height="1200" class="aligncenter size-full wp-image-11941" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount-500x375.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount-1024x768.jpg 1024w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></p>
<h2>The Result</h2>
<p>And here’s the view from the couch. This will work… At least till Baby Clara discovers the other side of the TV.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after.jpg" alt="" width="1600" height="1200" class="aligncenter size-full wp-image-11940" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after-500x375.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after-1024x768.jpg 1024w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/feed/</wfw:commentRss>
<slash:comments>3</slash:comments>
</item>
<item>
<title>Learning CSS Grid with Grid Garden</title>
<link>https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/</link>
<comments>https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 03 Apr 2017 14:37:40 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Learning]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11836</guid>
<description><![CDATA[I’m pleased to announce Grid Garden, a sequel to Flexbox Froggy. This time, you’ll learn about CSS grid, the hot new layout module, and cultivate a carrot or two in the process. Grid is cutting … <a href="https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><a href="http://cssgridgarden.com"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot.png" alt="Grid Garden Screenshot" width="2264" height="1372" class="aligncenter size-full wp-image-11843" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot.png 2264w, https://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot-500x303.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot-768x465.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot-1024x621.png 1024w" sizes="auto, (max-width: 2264px) 100vw, 2264px" /></a></p>
<p>I’m pleased to announce <a href="http://cssgridgarden.com">Grid Garden</a>, a sequel to <a href="http://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/">Flexbox Froggy</a>. This time, you’ll learn about CSS grid, the hot new layout module, and cultivate a carrot or two in the process.</p>
<p>Grid is cutting edge, with <a href="http://caniuse.com/#feat=css-grid">browser support landing just last month</a>. What this means is that you’ll need to update to the latest Firefox, Chrome, or Safari in order to play Grid Garden. So hop to it!</p>
<div class="center">
<a class="standard-btn xlarge-btn orange-btn" href="http://cssgridgarden.com">Grid Garden</a>
</div>
<h2>Grid versus Flexbox</h2>
<p>If you’re anything like me, you’re thinking to yourself, “We just figured out flexbox, now we have another layout technique?!” But just as <code class="language-css">position</code> and <code class="language-css">float</code> will continue to find use, grid and flexbox will coexist and fulfill different purposes based on their strengths.</p>
<p>So what exactly is the difference between grid and flexbox? In a nutshell, flexbox works along one primary dimension, with niceties like wrapping, alignment, and justification thrown in. Grid, on the other hand, works in two dimensions by defining rows and columns. Think table-based positioning, but with a separation of content and presentation.</p>
<p>More concretely, grid is good for laying out macro elements like headers, footers, and sidebars, while flexbox is well-suited to multiples of similar items, like lists of features, testimonials, and navigation links.</p>
<h2>Learn More about Grid</h2>
<p>My objective with Grid Garden is not to cover every last aspect of CSS grid, but to help players develop an intuition and recognize its potential. Things get left out, like the <code class="language-css">grid-gap</code> property, <code class="language-css">grid-auto-columns</code>, and custom naming of grid lines and areas.</p>
<p>Fortunately, there are some excellent resources to fill in the gaps, including <a href="http://gridbyexample.com/">Grid by Example</a>, Jen Simmons’s <a href="http://labs.jensimmons.com/">experimentation</a>, and <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS-Trick’s guide</a>. And of course <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">MDN’s comprehensive docs</a>.</p>
<p>CSS grid is powerful and elegant (more so than flexbox), and should quickly become an essential tool in your web development toolkit. But don’t just take my word for it — play <a href="http://cssgridgarden.com">Grid Garden</a> and see for yourself.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/feed/</wfw:commentRss>
<slash:comments>25</slash:comments>
</item>
<item>
<title>Where I End and You Begin: Finding the Most Depressing Radiohead Songs using Crowd Data from SongMeanings</title>
<link>https://thomaspark.co/2017/02/where-i-end-and-you-begin-finding-the-most-depressing-radiohead-songs-using-crowd-data-from-songmeanings/</link>
<comments>https://thomaspark.co/2017/02/where-i-end-and-you-begin-finding-the-most-depressing-radiohead-songs-using-crowd-data-from-songmeanings/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 28 Feb 2017 13:51:58 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Language]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11697</guid>
<description><![CDATA[Last week, a fun article titled fitteR happieR crowned the most depressing Radiohead song as True Love Waits. This was determined by a “gloom index” calculated with Spotify’s valence metric — which measures the musical … <a href="https://thomaspark.co/2017/02/where-i-end-and-you-begin-finding-the-most-depressing-radiohead-songs-using-crowd-data-from-songmeanings/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Last week, a fun article titled <a href="http://rcharlie.com/2017-02-16-fitteR-happieR/">fitteR happieR</a> crowned the most depressing Radiohead song as <em>True Love Waits</em>. This was determined by a “gloom index” calculated with Spotify’s valence metric — which measures the musical positiveness of a track — and sentiment analysis of lyrics.</p>
<p>The results were pretty spot on in this Radiohead fan’s opinion, particularly how the tracks of each album stacked up to one another <a href="http://rcharlie.com/htmlwidgets/fitterhappier/album_chart.html">in this visualization</a>. But the approach failed in a few cases, most notably the eponymous <em>Fitter Happier</em>. According to the gloom index, it’s one of the happiest songs, but trust me when I say that quite the opposite is true.</p>
<p>Why this approach falls short with a song like <em>Fitter Happier</em> is two-fold. First, this particular track overlays a collage of audio samples with a spoken-word synthesizer, breaking away from conventional song structures that, as far as I can guess, Spotify’s machine learning techniques train with to calculate valence. Second, this sentiment analysis takes the lyrics at face value, assuming “happier” means “happier”, blind to the nuances of irony.</p>
<p>Here I’d like to share an alternate approach that tries to deal with these outliers. One that might fare better at contextualizing experimental music and understanding sarcasm. To do this, I’m bringing the wisdom of the crowds into the loop, ranking the most depressing Radiohead songs by applying sentiment analysis to data from the SongMeanings community.</p>
<h2>Scraping SongMeanings</h2>
<p>As the name suggests, <a href="http://songmeanings.com/artist/view/songs/200/">SongMeanings</a> is one of the oldest, most popular online communities for people to share their impressions or interpretations of songs. Unfortunately, it doesn’t offer a public API as Spotify and Genius do, so I had to scrape the comments for each Radiohead song.</p>
<p><a href="http://www.nightmarejs.org/">Nightmare</a>, which you can see in action below, turned out to be a fantastic tool for this job, especially as someone comfortable with JavaScript.</p>
<p><video class="share-video" id="share-video" poster="https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.jpg" autoplay="" muted="" loop="" style="width: 100%;"><source id="webmSource" src="https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.webm" type="video/webm"><source id="mp4Source" src="https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.mp4" type="video/mp4"><img decoding="async" title="Sorry, your browser doesn't support HTML5 video." src="https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.jpg"></video></p>
<p>And here is the code for scraping the comments.</p>
<p><pre>
<code lang="javascript" class="language-javascript">
var Nightmare = require('nightmare');
var vo = require('vo');
var fs = require('fs');
function* run() {
var nightmare = Nightmare({show: true});
var url = 'http://songmeanings.com/artist/view/songs/200/'; // Artist page
// Grab list of song links from artist page
var songs = yield nightmare
.goto(url)
.evaluate(function() {
var songs = {};
var songsList = document.querySelectorAll('#songslist tr');
songsList.forEach(function(tr) {
var id = tr.id.slice(6);
var title = tr.querySelector('td:first-child a').title.slice(0, -7);
var href = tr.querySelector('td:first-child a').href;
var commentCount = tr.querySelector('.comments a').innerText;
songs[title] = {'id': id, 'title': title, 'href': href, 'commentCount': commentCount};
});
return songs;
});
// Visit each song page and save comments
for (var key in songs) {
var song = songs[key];
var page_max = Math.ceil(song.commentCount / 10);
var comments = [];
yield nightmare
.goto(song.href)
.wait('body');
for (i = 1; i <= page_max; i++) {
yield nightmare
.evaluate(function() {
var page_comments = [...document.querySelectorAll('#comments-list .com-normal')].map(function(elem) {
var text = elem.querySelector('.text').innerHTML.split('</strong>')[1].split('\t\t\t\t\n\t\t\t\t<div class=')[0].split('<p>')[0].replace(/<br>\n|"/g, ' ');
var rating = elem.querySelector('.numb').innerText;
return {'text': text, 'rating': rating};
});
return page_comments;
})
.then(function (result) {
comments.push(...result);
console.log('Success: ', result);
})
.catch(function (error) {
console.error('Error: ', error);
});
yield nightmare
.exists('a#page-' + (i+1))
.then(function(nextExists) {
if (nextExists) {
return nightmare
.click('#pagination a:last-child')
.wait(500);
}
});
}
song.comments = comments;
}
yield nightmare.end();
return songs;
}
vo(run)(function(err, result) {
if (err) throw err;
fs.writeFileSync('whereiend.json', JSON.stringify(result));
});
</code>
</pre>
</p>
<p>The text and score of each comment were collected, the latter of which is based on the upvotes and downvotes assigned to a comment by other members of the community.</p>
<p>It turned out that the number of comments for a given song was quite uneven, with some songs having very few comments or none at all. A recent decline in activity on SongMeanings probably contributed to this, bad news for last year’s superb “A Moon Shaped Pool”. For the analysis, I filtered out songs with less than 40 comments.</p>
<h2>Sentiment Analysis</h2>
<p>The sentiment analysis followed the previous one, calculating the percentage of words in each Radiohead song’s comments that expressed sadness using the word list provided by <a href="http://saifmohammad.com/WebPages/NRC-Emotion-Lexicon.htm">NRC EmoLex</a>. The node package <a href="https://www.npmjs.com/package/text-miner">text-miner</a> was used to clean up, stem, and remove stop words first.</p>
<p>A second score was calculated by weighting comments based on their scores. Comments with negative scores not factored in here, while comments with a score of zero were given a weight of 1 (owing to the author’s implicit self-vote), those with a score of one given a weight of 2, etc. This broadens the crowd from just commenters to lurkers who have cast votes, and gets at the idea of a community reaching consensus about what each song means.</p>
<p>Here is the code that was used for the analysis.</p>
<p><pre>
<code lang="javascript" class="lang-javascript">
var tm = require('text-miner');
var fs = require('fs');
var songs = JSON.parse(fs.readFileSync('whereiend.json'));
var sadWords = loadSadWords('NRC-Emotion-Lexicon-Wordlevel-v0.92.txt');
function loadSadWords(file) {
var sadWords = [];
var lines = fs.readFileSync(file, 'ascii').split('\r\n');
lines.forEach(function(line) {
var [term, category, flag] = line.split('\t');
if ((category == 'sadness') && (flag == 1)) {
sadWords.push(term);
}
});
return sadWords;
}
// Calculate sad score for a song's comments
function analyzeComments(song) {
var sadWordTotal = 0;
var wordTotal = 0;
var sadWordWeighted = 0;
var wordWeighted = 0;
song.comments.forEach(function(comment) {
var rating = comment.rating[0] == '+' ? parseInt(comment.rating.slice(1)) : parseInt(comment.rating);
var score = scoreComment(comment);
sadWordTotal = sadWordTotal + score.sadWordCount;
wordTotal = wordTotal + score.wordCount;
if (rating >= 0) {
sadWordWeighted = sadWordWeighted + ((rating+1) * score.sadWordCount);
wordWeighted = wordWeighted + ((rating+1) * score.wordCount);
}
});
var percentage = 100*sadWordTotal/wordTotal;
var weighted = 100*sadWordWeighted/wordWeighted;
return {'percentage': percentage, 'weighted': weighted, 'wordTotal': wordTotal};
}
// Count number of words and sad words in comment
function scoreComment(comment) {
var text = comment.text.replace(/\(|\)|:|\'/g, '');
var corpus = new tm.Corpus([]);
corpus.addDoc(text);
corpus
.clean()
.removeNewlines()
.removeInterpunctuation()
.removeInvalidCharacters()
.removeWords(tm.STOPWORDS.EN)
.toLower()
.stem('Lancaster');
var terms = new tm.Terms(corpus);
var vocabulary = terms.vocabulary;
var counts = terms.dtm[0];
var wordCount = counts.reduce((a, b) => a + b, 0);
var sadWordCount = 0;
vocabulary.forEach(function(word) {
if (sadWords.indexOf(word) > -1) {
sadWordCount = sadWordCount + 1;
}
});
return {'sadWordCount': sadWordCount, 'wordCount': wordCount};
}
function run() {
var output = 'song\tpercentage\tweighted\twordTotal\tcommentCount\n';
for (var key in songs) {
var score = analyzeComments(songs[key]);
var commentCount = songs[key].commentCount;
output = output + key + '\t' + score.percentage + '\t' + score.weighted + '\t' + score.wordTotal + '\t' + commentCount + '\n';
}
fs.writeFileSync('output.txt', output);
}
run();
</code>
</pre>
</p>
<h2>The Saddest Radiohead Songs According to SongMeanings</h2>
<p>So how did the songs stack up? Using this approach, the most depressing Radiohead song of all time is <em>Black Star</em>, an early song about interpersonal troubles rather than the more grandiose themes of later songs. The winner in the previous analysis, <em>True Love Waits</em>, also ranks highly here at #4.</p>
<p>Also deserving of spots on the list are <em>No Surprises</em>, <em>Motion Picture Soundtrack</em>, and <em>Big Ideas (Don’t Get Any)</em>, though <em>There There</em> and <em>Weird Fishes/Arpeggi</em> are kind of a surprise.</p>
<table>
<tr>
<th>Rank</th>
<th>Song</th>
<th>Percentage</th>
</tr>
<tr>
<td>1</td>
<td>Black Star</td>
<td>7.63</td>
</tr>
<tr>
<td>2</td>
<td>No Surprises</td>
<td>6.30</td>
</tr>
<tr>
<td>3</td>
<td>High and Dry</td>
<td>6.04</td>
</tr>
<tr>
<td>4</td>
<td>True Love Waits</td>
<td>6.02</td>
</tr>
<tr>
<td>5</td>
<td>Fog</td>
<td>6.02</td>
</tr>
<tr>
<td>6</td>
<td>Motion Picture Soundtrack</td>
<td>5.97</td>
</tr>
<tr>
<td>7</td>
<td>Street Spirit</td>
<td>5.68</td>
</tr>
<tr>
<td>8</td>
<td>There There</td>
<td>5.57</td>
</tr>
<tr>
<td>9</td>
<td>Weird Fishes/Arpeggi</td>
<td>5.47</td>
</tr>
<tr>
<td>10</td>
<td>Big Ideas (Don’t Get Any)</td>
<td>5.43</td>
</tr>
</table>
<p>At the bottom of the list are placid songs like <em>Sail to the Moon</em> and <em>The Tourist</em>, plus instrumental interludes like <em>Pulk/Pull Revolving Doors</em> and <em>Treefingers</em>. Not that people didn’t have plenty of comments to make about them too.</p>
<table>
<tr>
<th>Rank</th>
<th>Song</th>
<th>Percentage</th>
</tr>
<tr>
<td>75</td>
<td>Life in a Glasshouse</td>
<td>3.00</td>
</tr>
<tr>
<td>76</td>
<td>Anyone Can Play Guitar</td>
<td>2.95</td>
</tr>
<tr>
<td>77</td>
<td>Sail to the Moon</td>
<td>2.90</td>
</tr>
<tr>
<td>78</td>
<td>Reckoner</td>
<td>2.87</td>
</tr>
<tr>
<td>79</td>
<td>The Tourist</td>
<td>2.86</td>
</tr>
<tr>
<td>80</td>
<td>Pulk/Pull Revolving Doors</td>
<td>2.73</td>
</tr>
<tr>
<td>81</td>
<td>Treefingers</td>
<td>2.72</td>
</tr>
<tr>
<td>82</td>
<td>Go to Sleep</td>
<td>2.71</td>
</tr>
<tr>
<td>83</td>
<td>(Nice Dream)</td>
<td>2.65</td>
</tr>
<tr>
<td>84</td>
<td>Electioneering</td>
<td>2.42</td>
</tr>
</table>
<p>What happens to the rankings when you factor in comment scores? The list generally looks the same, with <em>Black Star</em> still topping the list. But there are a few movers and shakers: <em>Bullet Proof…I Wish I Was</em> and <em>Where I End and You Begin</em> shoot up 10 and 14 spots respectively to land at #2 and #6.</p>
<table>
<tr>
<th>Rank</th>
<th>Song</th>
<th>Weighted</th>
</tr>
<tr>
<td>1</td>
<td>Black Star</td>
<td>6.72</td>
</tr>
<tr>
<td>2</td>
<td>Bullet Proof…I Wish I Was</td>
<td>6.41</td>
</tr>
<tr>
<td>3</td>
<td>There There</td>
<td>6.25</td>
</tr>
<tr>
<td>4</td>
<td>High and Dry</td>
<td>6.24</td>
</tr>
<tr>
<td>5</td>
<td>Backdrifts</td>
<td>6.08</td>
</tr>
<tr>
<td>6</td>
<td>Where I End and You Begin</td>
<td>6.01</td>
</tr>
<tr>
<td>7</td>
<td>No Surprises</td>
<td>6.01</td>
</tr>
<tr>
<td>8</td>
<td>True Love Waits</td>
<td>5.78</td>
</tr>
<tr>
<td>9</td>
<td>Motion Picture Soundtrack</td>
<td>5.78</td>
</tr>
<tr>
<td>10</td>
<td>Fog</td>
<td>5.77</td>
</tr>
</table>
<p>The bottom also looks similar, though some more defiant or triumphant songs like <em>Karma Police</em> and <em>Airbag</em> appear, dropping down 33 and 18 spots respectively.</p>
<table>
<tr>
<th>Rank</th>
<th>Song</th>
<th>Weighted</th>
</tr>
<tr>
<td>75</td>
<td>Thinking About You</td>
<td>2.94</td>
</tr>
<tr>
<td>76</td>
<td>Go to Sleep</td>
<td>2.91</td>
</tr>
<tr>
<td>77</td>
<td>Airbag</td>
<td>2.91</td>
</tr>
<tr>
<td>78</td>
<td>Idioteque</td>
<td>2.89</td>
</tr>
<tr>
<td>79</td>
<td>Karma Police</td>
<td>2.86</td>
</tr>
<tr>
<td>80</td>
<td>Treefingers</td>
<td>2.73</td>
</tr>
<tr>
<td>81</td>
<td>Reckoner</td>
<td>2.67</td>
</tr>
<tr>
<td>82</td>
<td>(Nice Dream)</td>
<td>2.22</td>
</tr>
<tr>
<td>83</td>
<td>Pulk/Pull Revolving Doors</td>
<td>2.19</td>
</tr>
<tr>
<td>84</td>
<td>Electioneering</td>
<td>2.06</td>
</tr>
</table>
<p>When looking at the most frequent sad words found in the comments, many are taken directly from the lyrics. For instance, “black” and “falling” from <em>Black Star</em>, “death” and “unhappy” from <em>No Surprises</em>, “haunted” and “killing” from <em>True Love Waits</em>. So is this nothing more than a proxy for a lyrical analysis? Not entirely.</p>
<p>If you recall, by gloom index <em>Fitter Happier</em> was one of the least depressing Radiohead songs. But here, by percentage <em>Fitter Happier</em> lands in the middle of the pack at #55 of 84, and by the weighted score turns out to be one of the most depressing Radiohead songs of all time at #15.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/02/where-i-end-and-you-begin-finding-the-most-depressing-radiohead-songs-using-crowd-data-from-songmeanings/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
<enclosure url="https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.webm" length="1020419" type="video/webm"/>
<enclosure url="https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.mp4" length="2139633" type="video/mp4"/>
</item>
<item>
<title>QuickLine: A Mac Utility for Saving and Launching Terminal Commands</title>
<link>https://thomaspark.co/2017/02/quickline-a-mac-utility-for-saving-and-launching-terminal-commands/</link>
<comments>https://thomaspark.co/2017/02/quickline-a-mac-utility-for-saving-and-launching-terminal-commands/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 21 Feb 2017 13:08:06 +0000</pubDate>
<category><![CDATA[Demo]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11608</guid>
<description><![CDATA[From deep in the vaults, here’s an app called QuickLine that I made and then promptly forgot about in 2014. It’s a Mac utility for quickly saving and launching terminal commands. QuickLine is made with … <a href="https://thomaspark.co/2017/02/quickline-a-mac-utility-for-saving-and-launching-terminal-commands/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo-150x150.png" alt="QuickLine Logo" width="150" height="150" class="aligncenter size-thumbnail wp-image-11628" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo-150x150.png 150w, https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo-500x500.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo-768x768.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo.png 1000w" sizes="auto, (max-width: 150px) 100vw, 150px" /></p>
<p>From deep in the vaults, here’s an app called QuickLine that I made and then promptly forgot about in 2014. It’s a Mac utility for quickly saving and launching terminal commands. QuickLine is made with <a href="https://nwjs.io/">NW.js</a> (called node-webkit back then), an incredible tool for writing cross platform desktop apps using JavaScript. I’m making the project available here for posterity.</p>
<p><a href="https://thomaspark.co/wp/wp-content/uploads/2017/02/commands.png"><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2017/02/commands-500x381.png" alt="QuickLine Commands" width="500" height="381" class="aligncenter size-medium wp-image-11624" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/02/commands-500x381.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/02/commands-768x584.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/02/commands-1024x779.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2017/02/commands.png 1766w" sizes="auto, (max-width: 500px) 100vw, 500px" /></a></p>
<p>Using QuickLine, you can save and label your most commonly used and easily forgotten terminal commands, and execute them with a single click. For instance, if you want to disable shadows in screen captures, you no longer need to commit to memory or — more likely — google every time for this command:</p>
<p><pre><code class="lang-bash">defaults write com.apple.screencapture disable-shadow -bool TRUE; killall SystemUIServer</code></pre>
</p>
<p>You can also view the status and output of your commands using the built-in console.</p>
<p><a href="https://thomaspark.co/wp/wp-content/uploads/2017/02/console.png"><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2017/02/console-500x381.png" alt="QuickLine Console" width="500" height="381" class="aligncenter size-medium wp-image-11613" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/02/console-500x381.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/02/console-768x584.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/02/console-1024x779.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2017/02/console.png 1766w" sizes="auto, (max-width: 500px) 100vw, 500px" /></a></p>
<p>Finally, you can discover and import commands from the included library, and modify them to suit your needs. I’ve collected a bunch of commands to access hidden features, configure your system, and speed up repetitive tasks. For the mother of all lists, check out <a href="https://github.com/herrbischoff/awesome-osx-command-line">Awesome OS X Command Line</a>.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2017/02/library.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/02/library-500x381.png" alt="QuickLine Library" width="500" height="381" class="aligncenter size-medium wp-image-11614" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/02/library-500x381.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/02/library-768x584.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/02/library-1024x779.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2017/02/library.png 1766w" sizes="auto, (max-width: 500px) 100vw, 500px" /></a></p>
<p>Without further ado, download and play around with QuickLine here:</p>
<div class="center"><a class="standard-btn black-btn xlarge-btn" href="https://thomaspark.co/projects/quickline/QuickLine-1.0.0.zip"><span>Download QuickLine</span></a></div>
<h3>The Motivation Behind It</h3>
<p>Part of the motivation for this app was the simple utility of being able to “bookmark” commonly used, but verbose, terminal commands.</p>
<p>At the same time, I wanted to put within reach the power of the command line to people who aren’t necessarily power users. At least give them a toehold so they aren’t put off and might eventually discover the joys of grepping and vimming and piping. As with my other projects like <a href="https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/">Snowball</a> and <a href="https://thomaspark.co/2012/02/introducing-bootswatch/">Bootswatch</a>, the goal was <a href="https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/">to find the sweet spot between beginner and expert</a>. QuickLine bridges apps like <a href="https://www.bresink.com/osx/TinkerTool.html">TinkerTool</a> that are easy to use but limited by what their developers design for, and Terminal, a magical cauldron that requires mysterious incantations. QuickLine achieves this by making terminal commands discoverable, transparent, and tweakable.</p>
<h3>Why It Was Never Released Until Now</h3>
<p>At the time I was developing QuickLine, I felt enthusiastic that it could resonate with Mac users. But that was tempered on the one hand by OS’x GateKeeper feature, which disables unsigned apps by default, and on the other hand the Mac App Store’s sandboxing requirement, which would render the app useless. I felt these were pretty significant hurdles to the very users I wanted to reach.</p>
<p>And then I got busy with other stuff.</p>
<p>I’m releasing QuickLine now to have a record of what was a fun personal project, and to make it freely available to the few willing to seek it out.</p>
<h3>Caveats</h3>
<p>Since QuickLine isn’t signed, you’ll need to <a href="https://support.apple.com/en-us/HT202491">exempt it from Gatekeeper</a>.</p>
<p>Only trust copies downloaded from this page. Any other source is suspect.</p>
<p>I’m making it available on an as-is basis. Consider it abandonware, with no support or updates planned.</p>
<p>Finally, all the usual caveats of the command line apply. While the commands included in QuickLine have been vetted, copy and paste random commands from the internet at your own risk. Malicious commands can do serious damage to your system, so user discretion is advised.</p>
<h3>Acknowledgements</h3>
<p>My thanks to Amy, Anthony, James, and Bernie for helping out with testing way back when.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/02/quickline-a-mac-utility-for-saving-and-launching-terminal-commands/feed/</wfw:commentRss>
<slash:comments>5</slash:comments>
</item>
<item>
<title>Closed as Not Constructive: The Top-Voted Discussions on Stack Overflow</title>
<link>https://thomaspark.co/2017/02/closed-as-not-constructive-the-top-voted-discussions-on-stack-overflow/</link>
<comments>https://thomaspark.co/2017/02/closed-as-not-constructive-the-top-voted-discussions-on-stack-overflow/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 06 Feb 2017 14:07:57 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Learning]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11540</guid>
<description><![CDATA[It goes without saying that Stack Overflow is an invaluable resource for any coder seeking help. This is in large part because they enforce stringent guidelines such as sticking to factual questions and answers. As … <a href="https://thomaspark.co/2017/02/closed-as-not-constructive-the-top-voted-discussions-on-stack-overflow/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>It goes without saying that <a href="http://stackoverflow.com/">Stack Overflow</a> is an invaluable resource for any coder seeking help. This is in large part because they enforce stringent guidelines such as sticking to factual questions and answers. As a result, many posts that don’t meet these guidelines get locked down.</p>
<p>Many are duplicates or desperate students doing homework in the eleventh hour, but every once in awhile a fascinating and insightful discussion will emerge from the community. These too will get closed by moderators eventually of course, with reasons like being off-topic, too broad, opinion-based, or not constructive, and with notices like:</p>
<blockquote><p>As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion…</p></blockquote>
<p>Thankfully they remain online for posterity because they also make for some of the best reading fodder you can find on Stack Overflow. Judge for yourself: diving into the archives, I’ve collected an anthology of the top-voted “extended discussions” year by year for your reading pleasure. Enjoy!</p>
<p>(I’ll note that earlier years of Stack Overflow seem to have more of these rich discussions. I guess the moderation policies have been effective. <a href="https://news.ycombinator.com/news">Hacker News</a> and <a href="https://www.reddit.com/r/programming/">Proggit</a> are the places to turn for these sort of discussions now.)</p>
<h3>2016</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/38700923/how-can-i-make-sure-that-my-javascript-files-delivered-over-a-cdn-are-not-altere">How can I make sure that my JavaScript files delivered over a CDN are not altered?</a></li>
<li><a href="http://stackoverflow.com/questions/38042624/can-two-groups-of-n-people-find-each-other-around-a-circle">Can two groups of N people find each other around a circle?</a></li>
<li><a href="http://stackoverflow.com/questions/35917734/how-do-i-traverse-an-array-diagonally-in-javascript">How do I traverse an array diagonally in javascript</a></li>
<li><a href="http://stackoverflow.com/questions/39455123/is-force-unwrapping-a-variable-bad">Is force unwrapping a variable bad?</a></li>
<li><a href="http://stackoverflow.com/questions/40036165/equal-to-versus-not-equal-to-operators-in-an-if-else-statement">“equal to” versus “not equal to” operators in an if-else statement</a></li>
</ul>
<h3>2015</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/29363321/picasso-v-s-imageloader-v-s-fresco-vs-glide">Picasso v/s Imageloader v/s Fresco vs Glide</a></li>
<li><a href="http://stackoverflow.com/questions/28082581/what-is-the-difference-between-apache-spark-and-apache-flink">What is the difference between Apache Spark and Apache Flink?</a></li>
<li><a href="http://stackoverflow.com/questions/31634476/which-css-framework-to-use-with-angular2">Which CSS framework to use with Angular2?</a></li>
<li><a href="http://stackoverflow.com/questions/34114593/angular-vs-angular-2">Angular vs Angular 2</a></li>
<li><a href="http://stackoverflow.com/questions/29479814/spring-mvc-or-spring-boot">Spring MVC or Spring Boot</a></li>
</ul>
<h3>2014</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/22126078/what-is-the-difference-between-sublime-text-and-githubs-atom">What is the difference between Sublime text and Github’s Atom</a></li>
<li><a href="http://stackoverflow.com/questions/21375073/best-way-to-represent-a-grid-or-table-in-angularjs-with-bootstrap-3">Best way to represent a Grid or Table in AngularJS with Bootstrap 3?</a></li>
<li><a href="http://stackoverflow.com/questions/24993282/how-does-a-language-expand-itself">How does a language expand itself?</a></li>
<li><a href="http://stackoverflow.com/questions/25501098/difference-between-microservices-architecture-and-soa">Difference between Microservices Architecture and SOA</a></li>
<li><a href="http://stackoverflow.com/questions/22648829/fastest-exit-strategy-for-a-panic-button-in-crisis-abuse-websites">Fastest exit strategy for a Panic Button in Crisis/Abuse Websites?</a></li>
</ul>
<h3>2013</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background">“Thinking in AngularJS” if I have a jQuery background?</a></li>
<li><a href="http://stackoverflow.com/questions/14301389/why-does-one-use-dependency-injection">Why does one use dependency injection?</a></li>
<li><a href="http://stackoverflow.com/questions/14333857/how-to-master-angularjs">How to master AngularJS?</a></li>
<li><a href="http://stackoverflow.com/questions/16573668/best-practices-when-running-node-js-with-port-80-ubuntu-linode">Best practices when running Node.js with port 80 (Ubuntu / Linode)</a></li>
<li><a href="http://stackoverflow.com/questions/18542353/angularjs-folder-structure">AngularJS Folder Structure</a></li>
</ul>
<h3>2012</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/12694530/what-is-typescript-and-why-would-i-use-it-in-place-of-javascript">What is TypeScript and why would I use it in place of JavaScript?</a></li>
<li><a href="http://stackoverflow.com/questions/12529083/does-it-make-sense-to-use-require-js-with-angular-js">Does it make sense to use Require.js with Angular.js?</a></li>
<li><a href="http://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span">Should I use <i> tag for icons instead of <span>?</a></li>
<li><a href="http://stackoverflow.com/questions/9554636/the-use-of-multiple-jframes-good-or-bad-practice">The Use of Multiple JFrames: Good or Bad Practice?</a></li>
<li><a href="http://stackoverflow.com/questions/10941249/separate-rest-json-api-server-and-client">Separate REST JSON API server and client?</a></li>
</ul>
<h3>2011</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/7888880/what-is-redis-and-what-do-i-use-it-for">What is Redis and what do I use it for?</a></li>
<li><a href="http://stackoverflow.com/questions/5928061/using-a-piano-keyboard-as-a-computer-keyboard">Using a piano keyboard as a computer keyboard</a></li>
<li><a href="http://stackoverflow.com/questions/4904096/whats-the-difference-between-unit-functional-acceptance-and-integration-test">What’s the difference between unit, functional, acceptance, and integration tests?</a></li>
<li><a href="http://stackoverflow.com/questions/4797534/how-do-i-manually-fire-http-post-requests-with-firefox-or-chrome">How do I manually fire HTTP POST requests with Firefox or Chrome?</a></li>
<li><a href="http://stackoverflow.com/questions/5446316/code-first-vs-model-database-first">Code-first vs Model/Database-first</a></li>
</ul>
<h3>2010</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/3220404/why-use-pip-over-easy-install">Why use pip over easy_install?</a></li>
<li><a href="http://stackoverflow.com/questions/3077866/large-scale-design-in-haskell">Large-scale design in Haskell?</a></li>
<li><a href="http://stackoverflow.com/questions/4493001/good-use-case-for-akka">Good use case for Akka</a></li>
<li><a href="http://stackoverflow.com/questions/2794016/what-should-every-programmer-know-about-security">What should every programmer know about security?</a></li>
<li><a href="http://stackoverflow.com/questions/2039904/what-statistics-should-a-programmer-or-computer-scientist-know">What statistics should a programmer (or computer scientist) know?</a></li>
</ul>
<h3>2009</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format">JavaScript equivalent to printf/string.format</a></li>
<li><a href="http://stackoverflow.com/questions/507343/using-git-with-visual-studio">Using Git with Visual Studio</a></li>
<li><a href="http://stackoverflow.com/questions/448673/how-do-emulators-work-and-how-are-they-written">How do emulators work and how are they written?</a></li>
<li><a href="http://stackoverflow.com/questions/731832/designing-function-ffn-n">Designing function f(f(n)) == -n</a></li>
<li><a href="http://stackoverflow.com/questions/1722726/is-the-scala-2-8-collections-library-a-case-of-the-longest-suicide-note-in-hist">Is the Scala 2.8 collections library a case of “the longest suicide note in history”?</a></li>
</ul>
<h3>2008</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/549/the-definitive-guide-to-form-based-website-authentication">The definitive guide to form-based website authentication</a></li>
<li><a href="http://stackoverflow.com/questions/9033/hidden-features-of-c">Hidden Features of C#?</a></li>
<li><a href="http://stackoverflow.com/questions/1711/what-is-the-single-most-influential-book-every-programmer-should-read">What is the single most influential book every programmer should read?</a></li>
<li><a href="http://stackoverflow.com/questions/101268/hidden-features-of-python">Hidden features of Python</a></li>
<li><a href="http://stackoverflow.com/questions/137975/what-is-so-bad-about-singletons">What is so bad about singletons?</a></li>
</ul>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/02/closed-as-not-constructive-the-top-voted-discussions-on-stack-overflow/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Mimicking Pokemon Go’s Battery Saver Mode on the Web</title>
<link>https://thomaspark.co/2017/01/mimicking-pokemon-gos-battery-saver-mode-on-the-web/</link>
<comments>https://thomaspark.co/2017/01/mimicking-pokemon-gos-battery-saver-mode-on-the-web/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 30 Jan 2017 19:11:08 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11426</guid>
<description><![CDATA[So here’s a fun but useless trick: mimicking Pokemon Go’s battery saver mode on the web. For the few who missed the craze, Pokemon Go dims your phone’s screen when you turn it upside-down. With … <a href="https://thomaspark.co/2017/01/mimicking-pokemon-gos-battery-saver-mode-on-the-web/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>So here’s a fun but useless trick: mimicking Pokemon Go’s battery saver mode on the web. For the few who missed the craze, Pokemon Go dims your phone’s screen when you turn it upside-down. With the game being something of a battery hog, this can save you precious charge as you walk from one PokeStop to the next, phone in hand. I do appreciate how frictionless and natural this feature is.</p>
<div id="pogo">
<div class="back">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/01/pokemonbatterysaver.png" alt="" width="450" height="800" class="aligncenter size-full wp-image-11429" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/01/pokemonbatterysaver.png 450w, https://thomaspark.co/wp/wp-content/uploads/2017/01/pokemonbatterysaver-281x500.png 281w" sizes="auto, (max-width: 450px) 100vw, 450px" />
</div>
<div class="front">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/01/pokemongo.png" alt="" width="450" height="800" class="aligncenter size-full wp-image-11430" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/01/pokemongo.png 450w, https://thomaspark.co/wp/wp-content/uploads/2017/01/pokemongo-281x500.png 281w" sizes="auto, (max-width: 450px) 100vw, 450px" />
</div>
</div>
<p>So how might we mimic this on the web? Start by creating your overlay, and adding your favicon to the overlay if one is available. </p>
<p><code class="lang-javascript" lang="javascript"><br />
document.addEventListener('DOMContentLoaded', function () {<br />
var favicon = getFavicon();<br />
var node = document.createElement('div');<br />
var child = document.createElement('div');</p>
<p> node.id = 'overlay';</p>
<p> if (favicon) {<br />
child.style.backgroundImage = 'url(' + favicon + ')';<br />
node.appendChild(child);<br />
}</p>
<p> document.body.appendChild(node);<br />
});</p>
<p>var getFavicon = function() {<br />
var nodes = document.getElementsByTagName('link');</p>
<p> for (var i = 0; i < nodes.length; i++) {<br />
var rel = nodes[i].getAttribute('rel');</p>
<p> if (rel == 'apple-touch-icon-precomposed' || rel == 'apple-touch-icon' || rel == 'icon' || rel == 'shortcut icon') {<br />
return nodes[i].getAttribute('href');<br />
}<br />
}<br />
};<br />
</code></p>
<p>Next, listen for the orientationchange event and toggle the overlay on if orientation has a value of portrait-secondary, meaning upside-down.</p>
<p><code class="lang-javascript" lang="javascript"><br />
window.addEventListener("orientationchange", function() {<br />
var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;<br />
var node = document.getElementById('overlay');</p>
<p> if (orientation && orientation.type === 'portrait-secondary') {<br />
node.classList = 'on';<br />
} else {<br />
node.classList = '';<br />
}<br />
});<br />
</code></p>
<p>Lastly, style your overlay.</p>
<p><code class="lang-css" lang="css"><br />
#overlay {<br />
position: absolute;<br />
left: 0;<br />
right: 0;<br />
top: 0;<br />
bottom: 0;<br />
background-color: #000;<br />
opacity: 0;<br />
pointer-events: none;<br />
transition: opacity 0.5s;<br />
}</p>
<p>#overlay > div {<br />
width: 100%;<br />
height: 100%;<br />
background-position: center;<br />
background-repeat: no-repeat;<br />
background-size: 200px 200px;<br />
filter: grayscale(100%);<br />
opacity: 0.15;<br />
}</p>
<p>#overlay.on {<br />
pointer-events: auto;<br />
opacity: 1;<br />
}<br />
</code></p>
<p>And there you have it.</p>
<p>So why is this so useless? First, support for <code class="lang-css">orientation</code> is <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation">spotty</a>. Safari, for example, doesn’t support it. Second, while native apps like Pokemon Go actually decrease the display’s brightness, web apps can only mimic this with a black screen, saving no power at all on iPhone and other LCD displays.</p>
<p>But with the growing adoption of AMOLED displays, <a href="http://www.greenbot.com/article/2834583/how-much-power-does-a-black-interface-really-save-on-amoled-displays.html">which do save battery with black pixels</a>, maybe this will go from totally useless to mostly useless.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/01/mimicking-pokemon-gos-battery-saver-mode-on-the-web/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Relevant XKCD</title>
<link>https://thomaspark.co/2017/01/relevant-xkcd/</link>
<comments>https://thomaspark.co/2017/01/relevant-xkcd/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 23 Jan 2017 18:18:17 +0000</pubDate>
<category><![CDATA[Humor]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11396</guid>
<description><![CDATA[Footnotes An xkcd tribute inspired by what has become a meme. Also inspired by all things recursive like We Become What We Behold and xkcd itself. Made with the official xkcd font. Can you guess … <a href="https://thomaspark.co/2017/01/relevant-xkcd/">Read more</a>]]></description>
<content:encoded><![CDATA[<div class="iframe-wrapper">
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" src="https://thomaspark.co/projects/relevantxkcd/" width="100%" height="500" scrolling="yes" class="iframe-class" frameborder="0"></iframe>
</div>
<div id="footnotes">
<h3>Footnotes</h3>
<ol>
<li>An xkcd tribute inspired by what has become a <a href="https://relevantxkcd.appspot.com/">meme</a>.
<li>Also inspired by all things recursive like <a href="https://ncase.itch.io/wbwwb">We Become What We Behold</a> and <a href="https://xkcd.com/1416/">xkcd</a> itself.
<li>Made with the <a href="https://github.com/ipython/xkcd-font">official xkcd font</a>.
<li>Can you guess which xkcd this was traced from? Winner gets seven Vienna Fingers cookies.
<li>If you click enough times, this is actually a relevant xkcd to relevant xkcds to relevant xkcds ad infinitum.
<li>On second thought, this would only truly be a relevant xkcd to relevant xkcds if it were embedded as an iframe on xkcd.com. As it stands, it’s merely relevant to relevant xkcds.
</ol>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/01/relevant-xkcd/feed/</wfw:commentRss>
<slash:comments>12</slash:comments>
</item>
<item>
<title>Fidgeting in the Digital Realm</title>
<link>https://thomaspark.co/2017/01/fidgeting-in-the-digital-realm/</link>
<comments>https://thomaspark.co/2017/01/fidgeting-in-the-digital-realm/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 16 Jan 2017 13:20:55 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11311</guid>
<description><![CDATA[Fidgeting is a natural impulse that seems to relieve our anxiety and aid us in contemplation. It often involves mindlessly interacting with everyday objects like stones, pen and paper, bubble wrap, and more. Of course … <a href="https://thomaspark.co/2017/01/fidgeting-in-the-digital-realm/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><a href="https://www.kickstarter.com/projects/antsylabs/fidget-cube-a-vinyl-desk-toy"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetcubes.jpg" alt="Fidget Cubes" width="833" height="196" class="aligncenter size-full wp-image-11373" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetcubes.jpg 833w, https://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetcubes-500x118.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetcubes-768x181.jpg 768w" sizes="auto, (max-width: 833px) 100vw, 833px" /></a></p>
<p>Fidgeting is a natural impulse that seems to relieve our anxiety and aid us in contemplation. It often involves mindlessly interacting with everyday objects like stones, pen and paper, bubble wrap, <a href="http://fidgetwidgets.tumblr.com/">and more</a>. Of course there are also products purpose-built for this, from stress balls to the Swiss Army knife of fidget contraptions, <a href="https://www.kickstarter.com/projects/antsylabs/fidget-cube-a-vinyl-desk-toy">Fidget Cube</a>, which raised a whopping $6.5 million on Kickstarter.</p>
<p>With how much we do on our computers, fidgeting is sure to follow. But what does fidgeting look like in the digital realm? And how can we intentionally design for it?</p>
<p>More specifically, what would the analogue of Fidget Cube look like?</p>
<p>There’s been some work in this area. <a href="https://christophernoessel.medium.com/one-free-interaction-14155a85d93a">One Free Interaction</a> is a design pattern that describes quick and repeatable actions that satisfy users as much on an emotional level as a utilitarian level. A few cases of it — though not all — count as fidgeting, like repeatedly selecting and deselecting text as you read. There’s also <a href="http://gil.poly.edu/fidget-widgets/">Fidget Widgets</a>, which bridge the physical and the virtual.</p>
<p><a href="http://thomaspark.co/projects/fidgetgrid/">Fidget Grid</a> is my take. It includes some of my own fidgets, like doodling pixels (Microsoft Paint), pulling to refresh (Twitter), button toggling (iOS), and dock magnifying (Mac OS X). Did I miss any big ones? What are your favorites?</p>
<p><a href="http://thomaspark.co/projects/fidgetgrid/"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetgrid.png" alt="Fidget Grid" width="2770" height="776" class="aligncenter size-full wp-image-11391" /></a></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/01/fidgeting-in-the-digital-realm/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>Wrangling the Tangle of Apple Cables and Dongles</title>
<link>https://thomaspark.co/2017/01/wrangling-the-tangle-of-apple-cables-and-dongles/</link>
<comments>https://thomaspark.co/2017/01/wrangling-the-tangle-of-apple-cables-and-dongles/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 09 Jan 2017 13:35:15 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11222</guid>
<description><![CDATA[Since Steve Job’s return in 1997, Apple has been bold about dropping legacy I/O standards, on a knife edge between marching the state-of-the-art forward and convincing the world to follow suit. It’s been the same … <a href="https://thomaspark.co/2017/01/wrangling-the-tangle-of-apple-cables-and-dongles/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Since Steve Job’s return in 1997, Apple <a href="http://www.theverge.com/2016/6/29/12054410/apple-tech-death-chart-headphone-jack-ports-usb-c">has been bold about dropping legacy I/O standards</a>, on a knife edge between marching the state-of-the-art forward and convincing the world to follow suit. It’s been the same story for the floppy, SCSI, optical, VGA, and most recently, USB and the headphone jack. </p>
<p>There’s always pain when making this kind of transition, manifest as confusion, costs, and cables. Lots of cables.</p>
<p>But it’s a bitter pill swallowed for the sake of progress. Make a clean break and rethink computing without the baggage. Unfortunately, Apple’s most recent announcements show a distinct lack of vision. Not only are the current generation devices making a break with the previous gen, as has often been the case, but their flagship products are incompatible with one another. Dongles aren’t a stop-gap but the new status quo. Want to connect your shiny new iPhone 7 to your shiny new MacBook Pro with touch bar? Need a dongle. The EarPods that come with the iPhone 7 to the MacBook Pro? Can’t be done.</p>
<p>Ignoring the burden on your wallet and the inconvenience of lugging around a bunch of adapters, it’s just complicated keeping track of how things must connect in the Apple ecosystem. So much so that I felt compelled to create the following guide:</p>
<div id="idongle">
<div class="row connection bad">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/iphone-7.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-iphone/iphone-7" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-iPhone-Unlocked-32-GB/dp/B01LYT95XR/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>iPhone 7</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">Apple’s flagship products — the MacBook Pro with Touch Bar and iPhone 7 / 7 Plus — are not compatible out of the box. The iPhone 7 has a cable with the old, familiar USB plug, while the MacBook Pro sports a port that accepts ThunderBolt 3 and USB-C. Purchase a USB-C to USB adapter to use the included cable, as well as any other legacy USB devices. Or you can drop a bit more cash and replace the cable altogether with a USB-C to Lightning cable.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-c-usb-a.jpg"></div>
<div class="caption">
<h3>USB-C to USB Adapter</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MJ1M2AM/A/usb-c-to-usb-adapter" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-USB-C-to-USB-Adapter/dp/B00VU2OID2/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-c-lightning.jpg"></div>
<div class="caption">
<h3>USB-C to Lightning Cable</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MK0X2AM/A/usb-c-to-lightning-cable-1-m" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MK0X2AM-USB-C-Lightning-Cable/dp/B01DGYJBQA/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection bad">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/earpods-lightning.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMTN2AM/A/earpods-with-lightning-connector" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-EarPods-Lightning-Connector-MMTN2AM/dp/B01M0GB8CC/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>EarPods with Lightning Connector</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">The EarPods included with the iPhone 7 sport a Lightning plug, which the MacBook Pro with Touch Bar doesn’t support. There is no official way to connect them, even with a dongle. Though untested, you might try to chain this USB-C to USB adapter with a USB to Lightning cable.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-c-usb-a.jpg"></div>
<div class="caption">
<h3>USB-C to USB Adapter</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MJ1M2AM/A/usb-c-to-usb-adapter" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-USB-C-to-USB-Adapter/dp/B00VU2OID2/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-lightning.jpg"></div>
<div class="caption">
<h3>Female Lightning to Male USB Cable</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="#" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Charging-Adapter-Cocoxin-Extension-Charger/dp/B01FK6MW1I/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection soso">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/airpods.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMEF2AM/A/airpods" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="#?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>AirPods</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">The wireless AirPods work flawlessly with the MacBook Pro with Touch Bar. If you want to recharge the AirPods through the MacBook Pro, that’s a different story. The charging cable for the new AirPods comes with the familiar USB port, which means there’s no place to plug it into the current gen MacBook Pro. You’ll need to buy this USB-C to USB adapter to hook them up.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-c-usb-a.jpg"></div>
<div class="caption">
<h3>USB-C to USB Adapter</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MJ1M2AM/A/usb-c-to-usb-adapter" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-USB-C-to-USB-Adapter/dp/B00VU2OID2/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection good">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/earpods-3.5mm.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MD827LL/A/earpods-with-35-mm-headphone-plug" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-EarPods-Remote-Certified-Refurbished/dp/B012OVRS1Q/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>EarPods with 3.5mm Headphone Plug</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">The MacBook Pro with Touch Bar still sports a standard 3.5mm headphone jack, so you can use your old EarPods and most other headphones without packing additional gear.</p>
</p></div>
</p></div>
<div class="row connection bad">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/magsafe-2.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MD506LL/A/apple-85w-magsafe-2-power-adapter-for-macbook-pro-with-retina-display" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MagSafe-Adapter-MacBook-MD506LL/dp/B008ALAAV0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MagSafe 2 Power Adapter</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">If you’ve got some old MagSafe power cords lying around, you won’t be able to use them with the MacBook Pro with Touch Bar, which charges through its versatile USB-C ports.</p>
</p></div>
</p></div>
<div class="row connection soso">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/thunderbolt-display.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/FC914LL/B/refurbished-thunderbolt-display-27-inch" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MC914LL-27-inch-Thunderbolt-Display/dp/B004YLCKYA/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>Thunderbolt Display</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">If you’ve got a Thunderbolt Display (with the two-headed MagSafe and Thunderbolt cable), you’ll need this adapter to use it with the new MacBook Pro with Touch Bar.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/thunderbolt-3-thunderbolt-2.jpg"></div>
<div class="caption">
<h3>Thunderbolt 3 (USB-C) to Thunderbolt 2 Adapter</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMEL2AM/A/thunderbolt-3-usb-c-to-thunderbolt-2-adapter" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MMEL2AM-Thunderbolt-Usb-C-Adapter/dp/B01MQ26QIY/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection soso">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/led-cinema-display.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/FC007LL/A/refurbished-non-thunderbolt-apple-led-cinema-display-27-flat-panel" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MC007LL-27-Inch-Cinema-Display/dp/B0043GCBU4/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>LED Cinema Display</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">If you’ve got an older Apple Cinema LED Display (with the three-headed USB, MagSafe, and Mini DisplayPort cable), you’ll need this adapter to use it with the new MacBook Pro with Touch Bar.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-c-mini-displayport.jpg"></div>
<div class="caption">
<h3>AllSmartLife USB-C to Mini DisplayPort Adapter</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="#" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/AllSmartLife-DisplayPort-Aluminium-resolution-ChromeBook/dp/B017TZTMBG/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection good">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/iphone-7.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-iphone/iphone-7" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-iPhone-Unlocked-32-GB/dp/B01LYT95XR/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>iPhone 7</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/earpods-lightning.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMTN2AM/A/earpods-with-lightning-connector" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-EarPods-Lightning-Connector-MMTN2AM/dp/B01M0GB8CC/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>EarPods with Lightning Connector</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">The iPhone 7 and accompanying EarPods work great together, but in order to listen and charge your iPhone 7 at the same time, you’ll need this officially licensed dongle from Belkin.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/belkin-lightning-audio-charge.jpg"></div>
<div class="caption">
<h3>Belkin Lightning Audio + Charge Rockstar</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/HKKP2ZM/A/belkin-lightning-audio-charge-rockstar" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Belkin-Lightning-Charge-RockStar-iPhone/dp/B01LXFKSNA/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection soso">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/iphone-7.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-iphone/iphone-7" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-iPhone-Unlocked-32-GB/dp/B01LYT95XR/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>iPhone 7</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/earpods-3.5mm.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MD827LL/A/earpods-with-35-mm-headphone-plug" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-EarPods-Remote-Certified-Refurbished/dp/B012OVRS1Q/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>EarPods with 3.5mm Headphone Plug</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">If you want to use an older pair of EarPods, Beats, or any other 3.5mm headphones with your iPhone 7, you can use this Lightning to 3.5mm adapter that comes included with the iPhone 7. If you want to charge while you listen, the iPhone Lightning Dock from Apple will do the trick.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/lightning-3.5mm.jpg"></div>
<div class="caption">
<h3>Lightning to 3.5 mm Headphone Jack Adapter</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMX62AM/A/lightning-to-35-mm-headphone-jack-adapter" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-Lightning-3-5mm-Headphone-Adapter/dp/B01LXJFMGF/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/iphone-lightning-dock.jpg"></div>
<div class="caption">
<h3>iPhone Lightning Dock</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MNN62/iphone-lightning-dock-black" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-iPhone-Lightning-Dock-Space/dp/B015KSARTU/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection good">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-mid-2015.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/G0QP3LL/A/refurbished-133-inch-macbook-pro-27ghz-dual-core-intel-i7-with-retina-display" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-Macbook-MJLQ2LL-15-inch-Processor/dp/B00XZGMBVC/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Mid 2015</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/airpods.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMEF2AM/A/airpods" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="#?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>AirPods</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">The AirPods work wirelessly with the mid-2015 MacBook Pro, and you can even recharge them via USB without a dongle.</p>
</p></div>
</p></div>
<div class="row connection soso">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-mid-2015.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/G0QP3LL/A/refurbished-133-inch-macbook-pro-27ghz-dual-core-intel-i7-with-retina-display" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-Macbook-MJLQ2LL-15-inch-Processor/dp/B00XZGMBVC/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Mid 2015</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/earpods-lightning.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMTN2AM/A/earpods-with-lightning-connector" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-EarPods-Lightning-Connector-MMTN2AM/dp/B01M0GB8CC/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>EarPods with Lightning Connector</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">Using your new EarPods with the mid-2015 MacBook Pro or older isn’t so straightforward. Apple doesn’t provide a dongle for this situation, but this third-party cable may do the trick.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-lightning.jpg"></div>
<div class="caption">
<h3>Female Lightning to Male USB Cable</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="#" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Charging-Adapter-Cocoxin-Extension-Charger/dp/B01FK6MW1I/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection good">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-mid-2015.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/G0QP3LL/A/refurbished-133-inch-macbook-pro-27ghz-dual-core-intel-i7-with-retina-display" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-Macbook-MJLQ2LL-15-inch-Processor/dp/B00XZGMBVC/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Mid 2015</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/earpods-3.5mm.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MD827LL/A/earpods-with-35-mm-headphone-plug" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-EarPods-Remote-Certified-Refurbished/dp/B012OVRS1Q/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>EarPods with 3.5mm Headphone Plug</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">It just works.</p>
</p></div>
</p></div>
</p></div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/01/wrangling-the-tangle-of-apple-cables-and-dongles/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Rotary: A Retro Web Input for Phone Numbers</title>
<link>https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/</link>
<comments>https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 25 Apr 2016 14:05:46 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11145</guid>
<description><![CDATA[A bad web form sparked a series of increasingly absurd designs for inputting phone numbers, including an incrementer, slider, random number generator, and very large table. Here’s a good rundown of the solutions developers came … <a href="https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><a href="https://twitter.com/stelian/status/720913927639560194">A bad web form</a> sparked a series of increasingly absurd designs for inputting phone numbers, including an incrementer, slider, random number generator, and very large table. <a href="http://kottke.org/16/04/hilariously-bad-phone-number-web-forms">Here’s a good rundown</a> of the solutions developers came up with.</p>
<p>This is my take. It’s a retro, skeuomorphic input based on the rotary telephone. Inefficient, but kinda fun. Try it out below, <i>especially</i> those of you <a href="https://www.youtube.com/watch?v=XkuirEweZvM">too young to have ever handled a rotary</a>.</p>
<p>You can also view the <a href="https://thomaspark.co/projects/rotary/">standalone demo</a> and <a href="https://github.com/thomaspark/rotary/">source on GitHub</a>. </p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" style="width: 100%; height: 500px; border: none;" src="https://thomaspark.co/projects/rotary/" width="100%" height="500" scrolling="yes" class="iframe-class" frameborder="0"></iframe>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/feed/</wfw:commentRss>
<slash:comments>9</slash:comments>
</item>
<item>
<title>Learning CSS Layout with Flexbox Froggy</title>
<link>https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/</link>
<comments>https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 25 Nov 2015 13:26:04 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Games]]></category>
<category><![CDATA[Learning]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11108</guid>
<description><![CDATA[I’ve created a game for learning CSS flexbox called Flexbox Froggy. The goal of the game is to help the frogs get to their lilypads by writing CSS code. See if you can beat all … <a href="https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><a href="http://flexboxfroggy.com"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/flexboxfroggy.png" alt="Flexbox Froggy" width="2506" height="1474" class="aligncenter size-full wp-image-11113" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/flexboxfroggy.png 2506w, https://thomaspark.co/wp/wp-content/uploads/2015/11/flexboxfroggy-500x294.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/11/flexboxfroggy-1024x602.png 1024w" sizes="auto, (max-width: 2506px) 100vw, 2506px" /></a></p>
<p>I’ve created a game for learning CSS flexbox called Flexbox Froggy. The goal of the game is to help the frogs get to their lilypads by writing CSS code. See if you can beat all the levels!</p>
<div class="center">
<a class="standard-btn xlarge-btn green-btn" href="http://flexboxfroggy.com">Flexbox Froggy</a>
</div>
<p>Flexbox Froggy takes inspiration from the classic arcade game <a href="https://en.wikipedia.org/wiki/Frogger">Frogger</a>, and web literacy games like the brilliant <a href="http://flukeout.github.io/">CSS Diner</a> and <a href="https://eraseallkittens.com/">Erase All Kittens</a>, where you learn about CSS selectors and HTML markup respectively.</p>
<p>I chose CSS flexbox in part because its layout properties make for good gameplay mechanics. The game levels are similar to the “positioning zombies” activity that featured <a href="http://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/">in my work with Mozilla Thimble tutorials</a>, but using the powerful new flexbox model instead of absolute positioning.</p>
<p>Flexbox is also a good topic because beginners can learn this improved way of positioning right out of the gate, while many experienced web developers who aren’t familiar with it yet can finally get on with it. It’s something I myself have been meaning to learn for awhile now. There are topnotch tutorials out there for this purpose like those by <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">CSS Tricks</a>, <a href="http://tympanus.net/codrops/css_reference/flexbox/">Codrops</a>, and <a href="https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties">Scotch.io</a>, but few interactive learning experiences.</p>
<p>If you spot any bugs or have ideas for new levels, please open an issue on <a href="http://github.com/thomaspark/flexboxfroggy">GitHub</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/feed/</wfw:commentRss>
<slash:comments>71</slash:comments>
</item>
<item>
<title>Bob Ross’ Color Palette in CSS</title>
<link>https://thomaspark.co/2015/11/bob-ross-color-palette-in-css/</link>
<comments>https://thomaspark.co/2015/11/bob-ross-color-palette-in-css/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 19 Nov 2015 13:05:16 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11021</guid>
<description><![CDATA[Even if you’ve never watched an episode of The Joy of Painting, there’s a good chance you’re familiar with artist Bob Ross, with his trademark afro and “happy little trees”. But if you’ve seen his … <a href="https://thomaspark.co/2015/11/bob-ross-color-palette-in-css/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/bobross.jpg" alt="Bob Ross" width="1600" height="870" class="aligncenter size-full wp-image-11053" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/bobross.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2015/11/bobross-500x272.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2015/11/bobross-1024x557.jpg 1024w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></p>
<p>Even if you’ve never watched an episode of <a href="https://www.youtube.com/user/BobRossInc/videos">The Joy of Painting</a>, there’s a good chance you’re familiar with artist Bob Ross, with his trademark afro and “happy little trees”.</p>
<p>But if you’ve seen his show, then you’ll know that another trademark was his choice of paints. Bob Ross always used the same 13 paints, with decidedly un-Crayolan names like Alizarin Crimson and Pthalo Blue, loading his palette <a href="http://grignonsart.com/art-supplies/bob-ross/ross-easels.html">in the same arrangement</a> each time, as you see in the photo above.</p>
<p>By <a href="http://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/">limiting his tools and simplifying his techniques</a>, Bob Ross introduced the joy of painting to countless non-artists, and for that he was beloved.</p>
<div class="swatch dark sap-green">
<p>Sap Green</p>
<p>#0a3410</p>
<p>rgb(10, 52, 16)</p>
<p>hsl(128.6, 67.7%, 12.2%)</p>
</div>
<div class="swatch dark alizarin-crimson">
<p>Alizarin Crimson</p>
<p>#4e1500</p>
<p>rgb(78, 21, 0)</p>
<p>hsl(16.2, 100%, 15.3%)</p>
</div>
<div class="swatch dark van-dyke-brown">
<p>Van Dyke Brown</p>
<p>#221b15</p>
<p>rgb(34, 27, 21)</p>
<p>hsl(27.7, 23.6%, 10.8%)</p>
</div>
<div class="swatch dark dark-sienna">
<p>Dark Sienna</p>
<p>#5f2e1f</p>
<p>rgb(95, 46, 31)</p>
<p>hsl(14.1, 50.8%, 24.7%)</p>
</div>
<div class="swatch dark midnight-black">
<p>Midnight Black</p>
<p>#000000</p>
<p>rgb(0, 0, 0)</p>
<p>hsl(0, 0%, 0%)</p>
</div>
<div class="swatch dark prussian-blue">
<p>Prussian Blue</p>
<p>#021e44</p>
<p>rgb(2, 30, 68)</p>
<p>hsl(214.5, 94.3%, 13.7%)</p>
</div>
<div class="swatch dark phthalo-blue">
<p>Phthalo Blue</p>
<p>#0c0040</p>
<p>rgb(12, 0, 64)</p>
<p>hsl(251.3, 100%, 12.5%)</p>
</div>
<div class="swatch dark phthalo-green">
<p>Phthalo Green</p>
<p>#102e3c</p>
<p>rgb(16, 46, 60)</p>
<p>hsl(199.1, 57.9%, 14.9%)</p>
</div>
<div class="swatch light cadmium-yellow">
<p>Cadmium Yellow</p>
<p>#ffec00</p>
<p>rgb(255, 236, 0)</p>
<p>hsl(55.5, 100%, 50%)</p>
</div>
<div class="swatch light yellow-ochre">
<p>Yellow Ochre</p>
<p>#c79b00</p>
<p>rgb(199, 155, 0)</p>
<p>hsl(46.7, 100%, 39%)</p>
</div>
<div class="swatch light indian-yellow">
<p>Indian Yellow</p>
<p>#ffb800</p>
<p>rgb(255, 184, 0)</p>
<p>hsl(43.3, 100%, 50%)</p>
</div>
<div class="swatch dark bright-red">
<p>Bright Red</p>
<p>#db0000</p>
<p>rgb(219, 0, 0)</p>
<p>hsl(0, 100%, 42.9%)</p>
</div>
<div class="swatch light titanium-white">
<p>Titanium White</p>
<p>#ffffff</p>
<p>rgb(255, 255, 255)</p>
<p>hsl(0, 0%, 100%)</p>
</div>
<p>As a fan of Bob Ross, I wanted the colors he popularized to live on through the web. I’ve collected their hex values above and created a stylesheet so you can use class names like <code class="lang-css">.phthalo-blue</code>, <code class="lang-css">.phthalo-blue-text</code>, and <code class="lang-css">.phthalo-blue-border</code> to get a Phthalo Blue background, text, and border color respectively. You can grab the CSS, and the SASS used to generate it, below.</p>
<div class="center">
<a class="standard-btn xlarge-btn phthalo-blue dark" href="https://gist.github.com/thomaspark/41f381048adcceb6d261#file-bobross-css">CSS</a> <a class="standard-btn xlarge-btn phthalo-blue dark" href="https://gist.github.com/thomaspark/41f381048adcceb6d261#file-bobross-scss">SASS</a>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/11/bob-ross-color-palette-in-css/feed/</wfw:commentRss>
<slash:comments>33</slash:comments>
</item>
<item>
<title>Survey of CMS Usage on Newspaper Websites</title>
<link>https://thomaspark.co/2015/11/survey-of-cms-usage-on-newspaper-websites/</link>
<comments>https://thomaspark.co/2015/11/survey-of-cms-usage-on-newspaper-websites/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 16 Nov 2015 13:07:22 +0000</pubDate>
<category><![CDATA[Data]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=10956</guid>
<description><![CDATA[As of this month, 25 percent of all websites are using WordPress, according to W3Techs survey. This ubiquity was one of the leading factors in choosing WordPress as the platform for Snowball. Of course Snowball’s … <a href="https://thomaspark.co/2015/11/survey-of-cms-usage-on-newspaper-websites/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>As of this month, 25 percent of all websites are using WordPress, <a href="http://ma.tt/2015/11/seventy-five-to-go/">according to W3Techs survey</a>. This ubiquity was one of the leading factors in <a href="http://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/">choosing WordPress as the platform for Snowball</a>. Of course Snowball’s main target are news organizations and journalism students, which raises the question of how closely this general 25 percent figure tracks with newspaper websites.</p>
<p>It turns out, not much at all.</p>
<h2>Collecting the Data</h2>
<p>To survey CMS usage among newspaper websites, I analyzed the websites of the top 100 newspapers in North America <a href="http://www.4imn.com/topNorth-America/">according to 4IMN</a>, which ranges from the New York Times to the Knoxville News-Sentinel. I also took a look at websites for 100 exemplary college newspapers, based on a list from <a href="http://journalismdegree.org/exemplary-college-newspapers/">the Journalism Degrees blog</a> with the substitution of Drexel University’s The Triangle (gotta represent!). The analysis was done in November 2015.</p>
<p>To determine the CMS run by each website, I used several online tools including <a href="http://builtwith.com/">BuiltWith</a>, <a href="http://whatcms.org/">WhatCMS</a>, and <a href="http://guess.scritch.org/">CMS Detector</a>.</p>
<p>When these tools didn’t suffice, I fell back to manual inspection and online research. In a number of cases, this was still not enough.</p>
<h2>The Results</h2>
<p>Among the top newspaper websites, WordPress is the most identified CMS, though at 11% it’s less than half the general rate. The rest of the numbers reveal a balkanized landscape. Drupal is the next most common, followed by 20 other different CMSes. For the remaining 62 websites, the CMS could not be identified. These “others” might be using yet another CMS platform or a custom solution, but we can be reasonably confident that they’re not using WordPress.</p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" width="770" height="371" 0="seamless" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1bVYBrdbDb8OR1ju3MiL74oM5jWwv5Rj3Hbs0pbnP00s/pubchart?oid=38969996&format=interactive" class="iframe-class"></iframe>
<p>I’m somewhat surprised at the low figure for WordPress. Perhaps this is due to news orgs being entrenched with legacy systems, having very particular business needs, or fear of open source. WordPress is best known for its ease of use, but it has also proven its mettle with a number of world-class news websites.</p>
<p>The numbers for college newspapers show a very different picture. WordPress makes up a full 68%! This is followed by Blox, Gryphon, Drupal, etc. WordPress dominates a much more homogeneous scene.</p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" width="770" height="371" 0="seamless" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1bVYBrdbDb8OR1ju3MiL74oM5jWwv5Rj3Hbs0pbnP00s/pubchart?oid=1589217120&format=interactive" class="iframe-class"></iframe>
<p>This supports our argument that building <a href="http://snowball.openhtml.org/">Snowball</a> as a WordPress plugin is the most effective way to reach a large audience of active journalism students.</p>
<p>As a next step, it would be interesting compare small newspapers to these two groups, but I haven’t found a good way of identifying these yet.</p>
<h2>Appendix</h2>
<p>Here’s the raw data used to calculate these numbers. If you can provide any information on the missing data points, please reach out.</p>
<h3>Top Newspapers</h3>
<table style="max-width: 500px;">
<tr>
<th>Newspaper</th>
<th>CMS</th>
</tr>
<tr>
<td>The New York Times</td>
<td>Other</td>
</tr>
<tr>
<td>The Washington Post </td>
<td>WordPress</td>
</tr>
<tr>
<td>USA Today </td>
<td>Gannett CMS</td>
</tr>
<tr>
<td>The Wall Street Journal </td>
<td>Other</td>
</tr>
<tr>
<td>Los Angeles Times </td>
<td>Other</td>
</tr>
<tr>
<td>The Examiner</td>
<td>Drupal</td>
</tr>
<tr>
<td>Daily News</td>
<td>Atex PoloPoly</td>
</tr>
<tr>
<td>Chicago Tribune </td>
<td>Other</td>
</tr>
<tr>
<td>The Globe and Mail</td>
<td>WordPress</td>
</tr>
<tr>
<td>New York Post</td>
<td>WordPress</td>
</tr>
<tr>
<td>Houston Chronicle</td>
<td>Other</td>
</tr>
<tr>
<td>The Hollywood Reporter </td>
<td>Drupal</td>
</tr>
<tr>
<td>The Christian Science Monitor</td>
<td>eZ Systems</td>
</tr>
<tr>
<td>The Toronto Star </td>
<td>Adobe CQ</td>
</tr>
<tr>
<td>The Boston Globe </td>
<td>Other</td>
</tr>
<tr>
<td>The Chicago Sun-Times</td>
<td>Other</td>
</tr>
<tr>
<td>The Washington Times </td>
<td>Other</td>
</tr>
<tr>
<td>The Philadelphia Inquirer</td>
<td>Other</td>
</tr>
<tr>
<td>The Onion</td>
<td>Other</td>
</tr>
<tr>
<td>San Jose Mercury News</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Denver Post</td>
<td>Other</td>
</tr>
<tr>
<td>Star Tribune </td>
<td>Other</td>
</tr>
<tr>
<td>The Dallas Morning News</td>
<td>Other</td>
</tr>
<tr>
<td>The Seattle Times</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Oregonian</td>
<td>Other</td>
</tr>
<tr>
<td>National Post</td>
<td>WordPress</td>
</tr>
<tr>
<td>Newsday</td>
<td>Atex PoloPoly</td>
</tr>
<tr>
<td>The Miami Herald </td>
<td>Other</td>
</tr>
<tr>
<td>The Baltimore Sun</td>
<td>Other</td>
</tr>
<tr>
<td>The Plain Dealer </td>
<td>Other</td>
</tr>
<tr>
<td>The Sacramento Bee </td>
<td>Other</td>
</tr>
<tr>
<td>Pittsburgh Post-Gazette</td>
<td>Other</td>
</tr>
<tr>
<td>The Hill </td>
<td>Drupal</td>
</tr>
<tr>
<td>The Atlanta Journal-Constitution </td>
<td>Other</td>
</tr>
<tr>
<td>Detroit Free Press </td>
<td>Other</td>
</tr>
<tr>
<td>Orlando Sentinel </td>
<td>Covide</td>
</tr>
<tr>
<td>Boston Herald</td>
<td>Drupal</td>
</tr>
<tr>
<td>Milwaukee Journal Sentinel </td>
<td>Other</td>
</tr>
<tr>
<td>The New York Observer</td>
<td>WordPress</td>
</tr>
<tr>
<td>South Florida Sun-Sentinel </td>
<td>Other</td>
</tr>
<tr>
<td>The Kansas City Star </td>
<td>Drupal</td>
</tr>
<tr>
<td>Seattle Post-Intelligencer </td>
<td>Other</td>
</tr>
<tr>
<td>The Vancouver Sun</td>
<td>Other</td>
</tr>
<tr>
<td>St. Louis Post-Dispatch</td>
<td>Other</td>
</tr>
<tr>
<td>The Orange County Register </td>
<td>OpenCMS</td>
</tr>
<tr>
<td>Deseret News </td>
<td>Other</td>
</tr>
<tr>
<td>The News & Observer</td>
<td>Other</td>
</tr>
<tr>
<td>Salt Lake Tribune</td>
<td>Other</td>
</tr>
<tr>
<td>Hartford Courant </td>
<td>Mezzanine</td>
</tr>
<tr>
<td>Express-News </td>
<td>PencilBlue</td>
</tr>
<tr>
<td>Toronto Sun</td>
<td>Angel LMS</td>
</tr>
<tr>
<td>The Montréal Gazette </td>
<td>WordPress</td>
</tr>
<tr>
<td>The Buffalo News </td>
<td>Eduwave</td>
</tr>
<tr>
<td>The San Diego Union-Tribune</td>
<td>Other</td>
</tr>
<tr>
<td>Times Union</td>
<td>Other</td>
</tr>
<tr>
<td>The Indianapolis Star</td>
<td>Other</td>
</tr>
<tr>
<td>Investor’s Business Daily</td>
<td>Other</td>
</tr>
<tr>
<td>The Tennessean </td>
<td>Other</td>
</tr>
<tr>
<td>Ottawa Citizen </td>
<td>WordPress</td>
</tr>
<tr>
<td>The Charlotte Observer </td>
<td>Other</td>
</tr>
<tr>
<td>The Record </td>
<td>Other</td>
</tr>
<tr>
<td>Las Vegas Sun</td>
<td>Other</td>
</tr>
<tr>
<td>The Tampa Tribune</td>
<td>Other</td>
</tr>
<tr>
<td>St. Paul Pioneer Press </td>
<td>Other</td>
</tr>
<tr>
<td>The Des Moines Register</td>
<td>Other</td>
</tr>
<tr>
<td>The Oklahoman</td>
<td>Other</td>
</tr>
<tr>
<td>Calgary Herald </td>
<td>WordPress</td>
</tr>
<tr>
<td>Contra Costa Times </td>
<td>Other</td>
</tr>
<tr>
<td>Austin American-Statesman</td>
<td>Other</td>
</tr>
<tr>
<td>Las Vegas Review-Journal </td>
<td>Other</td>
</tr>
<tr>
<td>The Daily Princetonian </td>
<td>WordPress</td>
</tr>
<tr>
<td>Fort Worth Star-Telegram </td>
<td>Other</td>
</tr>
<tr>
<td>The Morning Call </td>
<td>Other</td>
</tr>
<tr>
<td>The Patriot-News </td>
<td>Other</td>
</tr>
<tr>
<td>The Palm Beach Post</td>
<td>Other</td>
</tr>
<tr>
<td>Daily Herald </td>
<td>Other</td>
</tr>
<tr>
<td>The Republican </td>
<td>sNews</td>
</tr>
<tr>
<td>Anchorage Daily News </td>
<td>OneTool</td>
</tr>
<tr>
<td>The Province </td>
<td>Other</td>
</tr>
<tr>
<td>The Courier-Journal</td>
<td>Stiqr</td>
</tr>
<tr>
<td>Edmonton Journal </td>
<td>WordPress</td>
</tr>
<tr>
<td>The Spokesman-Review </td>
<td>Other</td>
</tr>
<tr>
<td>The Detroit News </td>
<td>Other</td>
</tr>
<tr>
<td>The Florida Times-Union</td>
<td>Other</td>
</tr>
<tr>
<td>Los Angeles Daily News </td>
<td>Other</td>
</tr>
<tr>
<td>Winnipeg Free Press</td>
<td>SchoolWires Centricity</td>
</tr>
<tr>
<td>Metro</td>
<td>IronPoint</td>
</tr>
<tr>
<td>Star Advertiser</td>
<td>Other</td>
</tr>
<tr>
<td>The Press-Enterprise </td>
<td>Drupal</td>
</tr>
<tr>
<td>Daily Press</td>
<td>JoomD</td>
</tr>
<tr>
<td>The State</td>
<td>Other</td>
</tr>
<tr>
<td>Omaha World-Herald </td>
<td>Other</td>
</tr>
<tr>
<td>The News Tribune </td>
<td>Other</td>
</tr>
<tr>
<td>Democrat and Chronicle </td>
<td>Other</td>
</tr>
<tr>
<td>Chicago Reader </td>
<td>CiviCRM</td>
</tr>
<tr>
<td>Miami New Times</td>
<td>Other</td>
</tr>
<tr>
<td>The Blade</td>
<td>Other</td>
</tr>
<tr>
<td>Sarasota Herald-Tribune</td>
<td>Other</td>
</tr>
<tr>
<td>The Wichita Eagle</td>
<td>Other</td>
</tr>
<tr>
<td>News-Sentinel </td>
<td>Liferay</td>
</tr>
</table>
<h3>College Newspapers</h3>
<table>
<tr>
<th>Newspaper</th>
<th>School</th>
<th>CMS</th>
</tr>
<tr>
<td>The Lantern</td>
<td>The Ohio State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Aztec</td>
<td>San Diego State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Gamecock</td>
<td>University of South Carolina</td>
<td>Gryphon</td>
</tr>
<tr>
<td>The Anchor</td>
<td>Rhode Island College</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Oxford Student Online</td>
<td>University of Oxford</td>
<td>WordPress</td>
</tr>
<tr>
<td>Cardinal Points</td>
<td>Plattsburgh State University College</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Guardian</td>
<td>University of California, San Diego</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Titan</td>
<td>California State University, Fullerton</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Heights</td>
<td>Boston College</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Post</td>
<td>Ohio University</td>
<td>Blox</td>
</tr>
<tr>
<td>The Vermilion</td>
<td>University of Louisiana at Lafayette</td>
<td>WordPress</td>
</tr>
<tr>
<td>NYULocal</td>
<td>New York University</td>
<td>WordPress</td>
</tr>
<tr>
<td>Clarion</td>
<td>University of Denver</td>
<td>WordPress</td>
</tr>
<tr>
<td>The State Press</td>
<td>Arizona State University</td>
<td>Gryphon</td>
</tr>
<tr>
<td>The Houstonian</td>
<td>Sam Houston State University </td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Iowan</td>
<td>University of Iowa</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Minaret</td>
<td>University of Tampa</td>
<td>WordPress</td>
</tr>
<tr>
<td>CU Independent</td>
<td>University of Colorado</td>
<td>WordPress</td>
</tr>
<tr>
<td>Minnesota Daily</td>
<td>University of Minnesota</td>
<td>Drupal</td>
</tr>
<tr>
<td>The Hawks’ Herald</td>
<td>Roger Williams University</td>
<td>WordPress</td>
</tr>
<tr>
<td>Old Gold & Black</td>
<td>Wake Forest University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Johns Hopkins News-Letter</td>
<td>John Hopkins University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Famuan</td>
<td>Florida A&M University </td>
<td>Other</td>
</tr>
<tr>
<td>The Campbell Times</td>
<td>Campbell University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Vermont Cynic</td>
<td>The University of Vermont</td>
<td>College Publisher</td>
</tr>
<tr>
<td>Student Life</td>
<td>Washington University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Spectrum</td>
<td>North Dakota State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Sentinel</td>
<td>Kennesaw State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>Daily 49er</td>
<td>California State University, Long Beach</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Telescope</td>
<td>Palomar College</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Herald</td>
<td>Arkansas State University</td>
<td>Blox</td>
</tr>
<tr>
<td>University of Wisconsin-La Crosse Racquet</td>
<td>University of Wisconsin-La Crosse</td>
<td>WordPress</td>
</tr>
<tr>
<td>The State Press</td>
<td>Arizona State University </td>
<td>Gryphon</td>
</tr>
<tr>
<td>The Kenyon Collegian</td>
<td>Kenyon College</td>
<td>WordPress</td>
</tr>
<tr>
<td>Central Florida Future</td>
<td>University of Central Florida</td>
<td>Gannett CMS</td>
</tr>
<tr>
<td>The Daily Reveille</td>
<td>Louisiana State University</td>
<td>Blox</td>
</tr>
<tr>
<td>The GW Hatchet</td>
<td>George Washington University</td>
<td>WordPress</td>
</tr>
<tr>
<td>Los Angeles Loyolan</td>
<td>Loyola Marymount University</td>
<td>Blox</td>
</tr>
<tr>
<td>The Advance-Titan </td>
<td>UW-Oshkosh</td>
<td>Blox</td>
</tr>
<tr>
<td>The Berkeley Beacon</td>
<td>Emerson College</td>
<td>Other</td>
</tr>
<tr>
<td>Flyer News</td>
<td>University of Dayton</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Triangle</td>
<td>Drexel University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Chronicle </td>
<td>Duke University</td>
<td>Gryphon</td>
</tr>
<tr>
<td>The Georgetown Voice</td>
<td>Georgetown University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Emory Wheel </td>
<td>Emory University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Ball State Daily News</td>
<td>Ball State University</td>
<td>Gryphon</td>
</tr>
<tr>
<td>Iowa State Daily</td>
<td>Iowa State</td>
<td>Blox</td>
</tr>
<tr>
<td>Royal Purple News</td>
<td>University of Wisconsin-Whitewater</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Bona Venture</td>
<td>St. Bonaventure</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Chaparral</td>
<td>College of the Desert</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Shorthorn</td>
<td>UT-Arlington</td>
<td>Blox</td>
</tr>
<tr>
<td>The Chicago Maroon</td>
<td>University of Chicago</td>
<td>WordPress</td>
</tr>
<tr>
<td>Central Michigan Life</td>
<td>Central Michigan University</td>
<td>Gryphon</td>
</tr>
<tr>
<td>The Commonwealth Times</td>
<td>Virginia Commonwealth University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Barometer</td>
<td>Oregon State University</td>
<td>Blox</td>
</tr>
<tr>
<td>The Daily Californian</td>
<td>UC Berkeley</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Orange</td>
<td>Syracuse University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Tarheel</td>
<td>University of North Carolina</td>
<td>Gryphon</td>
</tr>
<tr>
<td>The Daily Texan</td>
<td>University of Texas at Austin</td>
<td>Drupal</td>
</tr>
<tr>
<td>Daily Trojan </td>
<td>University of Southern California</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily</td>
<td>University of Washington</td>
<td>Blox</td>
</tr>
<tr>
<td>The Daily Eastern News</td>
<td>Eastern Illinois UniversitySchool:</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Mississippian</td>
<td>University of Mississippi</td>
<td>WordPress</td>
</tr>
<tr>
<td>Campus Times</td>
<td>University of Rochester</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Battalion</td>
<td>Texas A&M </td>
<td>Blox</td>
</tr>
<tr>
<td>The Daily Cougar</td>
<td> University of Houston</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Stanford Daily</td>
<td>Stanford University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Cornellian</td>
<td>Cornell College</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Tech Online Edition</td>
<td>Massachusetts Institute of Technology</td>
<td>Other</td>
</tr>
<tr>
<td>The Pendulum</td>
<td>Elon University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The New Perspective</td>
<td>Carroll University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Rensselaer Polytechnic</td>
<td>Rensselaer Polytechnic Institute </td>
<td>WordPress</td>
</tr>
<tr>
<td>The Louisville Cardinal</td>
<td>University of Louisville</td>
<td>WordPress</td>
</tr>
<tr>
<td>Spartan Daily</td>
<td>San Jose State</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Fine Print</td>
<td>Gainesville Florida</td>
<td>Blox</td>
</tr>
<tr>
<td>The Pitt News</td>
<td>University of Pittsburgh </td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Cardinal</td>
<td>University of Wisconsin-Madison</td>
<td>Blox</td>
</tr>
<tr>
<td>The DePaulia</td>
<td>DePaul University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Exponent </td>
<td>Purdue University</td>
<td>Blox</td>
</tr>
<tr>
<td>The Dartmouth</td>
<td>Dartmouth College</td>
<td>WordPress</td>
</tr>
<tr>
<td>Yale Daily News</td>
<td>Yale University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Brown Daily Herald</td>
<td>Brown University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Pennsylvanian</td>
<td>University of Pennsylvania</td>
<td>Gryphon</td>
</tr>
<tr>
<td>Columbia Spectator</td>
<td>Columbia University</td>
<td>Drupal</td>
</tr>
<tr>
<td>The Harvard Crimson</td>
<td>Harvard University</td>
<td>Other</td>
</tr>
<tr>
<td>The Cornell Daily Sun</td>
<td>Cornell University</td>
<td>WordPress</td>
</tr>
<tr>
<td>Fourth Estate</td>
<td>University of Wisconsin – Green Bay</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Diamondback</td>
<td>University of Maryland</td>
<td>Blox</td>
</tr>
<tr>
<td>The Tech Talk</td>
<td>Louisiana Tech University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Temple News</td>
<td>Temple University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Sentry</td>
<td>Robert Morris University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Michigan Daily</td>
<td>University of Michigan</td>
<td>Drupal</td>
</tr>
<tr>
<td>The News</td>
<td>Murray State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Argonaut</td>
<td>University of Idaho</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Arka Tech</td>
<td>Arkansas State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Bucknellian</td>
<td>Bucknell University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Rebel Yell</td>
<td>University of Nevada Las Vegas</td>
<td>WordPress</td>
</tr>
<tr>
<td>Luther College Chips</td>
<td>Luther College</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Colonnade</td>
<td>Georgia College & State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Concordian</td>
<td>Concordia College</td>
<td>WordPress</td>
</tr>
</table>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/11/survey-of-cms-usage-on-newspaper-websites/feed/</wfw:commentRss>
<slash:comments>3</slash:comments>
</item>
<item>
<title>Repositioning Tutorials in Mozilla Thimble</title>
<link>https://thomaspark.co/2015/11/repositioning-tutorials-in-mozilla-thimble/</link>
<comments>https://thomaspark.co/2015/11/repositioning-tutorials-in-mozilla-thimble/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 13 Nov 2015 00:59:04 +0000</pubDate>
<category><![CDATA[Learning]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=10856</guid>
<description><![CDATA[I just returned from another great Mozilla Festival. For most of the attendees, Mozfest seems to be a chance to kick back and celebrate the daily work they do with their teams. For me, it … <a href="https://thomaspark.co/2015/11/repositioning-tutorials-in-mozilla-thimble/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I just returned from another great <a href="https://2015.mozillafestival.org/">Mozilla Festival</a>. For most of the attendees, Mozfest seems to be a chance to kick back and celebrate the daily work they do with their teams. For me, it was a rare opportunity to get face-time with some really talented people working on the same kind of problems I do. Trying to make the most of that, I felt a bit intense.</p>
<p>One of the sessions I attended was on the new version of the web editor <a href="https://thimble.mozilla.org/">Thimble</a>, with overhauled architecture and new look. I was heartened to find that embedded tutorials had made the cut. Not only because this was a feature I had worked on (although admittedly there’s some of that), but because I believe Thimble’s greatest potential is in supporting learning both formal and informal.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/newthimble-tutorials-1024x525.png" alt="New Thimble Tutorials" width="780" height="400" class="alignnone size-large wp-image-10877" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/newthimble-tutorials-1024x525.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/newthimble-tutorials-500x256.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<p>The tutorial feature was not entirely unchanged however. Before, tutorials were presented in a third column. Now, due to the new filesystem panel, there is less space available and so tutorials are relegated to a toggle in the preview panel. While adding new tutorials is easier than ever (just add a <code>tutorial.html</code> to your project), they can no longer be viewed simultaneously with the output. Several of the session attendees raised concerns about how much switching back and forth this can cause, sparking discussion about the placement of tutorials. Ideas were tossed around, including a bottom panel and inline comments inspired by <a href="http://flukeout.github.io/fancy-comments/">Fancy Comments</a>.</p>
<p>When we originally implemented tutorials, <a href="http://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/">we experimented with 6 variations</a>, including the side panel (dubbed Sidebar at the time), bottom panel (Drawer), and inline (Expander) versions. Unfortunately, a toggled view was not one of the designs tested in this study. Based on user ratings, Sidebar, Drawer, and Expander ranked as first, second, and third most popular respectively, matching our own intuitions.</p>
<p>But beyond the question of “which?”, there is the “why?”. To answer this, I decided to revisit the old data, doing a quick qualitative analysis of what the participants found positive and negative about each design. For the frontrunner designs, I’ll briefly summarize these point below, and then propose a couple of alternatives.</p>
<h2>Sidebar</h2>
<p><a href="http://polar-tor-6216.herokuapp.com/examples/sidebar.html"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/sidebar-1024x525.png" alt="Sidebar" width="780" height="400" class="alignnone size-large wp-image-10921" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/sidebar-1024x525.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/sidebar-500x256.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a></p>
<p>For the sidebar design, most of the complaints related to the cramped view. Using up some space is unavoidable, but the sidebar can be especially problematic since it spans the whole window vertically. Significant space could be wasted on larger displays, but the lack of space was particularly a problem for smaller windows.</p>
<blockquote><p>This one works best when I use it on a large-screen monitor. When I adjust my browser to a smaller size, some corresponding code parts are not automatically visible.</p></blockquote>
<p>A few commented that they found it uncomfortable to scan their eyes from the sidebar to the code to the preview and back again. The ideal order of panes is an interesting open question.</p>
<blockquote><p>Don’t care for this design. Harder for me to read far left block of directions, switch quickly to code, and follow what i’m doing to the right. Feels more difficult to concentrate.</p></blockquote>
<p>As far as positives go, most boiled down to a clean and simple design that was consistent with the rest of the interface.</p>
<blockquote><p>Fit in well visually with the columns interface of the thimble. Obviously the tutorial “section” of the page. Very distinct.</p></blockquote>
<p>Respondents noted that the sidebar was good at getting out of the way, which was a theme that came up frequently when discussing the other designs as well.</p>
<blockquote><p>Very similar to Drawer, but better, as it doesn’t pop over the code nor does it effect the editor space nearly as much (losing vertical space from the sides less frustrating then losing horizontal space from the bottom). Also how it takes space from both the input and output sides equally, rather then just squeeze the input.</p></blockquote>
<p>A couple of the respondents commented that when it came to longer tutorials, sidebar was best-suited design.</p>
<blockquote><p>This looks like a better interface. It is easier to read long instructions.</p></blockquote>
<h2>Drawer</h2>
<p><a href="http://polar-tor-6216.herokuapp.com/examples/drawer.html"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/drawer-1024x525.png" alt="Drawer" width="780" height="400" class="alignnone size-large wp-image-10920" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/drawer-1024x525.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/drawer-500x256.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a></p>
<p>For the drawer design, most of the complaints related to reduced space for the code editor. Some respondents felt that it was annoying and got in the way.</p>
<blockquote><p>From the start it feels like it’s blocking your access to the code (which it is, of course, but I’m talking about the sensation you get).</p></blockquote>
<p>Like the sidebar, there were several comments that it felt unnatural to scan your eyes from the code editor down to the tutorial. Again, this is an interesting question with no obvious answer.</p>
<blockquote><p>it was hard for my eyes to look at the bottom of the screen for instructions and then go edit the code. It was even harder when I had to scroll the code to see where I am.</p></blockquote>
<p>Respondents liked that the horizontal space of the existing panels was not compromised.</p>
<blockquote><p>Makes the most of use of the space available therefore there is no need to scroll from left to right as much on the preview screen.</p></blockquote>
<p>But perhaps the biggest win was that it was really easy and obvious to toggle into and out of view.</p>
<blockquote><p>Can easily move the tutorial out of the way. Tab is within coding area as well so I didn’t have to move the mouse as far.</p></blockquote>
<h2>Expander</h2>
<p><a href="http://polar-tor-6216.herokuapp.com/examples/expander.html"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/expander-1024x525.png" alt="Expander" width="780" height="400" class="alignnone size-large wp-image-10919" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/expander-1024x525.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/expander-500x256.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a></p>
<p>For the expander design, several respondents found it unintuitive. In particular, they reported trouble accessing the tutorial again after they had closed it, feeling that it was “gone forever”.</p>
<blockquote><p>Visually I found it hard to find the tutorial again after I “close”d it. Also, the animations right on top of hte code I was editing was distracting and felt like it was slowing me down considerably. Though it pointed me to the right part of the code it wasn’t obvious in the beginning.</p></blockquote>
<p>The majority of negative comments related to breaking the flow while coding and obscuring the overall picture of the code. They complained that the tutorial was constantly jumping and shifting the code around.</p>
<blockquote><p>Felt it cluttered and interfered with the code. felt annoyed each time I need to click the button to hide it. Dont mix it up with the code.</p></blockquote>
<p>Some of the respondents appreciated the tighter integration between instruction and code. </p>
<blockquote><p>I like this design the best so far. Tutorial is directly next to the code that is meant to be changed so you know exactly where you are in the code.</p></blockquote>
<p>A few comments noted that the design was fun!</p>
<blockquote><p>It was fun, funny, and interactive. It gave me tasks to do and while I did them, I learned different ways to do the same kind of task. It made it more memorable than looking up the method in a book.</p></blockquote>
<p>Looking back at the user ratings, expander was the only design novices preferred more than experienced coders. For experienced coders, it’s likely the novelty would wear off very quickly.</p>
<h2>Proposed Designs</h2>
<p>Based on the feedback, it’s clear that sidebar is the preferred position, with drawer a solid alternative when horizontal space is at a premium (as is the case with the new Thimble). Keeping these comments in mind, I wanted to put a couple more possibilities out there.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-1-1024x546.png" alt="Proposal 1" width="780" height="416" class="alignnone size-large wp-image-10942" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-1-1024x546.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-1-500x267.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<p>The first is to keep the sidebar layout, but toggle it through the file panel instead of the preview. For beginner coders, it’s critical to have a tight feedback loop between editing code and seeing the results, cause and effect. At the same time, having a tutorial suggests that it contains instruction that’s needed to guide their activity. In contrast, many beginner projects involve only one or two files at once, and switching between files is a relatively infrequent task. The ideal setup, then, it to have the editor, preview, and tutorial on screen at once.</p>
<p>One of the main drawbacks of this occurs when beginners are first learning to relate markup in an HTML document with stylesheet rules in a CSS file. In this case, the proposed design would actually cause more friction. To mitigate this, file references could be supported within the tutorial. Like the smartline feature in the original tutorials, which allowed a tutorial author to create interactive links to specific lines of code, these references could allow the user to jump to the most relevant files from within the tutorial. Yet another drawback is that users could lose awareness of the file panel entirely, especially if they grow accustomed to the file references within tutorials.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2-1024x415.png" alt="Proposal 2 Wide" width="780" height="316" class="alignnone size-large wp-image-10946" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2-1024x415.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2-500x203.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<p>The second is to offer a responsive layout. For larger screens that can afford it, the tutorial can be displayed as its own panel, giving Thimble a 4-column layout. For smaller screens, the tutorial could adapt to a drawer position at the bottom of the editor panel. The drawback of this is that most users might be working on smaller screens (there’s probably analytics to answer this), and that the transition between layouts is jarring.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2b-500x438.png" alt="Proposal 2 Narrow" width="500" height="438" class="aligncenter size-medium wp-image-10948" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2b-500x438.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2b-1024x897.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2b.png 1940w" sizes="auto, (max-width: 500px) 100vw, 500px" /></p>
<p>So that’s my two cents on positioning tutorials in a code editor. All in all, I’m excited by the evolution of Thimble and, along with the rest of <a href="http://openhtml.org">the openHTML group</a>, look forward to contributing to its progress.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/11/repositioning-tutorials-in-mozilla-thimble/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Developing for Web Developers</title>
<link>https://thomaspark.co/2015/08/developing-for-web-developers/</link>
<comments>https://thomaspark.co/2015/08/developing-for-web-developers/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 05 Aug 2015 14:31:55 +0000</pubDate>
<category><![CDATA[Data]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=10724</guid>
<description><![CDATA[As web developers, the deal is that we try to support our users on all the different platforms they might use to view our site. Generally speaking, that spans everything from the latest mobile devices … <a href="https://thomaspark.co/2015/08/developing-for-web-developers/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>As web developers, the deal is that we try to support our users on all the different platforms they might use to view our site. Generally speaking, that spans everything from the latest mobile devices to Internet Explorers that’ve long outstayed their welcome.</p>
<p>But what about when your site isn’t meant for the general public, but rather other web developers. How closely does that still hold? That’s the question I had when <a href="http://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/">building FontCDN</a>.</p>
<p>W3Schools provides <a href="httsp://www.w3schools.com/browsers/">stats on browser and OS share</a>, but given their focus is web tutorials, their audience skews toward the beginner. Fortunately, two of my previous projects, <a href="https://bootswatch.com">Bootswatch</a> and <a href="http://glyphsearch.com">GlyphSearch</a>, are closer to the crowd I was aiming for with <a href="https://thomaspark.co/projects/fontcdn/">FontCDN</a>.</p>
<h2>The Numbers</h2>
<p>Comparing logs, I found the breakdown surprisingly consistent between the two sites. In fact, they were within a few percentage points of each other across the board with one exception. So for this section, I’ll present data for Bootswatch since it’s been around longer.</p>
<p>As you can see below, when it comes to device share, desktop has consistently eclipsed mobile and tablets. You probably don’t want to neglect mobile visitors entirely, since they might be checking out your site before deciding to share it or come back to it on desktop, but gracefully degrading the experience may be enough.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/devices.png" alt="Device Share on Bootswatch" width="1800" height="1100" class="alignnone size-full wp-image-10747 size-xl" /></p>
<p>Here’s the breakdown by operating system. Maybe it’s because I’m in a bubble of universities and startups, but I was surprised by how low the Mac share was. Perhaps this is due to the more design-oriented Mac developers not needing designed Bootswatch themes (Mac share was 10% higher on GlyphSearch). On the flip side, Linux share was greater than I expected.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/os.png" alt="OS Share on Bootswatch" width="1800" height="1100" class="alignnone size-full wp-image-10749 size-xl" /></p>
<p>Chrome and Firefox are the most used browsers. Not a surprise given the quality of their dev tools.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/browsers.png" alt="Browser Share on Bootswatch" width="1800" height="1100" class="alignnone size-full wp-image-10742 size-xl" /></p>
<p>A pleasant surprise was that among IE users, two-thirds are on the latest version.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/ie.png" alt="Internet Explorer Versions on Bootswatch" width="1800" height="1100" class="alignnone size-full wp-image-10748 size-xl" /></p>
<p>Just for fun, here’s what the update cycle looks like for Chrome in that same time.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/chrome.png" alt="Chrome Versions on Bootswatch" width="1800" height="1100" class="alignnone size-full wp-image-10743 size-xl" /></p>
<p>So how do the Bootswatch and GlyphSeach numbers stack up to the general public? Here’s a comparison of device share based on data from <a href="http://www.w3counter.com/globalstats.php">W3Counter</a>. Think of green as global and blues as different subsets of web developers.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/compare-devices.png" alt="Device Share Comparison" width="1800" height="1100" class="alignnone size-full wp-image-10770 size-xl" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-devices.png 1800w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-devices-500x306.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-devices-1024x626.png 1024w" sizes="auto, (max-width: 1800px) 100vw, 1800px" /></p>
<p>Here’s OS share:</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/compare-os.png" alt="OS Share Comparison" width="1800" height="1100" class="alignnone size-full wp-image-10771 size-xl" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-os.png 1800w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-os-500x306.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-os-1024x626.png 1024w" sizes="auto, (max-width: 1800px) 100vw, 1800px" /></p>
<p>And browser share:</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/compare-browsers.png" alt="Browser Share Comparison" width="1800" height="1100" class="alignnone size-full wp-image-10769 size-xl" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-browsers.png 1800w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-browsers-500x306.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-browsers-1024x626.png 1024w" sizes="auto, (max-width: 1800px) 100vw, 1800px" /></p>
<p>Here’s the takeaway: If you’re developing web tools for web developers, you’ll do alright by targeting modern browsers on the desktop.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/08/developing-for-web-developers/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>A Better Way to Search Google Fonts</title>
<link>https://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/</link>
<comments>https://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 03 Aug 2015 14:09:37 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=10624</guid>
<description><![CDATA[Like most web developers, Google Fonts is an indispensable resource for me. What would otherwise be a choice between sticking to a small handful of web safe fonts or wrangling WOFFs, OTFs, and TTFs is … <a href="https://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Like most web developers, <a href="https://www.google.com/fonts">Google Fonts</a> is an indispensable resource for me. What would otherwise be a choice between sticking to a small handful of web safe fonts or wrangling WOFFs, OTFs, and TTFs is solved with just two lines of code.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-1024x746.png" alt="Google Fonts" width="780" height="568" class="alignnone size-large wp-image-10652" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-300x219.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<h2>Clicks and Conundrums</h2>
<p>While Google Fonts is a valuable tool, its interface leaves much to be desired, a fact that hasn’t escaped the attention of folks like <a href="http://www.smashingmagazine.com/2013/09/dear-web-font-providers/">Laura Franz</a> or <a href="http://sachagreif.com/more-google-webfonts-that-dont-suck/">Sascha Grief</a>. As a devoted user of Google Fonts, I’d like to add a few of my own pet peeves to the conversation.</p>
<p>First, one of the most common ways people arrive on Google Fonts is through a web search. <a href="https://www.google.com/fonts/specimen/Roboto">The page you’ll land on</a>, while admittedly chock full of interesting history and statistics, doesn’t include the information you’re there for.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-landing1-1024x746.png" alt="Google Fonts landing page" width="780" height="568" class="alignnone size-large wp-image-10664" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-landing1-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-landing1-500x364.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<p>For that, you’ll need to click the “Open in Google Fonts” link in the top right. “I thought I was already on Google Fonts,” you might wonder.</p>
<p>Second, the Google Fonts interface is peppered with buttons, many unlabelled, that always give me a half-second pause. “Which one do I click to start using the font?” Hint: it’s not the bright blue button that beckons.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-buttons.png" alt="Google Fonts Buttons" width="895" height="100" class="alignnone size-full wp-image-10673" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-buttons.png 895w, https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-buttons-500x56.png 500w" sizes="auto, (max-width: 895px) 100vw, 895px" /></p>
<p>Finally, Google Fonts includes a lot of directions and tips that are useful for the first-time user, but after the 100th visit, only serve to waste space. Add fixed bars at the top and bottom of the page and you end up with the most crucial bits below the fold, maybe even buried in a hidden tab.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-detail-1024x746.png" alt="Google Fonts detail view" width="780" height="568" class="alignnone size-large wp-image-10649" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-detail-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-detail-300x219.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<h2>Enter FontCDN</h2>
<p>Last week I tried my hand at building the Google Fonts interface that I wanted to use. The result is <a href="https://thomaspark.co/projects/fontcdn/">FontCDN</a>.</p>
<p><a href="https://thomaspark.co/projects/fontcdn/"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-1024x746.png" alt="FontCDN" width="780" height="568" class="alignnone size-large wp-image-10653" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-300x219.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a></p>
<p>FontCDN addresses a different use case than what Google Fonts seems to be designed for. Rather than deeply exploring and comparing different fonts within Google Fonts or within a prototyping tool like <a href="https://typecast.com/">Typecast</a>, the goal of FontCDN is to quickly grab the fonts you’re interested in and try them out within the context of your actual project.</p>
<p>You can sort and filter the 700+ fonts available on Google Fonts any which way. You can even browse fonts that have been recommended around <a href="http://sachagreif.com/google-webfonts-that-dont-suck/">the</a> <a href="http://www.smashingmagazine.com/2014/03/taking-a-second-look-at-free-fonts/">web</a>, a feature inspired by <a href="https://typekit.com/fonts">Typekit</a>.</p>
<p>Click a font to view the import and style code. Click a button to copy it to your clipboard. There’s no step three.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-modal-1024x746.png" alt="FontCDN modal" width="780" height="568" class="alignnone size-large wp-image-10651" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-modal-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-modal-300x219.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<p>Give <a href="https://thomaspark.co/projects/fontcdn/">FontCDN</a> a try and let me know what you think.</p>
<h2>Lessons</h2>
<p>Performance was a priority given how resource-intensive it is to browse hundreds of fonts, and using <a href="http://facebook.github.io/react/">React</a> was one of the keys. But there are surely many more optimizations to be made. If you want help out, the project is on <a href="https://github.com/thomaspark/fontcdn/">GitHub</a>.</p>
<p>While JSX resides in some kind of uncanny valley, the componentization and render methods made it worthwhile. So much so that when it comes time to revamp <a href="http://glyphsearch.com/">GlyphSearch</a>, I’ll probably give it the React treatment.</p>
<p>On a final note, hat tip to <a href="http://webpack.github.io/">WebPack</a>, <a href="https://github.com/seatgeek/react-infinite">React Infinite</a>, and <a href="https://github.com/typekit/webfontloader">Web Font Loader</a>, which saved me a boatload of effort on this project.</p>
<h2>Response</h2>
<p>My announcement of this project was <a href="https://twitter.com/thomashpark/status/628593168414572544/retweets" rel="noopener" target="_blank">retweeted</a> by the official Google Fonts account (@googlefonts). Not only did they seem to take the critiques in stride, but soon after they released a major overhaul of Google Fonts that was in the same direction as my approach — and about a mile further. Clearly it had been in the works!</p>
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">Blog post: A Better Way to Search Google Fonts. <a href="http://t.co/UlxHaQtyqP">http://t.co/UlxHaQtyqP</a></p>
<p>— Thomas H. Park (@thomashpark) <a href="https://twitter.com/thomashpark/status/628593168414572544?ref_src=twsrc%5Etfw">August 4, 2015</a></p></blockquote>
<p> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/feed/</wfw:commentRss>
<slash:comments>17</slash:comments>
</item>
<item>
<title>Polyfill for Scoped CSS</title>
<link>https://thomaspark.co/2015/07/polyfill-for-scoped-css/</link>
<comments>https://thomaspark.co/2015/07/polyfill-for-scoped-css/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 22 Jul 2015 13:53:45 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=10545</guid>
<description><![CDATA[Scoped CSS is a new feature that makes it possible to add <style> elements anywhere in your document, scoping the CSS rules it contains to its parent element. This was just what we needed while … <a href="https://thomaspark.co/2015/07/polyfill-for-scoped-css/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Scoped CSS is a new feature that makes it possible to add <code class="language-markup"><style></code> elements anywhere in your document, scoping the CSS rules it contains to its parent element. This was just what we needed while <a href="http://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/">developing Snowball</a>.</p>
<p>Unfortunately, support is <a href="http://caniuse.com/#feat=style-scoped">limited to Firefox</a>, and existing polyfills like <a href="https://github.com/PM5544/scoped-polyfill">scoped-polyfill</a> and <a href="https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin">jQuery-Scoped-CSS</a> weren’t working quite the way we needed. So I ended up creating a new polyfill for our project, which I’ve made available on GitHub.</p>
<div class="center">
<a class="standard-btn blue-btn xlarge-btn" href="https://github.com/thomaspark/scoper"><span>Scoper</span></a>
</div>
<p>To use Scoper, simply include scoper.js on your page.</p>
<p><script async src="//jsfiddle.net/thomaspark/rpe402LL/embed/result,html,css/"></script></p>
<p>How Scoper works is that for each <code class="language-markup"><style scoped></code> element, the parent (or scoping) element is wrapped with a new element that’s been assigned a unique ID. This ID is prepended to all of its selectors.</p>
<p>Scoper should work in Chrome, Safari, and IE9+, with tests built using <a href="http://mochajs.org/">Mocha</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/07/polyfill-for-scoped-css/feed/</wfw:commentRss>
<slash:comments>5</slash:comments>
</item>
<item>
<title>Snowball: A WordPress Plugin for Storytelling on the Web</title>
<link>https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/</link>
<comments>https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 20 Jul 2015 13:30:30 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Learning]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=10422</guid>
<description><![CDATA[Since May, our research group has been developing a new tool called Snowball. As with our other tools, the purpose of Snowball is to empower people from all sorts of backgrounds to express and create … <a href="https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball-1024x323.png" alt="Snowball" width="780" height="246" class="alignnone size-large wp-image-10497" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball-1024x323.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball-300x95.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<p>Since May, <a href="http://openhtml.org">our research group</a> has been developing a new tool called <a href="http://snowball.openhtml.org/">Snowball</a>. As with our other tools, the purpose of Snowball is to empower people from all sorts of backgrounds to express and create — tell their stories — on the web.</p>
<p>We chose to implement Snowball as a WordPress plugin because WordPress users represent our target audience, and WordPress powers over 20% of the <em>entire web</em>, used everywhere from CNN and TechCrunch to the classroom.</p>
<h1>Storytelling in the Digital Age</h1>
<p>Stories take many forms, but we drew inspiration from articles like <a href="http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek">Snow Fall</a> (if you couldn’t guess by the name). The work of the New York Times and a handful of other visionary organizations are exemplars of effective storytelling on the web. Three qualities set their work apart.</p>
<div id="attachment_10487" style="width: 790px" class="wp-caption alignnone"><a href="http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-10487" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowfall-1024x668.png" alt="Snow Fall by John Branch — New York Times" width="780" height="509" class="size-large wp-image-10487" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowfall-1024x668.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/snowfall-300x196.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a><p id="caption-attachment-10487" class="wp-caption-text">Snow Fall by John Branch — New York Times</p></div>
<h3>Minimalist</h3>
<p>Articles tend to be minimalist. This reflects a respect for both the audience and the content, and makes for a more immersive experience.</p>
<div id="attachment_10480" style="width: 790px" class="wp-caption alignnone"><a href="https://medium.com/matter/the-web-we-have-to-save-2eb1fe15a426"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-10480" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/thewebwehavetosave-1024x668.png" alt="The Web We Have to Save by Hossein Derakhshan — Medium" width="780" height="509" class="size-large wp-image-10480" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/thewebwehavetosave-1024x668.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/thewebwehavetosave-300x196.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a><p id="caption-attachment-10480" class="wp-caption-text">The Web We Have to Save by Hossein Derakhshan — Medium</p></div>
<h3>Bespoke</h3>
<p>Not only are distractions removed, but what remains purposefully enhances the content. The design is tailored to the content, advancing from the realm of grayscale newsprint to <a href="http://www.smashingmagazine.com/the-death-of-the-blog-post/">vivid magazine spreads</a>.</p>
<div id="attachment_10478" style="width: 790px" class="wp-caption alignnone"><a href="http://jasonsantamaria.com/articles/chunky-in-fury"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-10478" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/chunkyinfury-1024x668.png" alt="Chunky in Fury by Mike Monteiro — Jason Santa Maria" width="780" height="509" class="size-large wp-image-10478" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/chunkyinfury-1024x668.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/chunkyinfury-300x196.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a><p id="caption-attachment-10478" class="wp-caption-text">Chunky in Fury by Mike Monteiro — Jason Santa Maria</p></div>
<h3>Interactive</h3>
<p>Perhaps most importantly, the content is interactive. One of the things that sets the web apart from mass media like newspapers and television is the interplay between creator and consumer. Online journalism is only now starting to tap into this potential by making articles <a href="http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/">interactive</a> and <a href="http://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html?_r=0">social</a>.</p>
<div id="attachment_10479" style="width: 790px" class="wp-caption alignnone"><a href="http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-10479" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/whatiscode-1024x668.png" alt="What is Code? by Paul Ford — Bloomberg" width="780" height="509" class="size-large wp-image-10479" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/whatiscode-1024x668.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/whatiscode-300x196.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a><p id="caption-attachment-10479" class="wp-caption-text">What is Code? by Paul Ford — Bloomberg</p></div>
<h1>Snowball Effect</h1>
<p>Unfortunately, most organizations don’t have the luxury of keeping world-class art departments and software development teams on staff. And most individuals, though they may have a story to tell, lack the technical skills required to craft these types of articles.</p>
<p>This is where Snowball comes in.</p>
<p>Although we’ve left plenty of headroom for people who know how to code or want to learn along the way, we’ve designed Snowball so that technical skills or a technical staff are not requirements. To make Snowball accessible to the beginner, we’ve adopted the following principles.</p>
<h3>Chunking</h3>
<p>Gone are the days where you can “View Source” on a webpage and make any sense of it. Likewise, it takes a lot more code nowadays just to start making something meaningful. No doubt one of the big leaps in the coming years will be <a href="http://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/">componentization</a>, paving the way for web development at a higher level of abstraction.</p>
<p>While we wait for the new standards to crystalize, we’ve taken our own approach in Snowball. First, we’ve decomposed modern web articles, identifying different chunks of content that are used to construct them. We’ve then given users a way to build up new articles using these content types, one block at a time. Snowball supports content ranging from pull quotes to interactive visualizations.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball1.gif" alt="Blocks" width="780" height="273" class="alignnone size-large wp-image-10531"></p>
<h3>Looping</h3>
<p>A tight feedback loop encourages playful experimentation and learning, so we’ve equipped Snowball with a live preview feature, which is something WordPress doesn’t offer by default. Tinker with a value and you can immediately see the rendered results. Not only that, but within the code view, you can inspect changes in the underlying HTML and CSS.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball2.gif" alt="Live Preview" width="780" height="273" class="alignnone size-large wp-image-10532"></p>
<h3>Scaffolding</h3>
<p>While the overall structure of each block is determined by its type, users still need to give it their own touch. Snowball provides different degrees of support depending on the user’s abilities and goals.</p>
<p>Snowball offers a graphical interface that makes it easy to populate a block’s content and most pertinent styles. If you want to go beyond that, a code interface allows you to add your own tweaks with just a dash of CSS. And for the power users, an entirely custom block can be created with code.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball3.gif" alt="Code View" width="780" height="273" class="alignnone size-large wp-image-10530"></p>
<h1>Trying It Out</h1>
<p>We’ve started our rollout, presenting Snowball <a href="https://twitter.com/excitecenter/status/621768521266147328">last week at the ExCITe Center’s T3 event</a>. With that said, Snowball is a research prototype at heart, and still a work in progress.</p>
<p>Next month, we’ll be hosting workshops in Philadelphia, where anyone interested in Snowball, from journalists and bloggers to students, will be invited to try it out and give their feedback.</p>
<p>In the fall, we plan to conduct more sustained pilot tests with partners, including news organizations and journalism courses.</p>
<p>If you’re interested in participating in either the workshops or pilot tests, drop me an email. And for more details about Snowball, check out the <a href="http://snowball.openhtml.org/">project site</a> or the <a href="https://github.com/thomaspark/snowball/">GitHub repository</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/feed/</wfw:commentRss>
<slash:comments>28</slash:comments>
</item>
<item>
<title>PubCSS: Formatting Academic Publications in HTML & CSS</title>
<link>https://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/</link>
<comments>https://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 21 Jan 2015 12:25:52 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=9486</guid>
<description><![CDATA[You have two choices when it comes to formatting academic papers for conferences and journals: Microsoft Word and LaTeX. Word is familiar and easy for anyone to pick up. But the WYSIWYG interface that makes … <a href="https://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>You have two choices when it comes to formatting academic papers for conferences and journals: Microsoft Word and LaTeX.</p>
<p>Word is familiar and easy for anyone to pick up. But the WYSIWYG interface that makes it so easy also makes it easy to create inconsistent, amateur-looking documents that are tough to maintain and fine-tune. On top of this, you get a file format that isn’t friendly to revision control, diminishing collaboration through a system like GitHub.</p>
<p>LaTeX is powerful and produces beautiful documents, but requires installing a hefty toolchain, learning a new syntax, and familiarizing yourself with its powerful abstractions. This is a <a href="http://www.johndcook.com/blog/2008/04/03/microsoft-word-and-latex/">significant front-end investment</a>, one that <a href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0115069">may not pay off</a>. In my experience, there’s usually at least one author who hasn’t made that investment, and so the team falls back to Word anyway. </p>
<p><a href="https://github.com/thomaspark/pubcss/">PubCSS</a> is an exploration of HTML and CSS as a third option. It’s a library of stylesheets and templates for formatting academic papers. Perhaps HTML and CSS can hit the sweet spot between the ease of Word and the efficiency LaTeX. Like LaTeX, HTML is a markup language, but one that a lot more people have experience with. CSS has proven its worth for styling fluid layouts, and with <a href="http://www.smashingmagazine.com/2015/01/07/designing-for-print-with-css/">CSS3 modules</a> around the corner, things can only improve for print.</p>
<h1>Output</h1>
<p>So how’s PubCSS’s output look? Pretty darn good. Here’s a sample page for the ACM SIG proceedings. Note that most of the layout, typography, and numbering is handled by a single stylesheet.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/01/acm-sig-sample-latex.png" alt="acm-sig-sample-latex" width="1275" height="1650" class="aligncenter size-full wp-image-9545 border" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/01/acm-sig-sample-latex.png 1275w, https://thomaspark.co/wp/wp-content/uploads/2015/01/acm-sig-sample-latex-232x300.png 232w, https://thomaspark.co/wp/wp-content/uploads/2015/01/acm-sig-sample-latex-791x1024.png 791w" sizes="auto, (max-width: 1275px) 100vw, 1275px" /></p>
<p>You can compare the actual PDF output for the following formats:</p>
<ul>
<li><a href="http://www.acm.org/sigs/publications/proceedings-templates">ACM SIG Proceedings</a> vs. <a href="https://github.com/thomaspark/pubcss/blob/master/dist/acm-sig/templates/acm-sig-sample-latex.pdf">PubCSS</a></li>
<li><a href="http://www.sigchi.org/publications/chipubform">ACM SIGCHI Proceedings</a> vs. <a href="https://github.com/thomaspark/pubcss/blob/master/dist/acm-sigchi/templates/acm-sigchi-sample.pdf">PubCSS</a></li>
<li><a href="http://www.sigchi.org/publications/chipubform">ACM SIGCHI Extended Abstracts</a> vs. <a href="https://github.com/thomaspark/pubcss/blob/master/dist/acm-sigchi-ea/templates/acm-sigchi-ea-sample.pdf">PubCSS</a></li>
<li><a href="http://www.ieee.org/conferences_events/conferences/publishing/templates.html">IEEE Conference Proceedings</a> vs. <a href="https://github.com/thomaspark/pubcss/blob/master/dist/ieee/templates/ieee-sample.pdf">PubCSS</a></li>
</ul>
<p>A bonus of using HTML is that with a few lines of CSS targeting <code class="language-css" inline="true">@media screen</code>, you’ve got yourself a <a href="https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web.html">web version</a> of the paper.</p>
<p><a href="https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web.html"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper1.png" alt="Web Paper" width="2422" height="1834" class="aligncenter size-full wp-image-9564" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper1.png 2422w, https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper1-300x227.png 300w, https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper1-1024x775.png 1024w" sizes="auto, (max-width: 2422px) 100vw, 2422px" /></a></p>
<p>You can also add niceties like responsive design, reference tooltips, and image lightboxes to create an <a href="https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web-theme.html">interactive web paper</a> that feels at home on the web.</p>
<p><a href="https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web-theme.html"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper-theme1.png" alt="Web Paper Theme" width="2422" height="1834" class="aligncenter size-full wp-image-9565" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper-theme1.png 2422w, https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper-theme1-300x227.png 300w, https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper-theme1-1024x775.png 1024w" sizes="auto, (max-width: 2422px) 100vw, 2422px" /></a></p>
<h1>Quick Start</h1>
<p>Using PubCSS is simple:</p>
<ol>
<li>Create an HTML file, or modify one of the templates, to add your content</li>
<li>Link your HTML to a <code inline="true">pub.css</code> stylesheet</li>
<li>Build a PDF from the HTML using Prince with the command<br /><code class="language-bash" inline="true">prince input.html output.pdf</code></li>
</ol>
<p>You can grab the templates and stylesheets from the <a href="https://github.com/thomaspark/pubcss/">GitHub repo</a>. ACM and IEEE formats are available so far. The only dependency is <a href="http://www.princexml.com/">Prince</a>, which is free for non-commercial use.</p>
<h1>Documentation</h1>
<p>OK, it’s not quite that simple. You still have to mark up your content. <a href="http://htmlpreview.github.io/?https://github.com/thomaspark/pubcss/blob/master/dist/acm-sig/templates/acm-sig-sample-word.html">Here’s</a> what the markup for a typical paper looks like. The main components are outlined below.</p>
<p>Sections are automatically numbered by PubCSS. Just follow this pattern.</p>
<pre>
<code class="language-markup" lang="html"><p>
<h1>Section Header</h1>
<section>
<h2>Subsection Header</h2>
<p>Lorem ipsum</p>
</section>
</p></code>
</pre>
<p>Figures and tables are similarly numbered if you include a caption.</p>
<pre>
<code class="language-markup" lang="html"><table>
<tr><td>1</td><td>2<td></tr>
<caption>Example Table</caption>
</table>
<figure>
<img src="graph.png">
<figcaption>Example Figure</figcaption>
</figure></code></pre>
<p>References are also numbered. Don’t forget to assign them unique IDs.</p>
<pre>
<code class="language-markup" lang="html"><cite id="nicole">Nicole. 2015. Title of paper. <em>Journal</em>, 4(3), 1-10.</cite></code>
</pre>
<p>Citations to the references make use of these IDs.</p>
<pre>
<code class="language-markup" lang="html"><a href="#nicole"></a></code>
</pre>
<p>Sections, tables, and figures can also be referenced by adding a class.</p>
<pre>
<code class="language-markup" lang="html"><a href="#intro" class="section"></a>
<a href="#example-table" class="table"></a>
<a href="#example-figure" class="figure"></a></code>
</pre>
<p>Equations are also numbered. MathML is well-supported by Prince. For the web, you’ll need <a href="http://www.mathjax.org/">MathJax</a> to render MathML properly in Chrome and Internet Explorer.</p>
<pre>
<code class="language-markup" lang="html"><div class="equation">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>E</mi>
<mo>=</mo>
<mi>m</mi>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</math>
</div></code>
</pre>
<p>Footnotes are made within the body text, and are automatically moved to the bottom of the current page.</p>
<pre>
<code class="language-markup" lang="html"><p>This is text.<span class="footnote">And this is a footnote.</span></p></code>
</pre>
<p>Smart quotes can be used in lieu of straight quotes by enclosing the text like so. You can nest quotes within quotes.</p>
<pre>
<code class="language-markup" lang="html"><q>To be or not be.</q></code>
</pre>
<p>Utility classes are also available to modify layout and counter behavior.</p>
<ul>
<li><code class="language-css" inline="true">col-2</code> divide the element into 2 columns</li>
<li><code class="language-css" inline="true">col-3</code> divide the element into 3 columns</li>
<li><code class="language-css" inline="true">col-4</code> divide the element into 4 columns</li>
<li><code class="language-css" inline="true">col-span</code> span all of the columns of parent</li>
<li><code class="language-css" inline="true">col-break-before</code> force column break before element</li>
<li><code class="language-css" inline="true">col-break-after</code> force column break after element</li>
<li><code class="language-css" inline="true">page-break-before</code> force page break before element</li>
<li><code class="language-css" inline="true">page-break-after</code> force page break after element</li>
<li><code class="language-css" inline="true">counter-skip</code> do not count this header</li>
<li><code class="language-css" inline="true">counter-reset</code> reset counter to 0</li>
</ul>
<p>For customization, one of the major advantages of PubCSS is that you can use CSS. All of the usual rules apply.</p>
<p>The architecture of PubCSS is similar to <a href="http://bootswatch.com">Bootswatch</a> — a set of LESS files used to generate CSS for the current themes and to bootstrap new ones. If you want to make more extensive changes, or create a new theme, you’ll want to dig into the LESS source. The most common changes can be made through <code inline="true">variables.less</code>, such as toggling page numbers and setting counter styles.</p>
<h1>Notes</h1>
<p>PubCSS is meant to be proof-of-concept, a demonstration of HTML and CSS as viable alternative for formatting academic papers. Note that these templates are not officially sanctioned by ACM or IEEE. Unless a venue requires only the PDF output, they’ll also be expecting the source in the form of LaTeX files or a Word document.</p>
<p>Among the limitations of PubCSS are that citations in APA or MLA style (Park, 2015) are possible but clumsier than their counterpart [1]. You also lose the magic of BibTeX for reference management, though on the bright side, all of your content is localized to a single file. Finally, when debugging PDF output, you really come to miss the developer tools available in web browsers today.</p>
<p>For the <a href="https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web-theme.html">interactive web paper</a>, I used JavaScript and hard-coded HTML to achieve many of the interactive effects. But once browsers start supporting CSS3 properties like <code inline="true">target-counter</code> and <code inline="true">target-content</code>, as Prince already does, it’ll be possible to implement most of these effects with only CSS — that is, outputting both print and fully interactive web versions with a single pub.css file. How cool.</p>
<p>Finally, get in touch if you have a request for another publication format. I’d love to hear from you if you’re interested in using PubCSS.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/feed/</wfw:commentRss>
<slash:comments>25</slash:comments>
</item>
<item>
<title>Graduated Experiences in Golf and Programming</title>
<link>https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/</link>
<comments>https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 23 Apr 2014 12:27:39 +0000</pubDate>
<category><![CDATA[Learning]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=9265</guid>
<description><![CDATA[A recent post about efforts to counter the declining popularity of golf got me thinking. I’m a pretty terrible golfer, but still have fond memories of playing with friends and family over the years, and … <a href="https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>A recent post <a href="http://www.marco.org/2014/04/21/golf">about efforts to counter the declining popularity of golf</a> got me thinking. I’m a pretty terrible golfer, but still have fond memories of playing with friends and family over the years, and do my best to make a couple of rounds each summer. The reason I started playing wasn’t my father, who admittedly is an avid golfer, or stars like Tiger Woods on TV every Sunday. The single greatest influence was a place just a few miles from where I grew up called Woody’s.</p>
<p><a href="http://www.philly.com/philly/sports/golf/course_guide/Wood_s_Golf_Center.html">Woody’s</a> was a golf complex with a driving range, two mini-putt courses, a 9-hole chip & putt course, and an 18-hole par-3 course. Many summer nights were spent with friends on the driving range, the mini-putt courses, or simply hanging out. Woody’s offered three things that made it a great introduction to golf: an accessible environment, beginner-friendly equipment, and graduated experiences.</p>
<p>Woody’s made golf accessible. It was nearby, cheap, and had a welcoming atmosphere. Rather than sitting at the end of a winding, cloistered driveway, the facility and parking lot stretched along a busy highway. People of all ages and backgrounds could be seen there on any given day, from those practicing drills on the driving range or putting green, to others whiffing on swings and generally making fools of themselves. There was an air of playfulness to this prim sport.</p>
<p>A big factor in Woody’s accessibility was that you didn’t need to invest time researching and money purchasing your own equipment. Woody’s provided putters, a rack of old clubs to experiment with on the driving range, a pitching wedge and putter combo for chip & putt, and full sets to rent for the par-3 course. And whether you decided to borrow clubs or bring your own, there was no stigma. Well, you might have gotten some looks bringing your own putter to mini-putt, although <a href="http://grantland.com/the-triangle/putt-putt-perfection/">apparently it’s not unheard of</a>.</p>
<p>Most important of all, there were graduated experiences. Individually, none of the courses at Woody’s were the best. There were mini-putt courses with far fancier animatronics and better-groomed 18-hole courses for sure. But Woody’s offered proximity between these different activities. The sum was greater than the parts. Each activity was a complete, self-contained experience, but you were exposed to them all and could easily transition from one to another requiring more skill. When you started outgrowing the chip & putt course, you’d be tempted to try the par-3 course.</p>
<p>Time spent at Woody’s wasn’t as highly focused and organized as it would be through golf lessons, yet its impacts were long-lasting. For me and most people who spent time at Woody’s, we didn’t start by identifying ourselves as golfers. The goal and reality was never to become a professional on the PGA tour. But we were rewarded with developed skills, rich experiences, and an affection for the sport, whether we winded up as spectating fans, casual hobbyists, or the obsessed.</p>
<p>A few years ago, <a href="http://fanadelphia.com/woodys-golf-center-the-end-of-an-era/">Woody’s was closed</a> to make way for a hospital. My hometown still boasts many 18-hole golf courses where khakied and cleated men make the rounds, and driving ranges (often accompanied by batting cages—another narrow slice of a sport) where boisterous children play. But where Woody’s once provided intermediate activities that acted as pathways to “real” golf, there is now a chasm. Hard to imagine anyone but the most determined and resourced making it from the driving range to the clubhouse.</p>
<h2>What’s This Got To Do With Programming?</h2>
<p>To me, concerns about the declining popularity of golf parallel those about getting people involved in programming. Golf and programming share many criticisms, from being the domain of a privileged few to requiring a steep learning curve to start, let alone enjoy. This leads me to wonder about the Woody’s of programming.</p>
<p>Like Woody’s accessible atmosphere, there are initiatives like <a href="https://webmaker.org/">Mozilla Webmaker</a> that create a welcoming environment for learning to code and free online courses like <a href="http://www.codecademy.com/">Codecademy</a> that target beginners. And like the putters, pitching wedges, and basic golf club sets you could borrow at Woody’s, there are free and easy-to-use tools like <a href="http://thimble.webmaker.org">Thimble</a> and <a href="http://openhtml.org">openHTML</a> suitable for beginners.</p>
<p>But I’m not sure where the graduated experiences are. Technology can be explicitly designed to support this, as in the case of <a href="https://wiki.mozilla.org/Webmaker/Concept-Nimble">Nimble</a>. But missing is the social component, akin to what sociologists Lave and Wenger refer to as <a href="https://en.wikipedia.org/wiki/Legitimate_peripheral_participation">legitimate peripheral participation</a>.</p>
<p>You might argue that the web as a whole serves this function. But that’s about as true as the roads helping kids get from the driving range to the country club. Open source projects can also provide these experiences. Doubtless there are many examples of contributors who have gone from fixing typos in the readme to the core team. But if you’re spending time on GitHub, the battle’s already been won. Perhaps ultra-inclusive hackerspaces would be a start.</p>
<p>Where are these communities where programmers of different levels of expertise, from the most novice of novices and casual of casuals, can have complete and meaningful experiences, yet still play and work in proximity with, observe, and learn from one another? Where are the pathways from the driving range <a href="http://www.amazon.com/Unlocking-Clubhouse-Computing-Jane-Margolis/dp/0262632691">to the clubhouse</a>?</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>TF2 Collective</title>
<link>https://thomaspark.co/2014/02/tf2-collective/</link>
<comments>https://thomaspark.co/2014/02/tf2-collective/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 27 Feb 2014 18:32:20 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Language]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=9649</guid>
<description><![CDATA[In Team Fortress 2, there are nine playable classes with unique personalities and complementary abilities: pyro, engineer, spy, heavy, sniper, scout, soldier, demo, and medic. When referring to several scouts, or pyros, or heavies, it’d … <a href="https://thomaspark.co/2014/02/tf2-collective/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/classes.jpg" alt="TF2 Classes" width="1200" height="675" class="aligncenter size-full wp-image-9769" /></p>
<p>In Team Fortress 2, there are <a href="https://wiki.teamfortress.com/wiki/Classes">nine playable classes</a> with unique personalities and complementary abilities: pyro, engineer, spy, heavy, sniper, scout, soldier, demo, and medic.</p>
<p>When referring to several scouts, or pyros, or heavies, it’d be perfectly adequate to refer to each as a “group” or “bunch”. But given TF2’s whimsical style, why not adopt creative language like the <a href="http://www.thealmightyguru.com/Pointless/AnimalGroups.html">terms of venery used for animals</a>? A pod of dolphins, a murder of crows, a zeal of zebras, a wisdom of wombats…</p>
<p>To decide on the term that best evokes each class, I polled the TF2 community, like I <a href="http://thomaspark.co/2011/05/starcraft-collective/">had previously done for Starcraft</a>. For each class, I presented five choices and the option to write-in your own. A final question asked respondents to give their primary class. You can view the survey <a href="https://docs.google.com/forms/d/1ZHnoLykTP7ZCnk_jCW2j90_NYtZ80JDzDeObVwLY7aY/viewform?usp=send_form">here</a>.</p>
<p>Here are the results, based on 404 responses:</p>
<p><a href="#scout">Swarm of Scouts</a><br />
<a href="#soldier">Squad of Soldiers</a><br />
<a href="#pyro">Pack of Pyros</a><br />
<a href="#demo">Spam of Demos</a><br />
<a href="#heavy">Horde of Heavies</a><br />
<a href="#engineer">Nest of Engineers</a><br />
<a href="#medic">Mob of Medics</a><br />
<a href="#sniper">Surplus of Snipers</a><br />
<a href="#spy">Murder of Spies</a></p>
<p>Read on for the full details.</p>
<h2 id="scout">Swarm of Scouts</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/scouts.jpg" alt="Scouts" width="1200" height="675" class="aligncenter size-full wp-image-9712" /></p>
<p>Scouts can certainly feel like a swarm of irritating gnats. I propose the alternate “flock” be used for soda-popper scouts.</p>
<p><span class="option">Swarm</span><span class="progress"><span class="progress-bar" style="width: 32%;">32%</span></span><br />
<span class="option">Scatter</span><span class="progress"><span class="progress-bar" style="width: 21%;">21%</span></span><br />
<span class="option">Flock</span><span class="progress"><span class="progress-bar" style="width: 19%;">19%</span></span><br />
<span class="option">Rush</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span><br />
<span class="option">Bonk</span><span class="progress"><span class="progress-bar" style="width: 9%;">9%</span></span></p>
<p>Write-Ins:<br />
Scoot, Squad</p>
<p>Scouts call themselves:<br />
Swarm</p>
<h2 id="soldier">Squad of Soldiers</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/soldiers.jpg" alt="Soldiers" width="1200" height="674" class="aligncenter size-full wp-image-9714" /></p>
<p>For soldiers, “squad” was the winner among the militaristic options. As write-ins, “flight” and “pocketful” were best at capturing the styles of gameplay soldiers are known for.</p>
<p><span class="option">Squad</span><span class="progress"><span class="progress-bar" style="width: 46%;">46%</span></span><br />
<span class="option">Battalion</span><span class="progress"><span class="progress-bar" style="width: 32%;">32%</span></span><br />
<span class="option">Spam</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span><br />
<span class="option">Stock</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span><br />
<span class="option">Service</span><span class="progress"><span class="progress-bar" style="width: 3%;">3%</span></span></p>
<p>Write-Ins:<br />
Flight, Pocketful, Platoon, Barrage, ‘Merica</p>
<p>Soldiers call themselves:<br />
Squad</p>
<h2 id="pyro">Pack of Pyros</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/pyros.jpg" alt="Pyros" width="1200" height="675" class="aligncenter size-full wp-image-9711" /></p>
<p>All five options for Pyro were popular, but “pack” was the frontrunner. There were plenty of write-ins as well. One of these was “patrol”, which works well to describe pybros who dutifully spycheck.</p>
<p><span class="option">Pack</span><span class="progress"><span class="progress-bar" style="width: 32%;">32%</span></span><br />
<span class="option">Plague</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span><br />
<span class="option">Huddle</span><span class="progress"><span class="progress-bar" style="width: 15%;">15%</span></span><br />
<span class="option">Phlog</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span><br />
<span class="option">Conflagration</span><span class="progress"><span class="progress-bar" style="width: 12%;">12%</span></span></p>
<p>Write-Ins:<br />
Patrol, Hudda, Mmmph, Kindling, Inferno, Infestation, Blaze, Backdraft</p>
<p>Pyros call themselves:<br />
Pack</p>
<h2 id="demo">Spam of Demos</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/demos.jpg" alt="Demos" width="1200" height="675" class="aligncenter size-full wp-image-9707" /></p>
<p>For demos, “spam” edged out the other choices. Demos mains saw it differently however, preferring the more neutral “drove”. Most of the write-ins made reference to the demo’s predilection for scrumpy. Like “keg”, which nicely doubles as a reference to explosive gunpowder. Another write-in, “charge”, is fitting for the demoknights headed your way.</p>
<p><span class="option">Spam</span><span class="progress"><span class="progress-bar" style="width: 42%;">42%</span></span><br />
<span class="option">Drove</span><span class="progress"><span class="progress-bar" style="width: 34%;">34%</span></span><br />
<span class="option">Kaboom</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span><br />
<span class="option">Detonation</span><span class="progress"><span class="progress-bar" style="width: 3%;">3%</span></span><br />
<span class="option">Domination</span><span class="progress"><span class="progress-bar" style="width: 2%;">2%</span></span></p>
<p>Write-Ins:<br />
Charge, Demonstration, Keg, Drunk, Flask, Patch</p>
<p>Demos call themselves:<br />
Drove</p>
<h2 id="heavy">Horde of Heavies</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/heavies.jpg" alt="Heavies" width="1200" height="675" class="aligncenter size-full wp-image-9709" /></p>
<p>For heavies, it was neck-and-neck between “horde” and “herd”, with “horde” on top by just 1 vote. Among the slow-moving, sandvich-munching heavy themselves, “herd” was more popular, proving that heavies have the best sense of humor. “Bevy” was an inspired write-in, and frankly should have been one of the original options on the survey.</p>
<p><span class="option">Horde</span><span class="progress"><span class="progress-bar" style="width: 30%;">30%</span></span><br />
<span class="option">Herd</span><span class="progress"><span class="progress-bar" style="width: 30%;">30%</span></span><br />
<span class="option">Mass</span><span class="progress"><span class="progress-bar" style="width: 19%;">19%</span></span><br />
<span class="option">Hulk</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span><br />
<span class="option">Heap</span><span class="progress"><span class="progress-bar" style="width: 6%;">6%</span></span></p>
<p>Write-Ins:<br />
Bevy, Pootis, Stampede, Pile, Huddle, Bulk, Bulge, Blob</p>
<p>Heavies call themselves:<br />
Herd</p>
<h2 id="engineer">Nest of Engineers</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/engies.jpg" alt="Engies" width="1200" height="675" class="aligncenter size-full wp-image-9708" /></p>
<p>For engineers, “nest” was a predictable outcome, since it already exists in the TF2 lexicon. It’s fitting all the same given that “nest” is also the collective noun for the turtle.</p>
<p><span class="option">Nest</span><span class="progress"><span class="progress-bar" style="width: 47%;">47%</span></span><br />
<span class="option">Hive</span><span class="progress"><span class="progress-bar" style="width: 19%;">19%</span></span><br />
<span class="option">Crew</span><span class="progress"><span class="progress-bar" style="width: 14%;">14%</span></span><br />
<span class="option">Rodeo</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span><br />
<span class="option">Wrangle</span><span class="progress"><span class="progress-bar" style="width: 6%;">6%</span></span></p>
<p>Write-Ins:<br />
Hub, Network, Shed, Crib, Camp, Turtle, Mess</p>
<p>Engineers call themselves:<br />
Nest</p>
<h2 id="medic">Mob of Medics</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/medics.jpg" alt="Medics" width="1200" height="675" class="aligncenter size-full wp-image-9710" /></p>
<p>For medics, “mob” was the runaway choice, though you’re unlikely to ever actually see one in the wild. Most of the write-ins played off the idea of medicine, though several also made bird-like references due to the plague masks they sometimes wear.</p>
<p><span class="option">Mob</span><span class="progress"><span class="progress-bar" style="width: 42%;">42%</span></span><br />
<span class="option">Quack</span><span class="progress"><span class="progress-bar" style="width: 15%;">15%</span></span><br />
<span class="option">Prescription</span><span class="progress"><span class="progress-bar" style="width: 9%;">9%</span></span><br />
<span class="option">Mirage</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span><br />
<span class="option">Mend</span><span class="progress"><span class="progress-bar" style="width: 6%;">6%</span></span></p>
<p>Write-Ins:<br />
Dose, Ward, Triage, Chain, Uber, Practice, Flock, Gaggle, Crusade, Paradox</p>
<p>Medics call themselves:<br />
Mob</p>
<h2 id="sniper">Surplus of Snipers</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/snipers.jpg" alt="Snipers" width="1200" height="675" class="aligncenter size-full wp-image-9713" /></p>
<p>For snipers, “surplus” was the clear winner. On any given server, you’re more likely to see an excess of snipers than any other class, and plenty of people expressed their displeasure at this fact. Based on their votes, even sniper mains themselves recognized it.</p>
<p><span class="option">Surplus</span><span class="progress"><span class="progress-bar" style="width: 46%;">46%</span></span><br />
<span class="option">Score</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span><br />
<span class="option">Society</span><span class="progress"><span class="progress-bar" style="width: 12%;">12%</span></span><br />
<span class="option">Shelter</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span><br />
<span class="option">Snivel</span><span class="progress"><span class="progress-bar" style="width: 4%;">4%</span></span></p>
<p>Write-Ins:<br />
Scope, Firing Squad, Battlement, Stand, Stakeout, Camper Van, Salvage, Teamful, Deadweight</p>
<p>Snipers call themselves:<br />
Surplus</p>
<h2 id="spy">Murder of Spies</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/spies.jpg" alt="Spies" width="1200" height="675" class="aligncenter size-full wp-image-9715" /></p>
<p>For spies, “murder” was most popular, though spy mains prefer to call themselves a “syndicate”. Several write-ins deserve honorable mention, particularly “society”, “conspiracy”, “cloak”, and “spook”. A murder of spies is always a nightmare, for both teams. </p>
<p><span class="option">Murder</span><span class="progress"><span class="progress-bar" style="width: 33%;">33%</span></span><br />
<span class="option">Syndicate</span><span class="progress"><span class="progress-bar" style="width: 27%;">27%</span></span><br />
<span class="option">Sneak</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span><br />
<span class="option">Slaughter</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span><br />
<span class="option">Mischief</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span></p>
<p>Write-Ins:<br />
Spook, Society, Conspiracy, Cloak, Shpee, Shadow, Smorgasborg, Shit-Ton</p>
<p>Spies call themselves:<br />
Syndicate</p>
<h3>Credits</h3>
<p>My thanks to <a href="http://steamcommunity.com/profiles/76561198085628990">sting.</a> for providing the artwork.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2014/02/tf2-collective/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>3 Simple Design Bookmarklets to Improve Your Aesthetics</title>
<link>https://thomaspark.co/2013/11/3-simple-design-bookmarklets-to-improve-your-aesthetics/</link>
<comments>https://thomaspark.co/2013/11/3-simple-design-bookmarklets-to-improve-your-aesthetics/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 11 Nov 2013 11:54:44 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=9197</guid>
<description><![CDATA[In math, you’re sometimes so focused on getting the calculations right that you end up with nonsensical answers without realizing it. In web design there’s a similar phenomenon, where you’re so intent on pixel perfection … <a href="https://thomaspark.co/2013/11/3-simple-design-bookmarklets-to-improve-your-aesthetics/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>In math, you’re sometimes so focused on getting the calculations right that you end up with nonsensical answers without realizing it. In web design there’s a similar phenomenon, where you’re so intent on pixel perfection that you lose sight of the bigger picture.</p>
<p>This is where Nick Pettit’s <a href="http://blog.teamtreehouse.com/3-simple-design-tests-to-improve-your-aesthetics" target="_blank" rel="noopener noreferrer">three “design tests”</a> come in — simple aesthetic exercises that serve as sanity checks for your website’s design. In the post, he suggests opening up a screenshot of your website in Photoshop, and applying the following filters:</p>
<ul>
<li><strong>Grayscale</strong> to gauge contrast between light and dark, rather than by colors</li>
<li><strong>Blurry</strong> to examine the composition of colors</li>
<li><strong>Upside-down</strong> to get a fresh perspective on composition and balance</li>
</ul>
<p>Fortunately, with CSS3 properties like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter" target="_blank" rel="noopener noreferrer">filter</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform" target="_blank" rel="noopener noreferrer">transform</a>, Photoshop is not required. All it takes are these simple bookmarklets to run the design tests right in your browser.</p>
<h3>Gray Effect</h3>
<pre>
<code class="language-javascript" lang="js">
javascript:(function(){
document.body.setAttribute('style',
'filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
-webkit-filter:grayscale(1);
filter:grayscale(1);'
);
})();
</code>
</pre>
<h3>Blur Effect</h3>
<pre>
<code class="language-javascript" lang="js">
javascript:(function(){
document.body.setAttribute('style',
'filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='10' /></filter></svg>#blur");
-webkit-filter:blur(10px);
filter:blur(10px);'
);
})();
</code>
</pre>
<h3>Flip Effect</h3>
<pre>
<code class="language-javascript" lang="js">
javascript:(function(){
document.body.setAttribute('style',
'-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
transform:rotate(180deg);'
);
})();
</code>
</pre>
<h3>The Bookmarklets</h3>
<p>Do these design tests make a difference? Judge for yourself by following the link below.</p>
<div class="center">
<a class="standard-btn red-btn xlarge-btn" href="https://thomaspark.co/projects/designbookmarklets/"><span>Demo</span></a>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2013/11/3-simple-design-bookmarklets-to-improve-your-aesthetics/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>GlyphSearch: Improving the Search for Icon Fonts</title>
<link>https://thomaspark.co/2013/11/glyphsearch-improving-the-search-for-icon-fonts/</link>
<comments>https://thomaspark.co/2013/11/glyphsearch-improving-the-search-for-icon-fonts/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 05 Nov 2013 14:52:47 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=9066</guid>
<description><![CDATA[Right now we’re blessed with many, well, awesome icon fonts that continue to grow with every release, like Font Awesome, Glyphicons, and Ionicons. And game-changers like Iconic might be just around the bend. But searching … <a href="https://thomaspark.co/2013/11/glyphsearch-improving-the-search-for-icon-fonts/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Right now we’re blessed with many, well, awesome icon fonts that continue to grow with every release, like <a href="http://fontawesome.io/">Font Awesome</a>, <a href="http://glyphicons.com/">Glyphicons</a>, and <a href="http://ionicons.com/">Ionicons</a>. And game-changers like <a href="http://useiconic.com/">Iconic</a> might be just around the bend. But searching through this abundance of icons one by one often leads me to tedium and eye strain.</p>
<p>Sure, I can use the browser’s find function or the in-page search filter to search a library. But unless I match the class name exactly, it won’t be found. This is a problem <a href="http://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/">I’ve talked about before</a>, and one that Font Awesome takes some steps to address by aliasing icon names. But then I compare multiple libraries, deliberating on which to use based on coverage and design, and this problem multiplies.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/11/speedometers.png" alt="Speedometers" width="800" height="200" class="aligncenter size-full wp-image-9080" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/11/speedometers.png 800w, https://thomaspark.co/wp/wp-content/uploads/2013/11/speedometers-300x75.png 300w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>To scratch this itch of mine, this past weekend I created <a href="http://glyphsearch.com/">GlyphSearch</a>.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-1600x1081.png" alt="GlyphSearch" width="800" height="541" class="aligncenter size-large wp-image-13713" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-1600x1081.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-800x540.png 800w, https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-768x519.png 768w, https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-1536x1037.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-2048x1383.png 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>It allows you to search Font Awesome, Glyphicons, and Ionicons simultaneously, and icons have been tagged with additional terms, meaning for example that all three of the icons above should be found regardless of whether you query for “tachometer”, “dashboard”, or “speedometer”. You can also click an icon to quickly copy the class name to your clipboard.</p>
<div class="center">
<a class="standard-btn red-btn xlarge-btn" href="http://glyphsearch.com"><span>GlyphSearch</span></a>
</div>
<p>GlyphSearch is about as minimal a tool as I could make for this, but it gets the job done for me, and hopefully you agree. I was tempted to add settings like font size and color but resisted; if there’s any demand, let me know.</p>
<h3>Notes</h3>
<p>Besides the icon font libraries themselves, I use <a href="http://www.algolia.com/">Algolia</a> for search and <a href="http://bootswatch.com/flatly/">Flatly</a> for styles. The project is hosted on <a href="https://github.com/thomaspark/glyphsearch">GitHub</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2013/11/glyphsearch-improving-the-search-for-icon-fonts/feed/</wfw:commentRss>
<slash:comments>11</slash:comments>
</item>
<item>
<title>Weaving Tutorials into Mozilla Thimble</title>
<link>https://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/</link>
<comments>https://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 22 Oct 2013 14:56:52 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Learning]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=8906</guid>
<description><![CDATA[I’m headed to Mozilla Festival this week, after spending the summer working for Mozilla Webmaker. Everything at Webmaker is a team effort, so I helped out on a number of projects and had a blast … <a href="https://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I’m headed to <a href="http://mozillafestival.org/">Mozilla Festival</a> this week, after spending the summer working for <a href="https://webmaker.org/">Mozilla Webmaker</a>. Everything at Webmaker is a team effort, so I helped out on a number of projects and had a blast doing it. But I wanted to document my main effort — adding a tutorial feature to Thimble — from design to research to implementation.</p>
<h2>Designing Tutorials</h2>
<p><a href="https://thimble.webmaker.org/">Thimble</a> is a web-based editor that makes it dead simple to create and publish web pages. It’s often used to teach web development to beginners, with educators relying on HTML comments to provide inline explanations of the code. This summer, our goal was to give Thimble explicit support for this kind of instruction.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/10/thimble.png" alt="Thimble" width="1412" height="975" class="aligncenter size-full wp-image-8958" /></p>
<p>I started out the process by sketching mockups of potential designs with pen and paper. While I already had a sense of what direction I wanted to take it, this was colored mostly by unsupported assumptions and personal preferences. So instead I took a breadth-first approach, exploring many different designs and making use of user testing.</p>
<p>Eventually, I settled on five designs. Some, like Sidebar and Drawer, are already commonplace in coding environments. Others, like Expander, have more distant inspirations like Google Images and iTunes. I then turned these into functional prototypes. Some smoke and mirrors may have been involved.</p>
<p>You can hover over a mockup below to see how the eventual prototype turned out, and click to try it out for yourself.</p>
<div class="two-columns-one">
<h3 style="margin: 1em 0 0; text-align: center;">Palette</h3>
<div class="crossfade">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/palette-prototype.jpg" alt="Palette Prototype" width="1314" height="982" class="aligncenter size-full wp-image-8882" /><br />
<a href="http://polar-tor-6216.herokuapp.com/examples/palette.html" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/palette-mockup.jpg" alt="Palette Mockup" width="1314" height="982" class="aligncenter size-full wp-image-8881 top" /></a>
</div>
</div>
<div class="two-columns-one last">
<h3 style="margin: 1em 0 0; text-align: center;">Sidebar</h3>
<div class="crossfade">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/sidebar-prototype.jpg" alt="Sidebar Prototype" width="388" height="290" class="aligncenter size-full wp-image-8886" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/09/sidebar-prototype.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/sidebar-prototype-300x224.jpg 300w" sizes="auto, (max-width: 388px) 100vw, 388px" /><br />
<a href="http://polar-tor-6216.herokuapp.com/examples/sidebar.html" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/sidebar-mockup.jpg" alt="Sidebar Mockup" width="388" height="290" class="aligncenter size-full wp-image-8885 top" /></a>
</div>
</div>
<div class="two-columns-one">
<h3 style="margin: 1em 0 0; text-align: center;">Drawer</h3>
<div class="crossfade">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/drawer-prototype.jpg" alt="Drawer Prototype" width="388" height="290" class="aligncenter size-full wp-image-8880" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/09/drawer-prototype.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/drawer-prototype-300x224.jpg 300w" sizes="auto, (max-width: 388px) 100vw, 388px" /><br />
<a href="http://polar-tor-6216.herokuapp.com/examples/drawer.html" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/drawer-mockup.jpg" alt="Drawer Mockup" width="388" height="290" class="aligncenter size-full wp-image-8879 top" /></a>
</div>
</div>
<div class="two-columns-one last">
<h3 style="margin: 1em 0 0; text-align: center;">Popover</h3>
<div class="crossfade">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/popover-prototype.jpg" alt="Popover Prototype" width="388" height="290" class="aligncenter size-full wp-image-8884" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/09/popover-prototype.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/popover-prototype-300x224.jpg 300w" sizes="auto, (max-width: 388px) 100vw, 388px" /><br />
<a href="http://polar-tor-6216.herokuapp.com/examples/popover.html" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/popover-mockup.jpg" alt="Popover Mockup" width="388" height="290" class="aligncenter size-full wp-image-8883 top" /></a>
</div>
</div>
<div class="two-columns-one">
<h3 style="margin: 1em 0 0; text-align: center;">Expander</h3>
<div class="crossfade">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/expander-prototype.jpg" alt="Expander Prototype" width="388" height="290" class="size-full wp-image-8862" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/09/expander-prototype.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/expander-prototype-300x224.jpg 300w" sizes="auto, (max-width: 388px) 100vw, 388px" /><br />
<a href="http://polar-tor-6216.herokuapp.com/examples/expander.html" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/expander-mockup.jpg" alt="Expander Mockup" width="388" height="290" class="size-full wp-image-8864 top" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/09/expander-mockup.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/expander-mockup-300x224.jpg 300w" sizes="auto, (max-width: 388px) 100vw, 388px" /></a>
</div>
</div>
<div class="divider"></div>
<h2>Getting User Feedback</h2>
<p>Next, I wanted to learn about users’ perceptions of the designs. To get as many people trying out the prototypes as possible, we ran an online survey. Respondents completed basic tasks using all five of the prototypes, as well as the HTML comments version as a baseline, in randomized order. They then rated them and answered a few brief questions.</p>
<p>92 responses were accepted, from 12 females and 80 males. Respondents averaged 25 years of age, ranging from 16 to 52, and representing 16 different countries.</p>
<p>The graph below shows the average ranking given for each design on a scale of 1 to 5. As you can see, Sidebar was most preferred, followed by the similarly conventional Drawer.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsoverall.png" alt="Ratings Overall" width="800" height="500" class="aligncenter size-full wp-image-9041" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsoverall.png 800w, https://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsoverall-300x188.png 300w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Breaking down responses by 17 novices versus 75 experienced coders of HTML, the trends hold for the most part. But Expander is a notable exception, its highly guided interface far more popular with beginners than experts. I should also note that Expander was the most complex design, and its prototype the most rough-around-the-edges, leaving plenty of room for improvement.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsbyexperience.png" alt="Ratings by Experience" width="800" height="500" class="aligncenter size-full wp-image-9040" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsbyexperience.png 800w, https://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsbyexperience-300x188.png 300w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<h2>Implementing Tutorials</h2>
<p>Based on these results, we built the Sidebar design. (For the record, my hunch at the outset was to go with Drawer.)</p>
<p>Basic functionality includes displaying the tutorial in a pane, toggling it into and out of view, toggling between two sizes, and switching between tutorials if multiple ones are associated with a document. You can see the results below. </p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/10/thimbletutorials.png" alt="Thimble Tutorials" width="1456" height="975" class="aligncenter size-full wp-image-8975" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/10/thimbletutorials.png 1456w, https://thomaspark.co/wp/wp-content/uploads/2013/10/thimbletutorials-300x201.png 300w, https://thomaspark.co/wp/wp-content/uploads/2013/10/thimbletutorials-1024x686.png 1024w" sizes="auto, (max-width: 1456px) 100vw, 1456px" /></p>
<p>I also created options to automatically paginate a tutorial and enable a feature dubbed smartlines, which detects line references in the tutorial, turns them into links that highlight the relevant line of code on hover and smooth-scroll to it on click, and updates their line number as the code is edited. The resize button, smooth-scrolling, and moving the tutorial navigation from bottom to top are all a direct result of feedback given in the survey.</p>
<p>One interesting issue in implementing interactive behaviors across tutorial and code editor is that tutorials are displayed in a cross-domain iframe, even when that tutorial is another Thimble make. To overcome this, the tutorials must include a script that communicates with the editor via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage">postMessage</a>.</p>
<p>To implement all this, I had to learn the ropes in many systems, including <a href="https://github.com/mozilla/webmaker-suite">Webmaker Suite</a>, <a href="https://bugzilla.mozilla.org/">Bugzilla</a>, and libraries like <a href="http://requirejs.org/">RequireJS</a> and <a href="http://codemirror.net/">CodeMirror</a>.</p>
<p>The commit is found <a href="https://github.com/mozilla/thimble.webmaker.org/commit/ed516a25ad7beaf2f3c00f7283249c0d8ff0d71d">here on GitHub</a>.</p>
<h2>How to Use Tutorials Today</h2>
<p>As of this week, the tutorials feature is live! To link a tutorial to your own Thimble document, simply tag the document with the following, where the URL points to the tutorial:</p>
<pre>
<code class="markup">tutorial-http://foo.com</code>
</pre>
<p>Essentially any webpage can be used as a tutorial, but we provide a <a href="https://thimble.webmaker.org/projects/tutorial">starter tutorial</a> for you to remix and use. This starter tutorial includes the aforementioned pagination and smartline features. Of course you can always go your own road and build your own tutorials in Thimble, taking HTML, CSS, and JS as far as they will go.</p>
<p>Here’s the <a href="https://support.mozilla.org/en-US/kb/thimble-tutorials">official SuMo article</a> and <a href="https://cynthiang.ca/2013/10/26/webmaker-education-friendly-tutorials-in-thimble/">Cynthia Ng’s excellent walkthrough</a>.</p>
<h2>Tutorials in Action</h2>
<p>Some examples of tutorials:</p>
<ul>
<li><a href="https://thimble.webmaker.org/project/22957/remix">Rainy day</a></li>
<li><a href="https://thimble.webmaker.org/project/22915/remix">Maps and geolocation</a></li>
<li><a href="https://thimble.webmaker.org/project/23585/remix">A todo app</a></li>
<li><a href="https://thimble.webmaker.org/project/21875/remix">Positioning zombies</a></li>
<li><a href="https://thomaspark.makes.org/thimble/tutorial-tutorial/remix">Tutorial on making tutorials</a></li>
<li><a href="https://thimble.webmaker.org/es/project/26537/edit">Tutorial on making tutorials en español</a></li>
</ul>
<h2>Future Directions</h2>
<p>Although the tutorial feature has landed, it’s far from finished. Among the features I hope to see are support for line ranges, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=928793">a more powerful way to associate line references with code</a>, an indicator for when a line is highlighted off-screen, draggable resizing, and state persistence. Line widgets in CodeMirror 3 also pave the way for Expander as an alternative interface.</p>
<p>On the research front, I’ve been looking for an excuse to conduct an eye-tracking study, and the different tutorial interfaces seem ripe for that kind of thing. And lest we forget, learning is a complicated phenomenon, and the survey only scratches the surface by probing first impressions. How the different designs impact understanding remains a wide open question.</p>
<h2>Acknowledgements</h2>
<p>My thanks to the Webmaker team, especially <a href="https://twitter.com/remixmanifesto">Brett Gaylor</a> for giving me the opportunity this summer, <a href="https://twitter.com/cassiemc">Cassie McDaniel</a> for helping get the research rolling, and <a href="https://twitter.com/TheRealPomax">Mike “Pomax” Kamermans</a> for his invaluable code reviews. And thanks to all of you who took the time to complete our survey.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>CRAPCHA: Completely Ridiculous And Phony Captcha that Hassles for Amusement</title>
<link>https://thomaspark.co/2013/04/crapcha-completely-ridiculous-and-phony-captcha-that-hassles-for-amusement/</link>
<comments>https://thomaspark.co/2013/04/crapcha-completely-ridiculous-and-phony-captcha-that-hassles-for-amusement/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 01 Apr 2013 12:08:46 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=8618</guid>
<description><![CDATA[We’ve all run into CAPTCHAs, those annoying registration fields you never get right on the first try. But CAPTCHAs do play a valuable role, keeping spambots out by verifying that you’re a human. On top … <a href="https://thomaspark.co/2013/04/crapcha-completely-ridiculous-and-phony-captcha-that-hassles-for-amusement/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>We’ve all run into <a href="http://en.wikipedia.org/wiki/CAPTCHA">CAPTCHAs</a>, those annoying registration fields you never get right on the first try. But CAPTCHAs do play a valuable role, keeping spambots out by verifying that you’re a human. On top of this, <a href="http://www.google.com/recaptcha">reCAPTCHA</a> serves a greater good, having you digitize old books in the process.</p>
<p>Meet CRAPCHA.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/04/crapcha.png" alt="CRAPCHA" width="395" height="215" class="aligncenter size-full wp-image-8809" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/04/crapcha.png 395w, https://thomaspark.co/wp/wp-content/uploads/2013/04/crapcha-300x163.png 300w" sizes="auto, (max-width: 395px) 100vw, 395px" /></p>
<p>CRAPCHA doesn’t serve a dual purpose. It barely serves a single purpose. And it isn’t to keep spammers out.</p>
<p>What CRAPCHA does is annoy users by presenting a CAPTCHA with indecipherable text. Nothing new so far? Well, CRAPCHA attempts are posted to the CRAPCHA board, providing amusement for all. You can even click on a timestamp to save one for posterity. Try it out for yourself:</p>
<div class="center">
<a class="standard-btn red-btn xlarge-btn" href="https://crapcha.com"><span>CRAPCHA</span></a>
</div>
<h4>Add To Your Site</h4>
<p>If you run a site and want to spring this on your unsuspecting guests, simply copy and paste the following code.</p>
<p><code lang="html4strict"><iframe src="https://crapcha.com/embed/" frameborder="0" scrolling="0" width="300" height="150"></iframe></code></p>
<p>Word of warning, CRAPCHA doesn’t actually validate anything. On the other hand, it’s fun.</p>
<h4>Notes</h4>
<p>CRAPCHAs are created using a mix of weird <a href="http://unicode-table.com/">Unicode</a> and <a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a> characters that have undergone CSS3 transforms.</p>
<p>Attempts are saved and retrieved using the lovely service provided by <del datetime="2018-04-30T15:46:18+00:00"><a href="https://parse.com/">Parse</a></del> <a href="https://firebase.google.com/">Firebase</a>.</p>
<p>You can check out CRAPCHA’s source on <a href="https://github.com/thomaspark/crapcha">Github</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2013/04/crapcha-completely-ridiculous-and-phony-captcha-that-hassles-for-amusement/feed/</wfw:commentRss>
<slash:comments>9</slash:comments>
</item>
<item>
<title>iRoll: Rickrolling with iPhone Web Apps</title>
<link>https://thomaspark.co/2013/03/iroll-rickrolling-with-iphone-web-apps/</link>
<comments>https://thomaspark.co/2013/03/iroll-rickrolling-with-iphone-web-apps/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sun, 31 Mar 2013 18:50:26 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Gadgets]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=8719</guid>
<description><![CDATA[One feature that’s often overlooked in iOS is adding webpages to your homescreen. You even get a nice retina icon if the webpage author designates one. Naturally, my mind went to how this feature could … <a href="https://thomaspark.co/2013/03/iroll-rickrolling-with-iphone-web-apps/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>One feature that’s often overlooked in iOS is adding webpages to your homescreen. You even get a nice retina icon if the webpage author designates one.</p>
<p>Naturally, my mind went to how this feature could be used for a prank: Replace legitimate app with fake. The fake looks exactly the same, but takes you to an annoying video instead. If you’re feeling really cruel, you surround the one real app with a screenful of imposters.</p>
<p>Spot the Instagram that <em>doesn’t</em> take you to a rendition of “Never Gonna Give You Up”.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/03/instagram.png" alt="Instagram" width="640" height="189" class="aligncenter size-full wp-image-8782" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/03/instagram.png 640w, https://thomaspark.co/wp/wp-content/uploads/2013/03/instagram-300x89.png 300w" sizes="auto, (max-width: 640px) 100vw, 640px" /></p>
<p>I started by making a one-off site, but as programmers tend to do, I decided to generalize it. The result is iRoll.</p>
<div class="center">
<a class="standard-btn red-btn xlarge-btn" href="https://thomaspark.co/projects/iroll/"><span>iRoll</span></a>
</div>
<h2>How to Use</h2>
<p>First, choose an app or enter a custom app ID — it uses this to grab any app’s name and icon. To find an app ID, go to the app in iTunes, right-click on the icon to copy the link, and then get the 9-digit number in the URL. For example, the app ID in the link below is 585259203.</p>
<p><code>https://itunes.apple.com/us/app/super-stickman-golf-2/id585259203?mt=8</code></p>
<p>Next, give iRoll a destination URL. This can be a Rick Astley video, a Rick Astley image, or anything else on the web.</p>
<p>Then, open the generated link on the target iPhone or iPad. You can email or manually type the shortened URL, or snap the QR code using a <a href="https://itunes.apple.com/us/app/qr-reader-for-iphone/id368494609?mt=8">QR reader app</a>.</p>
<p>Finally, open the link in Safari and save it to the home screen. In Safari, you’ll find the option by tapping the Send button, which you might have used before to email or tweet a link.</p>
<h2>Let’s Talk Design</h2>
<p>Technically speaking, iRoll is simple. It takes two inputs, app ID and destination URL, and formats a webpage with the app’s title and touch icon, and a redirect to the destination URL.</p>
<p>But <em>using</em> iRoll can be surprisingly complicated task, especially for the average end user. Sit Grandma down, and have her find an app ID, copy a link from her laptop to phone, and add the page to her home screen. See how that plays out.</p>
<p>So how did I design iRoll to simplify the task for users?</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/03/iroll.png" alt="iRoll" width="1335" height="916" class="aligncenter size-full wp-image-8788" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/03/iroll.png 1335w, https://thomaspark.co/wp/wp-content/uploads/2013/03/iroll-300x206.png 300w, https://thomaspark.co/wp/wp-content/uploads/2013/03/iroll-1024x703.png 1024w" sizes="auto, (max-width: 1335px) 100vw, 1335px" /></p>
<h3>Progressive Disclosure</h3>
<p>iRoll takes advantage of <a href="http://en.wikipedia.org/wiki/Progressive_disclosure">progressive disclosure</a>. The task of creating a fake app is presented in simple, discrete steps. As you complete one step, the next comes into view, avoiding the overload that might come with presenting them all at once.</p>
<p>Take advantage of the third dimension. By that I don’t mean the z-axis — which is often ill-advised, but time.</p>
<h3>Sensible Presets</h3>
<p>iRoll’s design started with two input fields, for the app ID and destination URL. Simple! But getting an app ID is fairly involved, from the nonobvious way to copy an app’s link, to visually parsing the 9-digit number from it. On top of that, there’s a great deal of cognitive load in <em>choosing</em> an app.</p>
<p>To address this, iRoll provides a few preset options for both app and URL. They lower the bar to getting started with iRoll, and signal to users how it can be used.</p>
<p>Provide options that cover what you assume to be the “fat head”, while offering freer input for the “long tail”.</p>
<h3>Little Big Details</h3>
<p>Finally, the main use case for iRoll is generating a link on your PC, and then copying it over to your iPhone or iPad. Unfortunately, moving digital data like a URL from one device to another still involves a great deal of friction. Recognizing this, I provided a shortened URL and a QR code.</p>
<p>Look for the <a href="http://littlebigdetails.com/">little touches</a> that can oil the wheels, or simply delight.</p>
<p>It goes to show that what’s initially a simple app to build can morph a great deal once the user experience is taken into consideration.</p>
<h2>Notes</h2>
<p>App names and icons are pulled from Apple’s <a href="http://www.apple.com/itunes/affiliates/resources/documentation/itunes-store-web-service-search-api.html">iTunes Search API</a>.</p>
<p>URLs are shortened using the <a href="http://is.gd/developers.php">is.gd API</a>.</p>
<p>There are a few JavaScript libraries out there for generating QR codes, but <a href="http://hg.mearie.org/qrjs/">qr.js by Kang Seonghoon</a> worked best for me.</p>
<p>Check out the source code on <a href="https://github.com/thomaspark/iroll">GitHub</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2013/03/iroll-rickrolling-with-iphone-web-apps/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Cinnamon.js: Find In-Page Text using Synonyms</title>
<link>https://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/</link>
<comments>https://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 07 Feb 2013 13:14:30 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=8440</guid>
<description><![CDATA[A visitor to your site decides to follow you on Twitter. You have a link in your footer — but their search for “Twitter” comes up empty and they move on. Unfortunately, you named the … <a href="https://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>A visitor to your site decides to follow you on Twitter. You have a link in your footer — but their search for “Twitter” comes up empty and they move on. Unfortunately, you named the link “@username” instead.</p>
<p><a href="https://github.com/thomaspark/cinnamon.js">Cinnamon.js</a> prevents just this situation, taking some of the pain out of naming things. It allows users to find links, images, and other content by their synonyms, using the browser’s built-in Find function.</p>
<h4>Demo</h4>
<p>To see it in action, search this page for “Twitter”, “Spice”, “Email”, or “Contact”.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus orci ut mi laoreet rhoncus. Pellentesque congue urna tincidunt tortor rhoncus dapibus. Duis faucibus dolor a sem ultrices at facilisis risus cursus. Cras vel euismod nisl. Ut vitae risus et libero sagittis ultrices et vitae ligula. Follow me at <a href="https://twitter.com/thomashpark" data-cinnamon="Twitter">@thomashpark</a>. Aliquam at turpis id diam placerat consequat at vitae est. Aenean tellus magna, lacinia vitae facilisis facilisis, egestas ut sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <span data-cinnamon="Email,Contact">Reach</span> me <a href="mailto:[email protected]">here</a>. Donec tincidunt dapibus dui luctus rhoncus. Nam sagittis egestas blandit. Nulla imperdiet tincidunt enim, a tempus sapien volutpat a. Maecenas sed elit ipsum, ut tristique odio. Suspendisse potenti.</p>
<p><span data-cinnamon="Spice"><img decoding="async" src="https://farm4.staticflickr.com/3039/2660995478_fa23f10c6e.jpg" alt="Cinnamon"></span><br />Photo by <a href="https://www.flickr.com/photos/27369469@N08/2660995478/">kobiz7</a></p>
</blockquote>
<h4>Download</h4>
<p>You can download the script or view it on GitHub below.</p>
<div class="center">
<a class="standard-btn red-btn xlarge-btn" href="https://raw.github.com/thomaspark/cinnamon.js/master/cinnamon.min.js"><span>Download</span></a> <a class="standard-btn black-btn xlarge-btn" href="https://github.com/thomaspark/cinnamon.js"><span>GitHub</span></a>
</div>
<h4>Usage</h4>
<p>Add Cinnamon.js just before your body’s end tag. Then wrap your element of choice (span tags are recommended) and give it a data-cinnamon attribute with a comma-separated list of synonyms as its value. If you wrap an image, its alt text will also be used, as in the image above. Cinnamon.js works on modern browsers and IE8+.</p>
<p>Here’s an example:</p>
<pre>
<code lang="html" class="lang-markup"><span data-cinnamon="Azure,Cerulean,Cobalt">Blue</span></code>
</pre>
<h4>Notes</h4>
<p>This is meant to be a proof of concept, and you probably shouldn’t use it in production. <a href="http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353">Hidden text</a>, used deceptively, can be penalized by Google. Precisely what’s counted as deception is anyone’s guess, but there’s a risk that it’s deemed a dirty SEO tactic even if it is not intended as such.</p>
<p>Cinnamon.js doesn’t hurt accessibility; it uses <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden">aria-hidden</a> to tell screen readers to ignore the synonyms.</p>
<p>In the course of testing, one thing I discovered was that Safari handles in-page search quite differently from other browsers. Safari doesn’t search for strings mid-word unless the word uses CamelCase. When highlighting matched text, it ignores certain CSS properties like overflow, opacity, and z-index. Highlighting is semi-disabled by setting -webkit-user-select to none.</p>
<p>Check out the <a href="https://github.com/thomaspark/cinnamon.js/blob/master/cinnamon.js">source</a> to see how it works.</p>
<p>Some questions: Do regular people even use their browser’s Find function? Is the user’s reliance on the Find function a symptom of poor design, or is there room for better in-page search as there has been for site and web search?</p>
<h4>Updates</h4>
<ul>
<li><strong>26 February 2013:</strong> I wrote an article with <a href="http://robertnyman.com/">Robert Nyman</a> about this for <a href="https://hacks.mozilla.org/2013/02/finding-words-by-synonym-with-cinnamon-js/">Mozilla Hacks</a>.
<li><strong>5 March 2013:</strong> <a href="http://www.artiss.co.uk/">David Artiss</a> has packaged Cinnamon.js up as <a href="http://wordpress.org/extend/plugins/cinnamon/">a WordPress plugin</a>.
<li><strong>25 March 2013:</strong> Michael Kutschall is making some promising strides with an empty font approach. He goes into more detail in <a href="http://www.chaotic-good.de/sandbox/cinnamon.php">a blog post</a>.
</ul>
<p><script type="text/javascript" src="https://thomaspark.co/projects/cinnamon.js/cinnamon.js"></script></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/feed/</wfw:commentRss>
<slash:comments>20</slash:comments>
</item>
<item>
<title>Digitizing Books on the Cheap and Easy</title>
<link>https://thomaspark.co/2012/12/digitizing-books-on-the-cheap-and-easy/</link>
<comments>https://thomaspark.co/2012/12/digitizing-books-on-the-cheap-and-easy/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 19 Dec 2012 16:15:41 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=8186</guid>
<description><![CDATA[In 2011, for the first time, Amazon sold more Kindle ebooks than paperbacks. Last June, ebook sales surpassed hardcovers for all of the US. The futurist dream of a paperless world is slowly but surely … <a href="https://thomaspark.co/2012/12/digitizing-books-on-the-cheap-and-easy/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>In 2011, for the first time, Amazon sold more Kindle ebooks than paperbacks. Last June, ebook sales surpassed hardcovers for all of the US. The futurist dream of a paperless world is slowly but surely becoming reality.</p>
<p>With books, there are downsides to going digital, but perhaps the greatest upside is that they become omnipresent. You can load up <em>all</em> your books on <em>all</em> your devices. A thousand ebooks weigh the same and take up the same physical space as one. Anyone who’s dealt with textbooks or moved recently will attest to the value in that.</p>
<p>Unfortunately, not all books are available in digital format, and may never be. And you’ve got all these expensive books already sitting on the shelf. You could DIY and build your own book scanner (costing anywhere from <a href="http://www.instructables.com/id/DIY-High-Speed-Book-Scanner-from-Trash-and-Cheap-C/?ALLSTEPS">$300</a> to <a href="http://www.theverge.com/2012/11/13/3639016/google-books-scanner-vacuum-diy">$1,500</a>), but is there an easier way?</p>
<h4>At Your Service</h4>
<p>Enter <a href="http://1dollarscan.com/">1DollarScan</a>. As their name suggests, books can be scanned for as little as $1. How it works is that you mail them your book, and they scan it and send it back as a PDF.</p>
<p>This is a destructive process, where the book spine is cut off to improve and expedite scanning. In other words, you won’t be seeing your book again. If that’s a dealbreaker, there are <a href="http://www.blueleaf-book-scanning.com/">services offering a non-destructive option</a>, but expect to pay a premium.</p>
<p>Pricing is $1 per 100-page “set”. Options include OCR for $1 per set, high resolution (600 dpi) for $2 per set, and touch-up such as angle correction and compression for $2 per set. There’s also a free automated feature called Fine Tune that optimizes scans for target devices like the iPhone, iPad, Kindle, and Nook.</p>
<h4>A First Pass</h4>
<p>I have several books I’d like to digitize, but started with <a href="http://www.amazon.com/Interaction-Design-Beyond-Human-Computer/dp/0470665769/">Interaction Design: Beyond Human-Computer Interaction</a>. It’s a book I use at regular but infrequent intervals, weighs in at a hefty 3 pounds and 600 pages, and for which an official ebook is not available. This makes it a prime candidate.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-book.jpg" alt="Interaction Design book" width="960" height="640" class="aligncenter size-full wp-image-8418" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-book.jpg 960w, https://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-book-300x200.jpg 300w" sizes="auto, (max-width: 960px) 100vw, 960px" /></p>
<h6>Quality</h6>
<p>Here’s how the scan turned out. The <a href="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-1dollarscan.pdf">PDF</a> shows exactly how it looks. As you can see, it’s very good quality. My only criticisms are that the scan is slightly askew, and the text is fainter than I’d like it to be (possibly due to the slightly glossy finish of the pages). There’s the touch-up option that promises to be even better, but I was satisfied without it.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-1dollarscan.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-1dollarscan-701x960.png" alt="Interaction Design - 1DollarScan" width="700" height="960" class="aligncenter size-large wp-image-8338 border" /></a></p>
<p>Just for fun, here’s what you get with <a href="http://books.google.com/books?id=b-v_6BeCwwQC&printsec=frontcover&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false">Google Books</a>, who does their own scanning:</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-googlebooks.jpg"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-googlebooks-754x960.jpg" alt="Interaction Design - Google Books" width="700" height="891" class="aligncenter size-large wp-image-8343 border" /></a></p>
<p>And the scan of the 2nd edition I was working with before:</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-manual.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-manual-743x960.png" alt="interactiondesign-manual" width="743" height="960" class="aligncenter size-large wp-image-8347" /></a></p>
<h6>OCR</h6>
<p>OCR is key for being able to search within a book and copy text out of it. I sprang for the option so I could compare their job (top) with my own using Adobe Acrobat Pro 8 (bottom). Both do an excellent job, with only an extraneous space added in the header by Acrobat. However, notice that 1DollarScan’s OCR leaves hyphenation as is, while Acrobat joins each word together. This gives Acrobat the edge in finding these words in a text search.</p>
<blockquote>
<pre>
11.7.1 Design Patterns for Interaction Design
Design patterns capture experience, but they have a different structure and a different phi-
losophy from other forms of guidance or specific methods. One of the intentions of the pat-
terns community is to create a vocabulary, based on the names of the patterns, that designers
can use to communicate with one another and with users. Another is to produce a literature
in the field that documents experience in a compelling form.
The idea of patterns was first proposed by Christopher Alexander, a British architect
who described patterns in architecture. His hope was to capture the 'quality without a name'
that is recognizable in something when you know it is good.
</pre>
</blockquote>
<blockquote>
<pre>
11.<span style="color: red;"> 7</span>.1 Design Patterns for Interaction Design
Design patterns capture experience, but they have a different structure and a different philosophy
from other forms of guidance or specific methods. One of the intentions of the patterns
community is to create a vocabulary, based on the names of the patterns, that designers
can use to communicate with one another and with users. Another is to produce a literature
in the field that documents experience in a compelling form.
The idea of patterns was first proposed by Christopher Alexander, a British architect
who described patterns in architecture. His hope was to capture the 'quality without a name'
that is recognizable in something when you know it is good.
</pre>
</blockquote>
<p>Here’s another comparison of 1DollarScan’s OCR (top) with Acrobat Pro’s (bottom), for a different font. They make the same four errors.</p>
<blockquote>
<pre>
Figure 11.23 The LilyPad Arduino kit. <span style="color: red;">l</span>t comprises sensors, actuator boards, and conductive threa<span style="color: red;">o</span>.
Online tutorials are available that enable anyone to build their own (see web.media.mit.edu/<span style="color: red;">-</span>leah/
LilyPad/build/turn_signaljacket.<span style="color: red;"> h</span>tml)
</pre>
</blockquote>
<blockquote>
<pre>
Figure 11.23 The LilyPad Arduino kit. <span style="color: red;">l</span>t comprises sensors, actuator boards, and conductive threa<span style="color: red;">o</span>.
Online tutorials are available that enable anyone to build their own (see web.media.mit.edu/<span style="color: red;">-</span>leah/
LilyPad/build/turn_signaljacket.<span style="color: red;"> h</span>tml)
</pre>
</blockquote>
<p>My advice is to skip the OCR option and run it yourself if you have a program for it.</p>
<h6>Fine Tune</h6>
<p>Fine Tune is a free service offered by 1DollarScan that targets specific devices through compression, margin removal, resolution optimization, and character optimization. The original scan comes in at 332 MB, compared to the iPad at 88 MB, iPhone at 63 MB, and Kindle at 30 MB. The iPad-optimized version looks pretty close to the original. On other devices, there are more substantial changes.</p>
<p>Here’s a comparison for the iPhone, with the original on the left and the fine-tuned version on the right. The margins, including running headers and page numbers, have been cropped out. It doesn’t account for the iPhone 5’s larger screen yet however.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-iphone.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-iphone-280x600.png" alt="Interaction Design - iPhone" width="280" height="600" class="aligncenter size-medium wp-image-8384" /></a></p>
<p>And here’s a comparison for the Kindle Touch.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-kindle.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-kindle-470x600.png" alt="Interaction Design - Kindle" width="470" height="600" class="aligncenter size-medium wp-image-8385" /></a></p>
<p>It’s a tough call. The optimized version has a smaller file size and makes better use of screen real estate, but there is noticeable artifacting and distortion. Since it’s free, you can try both out and decide for yourself.</p>
<h6>Price</h6>
<p>With 6 sets and the OCR option, the total came to $12. Shipping via media mail tacked on $3. Not one dollar by any means, but not costly either. And by far the cheapest book scanning service out there. For a 200-page book without OCR, you’re looking at about $4 including shipping.</p>
<h6>Turnaround</h6>
<p>1DollarScan is located in California. With media mail, it took 8 days for the book to reach them from Philadelphia. Once it arrived, turnaround was a single day.</p>
<h6>Legality</h6>
<p>Scanning a book you have legally acquired for personal usage would appear to fall under fair use, just the same as ripping a CD you’ve bought. 1DollarScan requires you to include <a href="http://1dollarscan.com/pdf/user_agreement.pdf">a signed agreement form</a> with the book declaring the same.</p>
<h4>Parting Thoughts</h4>
<p>For certain books, there’s no substitute for touch of the printed page. But for most, the convenience of an ebook trumps all. And as the technology and design of ebooks marches forward, while publishers use cheaper and cheaper materials for print, this will increasingly be the case.</p>
<p>If you’re considering digitization, <a href="http://1dollarscan.com/">1DollarScan</a> is a good choice. In fact, I’ve got a few more books on the shelf that I intend to get scanned in the near future.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-ipad.jpg" alt="Interaction Design iPad" width="960" height="640" class="aligncenter size-full wp-image-8419" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-ipad.jpg 960w, https://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-ipad-300x200.jpg 300w" sizes="auto, (max-width: 960px) 100vw, 960px" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/12/digitizing-books-on-the-cheap-and-easy/feed/</wfw:commentRss>
<slash:comments>19</slash:comments>
</item>
<item>
<title>The iTunes Expanding Album Effect</title>
<link>https://thomaspark.co/2012/12/the-itunes-expanding-album-effect-in-css-js/</link>
<comments>https://thomaspark.co/2012/12/the-itunes-expanding-album-effect-in-css-js/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 12 Dec 2012 12:56:35 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=8078</guid>
<description><![CDATA[iTunes 11 marks a significant departure from previous versions. While many of the changes are problematic (another post for another time), I want to focus on one positive: the expanding album effect. Similar to folders … <a href="https://thomaspark.co/2012/12/the-itunes-expanding-album-effect-in-css-js/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>iTunes 11 marks a significant departure from previous versions. While many of the changes are problematic (another post for another time), I want to focus on one positive: the expanding album effect.</p>
<p>Similar to folders in iOS, this effect lets users to scan a list of items and open one up in place. This has advantages over more traditional pop-up windows and mode changes, which can obscure content and cause the user to lose their place in the list.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/itunes11.png" alt="iTunes 11" width="960" height="854" class="aligncenter size-full wp-image-8079" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/12/itunes11.png 960w, https://thomaspark.co/wp/wp-content/uploads/2012/12/itunes11-300x267.png 300w" sizes="auto, (max-width: 960px) 100vw, 960px" /></p>
<p>A second aspect of this feature is that it uses content to enhance the chrome. In the detailed view, the background and text colors are generated algorithmically from album art. This not only serves a practical purpose in making the detailed view stand out from the list, but creates a nice (in most cases) aesthetic effect and a sense of feeling that differentiates one album from the next. The intrepid Seth Thompson and Wade Cosgrove have already recreated this, using <a href="http://stackoverflow.com/questions/13637892/how-does-the-algorithm-to-color-the-song-list-in-itunes-11-work">Mathematica</a> and <a href="http://www.panic.com/blog/2012/12/itunes-11-and-colors/">Cocoa</a> respectively. Apple’s algorithm, it turns out, is pretty sophisticated.</p>
<p>Here’s my take, using HTML, CSS, and Javascript.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/expandingalbums.png" alt="Expanding Albums Demo" width="1159" height="918" class="aligncenter size-full wp-image-8133" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/12/expandingalbums.png 1159w, https://thomaspark.co/wp/wp-content/uploads/2012/12/expandingalbums-300x238.png 300w, https://thomaspark.co/wp/wp-content/uploads/2012/12/expandingalbums-1024x811.png 1024w" sizes="auto, (max-width: 1159px) 100vw, 1159px" /></p>
<p>And you can check it out for yourself here:</p>
<div class="center"><a class="standard-btn red-btn xlarge-btn" href="https://thomaspark.co/projects/expandingalbums/"><span>Demo</span></a></div>
<h4>Details</h4>
<p>The demo is built with <a href="http://app-folders.com/">App Folders</a>, with behavior and style modified to mimic iTunes. <a href="http://lokeshdhakar.com/projects/color-thief/">Color Thief</a> is used to derive colors on-the-fly from album art using a median cut algorithm. On top of this, I selected colors for acceptable contrast by converting RGB to YIQ, a color space that <a href="http://24ways.org/2010/calculating-color-contrast/">better reflects human perceptions</a>. Last but not least, <a href="http://mustache.github.com/">Mustache</a> is used to pull album data from a JSON file into templates.</p>
<p>I got to play with several exciting HTML5 and CSS3 properties in making this demo, including <a href="http://www.quirksmode.org/css/textoverflow.html">text-overflow</a>, <a href="http://www.quirksmode.org/css/multicolumn.html">multi-columns</a>, <a href="http://www.quirksmode.org/css/transitions.html">transitions</a>, <a href="http://www.quirksmode.org/css/animations.html">animations</a>, and canvas. Unfortunately, this means the demo requires a modern browser. The future can’t come fast enough.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/12/the-itunes-expanding-album-effect-in-css-js/feed/</wfw:commentRss>
<slash:comments>49</slash:comments>
</item>
<item>
<title>The Hacker News Slap</title>
<link>https://thomaspark.co/2012/10/the-hacker-news-slap/</link>
<comments>https://thomaspark.co/2012/10/the-hacker-news-slap/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sat, 20 Oct 2012 17:11:33 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=7678</guid>
<description><![CDATA[For those who aren’t familiar, Hacker News is a popular site where a community of techies discuss a wide range of topics. According to HN’s guidelines, on-topic submissions are “[a]nything that good hackers would find … <a href="https://thomaspark.co/2012/10/the-hacker-news-slap/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>For those who aren’t familiar, <a href="http://news.ycombinator.com/news">Hacker News</a> is a popular site where a community of techies discuss a wide range of topics. According to HN’s guidelines, on-topic submissions are “[a]nything that good hackers would find interesting. That includes more than hacking and startups. If you had to reduce it to a sentence, the answer might be: anything that gratifies one’s intellectual curiosity.”</p>
<p><span id="more-7678"></span>Getting your content on the HN front page can be <a href="http://swombat.com/2011/1/13/how-to-get-your-startup-on-hacker-news">a big deal</a>, a fact that hasn’t escaped spammers. To keep them at bay and maintain the quality of the site, moderators have had to be quite active. And whether you’re in agreement with it or not, it’s fair to say that they’ve operated opaquely, from <a href="https://jcs.org/notaweblog/2012/06/13/hellbanned_from_hacker_news/">hellbans</a> to <a href="http://techzinglive.com/page/1023/178-tz-discussion-the-hacker-news-slap">the slap</a> — where a submission rises to the front page, and just as quickly vanishes from it.</p>
<p>Mods can kill a submission and instantly send it into oblivion. But more marginal submissions can also be flagged by mods or users for being off topic, low-content fluff, spammy, or otherwise poor quality — or perfectly valid submissions by those who disagree with it. This can even happen to articles occupying the coveted top spot, with plenty of points and a lively discussion. If enough mods and users flag it, it’ll quietly slip down the rankings and off the front page.</p>
<p>From the perspective of the community, these are silent failures. They’re a missed opportunity to learn how the flag feature is being used and what content the community does (or more to the point, does not) value. If you’ve been visiting HN for awhile, you might feel that you’ve already developed a sense for how things work. But <a href="http://blog.rjmetrics.com/surprising-hacker-news-data-analysis/">as a recent analysis of HN shows</a>, the reality can surprise you.</p>
<h4>A User Script</h4>
<p>I wrote a <a href="http://userscripts.org/scripts/show/150452">user script</a> that highlights the submissions that have been on the receiving end of the slap. The script inserts scores based on the <a href="http://amix.dk/blog/post/19574">HN ranking algorithm</a>, a function of each submission’s points and age. Submissions ranked below others with half their score are highlighted in red; a rough heuristic but definitely indicative of being slapped down. Weaker candidates are highlighted in orange; while they may have penalized, it could also be explained by the algorithm being out-of-date or incomplete (it is).</p>
<p>The script also works on the <a href="http://www.domador.net/extras/services/hourly-hn-snapshot/">Hourly HN Snapshot archive</a>. Try it out on past frontpages, like <a href="http://hhn.domador.net/2011/10/27/10/">October 27, 2011</a>.</p>
<h4>Installation</h4>
<p>You can get the script here: <a href="http://userscripts.org/scripts/show/150452">http://userscripts.org/scripts/show/150452</a>.</p>
<p>Install it in Chrome either by downloading the file and dragging it into the Extensions tab (sadly, user scripts can no longer be installed directly), or through the extension <a href="https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo">Tampermonkey</a>. Firefox users can install through <a href="https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/">Greasemonkey</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/10/hn.png" alt="" title="Hacker News" width="727" height="521" class="alignnone size-full wp-image-7711" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/10/hn.png 727w, https://thomaspark.co/wp/wp-content/uploads/2012/10/hn-300x215.png 300w" sizes="auto, (max-width: 727px) 100vw, 727px" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/10/the-hacker-news-slap/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
<item>
<title>Learning to Code from Play by Play</title>
<link>https://thomaspark.co/2012/08/learning-to-code-from-play-by-play/</link>
<comments>https://thomaspark.co/2012/08/learning-to-code-from-play-by-play/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sun, 12 Aug 2012 19:17:03 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Learning]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=7489</guid>
<description><![CDATA[It’s a great time to learn to code. It seems as long as there’s been the web, there’s been text tutorials on coding. But now we’re seeing the rise of lecture videos (see iTunes U), … <a href="https://thomaspark.co/2012/08/learning-to-code-from-play-by-play/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>It’s a great time to learn to code.</p>
<p>It seems as long as there’s been the web, there’s been text tutorials on coding. But now we’re seeing the rise of lecture videos (see <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewTop?genreId=40000009&id=29666&popId=65" target="_blank">iTunes U</a>), massive open online courses (see <a href="https://www.coursera.org/" target="_blank">Coursera</a>), and interactive tutorials (see <a href="http://www.codecademy.com/" target="_blank">Codecademy</a>). I’ve sampled them all, but what’s hooked me lately is watching pros at work — most recently 37signals designer Ryan Singer as he <a href="https://peepcode.com/products/ryan-singer-ii" target="_blank">designs and prototypes a UI</a>.</p>
<p><span id="more-7489"></span>Aside from the satisfaction of watching a master of his craft, these videos offer learning opportunities that would be edited out in more structured tutorials and polished lectures. Here are a few things I picked up from the screencast, things I wouldn’t have gotten from other sources on the subject.</p>
<h4>Taking in the Environment</h4>
<p>Many tutorials skip over the tools, provide their own simplified version, or go with the standard and most widely used. And this may well be the right approach for beginners. But for those with a bit more experience, it can be both fascinating and instructive to peer into the environments that developers have shaped to their needs and idiosyncrasies.</p>
<ul>
<li>Ryan carries out the screencast on his own machine (or at least his loaner). For prototyping, he uses Rails to take advantage of SCSS and templates, along with the hassle-free dev server <a href="http://pow.cx/" target="_blank">Pow</a>.</li>
</ul>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/08/environment.png" alt="" title="Pow" width="1000" height="600" class="alignnone size-full wp-image-7628" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/08/environment.png 1000w, https://thomaspark.co/wp/wp-content/uploads/2012/08/environment-300x180.png 300w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /></p>
<h4>Tricks of the Trade</h4>
<p>While small tricks make good blog fodder, tutorials usually don’t leave room for them. Screencasts bring them to life, set in a greater context.</p>
<ul>
<li>Ryan would switch from code editor to Photoshop depending on what he wanted to mockup. On his Mac, he copied the browser window directly to clipboard a la Windows. I was familiar with <strong>command-shift-3</strong> to save a screenshot to file and <strong>command-shift-4</strong> to save a region, but didn’t know you could skip the file by adding <strong>control</strong> to each key combo.</li>
<li>In Photoshop, he experimented with the width of elements by selecting an edge, holding down <strong>command-option-shift</strong>, and then arrowing in the direction he wanted the element to expand. Another must-know for designers.</li>
</ul>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/08/photoshop.png" alt="" title="Photoshop" width="1000" height="600" class="alignnone size-full wp-image-7631" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/08/photoshop.png 1000w, https://thomaspark.co/wp/wp-content/uploads/2012/08/photoshop-300x180.png 300w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /></p>
<h4>Resolving Issues</h4>
<p>Screencasts often center on ill-defined problems that are rife with unanticipated issues. These issues can make for teachable moments in how to troubleshoot and resolve them effectively.</p>
<ul>
<li>At one point, Ryan wasn’t happy with where the header was breaking into two lines, but wanted to avoid a break tag if possible. The facilitator mentioned the <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/wbr" target="_blank">HTML5 word break opportunity element</a>, which neither Ryan or I were familiar with before.</li>
</ul>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/08/linebreak.png" alt="" title="Line break" width="1000" height="600" class="alignnone size-full wp-image-7632" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/08/linebreak.png 1000w, https://thomaspark.co/wp/wp-content/uploads/2012/08/linebreak-300x180.png 300w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /></p>
<h4>As an Aside</h4>
<p>Given airtime, most pros will inevitably expound on some higher level-issues about the field or community. In measured doses, these asides can be thought-provoking and reveal the bigger picture.</p>
<ul>
<li>Ryan discusses patterns for marking up sections like the one below. Do you tightly wrap the section content, or include the section header so the whole section is neatly encapsulated? He proposes a solution that’s sometimes used at 37signals, but explains that a good pattern hasn’t really been established yet.</li>
<li>A few minutes later, he talks about the semantic baggage that ordered and unordered lists bring compared to divs.</li>
</ul>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/08/markup.png" alt="" title="Markup" width="1000" height="600" class="alignnone size-full wp-image-7633" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/08/markup.png 1000w, https://thomaspark.co/wp/wp-content/uploads/2012/08/markup-300x180.png 300w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /></p>
<h4>Conclusion</h4>
<p>I hope we see more of these videos of designers and developers in action. With so many people relying on online learning and parlaying that into professional work that might also be remote, these videos help recover some of the tacit knowledge that’s been lost in other, more refined resources.</p>
<p>If you haven’t already, check out previews for the rest of PeepCode’s <a href="https://peepcode.com/screencasts/play-by-play" target="_blank">Play by Play series</a>. Minecraft-creator <a href="http://www.mrspeaker.net/2011/09/27/notch-on-film" target="_blank">Notch’s marathon livestreams</a> are an epiphany, and Chris Coyier’s <a href="http://www.kickstarter.com/projects/150422311/screencasting-a-complete-redesign" target="_blank">redesign of CSS Tricks</a>, which has been successfully funded on Kickstarter, is another one to look forward to.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/08/learning-to-code-from-play-by-play/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>Apple Storefronts Redux</title>
<link>https://thomaspark.co/2012/07/apple-storefronts-redux/</link>
<comments>https://thomaspark.co/2012/07/apple-storefronts-redux/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 10 Jul 2012 02:37:06 +0000</pubDate>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=7095</guid>
<description><![CDATA[Last year, I posted a gallery of every Apple Store ever. It was a quick and dirty project, made on a whim. But it eventually took on a life of its own, getting coverage from … <a href="https://thomaspark.co/2012/07/apple-storefronts-redux/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Last year, I posted <a href="http://thomaspark.co/2011/11/every-apple-storefront/">a gallery of every Apple Store ever</a>. It was a quick and dirty project, made on a whim. But it eventually took on a life of its own, getting coverage from such heavyweights as <a href="http://www.macrumors.com/2011/11/09/gallery-of-storefront-photos-from-apples-357-retail-stores/" target="_blank">MacRumors</a>, <a href="http://gizmodo.com/5858264/every-single-apple-store-on-the-planet-in-under-60-seconds" target="_blank">Gizmodo</a>, and <a href="http://techland.time.com/2011/11/10/check-out-every-apple-store-ever-opened-in-order/" target="_blank">Time</a> (in that order).</p>
<p><span id="more-7095"></span> If I knew so many eyeballs would be on it, I’d have spent more time getting things right. It looked nice enough, but I knew that it didn’t work right. After that initial wave of attention subsided however, I decided to leave well enough alone, apart from adding the odd new store. It was a side project after all.</p>
<p>And that went fine, until <a href="http://www.ifoapplestore.com/db/retail-web-pages-revised-2012/" target="_blank">Apple revised their site with high-resolution images</a>. Now the images were larger and cropped wider, meaning new stores no longer fit with the rest. So I started digging into Apple Storefronts again last week. At first, it was just to update it with the new images. But then I couldn’t help myself, and it snowballed into more.</p>
<h4>More Changes</h4>
<p>With the new, larger images, you see the trees more so than the forest. To address this, I added a toggle between two sizes, as well as a toggle for the labels.</p>
<p>In addition to the old country and state filters, you can filter by year now, and sort by oldest or newest. And these views are mapped to different URLs, meaning you can save and share them.</p>
<p>Then there’s the interface. I wanted the site to work better on mobile, so I adopted as my framework the tried-and-true <a href="http://twitter.github.com/bootstrap/" target="_blank">Bootstrap</a>. This also allowed me to use the Slate theme I created on <a href="http://bootswatch.com/" target="_blank">Bootswatch</a> for the visual design.</p>
<p>The new features forced other interface changes. The old navbar was overloaded with links, and now I needed to make room for more. Where to put it all, especially on mobile? My solution was to move primary filters to a drop-down menu, but keep secondary filters out. Instead, they can be accessed by clicking a particular state or year on a label.</p>
<p>Lastly, there’s been a host of performance improvements and a streamlined update process, thanks to <a href="https://developers.google.com/appengine/" target="_blank">Google App Engine</a> and Django’s templating system.</p>
<p>So tweaked images… and then all this: version 2.0 of <a href="http://applestorefronts.appspot.com" target="_blank">Apple Storefronts</a>.</p>
<p><a href="http://applestorefronts.appspot.com" target="_blank"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/07/applestorefronts2.png" alt="" title="Apple Storefronts 2" width="555" height="385" class="aligncenter size-full wp-image-7255 margin-small" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/07/applestorefronts2.png 555w, https://thomaspark.co/wp/wp-content/uploads/2012/07/applestorefronts2-300x208.png 300w" sizes="auto, (max-width: 555px) 100vw, 555px" /></a></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/07/apple-storefronts-redux/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>Introducing Bootswatch</title>
<link>https://thomaspark.co/2012/02/introducing-bootswatch/</link>
<comments>https://thomaspark.co/2012/02/introducing-bootswatch/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 14 Feb 2012 21:39:57 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=6909</guid>
<description><![CDATA[Although I spilled the beans in an interview yesterday, I wanted to formally announce a personal project called Bootswatch. It’s a collection of themed swatches that you can download for free and drop into your … <a href="https://thomaspark.co/2012/02/introducing-bootswatch/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Although I spilled the beans in <a target="_blank" href="http://www.domain.me/blog/thomas-park-3691">an interview yesterday</a>, I wanted to formally announce a personal project called <strong>Bootswatch</strong>. It’s a collection of themed swatches that you can download for free and drop into your Bootstrap site. You can check it out at <a target="_blank" onclick="pageTracker._link(this.href); return false;" href="http://bootswatch.com">bootswatch.com</a>.</p>
<p><span id="more-6909"></span></p>
<h4>What’s Bootstrap Again?</h4>
<p><a target="_blank" href="http://twitter.github.com/bootstrap/">Bootstrap</a> is a popular web framework made by some talented people at Twitter. It allows even the most time-constrained and design-impaired to create nice-looking sites.</p>
<p>As more and more sites adopt Bootstrap though, a growing issue is the uniformity between them. You might already recognize the signature black bar and blue buttons. Here are a few examples, taken from <a href="http://builtwithbootstrap.com/" target="_blank">Built with Bootstrap</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/02/bwbootstrap.png" alt="" title="Built with Bootstrap" width="600" height="407" class="aligncenter size-full wp-image-7004 paddedLarger bordered" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/02/bwbootstrap.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/02/bwbootstrap-300x204.png 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p>My goal with Bootswatch is to enable developers using Bootstrap to try on a new look, without investing much time or energy. The best thing about it is that it doesn’t significantly alter your code or your workflow. </p>
<h4>So how do I use Bootswatch?</h4>
<p>First, head over to <a target="_blank" onclick="pageTracker._link(this.href); return false;" href="http://bootswatch.com">Bootswatch</a> and pick a swatch. Download the bootswatch.min.css file associated with it.</p>
<p>In Bootstrap’s CSS directory, you’ll find a stylesheet in full (bootstrap.css) and minified (bootstrap.min.css) forms. Rename them or move them to a safe place. Then drop in the new CSS file and check that your HTML points to it. If you ever change your mind, simply drop in another swatch or switch back to the original.</p>
<h4>What if I want to extend Bootswatch?</h4>
<p>Bootswatch is an open source project, and you’re welcome to modify the swatches further or create your own. If you’re interested, fork or follow the <a href="https://github.com/thomaspark/bootswatch" target="_blank">GitHub repository</a>.</p>
<p>Each raw swatch consists of two <a href="http://lesscss.org/" target="_blank">LESS</a> files. One is variables.less, which is included by default in Bootstrap and allows you to customize <a href="http://twitter.github.com/bootstrap/less.html#variables" target="_blank">these settings</a>. The other is a new file called bootswatch.less that introduces more extensive changes. </p>
<p>First, add these two files to <a href="https://github.com/twitter/bootstrap/" target="_blank">Bootstrap’s own LESS files</a>. You’ll be overwriting the default variables.less.</p>
<p>Next, open up bootstrap.less and just before the line “Utility classes” at the end, add <code class="language-css" lang="text">@import "bootswatch.less";</code>. This command includes bootswatch.less when compiling the LESS files to CSS, and placing it near the end overrides earlier styles with the same <a href="http://www.w3.org/TR/CSS2/cascade.html#specificity" target="_blank">CSS selector specificity</a>.</p>
<p>Now you can start customizing variables.less and bootswatch.less. You are also free to modify the other LESS files, which in some cases will be easier, but your swatch may become brittle to future changes in Bootstrap itself. When you’re ready to test your code, <a href="http://twitter.github.com/bootstrap/less.html#compiling" target="_blank">compile to CSS</a> and enjoy!</p>
<h4>Update</h4>
<p>Check out my article on Smashing Magazine about <a href="http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/">Customizing Bootstrap</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/02/introducing-bootswatch/feed/</wfw:commentRss>
<slash:comments>38</slash:comments>
</item>
<item>
<title>Startups, Dotcoms, and Other TLDs</title>
<link>https://thomaspark.co/2012/02/startups-dotcoms-and-other-tlds/</link>
<comments>https://thomaspark.co/2012/02/startups-dotcoms-and-other-tlds/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 01 Feb 2012 15:08:16 +0000</pubDate>
<category><![CDATA[Data]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=6732</guid>
<description><![CDATA[I recently spent way too much time trying to find a domain for a project. Every good .com, and even most of the terrible ones, had long been claimed by squatters. This got me to … <a href="https://thomaspark.co/2012/02/startups-dotcoms-and-other-tlds/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I recently spent way too much time trying to find a domain for a project. Every good .com, and even most of the terrible ones, had long been claimed by squatters.</p>
<p>This got me to wonder how startups are dealing with this. From reading the news, it seems as though more and more are going with alternative TLDs like .me and .us. Many are even using <a target="_blank" href="http://en.wikipedia.org/wiki/Domain_hack" rel="noopener">domain hacks</a> to turn this weakness into a strength. Are we reaching a tipping point with alternative TLDs, given their increasing visibility and viability?</p>
<p><span id="more-6732"></span> To find out, I went to <a target="_blank" href="http://www.crunchbase.com/" rel="noopener">CrunchBase</a> and collected the domains of 1,000 companies founded in each year from 2005 to 2011<sup class='footnote'><a href='#fn-6732-1' id='fnref-6732-1' onclick='return fdfootnote_show(6732)'>1</a></sup>. Of course there are other factors at play in this sample, but it’s a fairly good way to uncover domain trends in the startup world.</p>
<p>What I found was that .com (in blue below) dominates, same as it ever has. The recognizability and prestige of .com is a powerful, self-perpetuating thing. For the past seven years, it’s hovered at 85 percent with little sign of dropping. About 50 other TLDs nibble on the leftover slice of pie. Mouse over the graph for more details.</p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" width="600" height="350" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkXMXPqHS7NAdGhZdUNoY2VfSHVTTEYwQzBYbERhNFE&single=true&gid=2&output=html&widget=false" class="iframe-class"></iframe>
<p>Have startups been using the B-list TLDs, .net and .org? Only a bit. About 2 percent of startups use each, although while .org is finding a niche with NGOs and the like, .net may be falling out of vogue (relatively speaking) in recent years. </p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" width="600" height="350" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkXMXPqHS7NAdGhZdUNoY2VfSHVTTEYwQzBYbERhNFE&single=true&gid=3&output=html&widget=false" class="iframe-class"></iframe>
<p>And here’s a closer look at an assortment of TLDs that seem to be popular with startups. Ironically but perhaps unsurprisingly, .biz is a flop, while .me, .io, and .co enjoy upticks in the last year. It remains to be seen if this is part of a larger trend.</p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" width="600" height="350" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkXMXPqHS7NAdGhZdUNoY2VfSHVTTEYwQzBYbERhNFE&single=true&gid=4&output=html&widget=false" class="iframe-class"></iframe>
<p>For startups, one strategy might be to grab an alternative domain cheaply to start with, and to acquire the .com version when you get funded down the line. But with alternative TLDs hardly making a dent, it’s evident that having a .com is a priority right from the start, and that they’re perhaps willing to compromise their name to ensure that they land one.</p>
<p>Despite the crowding on .com, it turns out that domain names aren’t getting any longer. Here’s a graph showing that there’s even a slight decrease in the number of characters since 2009.</p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" width="600" height="350" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkXMXPqHS7NAdGhZdUNoY2VfSHVTTEYwQzBYbERhNFE&single=true&gid=5&output=html&widget=false" class="iframe-class"></iframe>
<p>To keep domain names short, there’s certainly much of the same creativity with naming startups today as <a href="http://messymatters.com/pgnames" target="_blank" rel="noopener">Paul Graham noted back in 2006</a>. And despite the influx of alternative TLDs, startups are, for the time being, still dotcoms.</p>
<div class='footnotes' id='footnotes-6732'>
<div class='footnotedivider'></div>
<ol>
<li id='fn-6732-1'> For the list, and a brief trip down memory lane, here’s the <a href="http://thomaspark.co/wp/wp-content/uploads/2012/02/domains.csv" target="_blank" rel="noopener">CSV</a>. <span class='footnotereverse'><a href='#fnref-6732-1'>↩</a></span></li>
</ol>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/02/startups-dotcoms-and-other-tlds/feed/</wfw:commentRss>
<slash:comments>7</slash:comments>
</item>
<item>
<title>Better Badges on Netflix</title>
<link>https://thomaspark.co/2012/01/better-badges-on-netflix/</link>
<comments>https://thomaspark.co/2012/01/better-badges-on-netflix/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 17 Jan 2012 23:04:02 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=6585</guid>
<description><![CDATA[Today our attention is divided among many apps on many devices, networked and constantly updating. Given this, status badges are used more than ever to help users maintain awareness. They’re used everywhere from operating systems … <a href="https://thomaspark.co/2012/01/better-badges-on-netflix/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Today our attention is divided among many apps on many devices, networked and constantly updating. Given this, status badges are used more than ever to help users maintain awareness. They’re used everywhere from operating systems to applications to websites, to varying degrees of success.</p>
<p>What makes a badge well-designed is that it communicate a bit of timely information in a punchy way. This is accomplished through consistency and contrast. Consistency helps users to recognize a badge by sticking with a standard look and position. Contrast helps users to notice a badge by choosing a color and shape that stands out from the content.</p>
<p><span id="more-6585"></span> Facebook is one example that achieves both consistency and contrast, though they have it relatively easy. Given the monochromatic context, nearly any splash of color will do.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/facebook.png" alt="" title="Facebook" width="600" height="40" class="aligncenter size-full wp-image-6693 paddedLarge" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/facebook.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/facebook-300x20.png 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p>Apple and Netflix have a tougher job because their badges are applied to wildly varying content. In iOS, Apple overcomes this in two ways. First, they give the badge a drop shadow and border that contrasts with the badge itself, making it stand out whether it’s applied to an icon that’s dark, light, or nearly any combination of colors. Second, Apple offsets the badge to a position that’s outside the bounds of the icon. This alters the icon’s silhouette and, more importantly, creates a separation between metadata and object.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/iphone.png" alt="" title="iPhone" width="600" height="171" class="aligncenter size-full wp-image-6695 paddedLarge" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/iphone.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/iphone-300x86.png 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p>Netflix does neither, and the result is that as you scan through their offerings a screenful at a time, the badges hardly stand out.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/netflix.png" alt="" title="Netflix" width="600" height="190" class="aligncenter size-full wp-image-6691 paddedLarge" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/netflix.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/netflix-300x95.png 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p>A challenge faced by Netflix stems from the semantics of their badges. Instead of communicating a number or simple alert, they need to depict “New Episodes” and perhaps other meanings like “New to Netflix” and “Expiring Soon”, for which there aren’t standard symbols, yet<sup class='footnote'><a href='#fn-6585-1' id='fnref-6585-1' onclick='return fdfootnote_show(6585)'>1</a></sup>.</p>
<p>Netflix’s has an amazing track record, designing slick interfaces <a href="http://functionsource.com/post/netflix-feature" target="_blank">for over 400 different devices</a>. They can do much better with their badges.</p>
<div class='footnotes' id='footnotes-6585'>
<div class='footnotedivider'></div>
<ol>
<li id='fn-6585-1'> Other video services like Hulu Plus, iTunes, and Amazon Instant Video don’t even attempt badges like these, though they would do well to. <span class='footnotereverse'><a href='#fnref-6585-1'>↩</a></span></li>
</ol>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/01/better-badges-on-netflix/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Kindle Touch Gestures</title>
<link>https://thomaspark.co/2012/01/kindle-touch-gestures/</link>
<comments>https://thomaspark.co/2012/01/kindle-touch-gestures/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 04 Jan 2012 14:43:23 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=6125</guid>
<description><![CDATA[Here’s a quick guide to multitouch gestures on Kindle Touch, since Amazon doesn’t provide documentation and some commands are less than obvious. Gestures include taps, holds, swipes, and pinches. Let me know if there are … <a href="https://thomaspark.co/2012/01/kindle-touch-gestures/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Here’s a quick guide to multitouch gestures on <a href="http://www.amazon.com/Kindle-Touch-Wi-Fi-Ink-Display/dp/B005890G8Y/" target="_blank">Kindle Touch</a>, since Amazon doesn’t provide documentation and some commands are less than obvious. Gestures include taps, holds, swipes, and pinches. Let me know if there are any I’ve missed.</p>
<p><span id="more-6125"></span> </p>
<h3>Tap</h3>
<p>Kindle Touch uses a system of invisible tapzones called EasyReach.<br />
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-zones.png" alt="" title="Zones" width="600" height="674" class="aligncenter size-full wp-image-6139" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-zones.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-zones-267x300.png 267w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p><strong>Tap right zone:</strong> Next page<br />
<strong>Tap left zone:</strong> Previous page<br />
<strong>Tap top-right zone:</strong> Toggle bookmark<br />
<strong>Tap top zone:</strong> Book options<br />
<a href="http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-options.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-options.png" alt="" title="Options" width="600" height="674" class="aligncenter size-full wp-image-6137" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-options.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-options-267x300.png 267w" sizes="auto, (max-width: 600px) 100vw, 600px" /></a></p>
<h3>Hold</h3>
<p><strong>Hold:</strong> Dictionary + text options<br />
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-hold.png" alt="" title="Hold" width="600" height="674" class="aligncenter size-full wp-image-6134" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-hold.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-hold-267x300.png 267w" sizes="auto, (max-width: 600px) 100vw, 600px" /><br />
<strong>Hold and drag:</strong> Text options<br />
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-holddrag.png" alt="" title="Hold and drag" width="600" height="674" class="aligncenter size-full wp-image-6136" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-holddrag.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-holddrag-267x300.png 267w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<h3>Swipe</h3>
<p><strong>Swipe right:</strong> Next page<br />
<strong>Swipe left:</strong> Previous page<br />
<strong>Swipe up:</strong> Next chapter<br />
<strong>Swipe down:</strong> Previous chapter</p>
<h3>Pinch</h3>
<p><strong>Pinch together:</strong> Decrease font size<br />
<strong>Pinch apart:</strong> Increase font size<br />
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-pinch.png" alt="" title="Pinch" width="600" height="674" class="aligncenter size-full wp-image-6138" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-pinch.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-pinch-267x300.png 267w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/01/kindle-touch-gestures/feed/</wfw:commentRss>
<slash:comments>17</slash:comments>
</item>
<item>
<title>99designs and Eight Values of Identity</title>
<link>https://thomaspark.co/2012/01/99designs-and-eight-values-of-identity/</link>
<comments>https://thomaspark.co/2012/01/99designs-and-eight-values-of-identity/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 03 Jan 2012 15:09:47 +0000</pubDate>
<category><![CDATA[Data]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=5717</guid>
<description><![CDATA[Over at 99designs, businesses can hold contests to get logos designed for them. To provide better direction to identity designers than “I’ll know it when I see it” or “just make it pop”, each business … <a href="https://thomaspark.co/2012/01/99designs-and-eight-values-of-identity/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Over at <a href="http://99designs.com/" target="_blank">99designs</a>, businesses can hold contests to get logos designed for them. To provide better direction to identity designers than “I’ll know it when I see it” or “just make it pop”, each business is asked to create a design brief that includes a description of their business, the type of logo they want, and the values that their logo should communicate.</p>
<p><span id="more-5717"></span> The values are dubbed <strong>manliness, maturity, bling factor, ageness, fun, volume, complexity, and in-your-faceness</strong> in the source code, and they’re input via sliders on an integer scale from -5 to +5. </p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/sliders.png" alt="" title="Sliders" width="463" height="434" class="aligncenter size-full wp-image-5821" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/sliders.png 463w, https://thomaspark.co/wp/wp-content/uploads/2011/12/sliders-300x281.png 300w" sizes="auto, (max-width: 463px) 100vw, 463px" /></p>
<p>The sliders seem like a good idea, but I began to wonder about them. To what extent do contest holders really use them? What values do businesses wish to communicate? Are they useful to designers?</p>
<p>All of the design briefs on 99designs are publicly accessible, so naturally the research side of me took hold. To get at the questions above, I ended up scraping slider data for the last 999 contests<sup class='footnote'><a href='#fn-5717-1' id='fnref-5717-1' onclick='return fdfootnote_show(5717)'>1</a></sup>.</p>
<h3>To what extent are the sliders used?</h3>
<p>I’m starting with the assumption that a slider left at 0 is unused, in the sense that the contest holder doesn’t particularly care either way about that value. The table below tallies up the number of sliders used in each contest.</p>
<table>
<tr>
<th>Sliders Used</th>
<th>Percent of Contests</th>
</tr>
<tr>
<td>8</td>
<td>9%</td>
</tr>
<tr>
<td>7</td>
<td>15%</td>
</tr>
<tr>
<td>6</td>
<td>21%</td>
</tr>
<tr>
<td>5</td>
<td>20%</td>
</tr>
<tr>
<td>4</td>
<td>13%</td>
</tr>
<tr>
<td>3</td>
<td>9%</td>
</tr>
<tr>
<td>2</td>
<td>6%</td>
</tr>
<tr>
<td>1</td>
<td>2%</td>
</tr>
<tr>
<td>0</td>
<td>5%</td>
</tr>
</table>
<p>It turns out that in 95% of contests, at least one slider is used. However, the modus operandi seems to be to pick a few values to emphasize, while skipping over the rest. Only in 9% of cases are all eight sliders used. On average, it’s closer to five sliders.</p>
<h3>Is there variety in the responses?</h3>
<p>Even if contest holders are using the sliders, it’s not very informative if they’re all using them to give identical responses. Here’s a breakdown of how each slider is used by percent and standard deviation, which gives a taste of how diverse the responses are.</p>
<table>
<tr>
<th></th>
<th>-5</th>
<th>-4</th>
<th>-3</th>
<th>-2</th>
<th>-1</th>
<th>0</th>
<th>+1</th>
<th>+2</th>
<th>+3</th>
<th>+4</th>
<th>+5</th>
<th>Mean</th>
<th>SD</th>
</tr>
<tr>
<th>Manliness</th>
<td>2</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>49</td>
<td>7</td>
<td>12</td>
<td>7</td>
<td>2</td>
<td>4</td>
<td>+0.37</td>
<td>1.97</td>
</tr>
<tr>
<th>Maturity</th>
<td>2</td>
<td>2</td>
<td>8</td>
<td>12</td>
<td>12</td>
<td>35</td>
<td>9</td>
<td>10</td>
<td>7</td>
<td>2</td>
<td>2</td>
<td> -0.13</td>
<td>1.97</td>
</tr>
<tr>
<th>Bling factor</th>
<td>6</td>
<td>5</td>
<td>10</td>
<td>12</td>
<td>11</td>
<td>39</td>
<td>6</td>
<td>6</td>
<td>4</td>
<td>1</td>
<td>1</td>
<td>-0.77</td>
<td>2.02</td>
</tr>
<tr>
<th>Ageness</th>
<td>9</td>
<td>8</td>
<td>18</td>
<td>19</td>
<td>9</td>
<td>26</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>-1.57</td>
<td>2.07</td>
</tr>
<tr>
<th>Fun</th>
<td>3</td>
<td>3</td>
<td>7</td>
<td>12</td>
<td>12</td>
<td>27</td>
<td>9</td>
<td>12</td>
<td>9</td>
<td>3</td>
<td>3</td>
<td>+0.04</td>
<td>2.25</td>
</tr>
<tr>
<th>Volume</th>
<td>2</td>
<td>2</td>
<td>6</td>
<td>12</td>
<td>12</td>
<td>50</td>
<td>6</td>
<td>7</td>
<td>4</td>
<td>1</td>
<td>1</td>
<td>-0.32</td>
<td>1.65</td>
</tr>
<tr>
<th>Complexity</th>
<td>5</td>
<td>6</td>
<td>17</td>
<td>23</td>
<td>11</td>
<td>29</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>-1.38</td>
<td>1.83</td>
</tr>
<tr>
<th>In-your-faceness</th>
<td>0</td>
<td>1</td>
<td>3</td>
<td>6</td>
<td>6</td>
<td>49</td>
<td>10</td>
<td>13</td>
<td>8</td>
<td>2</td>
<td>3</td>
<td>+0.50</td>
<td>1.69</td>
</tr>
</table>
<p>Far and away, 0 is the most popular choice for every value, reaching 50% for a few. None too surprising given that it’s both the neutral answer and the default. Still, there is a fair deal of variation.</p>
<p>Some of the values are heavily skewed (e.g., ageness, complexity). This could be a matter of terminology (“complex” might hold a more negative connotation than a term like “detailed”), or simply the prevailing trends.</p>
<h3>How do values relate to one another?</h3>
<p>To explore correlation between values, here’s a table of pairwise comparisons.</p>
<table>
<tr>
<th></th>
<th>Maturity</th>
<th>Bling</th>
<th>Ageness</th>
<th>Fun</th>
<th>Volume</th>
<th>Complexity</th>
<th>Faceness</th>
</tr>
<tr>
<th>Manliness</th>
<td>.201</td>
<td>.050</td>
<td>-.044</td>
<td>.312</td>
<td>-.076</td>
<td>.083</td>
<td>.091</td>
</tr>
<tr>
<th>Maturity</th>
<td></td>
<td>-.108</td>
<td>.278</td>
<td>.475</td>
<td>.165</td>
<td>.142</td>
<td>-.034</td>
</tr>
<tr>
<th>Bling factor</th>
<td></td>
<td></td>
<td>.027</td>
<td>-.136</td>
<td>-.092</td>
<td>-.087</td>
<td>.133</td>
</tr>
<tr>
<th>Ageness</th>
<td></td>
<td></td>
<td></td>
<td>.135</td>
<td>.239</td>
<td>.098</td>
<td>-.145</td>
</tr>
<tr>
<th>Fun</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td>.276</td>
<td>.123</td>
<td>-.065</td>
</tr>
<tr>
<th>Volume</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>-.107</td>
<td>-.407</td>
</tr>
<tr>
<th>Complexity</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>.110</td>
</tr>
</table>
<p>As you can see, fun tends to be associated with youth and masculinity. Volume & in-your-faceness also have substantial overlap.</p>
<p>If a value needed to be made redundant, a strong case could be made for either volume or in-your-faceness, given all of the data above.</p>
<h3>What else?</h3>
<p>Of course looking at how contest holders use the sliders is only half of the conversation. The other half is to ask as designers: Do you actually pay attention to these sliders? Is it only when a response is at an extreme? Which values contribute most to your practice? Would any other values would be useful to you?</p>
<div class='footnotes' id='footnotes-5717'>
<div class='footnotedivider'></div>
<ol>
<li id='fn-5717-1'> More could be done with this data, including breaking it down by industry (e.g., Food & Drink, Medical & Pharmaceutical, Sport). Maybe I will do that in a follow-up post. <a href='http://thomaspark.co/wp/wp-content/uploads/2011/12/999designs.csv'>Here’s</a> a CSV file if you want to explore. <span class='footnotereverse'><a href='#fnref-5717-1'>↩</a></span></li>
</ol>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/01/99designs-and-eight-values-of-identity/feed/</wfw:commentRss>
<slash:comments>3</slash:comments>
</item>
<item>
<title>Density Control</title>
<link>https://thomaspark.co/2011/12/density-control/</link>
<comments>https://thomaspark.co/2011/12/density-control/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 16 Dec 2011 17:43:06 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=5484</guid>
<description><![CDATA[Google has been making sweeping changes to the look of their products. One of these changes is the addition of density control. With a couple of clicks, users of Gmail and Reader can now switch … <a href="https://thomaspark.co/2011/12/density-control/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Google has been making <a href="http://googleblog.blogspot.com/2011/11/gmails-new-look.html" target="_blank">sweeping</a> <a href="http://googlereader.blogspot.com/2011/10/new-in-reader-fresh-design-and-google.html" target="_blank">changes</a> to the look of their products. One of these changes is the addition of <strong>density control</strong>. With a couple of clicks, users of Gmail and Reader can now switch between a <strong>comfortable</strong>, <strong>cozy</strong>, and <strong>compact</strong> display.</p>
<p><span id="more-5484"></span> It may seem like a totally unremarkable feature. But here’s why Google deserves credit for it.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/densitycontrol.gif" alt="" title="Comfortable, cozy, compact" width="600" height="340" class="aligncenter size-full wp-image-5589" /></p>
<h3>It’s Uncommon</h3>
<p>Density control is surprisingly rare. It’s not to be confused with <a href="http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html" target="_blank">zoom</a>, which is found in all sorts of applications from web browsers to Office. Zoom enlarges everything, whereas display density changes only the spacing between things. In Reader for instance, comfortable, cozy, and compact all use a 13-pixel font, but give items a height of 37, 31, and 27 pixels respectively</p>
<p>Only spatial file managers come to mind as another example. Though I’m sure there’s a laundry list of others I’ve forgotten.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/finder.png" alt="" title="Mac Finder" width="600" height="416" class="aligncenter size-full wp-image-5636" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/finder.png 600w, https://thomaspark.co/wp/wp-content/uploads/2011/12/finder-300x208.png 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<h3>It’s Useful</h3>
<p>The old Gmail and Reader were most like the compact setting, packing lots of information into the available space. Yet it’s apparent that Google’s designers now prefer comfortable as the default for desktop resolutions.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/oldreader.png" alt="" title="Old Reader" width="570" height="419" class="aligncenter size-full wp-image-5678" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/oldreader.png 570w, https://thomaspark.co/wp/wp-content/uploads/2011/12/oldreader-300x221.png 300w" sizes="auto, (max-width: 570px) 100vw, 570px" /></p>
<p>Many power users want <a href="http://www.codinghorror.com/blog/2006/07/information-density-and-dr-bronner.html" target="_blank">information density</a> at all costs, while others want the greater accessibility or readability or aesthetics that spacing brings. People can be extremely sensitive to these preferences, especially when dealing with changes to a familiar interface (the Twitter iPhone client is <a href="http://www.marco.org/2011/12/09/twitter-client-screenshots" target="_blank">a recent case of this</a>). And this is where density control comes in.</p>
<p>Instead of a temporary measure meant to appease a grumbling user base, I hope this is a sign of what’s to come in other Google products. Users of Search, Docs, and News could also benefit from density control. In fact, it’s something we should see more of in general, particularly for information-dense applications.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/12/density-control/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Touch on Kindle</title>
<link>https://thomaspark.co/2011/12/touch-on-kindle/</link>
<comments>https://thomaspark.co/2011/12/touch-on-kindle/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 07 Dec 2011 16:44:53 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=5224</guid>
<description><![CDATA[I was lucky enough to receive a Kindle Touch as an early Christmas present. To be clear, I love it as a long-form reading device, from its weight to its battery life to its integration … <a href="https://thomaspark.co/2011/12/touch-on-kindle/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I was lucky enough to receive a <a href="http://www.amazon.com/Kindle-Touch-Wi-Fi-Ink-Display/dp/B005890G8Y/" target="_blank">Kindle Touch</a> as an early Christmas present. To be clear, I love it as a long-form reading device, from its weight to its battery life to its integration with Amazon’s ecosystem. It’s already begun to replace my next shelf of books.</p>
<p>With that said, here’s my quick review of it so far, with a few ways Amazon could make it that much better.</p>
<p><span id="more-5224"></span> </p>
<h4>Touch</h4>
<p>Most smartphones and tablets rely on capacitive sensors embedded directly in the display, but the Kindle Touch has infrared sensors set in the bezel. Whereas capacitive touch can distinguish skin from other forms of contact, these infrared sensors detect nearly anything as a touch event. The upside is that you can use the Kindle Touch while wearing gloves or with any pointy thing as a stylus. The downside is that other materials like the fabric of your sleeve can accidentally trigger it. These are more side effects though, of Amazon using infrared sensors to preserve the quality of the E Ink display.</p>
<p>The Kindle Touch touts a range of multitouch gestures. Taps are used for page turning, item selection, and the soft keyboard. Swipes can also be used to turn pages, and to scroll elements that extend offscreen. Pinch allows you to adjust text size and zoom into a webpage. In terms of recognizing these gestures as input, it’s fairly reliable and precise. </p>
<p>One thing that has made iOS so successful is its use of direct manipulation — that is, fine-grained (essentially continuous) gesture input, mapped closely to the system’s feedback, which models some physical phenomenon. Apple was able to create the illusion of manipulating elements as if they were physical, and they accomplished it having iOS be extremely responsive to the user’s gestures.</p>
<p>However, the Kindle’s E Ink display, you may be aware, is slow. Refresh rates measure in the hundreds of milliseconds, compared to 17 milliseconds for devices like the iPhone and iPad. So with the Kindle Touch, Amazon has wisely used multitouch gestures more to invoke discrete commands than for continuous direct manipulation. What this means is that a swipe, no matter how fast or far, moves the carousel of books three places; each pinch enlarges text by one size. The exception is the web browser, and there’s a reason that’s still experimental.</p>
<h4>Form Factor</h4>
<p>My first thought upon opening the package was that the Kindle Touch is even smaller than I imagined. With each successive model, Amazon has shrunk the form factor down while keeping the 6-inch display intact. It’s gone from 8.0 × 5.3 inches in the first two generations, to 7.5 × 4.8 in the Kindle 3, to 6.8 × 4.7 in the Kindle Touch (Kindle 4 is smaller yet).</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/sidebyside.jpg" alt="" title="Kindle 2, Kindle Touch, paperback" width="600" height="300" class="aligncenter size-full wp-image-5449" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/sidebyside.jpg 600w, https://thomaspark.co/wp/wp-content/uploads/2011/12/sidebyside-300x150.jpg 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p>While greater portability is nice, it’s past the point of diminishing returns. I’d like to see the next version of the Kindle Touch return to the original form factor – with display enlarged – making it roughly the size of a large paperback. Reading books would be made more comfortable, navigating the library and store even more so. </p>
<h4>Home Button</h4>
<p>Setup is dead simple, but afterwards I got stuck for longer than I care to admit on how to access my library. I eventually realized that what I had assumed to be a speaker was no speaker at all.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/homebutton.jpg" alt="" title="Not a speaker" width="600" height="175" class="aligncenter size-full wp-image-5417" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/homebutton.jpg 600w, https://thomaspark.co/wp/wp-content/uploads/2011/12/homebutton-300x88.jpg 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p>A silly oversight on my part to be sure. But as bad as it is to make buttons non-obvious in software, it’s that much worse in hardware. TV makers, are you listening?</p>
<h4>Book Covers</h4>
<p>I was disappointed to learn that the library can’t display book covers. I don’t know where I got that idea from.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/kindletouch.jpg" alt="" title="Kindle Touch with Ribbon" width="490" height="484" class="aligncenter size-full wp-image-5420" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/kindletouch.jpg 490w, https://thomaspark.co/wp/wp-content/uploads/2011/12/kindletouch-300x296.jpg 300w" sizes="auto, (max-width: 490px) 100vw, 490px" /></p>
<p>Oh, right. Amazon, please add this option for when we’re using your books, not just when you’re selling them to us.</p>
<h4>X-Ray</h4>
<p>One of the value-added features the Kindle Touch offers is <a href="http://blog.laptopmag.com/video-amazon-kindle-touchs-x-ray-reference-tool-makes-ereading-easier" target="_blank">X-Ray</a>. Amazon analyzes each book and presents key people, places, and things, background information on them, and where they show up in the book.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/12/xray.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/xray-1024x655.png" alt="" title="X-Ray" width="555" height="355" class="aligncenter size-large wp-image-5431" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/xray-1024x655.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2011/12/xray-300x192.png 300w, https://thomaspark.co/wp/wp-content/uploads/2011/12/xray.png 1250w" sizes="auto, (max-width: 555px) 100vw, 555px" /></a></p>
<p>Not all books support it yet, but Amazon doesn’t tell you which do and don’t. (As of this writing, <a href="http://www.amazon.com/Man-Who-Mistook-Wife-ebook/dp/B003MQNI6W/" target="_blank">The Man Who Mistook His Wife for a Hat</a> does, <a href="http://www.amazon.com/Consider-Lobster-Other-Essays-ebook/dp/B000S1LVHW/" target="_blank">Consider the Lobster</a> does not). Under the “Text-to-Speech” bullet point seems as good a spot as any.</p>
<h4>The Other Kindle</h4>
<p>Overall, I’m highly satisfied with the Kindle Touch. But if you’re in the market for an e-reader, the Kindle 4 is also <a href="http://www.marco.org/2011/12/02/kindle-touch-vs-nook-simple-touch-kobo-touch-kindle-4" target="_blank">worthy of consideration</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/12/touch-on-kindle/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>Every Apple Storefront Ever</title>
<link>https://thomaspark.co/2011/11/every-apple-storefront/</link>
<comments>https://thomaspark.co/2011/11/every-apple-storefront/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 09 Nov 2011 02:27:42 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=4930</guid>
<description><![CDATA[Way back in August of 2001, some good friends and I took a road trip down to Virginia to attend a concert. Unfortunately the rains came, the venue got flooded, and the concert was cancelled. … <a href="https://thomaspark.co/2011/11/every-apple-storefront/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Way back in August of 2001, some good friends and I took a road trip down to Virginia to attend a concert. Unfortunately the rains came, the venue got flooded, and <a href="http://voices.washingtonpost.com/postrock/2008/05/radiohead_visits_dc_mother_nat.html" target="_blank">the concert was cancelled</a>. Disappointing, but as something of a concession prize, I got to check out the very first brick & mortar Apple Store, which had opened in Tysons Corner just a few weeks earlier.</p>
<p><span id="more-4930"></span> At the time, most analysts considered Apple’s fledgling retail initiative to be <a href="http://www.businessweek.com/magazine/content/01_21/b3733059.htm" target="_blank">doomed</a>. But though Tysons Corner seemed like a modest start, it was a blueprint for big things to come. 357 stores and counting later, Apple is <a href="http://retailsails.com/2011/08/23/retailsails-exclusive-ranking-u-s-chains-by-retail-sales-per-square-foot/" target="_blank">tops in sales per square foot</a>, and they did it by applying many of the same principles as they do to their products: natural materials, understated aesthetics, and <a href="http://www.macrumors.com/2011/11/08/apple-store-app-for-ios-updated-to-support-new-self-checkout-system-for-retail-stores/" target="_blank">innovative processes</a>.</p>
<p>Anyway, one thing I wanted to do was go back and see how Apple storefronts have evolved over the past decade. I couldn’t find anywhere to do this easily, so I decided to create a gallery myself. Check it out here:</p>
<blockquote><p><a href="http://applestorefronts.appspot.com/" target="_blank" onclick="pageTracker._link(this.href); return false;">http://applestorefronts.appspot.com/</a></p></blockquote>
<p>Scanning the gallery, you can see that Apple follows certain conventions, but isn’t shy about breaking them. They’ve tweaked things here and there, and are quite audacious with their flagship locations. (By the way, is “flagship” a formal designation, and is there a list of them somewhere?)</p>
<p>What are your most or least favorites? What do you love or hate about them? Do you notice any trends? What do you think is Apple’s next step?</p>
<h4>Notes</h4>
<p>Images collected from Apple.com with <a href="http://www.crummy.com/software/BeautifulSoup/" target="_blank">Beautiful Soup</a>. Opening dates courtesy of <a href="http://www.ifoapplestore.com/db/" target="_blank">ifoAppleStore</a>. The gallery uses <a href="http://www.appelsiini.net/projects/lazyload" target="_blank">Lazy Load</a> by Mika Tuupola and is hosted on <a href="http://code.google.com/appengine/" target="_blank">Google App Engine</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/11/every-apple-storefront/feed/</wfw:commentRss>
<slash:comments>59</slash:comments>
</item>
<item>
<title>Share in Google Reader Again</title>
<link>https://thomaspark.co/2011/11/share-in-google-reader-again/</link>
<comments>https://thomaspark.co/2011/11/share-in-google-reader-again/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 01 Nov 2011 16:06:14 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=4799</guid>
<description><![CDATA[Despite its name, Google Reader had up until now three levels of use: Reader: read RSS items Linkroll: share RSS items with friends Social network: converse on these shared RSS items with these friends What … <a href="https://thomaspark.co/2011/11/share-in-google-reader-again/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Despite its name, Google Reader had up until now three levels of use:</p>
<ol>
<li>Reader: read RSS items</li>
<li>Linkroll: share RSS items with friends</li>
<li>Social network: converse on these shared RSS items with these friends</li>
</ol>
<p>What was nice about this is that you could exchange and comment on posts within the flow of reading them.</p>
<p><span id="more-4799"></span> Unfortunately, Google <a href="http://googlereader.blogspot.com/2011/10/new-in-reader-fresh-design-and-google.html" target="_blank">has cut the social features from Reader</a> in an attempt to funnel users to Google Plus. I’m only annoyed, but it’s left some people <a href="http://kirbybits.wordpress.com/2011/10/21/wherein-i-try-to-explain-why-google-reader-is-the-best-social-network-created-so-far/" target="_blank">really upset</a>. Here’s a way to restore some of this functionality, until a suitable replacement <a href="http://hivemined.org/" target="_blank">comes along</a>.</p>
<h4>A Workaround</h4>
<p>First, you’ll need an account with a bookmarking service. <a href="http://delicious.com/" target="_blank">Delicious</a> is free, but <a href="http://pinboard.in/" target="_blank">Pinboard</a> is well worth supporting. After you’ve signed up, go into “Reader settings” in the top-right corner, click “Send To”, and “Create a custom link” at the bottom. Add one of these as your URL:</p>
<pre><code>http://delicious.com/save?url=${url}&title=${title}&notes=${source}</code></pre>
<pre><code>https://pinboard.in/add?&url=${url}&title=${title}&description=${source}
&tags=reader</code></pre>
<p>If you want to go all in, name it “Share in Reader” and give it this icon URL: </p>
<pre><code>http://www.google.com/reader/ui/favicon.ico</code></pre>
<p>Get back to Reader and now you’ll have a familiar “Share in Reader” option at the bottom of each article. When you share something, there’s a field to enter comments, although two-way conversation isn’t possible.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/11/shareinreader.png" alt="" title="Share in Reader" width="555" height="243" class="aligncenter size-full wp-image-4893" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/11/shareinreader.png 555w, https://thomaspark.co/wp/wp-content/uploads/2011/11/shareinreader-300x131.png 300w" sizes="auto, (max-width: 555px) 100vw, 555px" /></p>
<p>You can also use bookmarklets to share any page you happen to visit, just like old times. Drag <a href="javascript:(function(){f='http://www.delicious.com/save?url='+encodeURIComponent(window.location.href)+'&title='+encodeURIComponent(document.title)+'&notes='+encodeURIComponent(''+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text))+'&v=6&';a=function(){if(!window.open(f+'noui=1&jump=doclose','deliciousuiv6','location=1,links=0,scrollbars=0,toolbar=0,width=550,height=585'))location.href=f+'jump=yes'};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})()"">Delicious</a> or <a href="javascript:q=location.href;if(document.getSelection)%7Bd=document.getSelection();%7Delse%7Bd='';%7D;p=document.title;void(open('https://pinboard.in/add?url='+encodeURIComponent(q)+'&description='+encodeURIComponent(d)+'&title='+encodeURIComponent(p)+'&tags=reader','Pinboard','toolbar=no,width=700,height=350'));">Pinboard</a> into your bookmark bar.</p>
<p>Give your friends your new feed, which will look like one of the following:</p>
<pre><code>http://delicious.com/v2/rss/username</code></pre>
<pre><code>http://feeds.pinboard.in/rss/u:username/t:reader</code></pre>
<p>If you want to keep your shared links from being discoverable, you can dig up a private feed link for these services as well.</p>
<p>Have your friends create their own, store them in a “People you follow” folder, and you’re back to good.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/11/peopleyoufollow.png" alt="" title="People You Follow" width="264" height="230" class="aligncenter size-full wp-image-4895" /></p>
<p>A downside of this is that it can take an hour or two for the feeds to refresh. But if you want to resist the will of a mighty company like Google, while continuing to use their service, it’s going to be an uphill battle.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/11/share-in-google-reader-again/feed/</wfw:commentRss>
<slash:comments>5</slash:comments>
</item>
<item>
<title>In Portrait or Landscape</title>
<link>https://thomaspark.co/2011/10/in-portrait-or-landscape/</link>
<comments>https://thomaspark.co/2011/10/in-portrait-or-landscape/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 21 Oct 2011 18:28:37 +0000</pubDate>
<category><![CDATA[Data]]></category>
<category><![CDATA[Gadgets]]></category>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=4593</guid>
<description><![CDATA[Yesterday, Microsoft’s Steven Sinofsky responded to chatter about how Windows 8, in its grand debut, was demoed almost exclusively in landscape mode. In the post, he affirms Windows 8’s agnosticism. Our point of view is … <a href="https://thomaspark.co/2011/10/in-portrait-or-landscape/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Yesterday, Microsoft’s Steven Sinofsky <a href="http://blogs.msdn.com/b/b8/archive/2011/10/20/optimizing-for-both-landscape-and-portrait.aspx" target="_blank">responded</a> to chatter about how Windows 8, in its grand debut, was demoed almost exclusively in landscape mode. In the post, he affirms Windows 8’s agnosticism.</p>
<p><span id="more-4593"></span> <img loading="lazy" decoding="async" src="http://thomaspark.me/wp/wp-content/uploads/2011/10/windows-8-tablet.jpg" alt="" title="Windows 8 Tablet" width="595" height="389" class="aligncenter size-full wp-image-4703" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/windows-8-tablet.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/windows-8-tablet-300x196.jpg 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<blockquote><p>Our point of view is that both portrait and landscape orientations are important, and experiences can be great in either orientation. Rather than picking a posture and orientation for optimization, we designed an experience that makes sense regardless of how the device is held, one that feels tailored for the app and its content.</p></blockquote>
<p>Ignoring that the <a href="http://thisismynext.com/2011/09/13/windows-8-samsung-tablet-leak/" target="_blank">first Windows 8 tablet from Samsung</a> has its hardware button positioned to make landscape the default, and the packaging to reflect that (<a href="http://www.apple.com/ipad/built-in-apps/" target="_blank">in contrast to the iPad</a>), Sinofsky’s response still rings true. <a href="http://brooksreview.net/2011/09/tablet-power/" target="_blank">This informal survey</a> from Ben Brooks further underscores his point.</p>
<p>This naturally leads to questions about when and why people might favor one orientation over the other. Most users probably hold their tablets in landscape to watch videos and in portrait to read long-form text. But what about for all of the other ways tablets can be used?</p>
<h3>Some Stats</h3>
<p>Since I’m not privy to data that might answer this, I thought an interesting proxy might be to look at how apps are presented in the App Store. Do apps tend to feature screenshots in one particular orientation? Are there patterns among certain classes of apps? This reveals a bit about how apps are designed to be used or how the developers idealize it.</p>
<p>I went through the top paid iPad apps, as well as the top 25 for each App Store category, and classified each into one of five categories: all of the screenshots are portrait, or landscape; most (all but one) are portrait, or landscape; and they’re about even (more than one of each).</p>
<p>Here’s how the 200 top paid apps look.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/10/topapps.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/topapps-1024x192.png" alt="" title="Top Paid iPad Apps" width="595" height="111" class="aligncenter size-large wp-image-4633" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/topapps-1024x192.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2011/10/topapps-300x56.png 300w, https://thomaspark.co/wp/wp-content/uploads/2011/10/topapps.png 1119w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>
<p>Surprisingly, only 21 percent show off their app in both orientations.</p>
<p>Despite the primacy of portrait in Apple’s iPad marketing, the majority of top paid apps use landscape in theirs, at least within the App Store. That’s no guarantee of course that this is how people spend most of their <em>time</em> on their iPads, using these and other apps.</p>
<p>Not all categories are represented equally in top paid apps, which happens to be extremely game heavy. By looking at each App Store category individually, a better picture emerges of the diverse ways that iPads are held and used.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/10/categories.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/categories-1024x658.png" alt="" title="Orientation by iPad App Categories" width="595" height="382" class="aligncenter size-large wp-image-4635" /></a></p>
<p>Platforms today are recognizing that great user experiences have the potential to be created in either portrait or landscape, and this is certainly an important first step. But this graph renews questions about when and why developers choose one orientation over the other, and what opportunities there are for both new and existing apps to make better use of the available space, however the tablet is held.</p>
<p>Given how only 21 percent of iPad apps show themselves off as fluid between landscape and orientation, one wonders if Windows 8 developers will be up to the task of building apps in both orientations, plus <a href="http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/1261.Windows_2D00_in_2D00_landscape_2D00_mode_5F00_636279EA.png" target="_blank">the snap and fill views</a>, for <a href="http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/5875.Chart_2D002D002D00_Windows_2D00_7_2D00_screen_2D00_resolutions_5F00_3E64B971.png" target="_blank">so many resolutions and aspect ratios</a> — and doing it well.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/10/in-portrait-or-landscape/feed/</wfw:commentRss>
<slash:comments>7</slash:comments>
</item>
<item>
<title>User Research Gone Astray</title>
<link>https://thomaspark.co/2011/10/user-research-gone-astray/</link>
<comments>https://thomaspark.co/2011/10/user-research-gone-astray/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sun, 16 Oct 2011 15:08:02 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=4413</guid>
<description><![CDATA[The Building Windows 8 blog offers some fascinating insight into Microsoft’s research and design processes. Take the recent post on improving Windows Explorer. It begins with a discussion on how Windows Explorer is used today. … <a href="https://thomaspark.co/2011/10/user-research-gone-astray/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>The <a href="http://blogs.msdn.com/b/b8/" target="_blank">Building Windows 8 blog</a> offers some fascinating insight into Microsoft’s research and design processes. Take the recent post on <a href="http://blogs.msdn.com/b/b8/archive/2011/08/29/improvements-in-windows-explorer.aspx" target="_blank">improving Windows Explorer</a>.</p>
<p><span id="more-4413"></span> It begins with a discussion on how Windows Explorer is used today. Through telemetry data — “based on hundreds of millions of individuals opting in to provide anonymous data about product usage” — Microsoft finds that the top 10 commands make up 81.8% of use, and that these commands (e.g., paste, properties, copy) are primarily accessed through the contextual menu.</p>
<p>The development team combines this with customer feedback on the top requested features, and uses this to justify the changes from Windows 7…</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/win7-window.png" alt="" title="Windows 7 window" width="595" height="519" class="aligncenter size-full wp-image-4438" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/win7-window.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/win7-window-300x262.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>…to the design below.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/win8-window.png" alt="" title="Windows 8 window" width="595" height="670" class="aligncenter size-full wp-image-4430" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/win8-window.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/win8-window-266x300.png 266w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>It seems that essentially, every single command that customers have used or requested has been moved into a <a href="http://en.wikipedia.org/wiki/Ribbon_(computing)" target="_blank">ribbon</a> or wedged into some corner of the chrome. And many are rightfully <a href="http://seldo.tumblr.com/post/9549775746/this-is-genuinely-microsofts-idea-of-a" target="_blank">lambasting it</a>.</p>
<p>But, you might protest, they did research! With users! And got a ton of data! So how did it go wrong?</p>
<h3>The IROP Keyboard</h3>
<p>By focusing user research on low-level operations with the old system, and using that as the starting point for the redesign, you end up merely resizing, rearranging, and removing parts of the interface. You don’t make the quantum leap, and you sometimes make things worse.</p>
<p>I’m reminded of a recent paper by Andreas Zeller, Thomas Zimmerman, and Christian Bird (the last two authors from Microsoft Research, ironically) titled <a href="http://thomas-zimmermann.com/publications/details/zeller-promise-2011/" target="_blank">Failure is a Four-Letter Word: A Satire in Empirical Research</a>.</p>
<p>In the paper, the authors collect keystroke-level data in Eclipse and correlate it with programmers’ errors. They find this data to be an excellent predictor, with the letters “i”, “r”, “o”, and “p” guilty of the strongest correlations. Based on these findings, they come up with a cheeky solution for reducing programmers’ errors:</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/irop-keyboard.jpg" alt="" title="IROP Keyboard" width="595" height="226" class="aligncenter size-full wp-image-4494" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/irop-keyboard.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/irop-keyboard-300x114.jpg 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>The IROP keyboard addresses the data, quite directly. But it obviously misses the deeper problems.</p>
<h3>From Actions to Activities</h3>
<p><a href="http://www.jnd.org/dn.mss/human-centered_design_considered_harmful.html" target="_blank">In the vocabulary of Donald Norman</a>, operations combine to make actions, which make tasks, which make activities. According to this scheme, Microsoft has with their data looked at actions. The key is to start higher up this hierarchy, considering the activities users are engaged in and the goals they’re trying to achieve.</p>
<p>Windows Explorer is <a href="http://www.computerworld.com/s/article/print/9220157/A_deep_dive_into_Windows_8_Developer_Preview" target="_blank">gradually being sunset</a>, so they get some slack here. But I sure hope they aren’t being steered wrong elsewhere by their user research.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/10/user-research-gone-astray/feed/</wfw:commentRss>
<slash:comments>8</slash:comments>
</item>
<item>
<title>Ghost Legs: Randomizing the Asian Way</title>
<link>https://thomaspark.co/2011/10/ghost-legs-randomizing-the-asian-way/</link>
<comments>https://thomaspark.co/2011/10/ghost-legs-randomizing-the-asian-way/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 12 Oct 2011 16:50:41 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Games]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=4273</guid>
<description><![CDATA[I had a bunch of relatives from Korea visit over the summer, and naturally an arm wrestling tournament broke out. What I found most interesting though was how they set up the initial match-ups. They … <a href="https://thomaspark.co/2011/10/ghost-legs-randomizing-the-asian-way/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I had a bunch of relatives from Korea visit over the summer, and naturally an arm wrestling tournament broke out. What I found most interesting though was how they set up the initial match-ups. They didn’t draw straws, pick names out of a hat, roll a die, or eeny meeny miny moe. Instead, they made a grid.</p>
<p><span id="more-4273"></span> I learned that this is a common way of randomizing things in Asia. In Korea it’s called 사다리, in China 畫鬼腳, and in Japan 阿弥陀籤. The Korean and Chinese translate to <a href="https://en.wikipedia.org/wiki/Ghost_Leg" target="_blank" rel="noopener noreferrer">ghost leg</a>, their poetic word for “ladder”.</p>
<p>How it works is this. You list the things you want to randomize at the top of your paper. You write the categories you want to randomly place them into at the bottom. Draw vertical lines connected each pair — these make up the “legs” of the ladder. Then randomly draw in “rungs”, or you can fold over the options to cover them up and have someone else do it. Once that’s done, follow each path down the ladder, taking every rung you reach. <a href="http://askakorean.blogspot.com/2010/12/how-do-you-climb-ladder.html" target="_blank" rel="noopener noreferrer">This post</a> gives a visual step-by-step of how it works, and <a href="http://www2.edc.org/makingmath/studentWork/amidaKuji/AmidaKujiByDavidSenft.pdf" target="_blank" rel="noopener noreferrer">this paper</a> offers a mathematical analysis.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2011/10/ghostlegs.png" alt="" title="Ghost Legs" width="500" height="450" class="aligncenter size-full wp-image-4590" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/ghostlegs.png 500w, https://thomaspark.co/wp/wp-content/uploads/2011/10/ghostlegs-300x270.png 300w" sizes="auto, (max-width: 500px) 100vw, 500px" /></p>
<p>What I decided to do was create an interactive web version of this. I started with an HTML table, which leads to a few benefits. Since a table is already a grid, it’s straightforward to style it using CSS. The image above shows the result.</p>
<p>Also, instead of dynamically creating the table, I made it so anyone can easily make their own table with labels and as many columns and rows as they like. Then by simply assigning it to the “ghostleg” class and copying over the JavaScript and CSS (which you’re welcome to do), they can have their own customized version. By using <code>thead</code> and <code>tfoot</code>, the section of the code to input all your labels is right at the top, not buried in the table markup.</p>
<p>I looped through each table row, counting the number of cells and picking a random place to draw a rung (or skip the row). Finally, a hover function was attached that highlights the path from each item to its random outcome.</p>
<p>Play around with <a href="https://thomaspark.co/projects/ghostlegs/" target="_blank" rel="noopener noreferrer">Ghost Legs</a>, or have a look at the <a href="https://jsbin.com/ofoban/1/edit#javascript,html,live" target="_blank" rel="noopener noreferrer">code</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/10/ghost-legs-randomizing-the-asian-way/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>Fuzzy Circles in Google Plus</title>
<link>https://thomaspark.co/2011/10/fuzzy-circles-in-google-plus/</link>
<comments>https://thomaspark.co/2011/10/fuzzy-circles-in-google-plus/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 10 Oct 2011 17:23:34 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=4083</guid>
<description><![CDATA[The hallmark of Google Plus so far has been Circles. In contrast to Facebook where you’re either a friend or you’re not (until you put people into lists), Circles has you categorize people as friends, … <a href="https://thomaspark.co/2011/10/fuzzy-circles-in-google-plus/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>The hallmark of Google Plus so far has been Circles. In contrast to Facebook where you’re either a friend or you’re not (until you put people into lists), Circles has you categorize people as friends, family, coworkers, etc. right from the start. This compartmentalization is meant to make targeting specific audiences and managing privacy easier.</p>
<p><span id="more-4083"></span> <img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/googleplus.png" alt="" title="Google Plus Circles" width="595" height="239" class="aligncenter size-full wp-image-4235" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/googleplus.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/googleplus-300x121.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>This sounds simple, and it is if your circles are static. But things start to get hazy when your circles have changing memberships.</p>
<p>Is posting to a circle like sending email? In this model, each message is sent off to everyone who’s in the group at that particular time. When you add someone to the group, they get access to messages sent only while they’re a member. When you remove them, they get to keep those messages but nothing more.</p>
<p>Or is it more like giving out keys to a locked diary? Facebook walls and protected Twitter feeds fall into this category. When you add someone to the group, they get access to all of the accumulated content up to that point, past and present. When you remove them, the system revokes their access to all content.</p>
<p>It turns out that when you add someone to a circle in Google Plus, they get access to all of the content that’s ever been posted to that circle, if not in their stream then by drilling into your activity. This kind of falls in line with the locked diary model. But unlike this model, removing someone from your circle does not revoke their access. Instead, a number of scenarios can play out.</p>
<p>Compare what you expect to happen in each of the following situations with what actually occurs.</p>
<ol>
<li>
<p><strong>You make a post to a circle, but realize you don’t want Alice, who’s in the circle, to see it. You quickly remove her from the circle.</strong></p>
<p>Google Plus indicates to you that Alice no longer has access to the post, but if it made it into her stream, she can continue viewing it! Alice can even see comments made by others after she was removed, though she cannot make comments herself or share it with others. What does and does not end up in a person’s stream is not entirely clear.</p>
</li>
<li>
<p><strong>You post to a circle, and Bob replies yet again with a drama-filled comment. You decide to remove him from the circle once and for all.</strong></p>
<p>Because Bob has commented, he now keeps full access to the post. In this case, Google Plus correctly indicates that he has access. He can continue adding comments to the post, and he can share it with others outside the circle by default. And on top of that, he can see subsequent comments made to the post.</p>
</li>
<li>
<p><strong>You posted some personal things to your circle, but that was awhile back. You add Carol, who you’ve just made friends with, to your circle. Unfortunately, she starts to act creepy and so you remove her.</strong></p>
<p>These old posts most likely did not make it into Carol’s stream. Even if she went into your profile’s activity and commented on them there, she will lose access to them. If the posts did make it into her stream though (which might be possible if they’re not that old and/or her stream is not that populated), she keeps access. You just have no way of knowing which case it is.</p>
</li>
</ol>
<p>Granted some of these are most certainly due to bugs, but this serves as a reminder that Circles are not as airtight as you might think.</p>
<p>And though not as farcical as <a href="http://upload.wikimedia.org/wikipedia/en/8/8b/Google_Wave.png" target="_blank">Wave</a>, the model Google has created here is still complex, confusing user expectations for how the system works and social norms for how it should be used.</p>
<p>This confusion will inevitably lead to gaffes. Even if these boil down to user error and not some technical failure, Google should not be entirely free from blame.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/10/fuzzy-circles-in-google-plus/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Making Menus Escapable</title>
<link>https://thomaspark.co/2011/10/making-menus-escapable/</link>
<comments>https://thomaspark.co/2011/10/making-menus-escapable/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 07 Oct 2011 13:59:57 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=3823</guid>
<description><![CDATA[A post on my impressions of Ubuntu 11 led to lots of thoughtful discussion here and over at Hacker News. The part that seemed to generate the most interest was my take on why certain … <a href="https://thomaspark.co/2011/10/making-menus-escapable/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>A post on <a href="http://thomaspark.co/2011/10/seven-minutes-in-ubuntu/">my impressions of Ubuntu 11</a> led to lots of thoughtful discussion here and <a target="_blank" href="http://news.ycombinator.com/item?id=3063156">over at Hacker News</a>. The part that seemed to generate the most interest was my take on why certain menus seemed so troublesome.</p>
<p><span id="more-3823"></span> And while I described the problem in some depth, I glazed over any solution. So here I am to expand a bit on how Unity’s menus, and menus in general, might be improved, once again applying the <strong>angle of escape</strong> concept and pulling examples from the Mac.</p>
<h3>Recap</h3>
<p>I observed that when trying to select a menu item in Ubuntu, it’s quite easy to accidentally trip another menu. Due to the aspect ratio of Ubuntu’s menus, which tend to be taller and thinner, their angles of escape are often smaller than their Mac counterparts. Highlighted yellow in the screenshot below, you get 65 degrees with the Apple menu, compared to 50 degrees with Ubuntu’s system menu. This difference seems to have a noticeable impact.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated.png" alt="" title="Mac OS X and Ubuntu system menus" width="595" height="310" class="aligncenter size-full wp-image-3726" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated-300x156.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Further, let’s assume that users have two tendencies: to target the text of a menu item more than the whitespace, and to move in a straight line to their target. I believe these are reasonable hypotheses, at least for novices who haven’t trained themselves out of this behavior yet. Then due to Ubuntu’s placement of the menu item text in the example above, the problem is only compounded.</p>
<h3>Resize the Menu</h3>
<p>So what can we do about this? A straightforward approach is to increase the width of the menu. This helps the menu both as a target (invoking <a href="http://particletree.com/features/visualizing-fittss-law/" target="_blank">Fitts’ Law</a> again) and as a point of escape, a double win.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/clocks.png" alt="" title="Analog and Digital Time Menus on Mac" width="399" height="350" class="aligncenter size-full wp-image-3877" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/clocks.png 399w, https://thomaspark.co/wp/wp-content/uploads/2011/10/clocks-300x263.png 300w" sizes="auto, (max-width: 399px) 100vw, 399px" /></p>
<p>But while it helps visibility and targeting to a lesser degree, <strong>increasing the height of a menu actually hurts escapability</strong>. This is something to consider when comparing OS X’s 21 pixel menu bar to Ubuntu’s 23 pixels.</p>
<h3>Buffer Time and Space</h3>
<p>Since the ’80s, both Apple and Microsoft have dealt with escapability in the context of hierarchical menus, each addressing it in their own way. If you were to treat hierarchical menus at face value, the user would have to steer carefully across the width of a menu item to avoid triggering a neighbor.</p>
<p>Microsoft’s solution was, and continues to be, to keep the submenu displayed for an extra split second, regardless of your actions. If you’re quick enough, you can get to the submenu taking any path you wish.</p>
<p>Apple’s solution in Mac OS was to <a href="http://www.quinn.echidna.id.au/Quinn/WWW/HISubtleties/HierarchicalMenus.html" target="_blank">widen the angle of escape to 90 degrees</a>, so that as long as your movement was more horizontal than vertical, the submenu would stay open. Bruce Tognazzini, the original drafter of Apple’s HIG, talks about both approaches <a href="http://www.asktog.com/columns/022DesignedToGiveFitts.html" target="_blank">here under question 6</a>.</p>
<p>This <a href="http://arstechnica.com/apple/reviews/1999/12/macos-x-dp2.ars/5" target="_blank">went away in the transition to OS X</a>, but has since returned in a smarter form. Now the angle of escape is based on the size of the submenu, as long as you maintain a certain speed. Ubuntu takes a similar approach, but none of the OSes apply it to the main menu bar.</p>
<p>In the image below, you can see how the naïve, classic Mac OS, and Mac OS X approaches compare in their angles of escape.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/submenu.gif" alt="" title="Submenus" width="577" height="900" class="aligncenter size-full wp-image-3930" /></p>
<h3>Make the Menu Sticky</h3>
<p>Another approach is to make the menu sticky. Once clicked, it stays activated until you click elsewhere, maximizing the angle of escape. The tradeoff here is that it prevents you from performing the “piano slide” to scan multiple menus quickly. This makes it best suited for specialized menus.</p>
<p>Likely for technical reasons, third-party menu extras on the Mac take on this property, though Apple’s own menu extras do not. Apple’s Spotlight menu (which, it should be noted, is in the same position as Ubuntu’s system menu that started this whole discussion) quite intentionally gets the sticky treatment.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/menuextra1.png" alt="" title="Menu Extra on Mac" width="595" height="184" class="aligncenter size-full wp-image-3971" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/menuextra1.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/menuextra1-300x93.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Ubuntu might find good use for this approach in the right half of their menu bar.</p>
<h3>Change the Target</h3>
<p>A final approach is to offer visual cues for staying within the angle of escape. This might be achieved by keeping the menu item area narrow, dropping wider items further down the list, or lengthening the text of shorter items to fill the space.</p>
<p>Strong highlighting, as found in OS X and Ubuntu, also encourages users to use the entire width of the menu item. While the highlighting in Windows 7 is more subtle, menu items are rendered as buttons on hover, similarly signaling that the whitespace can be clicked.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/startmenu.png" alt="" title="Windows 7 Start Menu" width="509" height="537" class="aligncenter size-full wp-image-3977" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/startmenu.png 509w, https://thomaspark.co/wp/wp-content/uploads/2011/10/startmenu-284x300.png 284w" sizes="auto, (max-width: 509px) 100vw, 509px" /></p>
<p>To wrap up, let’s take a look at the volume controls in Mac OS X, Windows 7, and Ubuntu below. On Mac and Windows, the control stays within the angle of escape (though it doesn’t matter on Windows because theirs is sticky). On Ubuntu though, it extends well beyond it. <a href="http://www.youtube.com/watch?v=lVUokjAlREs" target="_blank">This video</a> demonstrates the problem in motion.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/volumecontrols.png" alt="" title="Volume controls for Mac, Windows, and Ubuntu" width="526" height="362" class="aligncenter size-full wp-image-4066" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/volumecontrols.png 526w, https://thomaspark.co/wp/wp-content/uploads/2011/10/volumecontrols-300x206.png 300w" sizes="auto, (max-width: 526px) 100vw, 526px" /></p>
<p>The obvious solution is to make Ubuntu’s volume control vertical. But we don’t necessarily have to follow the convention of other OSes to make it usable. We could make the menu sticky. We could add a time or space buffer. We could reorder the menu items. We could resize the menu or slider control. Or we could do some combination of these.</p>
<p>Sure, this is all sweating the small stuff. But multiply that over a whole operating system, and that’s how you end up creating a great user experience.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/10/making-menus-escapable/feed/</wfw:commentRss>
<slash:comments>7</slash:comments>
</item>
<item>
<title>Seven Minutes in Ubuntu</title>
<link>https://thomaspark.co/2011/10/seven-minutes-in-ubuntu/</link>
<comments>https://thomaspark.co/2011/10/seven-minutes-in-ubuntu/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sun, 02 Oct 2011 14:10:47 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=3521</guid>
<description><![CDATA[For a while now, I’ve been using my home machine with MAMP to develop a research prototype. But last week, I got my hands on a PC to use as a web server. Before I … <a href="https://thomaspark.co/2011/10/seven-minutes-in-ubuntu/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>For a while now, I’ve been using my home machine with <a href="http://www.mamp.info/en/mamp/index.html" target="_blank">MAMP</a> to develop a research prototype. But last week, I got my hands on a PC to use as a web server. Before I could get started on it though, I needed an operating system to install — ideally one that would get the job done with minimal setup and training on my part. After a bit of reading online, I chose <a href="http://www.ubuntu.com/ubuntu" target="_blank">Ubuntu</a>.</p>
<p><span id="more-3521"></span> <a href="http://thomaspark.me/wordpress/wp-content/uploads/2011/10/ubuntu.png"><img loading="lazy" decoding="async" src="http://thomaspark.me/wordpress/wp-content/uploads/2011/10/ubuntu-thumbnail.png" alt="" title="Ubuntu" width="595" height="446" class="aligncenter size-full wp-image-4360" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/ubuntu-thumbnail.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/ubuntu-thumbnail-300x225.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>
<p>What follows are my first impressions of Ubuntu 11. And I mean my very first impressions, after using it for just a few minutes, taking on the persona of a lifetime Mac user.</p>
<p>And these impressions come from someone who’s used mostly Windows at work and Mac at home. Sure, there’s a sprinkling of Solaris, IRIX, and Linux mixed in there, but I haven’t used Ubuntu, and haven’t had to adjust to the changes that Unity brings (such as <a href="http://yokozar.org/blog/archives/194" target="_blank">moving the window controls</a>). So I’m just the user that Ubuntu is targetting.</p>
<p>I hope you find this perspective of interest, whether you’re curious about an alternative operating system, or are a seasoned Linux user, developer, or advocate who wants to see things through a fresh set of eyes.</p>
<h3>The Good</h3>
<p>My greatest concern was that I’d have to do a lot of installing and configuring before I could get anything meaningful done. All I wanted was a standard setup, and to not derail focus from my work.</p>
<p>Fortunately, Ubuntu presents a familiar interface and is ready to go right out of the box. It doesn’t take much nowadays given how many of our applications are web-based, and on Ubuntu, Firefox comes pre-installed (more on that later). Remote desktop is built-in, which made it a breeze to set up VNC with my Mac. Window management <a href="http://windows.microsoft.com/en-US/windows7/products/features/snap" target="_blank">a la Windows 7 Snap</a> was a nice surprise; this requires a third-party app on the Mac.</p>
<h3>The Bad</h3>
<p>Like Mac OS X, Ubuntu puts the active application’s name in the menu bar. In OS X, this contains a menu of application-level functions like About, Preferences, and Quit. In Ubuntu, this is a non-clickable region (highlighted red), despite being nestled among and pretty much indistinguishable from the clickable ones (highlighted green). There’s something jarring about clicking something expectantly and not having it respond.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/menubars-annotated.png" alt="" title="Ubuntu and Mac OS X menu bars" width="595" height="74" class="aligncenter size-full wp-image-3802" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/menubars-annotated.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/menubars-annotated-300x37.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>I can see that the designers are trying to establish a hierarchy here, from the Ubuntu menu (which aligns with the dock) to the active application to the application’s menus. Still, there should be a stronger visual indicator that the application name is not clickable. Or you could just turn it into a menu, <a href="http://cbtcafe.com/mactutorials/applicationswitcher/appswitcher.html" target="_blank">taking a page from Mac OS 9</a>.</p>
<p>You might have noticed that Ubuntu’s menu bar is more tightly packed than OS X’s. A problem here is that while trying to select an item from a drop-down menu, it’s easy to accidentally trip another menu. This is most problematic with the system menu in the top right corner.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated.png" alt="" title="Mac OS X and Ubuntu system menus" width="595" height="310" class="aligncenter size-full wp-image-3726" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated-300x156.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Mac OS X’s Apple menu gives you a target of 45 by 21 pixels, compared to Ubuntu’s 28 by 23 pixels. These areas are highlighted green above. But <a href="http://particletree.com/features/visualizing-fittss-law/" target="_blank">as Fitts’ Law reminds us</a>, these corner targets are both effectively infinite in size.</p>
<p>More important than size is the <strong>angle of escape</strong> — the number of degrees you can move the cursor out without activating an adjacent menu. You get 65 degrees in OS X versus 50 degrees in Ubuntu, as highlighted yellow.</p>
<p>In fact, Ubuntu should have an even bigger angle than OS X. Due to the placement of the icon on the right and the left-justification of the menu items, you can’t travel in a straight line to click the first few pieces of text — this will activate the next menu. Instead, you have to perform a loop-de-loop. Widening the clickable area would help somewhat.</p>
<p>Now onto my next set of gripes, which center around managing new software. As I mentioned earlier, Firefox comes preinstalled. When I checked to see which version was installed, I was presented with the window below.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/mozilla-about.png" alt="" title="Firefox about window" width="595" height="362" class="aligncenter size-full wp-image-3715" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/mozilla-about.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/mozilla-about-300x183.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Version 4.0 is several major bumps behind the other platforms, which are sitting at 7.0.1. Below that is the text “Mozilla Firefox for Ubuntu canonical – 1.0”. Is this the 1.0 canonical version of Mozilla Firefox for Ubuntu? Or Mozilla Firefox for Ubuntu canonical version 1.0? And how does that relate to version 4.0? Apparently, <a href="https://bugs.launchpad.net/ubuntu/+source/firefox-3.5/+bug/418203" target="_blank">I’m not the only one</a> who finds this confusing.</p>
<p>And worse yet, there is no obvious way to update. I’m still not clear on whether there’s a newer version available, and how to update if it’s the case.</p>
<p>Anyway, the main reason I opened Firefox was to install Google Chrome (sorry Mozilla!). Fortunately, the latest version of Chrome was available to download. Double-clicking the package doesn’t take you to a standalone installer, but to Ubuntu Software Center.</p>
<p>Here, software is listed at two level, technical items and what I presume to be applications. But what’s classified as each can be a surprise. In the application list are items like Input Method Switcher and Multimedia Systems Selector, things most would consider system extensions more so than apps. On the other hand, Google Chrome is listed in technical items with a nondescript icon and label, along with 1,303 other things. Can you spot it in the image below?</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/10/usc-chrome.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/usc-chrome.png" alt="" title="Ubuntu Software Center" width="595" height="361" class="aligncenter size-full wp-image-3762" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/usc-chrome.png 882w, https://thomaspark.co/wp/wp-content/uploads/2011/10/usc-chrome-300x182.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>
<p>After installing Chrome, the natural next step is to open it. Yet, there’s nowhere in Ubuntu Software Center to do this directly. Contrast this with Windows, where you’re asked if you want to start the program, or the new way in OS X, where an application installed from the Mac App store <a href="http://vimeo.com/18501598" target="_blank">jumps right into your dock</a>.</p>
<h3>The Beautiful</h3>
<p>Despite these issues, I give <a href="http://design.canonical.com/" target="_blank">the designers</a> major props. Open source software has a reputation for being ugly and catering only to the power user. But based on my initial experiences, they’ve created a polished user interface that’s beautiful and user friendly in Ubuntu.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/10/seven-minutes-in-ubuntu/feed/</wfw:commentRss>
<slash:comments>40</slash:comments>
</item>
<item>
<title>The Devour Effect</title>
<link>https://thomaspark.co/2011/09/the-devour-effect/</link>
<comments>https://thomaspark.co/2011/09/the-devour-effect/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 26 Sep 2011 16:12:52 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=3167</guid>
<description><![CDATA[The folks over at Devour maintain a nice collection of videos, wrapped in a clean interface. One of the touches is that each video is presented using what I call the Devour Effect: a text … <a href="https://thomaspark.co/2011/09/the-devour-effect/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>The folks over at <a href="http://devour.com" target="_blank">Devour</a> maintain a nice collection of videos, wrapped in a clean interface. One of the touches is that each video is presented using what I call the Devour Effect: a text description in the foreground and a still from the video blurred in the background.</p>
<p><span id="more-3167"></span> <img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/devour.png" alt="" title="Devour" width="595" height="345" class="aligncenter size-full wp-image-3176" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/09/devour.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/devour-300x174.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>I was curious how Devour produced the blurred effect and so I took a look at their code. It turns out they simply preprocess the images in something like Photoshop. Sure, that may be the most bulletproof approach, but where’s the fun in that?</p>
<p>What follows is a comparison between Devour’s approach and four other, more programmatic techniques, including a pure CSS solution. The ones that utilize canvas or SVG are based on <a href="http://www.flother.com/blog/2010/image-blur-html5-canvas/" target="_blank">Matt Riggott’s work</a>. And as a point of reference, you can see the actual rendering from Devour above and what an unblurred version looks like below.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/unblurred.png" alt="" title="Unblurred" width="300" height="170" class="aligncenter size-full wp-image-3282" /></p>
<h3>Preprocess with Photoshop</h3>
<p>As I mentioned, Devour creates blurred stills in advance. The text is then overlaid by assigning it a negative top margin. I’ve recreated this here. The only difference to the actual rendering above, you might notice, is that I use Futura since I don’t have access to <a href="http://www.ms-studio.com/FontSales/proximanovacond.html" target="_blank">Proxima Nova Condensed</a>.</p>
<p><a href="http://jsbin.com/enaral/1/edit#html,live" target="_blank">View the code and live render</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/photoshop.png" alt="" title="Photoshop" width="300" height="170" class="aligncenter size-full wp-image-3280" /></p>
<h3>Blur with Canvas and JavaScript</h3>
<p>An alternative approach is to create a canvas element and embed the image in it. JavaScript can be used within a canvas to manipulate images, from scaling or rotating all the way down to pixel-specific operations. This is precisely how the <a href="http://www.pixastic.com/lib/docs/actions/blur/" target="_blank">blur action</a> in Pixastic works. Here, the blurring function loops through the image several times and averages each pixel’s color value with that of its neighbors.</p>
<p><a href="http://jsbin.com/olebur/1/edit#javascript,html,live" target="_blank">View the code and live render</a>. You might notice that the image here is Base64 encoded. This is to overcome a cross-domain security issue with JS Bin. You should be able to reference the image in the normal way.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/canvas.png" alt="" title="Canvas" width="300" height="170" class="aligncenter size-full wp-image-3277" /></p>
<h3>Blur with SVG and XML</h3>
<p>SVG is an image format that has a number of filter effects built right into it. While SVG is normally reserved for vector graphics, you can also embed a bitmap image in it. Then all it takes is a few lines of XML to apply a Gaussian blur to it. One thing to note is the weird glow around the border.</p>
<p><a href="http://jsbin.com/isifoc/1/edit#html,live" target="_blank">View the code and live render</a>. If you were to open the SVG file in a text editor, you would discover <a href="http://jsbin.com/uhedeh/1/edit#html,live" target="_blank">markup like this</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/svg.png" alt="" title="SVG" width="300" height="170" class="aligncenter size-full wp-image-3281" /></p>
<h3>Layer with Canvas and JavaScript</h3>
<p>In contrast to the pixel-based algorithms used in the previous techniques, the final two use a simple trick to blur more efficiently. Copies of the image are stacked upon each another, offset by a few pixels and partially transparent.</p>
<p>Here, a canvas element is created and the image is embedded at full opacity. With each call of the blurring function, copies of the image are stacked on itself recursively, set at an opacity of 12.5 percent and offset in each direction by a pixel. Each iteration results in an increasingly blurred image.</p>
<p><a href="http://jsbin.com/ixamep/1/edit#javascript,html,live" target="_blank">View the code and live render</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/layers.png" alt="" title="Layers" width="300" height="170" class="aligncenter size-full wp-image-3279" /></p>
<h3>Layer with CSS</h3>
<p>Finally, I wanted to see if I could achieve a similar effect using pure CSS — that is, without the aid of JavaScript, canvas, or SVG. Here, copies of the original image are set to an opacity of 12.5 percent and offset from the original by two pixels in each of eight directions.</p>
<p>A couple of remarks about the code. The copies are all given absolute positioning, meaning they are positioned relative to their common parent. CSS classes are used to set the offset of an image in a cardinal direction; a combination of these classes is used to offset an image diagonally. Finally, in order to use z-index to keep text at the top of the stack, all of the elements using z-index are given a position other than default static.</p>
<p><a href="http://jsbin.com/enucef/1/edit#html,live" target="_blank">View the code and live render</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/css.png" alt="" title="CSS" width="300" height="170" class="aligncenter size-full wp-image-3278" /></p>
<h3>Conclusion</h3>
<p>So how do these approaches measure up? As you can see from the side-by-side comparison, they all do an adequate job. Click to enlarge.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/09/comparo.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/comparo.png" alt="" title="Comparison of outputs" width="595" height="337" class="aligncenter size-full wp-image-3379" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/09/comparo.png 900w, https://thomaspark.co/wp/wp-content/uploads/2011/09/comparo-300x170.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>
<p>If you don’t want to bust out Photoshop and wrangle with a bunch of images, or you want to create a dynamic effect, try one of the alternative approaches. If, on top of that, you’re not comfortable programming, you can get by with just CSS.</p>
<p>But if you want what’s speediest and most robust on the client, do as Devour does.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/09/the-devour-effect/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Trebek: Building an Offline Web App</title>
<link>https://thomaspark.co/2011/09/trebek-building-an-offline-web-app/</link>
<comments>https://thomaspark.co/2011/09/trebek-building-an-offline-web-app/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 20 Sep 2011 15:40:03 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Games]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=2668</guid>
<description><![CDATA[In my experimentation with HTML5, I ended up making Trebek, a web app that allows you to play along at home with Jeopardy! The idea is that by trying to answer questions before the contestants … <a href="https://thomaspark.co/2011/09/trebek-building-an-offline-web-app/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>In my experimentation with HTML5, I ended up making Trebek, a web app that allows you to play along at home with <a href="http://en.wikipedia.org/wiki/Jeopardy" target="_blank" rel="noopener noreferrer">Jeopardy!</a> The idea is that by trying to answer questions before the contestants do and keeping score, you can gauge your chances of making it onto the show. <a href="http://www.pisspoor.com/jep.html" target="_blank" rel="noopener noreferrer">According to two-time winner Karl Coryat</a>, you have an excellent shot if you can score $28,000 or higher on a consistent basis, and Trebek helps keep track of your performance.</p>
<p><span id="more-2668"></span> <a href="https://thomaspark.co/projects/trebek/" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/iphone.png" alt="" title="Trebek on iPhone" width="595" height="316" class="aligncenter size-full wp-image-3007" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/09/iphone.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/iphone-300x159.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>
<p>You can try Trebek out below. For best results, load it in Safari on your iPhone or iPad, then <a href="http://www.lifehacker.com.au/2011/06/add-website-bookmarks-to-your-iphones-homescreen/" target="_blank" rel="noopener noreferrer">add it to your home screen</a>.</p>
<blockquote><p><a href="https://thomaspark.co/projects/trebek/" target="_blank" rel="noopener noreferrer">https://thomaspark.co/projects/trebek/</a></p></blockquote>
<p>What I want to do in this post is share some simple things I did to give Trebek a more app-like experience, despite it being a mere HTML/CSS/JavaScript bundle. If you’re interested in web development, read on.</p>
<h3>Tailoring the interface by scaling elements</h3>
<p>Trebek’s primary use case is leaning back on a sofa and pulling out your smartphone just as the show’s about to start. But it’s meant to be usable for – and therefore scales to – a full range of devices. You can test this out by loading it in a browser window and resizing to various shapes and sizes.</p>
<p>There are several ways to achieve this, but what I recommend is setting the font-size of the body to 100% and then using em as a unit of measure throughout the rest of the code.</p>
<pre>
<code class="language-css" lang="css">
body {
font-size: 100%;
}
#score {
padding: 0.2em 0 0.2em 0;
font-size: 6em;
text-shadow: #000000 0.05em 0.05em 0.02em;
}
</code>
</pre>
<p>The size of em depends on the font-size of the element. By default, 1 em equals 16 pixels. But by changing the base font-size, you can scale all properties that are using em simultaneously. With the following jQuery, you can update body’s font-size, and therefore all of these properties, whenever the window is resized.</p>
<pre>
<code class="language-javascript" lang="javascript" nowrap="0">
$(window).resize(function(){
$('body').css('font-size', Math.floor($(window).height() * 100 / 768) + '%');
});
</code>
</pre>
<p>You can see why using pixels instead might be a bad idea. As an absolute unit, you have to recalculate and update the pixel size of each property individually, each time the window is resized.</p>
<p>On the other hand, using percent to size things is appealing since it’s relative by its very nature. Using percent also means you no longer require an update function for when the window is resized. If you set an image’s width to be 25%, it’s always going to be 25% of whatever, you might assume. However, keep in mind that percentages are local, meaning they’re based on the element’s parent and not a global value. While they’re useful for site layout, they’re less effective for fine-tuned properties like padding and text-shadow. Just try using percents to set the same padding for multiple elements, when their parent elements are different sizes.</p>
<p>While I simply scaled the interface, you might consider <a href="http://www.alistapart.com/articles/responsive-web-design/" target="_blank" rel="noopener noreferrer">media queries</a> for more custom interfaces conditional on resolution, aspect ratio, and orientation. For example, you could provide a one-column interface for smartphones versus a two-column interface for tablets.</p>
<h3>Cutting the cord with local storage & application cache</h3>
<p>Local storage allows you to store data on the client in much the same way as a browser cookie. It allows you to avoid databases — nice for a lightweight app, particularly one you intend to work offline. One word of warning though: clearing the browser’s cache results in the data being lost. Trebek uses local storage to save scores and keep a history of a user’s performance.</p>
<p>To use local storage, bundle up your data into a JavaScript object and use the following code. First, it checks that local storage is supported. Next, it checks if a data object has been saved under the key ‘trebek’ before and if so, assigns it to a variable. In the second part of the code, a function is bound to the save button. This function adds a new entry to the data object using the current date/time as key and current score as value, and then puts the whole object in local storage under the key ‘trebek’.</p>
<pre>
<code class="language-javascript" lang="javascript">
if(localStorage){
if(localStorage.getItem('trebek')){
stats = JSON.parse(localStorage.getItem('trebek'));
}
$('#save').bind('mouseup', function(){
var now = new Date();
stats[now.toString()] = parseInt($('#score').text());
localStorage.setItem('trebek', JSON.stringify(stats));
});
</code>
</pre>
<p>Application cache stores your essential files so your web app can work offline, useful when your smartphone is in airplane mode or you have an iPod touch sans wifi. For Trebek, the greatest benefit regardless of whether the device is offline or not is that application cache improves startup speed.</p>
<p>The main thing you need is a cache manifest, which is a text file that specifies the resources to be cached for future use. Name this file “cache.manifest”, with the following content, and place it in the root of your web app. Under the CACHE section, you want to list all of the assets you wish to be cached except for the manifest file itself.</p>
<pre>
<code class="language-bash" lang="bash">
CACHE MANIFEST
# Trebek version 1.0
CACHE:
index.html
css/style.css
js/jquery-1.6.3.min.js
js/script.js
img/icon-web.png
NETWORK:
FALLBACK:
</code>
</pre>
<p>Each time the web app is opened while online, the cache manifest is checked to see if it’s been changed (such as by updating the version number comment). If a change has been made, this triggers the browser to re-cache the rest of the files. If not, the cache continues to be used.</p>
<p>With the cache manifest in place, you want to declare it in one of your pages by adding the following attribute to the HTML tag.</p>
<pre>
<code class="language-markup" lang="html4strict">
<html manifest="cache.manifest">
</code>
</pre>
<p>Finally, make sure that your web server is serving files with the manifest extension as type “text/cache-manifest”. It won’t work otherwise. You can check this using your favorite browser’s developer tool. If the file type is not correct, add the following line to the .htaccess file in the root of your web server.</p>
<pre>
<code class="language-bash" lang="bash">
AddType text/cache-manifest manifest
</code>
</pre>
<p>That covers the very basics of using local storage and application cache to enable offline functionality in your web app. Obviously much has been glossed over, so if you want to learn more, check out Mark Pilgrim’s chapters on <a href="http://diveintohtml5.org/storage.html" target="_blank" rel="noopener noreferrer">local storage</a> and <a href="http://diveintohtml5.org/offline.html" target="_blank" rel="noopener noreferrer">application cache</a>.</p>
<h3>Putting on the finishing touches for iOS</h3>
<p>Here are a few more steps you can take to put some polish on your newly offline-capable web app. First, save your favicon for multiple resolutions: 48, 57, 72, and 114 pixels. Not only are browsers making greater use of large favicons, but they can be used as icons when your web app is saved to your home screen, giving it a bit more of that native feel.</p>
<p>In the header of your page, add the following elements. The first specifies a favicon for web browsers, and the next three are for the iPhone, iPad, and iPhone retina display respectively. You can skip the <code>-precomposed</code> tag to have iOS automatically add its customary gloss to your icon.</p>
<pre>
<code class="language-markup" lang="html4strict" nowrap="0">
<link rel="icon" type="image/png" href="img/icon-web.png"/>
<link rel="apple-touch-icon-precomposed" href="img/icon-iphone.png" sizes="57x57"/>
<link rel="apple-touch-icon-precomposed" href="img/icon-ipad.png" sizes="72x72"/>
<link rel="apple-touch-icon-precomposed" href="img/icon-retina.png" sizes="114x114"/>
</code>
</pre>
<p>If you want to give your web app a custom splash screen, add the following tags as well. The images you reference must be exactly 1004×768, 768×1004, and 320×460 pixels respectively. As far as I can tell, iPhone 4’s retina resolution is not supported yet.</p>
<pre>
<code class="language-markup" lang="html4strict" nowrap="0">
<link rel="apple-touch-startup-image" href="img/startup-ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)"/>
<link rel="apple-touch-startup-image" href="img/startup-ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"/>
<link rel="apple-touch-startup-image" href="img/startup-iphone-portrait.png" media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)"/>
</code>
</pre>
<p>Add the following code to tell Safari that your site is intended as a web app, change the menu bar to black, hide the chrome to display the app full-screen, and prevent pinch-to-zoom.</p>
<pre>
<code class="language-markup" lang="html4strict" nowrap="0">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
</code>
</pre>
<p>So there you have it. It’s great to see the progress that’s being made with the web in recent years. Although it hasn’t quite reached parity with native apps, for many of the simpler apps you find in the App Store, it’s now possible to create an equivalent experience using HTML5.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/09/trebek-building-an-offline-web-app/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>Sizing Up Programmatically</title>
<link>https://thomaspark.co/2011/09/sizing-up-programmatically/</link>
<comments>https://thomaspark.co/2011/09/sizing-up-programmatically/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 09 Sep 2011 15:39:30 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Gadgets]]></category>
<category><![CDATA[Visualization]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=2617</guid>
<description><![CDATA[Yesterday, I showed a graphic that lays out popular devices by display size. In this post, I want to show a version created using HTML, CSS, and JavaScript. The upside of doing this programmatically rather … <a href="https://thomaspark.co/2011/09/sizing-up-programmatically/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Yesterday, I showed a <a href="http://thomaspark.co/2011/09/sizing-up-samsung/">graphic that lays out popular devices by display size</a>. In this post, I want to show a version created using HTML, CSS, and JavaScript. The upside of doing this programmatically rather than manually in a drawing program is that it’s easier to update, adjusts to each user’s viewport, and can be made interactive. The downside is that sometimes web technology isn’t up to the task of rendering something nicely yet.</p>
<p><span id="more-2617"></span> With the programmatic approach, the main function takes in a set of objects, each of which represents a device with corresponding specs: display size (diagonal in inches), display resolution (height and width in pixels), and physical dimensions (height and width in inches).</p>
<p>Each device is then rendered as a div. The aforementioned specs are used to determine its size and shape, with the content area of the div acting as the display and its border serving as the bezel. The display size is also used to determine the horizontal position of each device.</p>
<p>There are also three optional parameters. Scale factor defaults 1 millimeter to 1 pixel, but can be varied per device. Vertical shift centers the display in the bezel by default, but can be tweaked for certain devices such as the Kindle. Finally, curve factor can customize the roundedness of a device using the border-radius property, useful for devices like the Veer, although there are some kinks with that.</p>
<p>Below is a screenshot of the results, and you can <a href="https://thomaspark.co/projects/sizingup/" target="_blank" rel="noopener noreferrer">view the live version here</a>. You can also <a href="http://jsbin.com/oripup/edit#javascript,html" target="_blank" rel="noopener noreferrer">have a look at the code</a>, but pardon the cruft as this is just a proof of concept.</p>
<p><a href="https://thomaspark.co/projects/sizingup/" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/sizingup-small.png" alt="" title="Sizing Up Programmatically" width="595" height="986" class="aligncenter size-full wp-image-2623" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/09/sizingup-small.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/sizingup-small-181x300.png 181w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/09/sizing-up-programmatically/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Sizing Up Samsung</title>
<link>https://thomaspark.co/2011/09/sizing-up-samsung/</link>
<comments>https://thomaspark.co/2011/09/sizing-up-samsung/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 08 Sep 2011 17:14:55 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<category><![CDATA[Visualization]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=2525</guid>
<description><![CDATA[With new devices being released at such a rapid pace, it’s hard to keep up. Perhaps the most frenzied of the bunch has been Samsung, who’s adopted a mentality of “let’s release everything and see … <a href="https://thomaspark.co/2011/09/sizing-up-samsung/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>With new devices being released at such a rapid pace, it’s hard to keep up. Perhaps the most frenzied of the bunch has been Samsung, who’s adopted a mentality of “let’s release everything and see what sticks”. This really comes out when graphing some of the most popular devices by display size.</p>
<p><span id="more-2525"></span> As you can see, while most companies have two distinct classes — a smartphone at 3-4″ and a tablet at 10″ — <a href="http://reviews.cnet.com/8301-19736_7-20102320-251/samsung-galaxy-tablet-sizes-compared/" target="_blank">Samsung is offering several ‘tweeners</a> that bridge them. Note though that they still have a gap, which I expect to be filled shortly with a Samsung Galaxy NoteTab 6.5. In all seriousness, it’s surprising that they haven’t targeted that particular size given Amazon’s already found a market there. </p>
<p>One thing’s for sure. It’s going to be interesting to see if any ‘tweener devices eventually gain a foothold, and it looks like Samsung’s <em>in vivo</em> experimentation will be showing us the way.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/09/sizingupsamsung-medium.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/sizingupsamsung-small.png" alt="" width="595" height="554" class="aligncenter size-full wp-image-2608" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/09/sizingupsamsung-small.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/sizingupsamsung-small-300x279.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/09/sizing-up-samsung/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Fantasy Slopegraphs</title>
<link>https://thomaspark.co/2011/09/fantasy-slopegraphs/</link>
<comments>https://thomaspark.co/2011/09/fantasy-slopegraphs/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sat, 03 Sep 2011 14:40:47 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Visualization]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=2380</guid>
<description><![CDATA[I love me some fantasy baseball. Mainly when I’m near the top. With the regular season winding down and the playoffs set to start, my team sits comfortably in second place (in a league of … <a href="https://thomaspark.co/2011/09/fantasy-slopegraphs/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I love me some <a href="http://en.wikipedia.org/wiki/Fantasy_baseball" target="_blank">fantasy baseball</a>. Mainly when I’m near the top. With the regular season winding down and the playoffs set to start, my team sits comfortably in second place (in a league of 12). But this post is only partly to brag about the Mythical Man-Moths.</p>
<p><span id="more-2380"></span> It’s also to reflect on them. How did my draft selections ultimately turn out? Which players ended up being disappointments, and which were bargains or outright steals? Who ended up contributing most to this season’s success? </p>
<p>A <a href="http://charliepark.org/slopegraphs/" target="_blank">slopegraph</a> is an interesting way of capturing the answers. Below is one I made of my players: their rankings (against all other players) at the end of last season on the left, the draft picks I used to select them at the start of this season in the middle, and their ranks as of this week on the right<sup class='footnote'><a href='#fn-2380-1' id='fnref-2380-1' onclick='return fdfootnote_show(2380)'>1</a></sup>. Players released at some point in the season are gray, while those picked up as free agents are green. Click for full size.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/09/baseballslopegraph-full.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/baseballslopegraph-thumb.png" alt="" title="Fantasy baseball slopegraph" width="595" height="609" class="aligncenter size-full wp-image-2415" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/09/baseballslopegraph-thumb.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/baseballslopegraph-thumb-293x300.png 293w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>
<div class='footnotes' id='footnotes-2380'>
<div class='footnotedivider'></div>
<ol>
<li id='fn-2380-1'> Ranks are taken from <a href="http://baseball.fantasysports.yahoo.com/" target="_blank">Yahoo! Sports</a>. <span class='footnotereverse'><a href='#fnref-2380-1'>↩</a></span></li>
</ol>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/09/fantasy-slopegraphs/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Puck Remotes and Magic Remotes</title>
<link>https://thomaspark.co/2011/08/puck-remotes-and-magic-remotes/</link>
<comments>https://thomaspark.co/2011/08/puck-remotes-and-magic-remotes/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 31 Aug 2011 12:27:39 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=2032</guid>
<description><![CDATA[I previously talked about why the current Apple TV is a stopgap for the true Apple TV. With that in mind, I want to discuss my experience with the current model and what it means … <a href="https://thomaspark.co/2011/08/puck-remotes-and-magic-remotes/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I previously talked about why the current Apple TV is a stopgap for <a href="http://thomaspark.co/2011/08/the-true-apple-tv/">the true Apple TV</a>. With that in mind, I want to discuss my experience with the current model and what it means for an eventual Apple-branded TV. Through the lens of the remote control.</p>
<p><span id="more-2032"></span> <img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/appletvremote.jpg" alt="" title="Apple TV remote" width="595" height="195" class="size-full wp-image-2233" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/08/appletvremote.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/08/appletvremote-300x98.jpg 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Apple is renowned for its excellent design. But with the Apple TV remote, they’ve made a number of missteps.</p>
<ul>
<li><strong>It’s too small.</strong> Forget losing it between your couch cushions, how about between the pages of a magazine? At 6 millimeters, it’s so thin that it never fits comfortably in one’s hand, and is awkward if not painful to use for a significant length of time. There’s a limit to how small handheld devices should be, and it’s been exceeded.</li>
<li><strong>It’s short range.</strong> The remote is infrared, meaning it requires a direct line of sight. The Apple TV can’t be tucked away, and at certain angles, the remote is unresponsive.</li>
<li><strong>It lacks buttons.</strong> While other companies continue to make remotes <a href="http://www.engadget.com/2010/10/12/sonys-internet-tv-powered-by-google-tv-first-hands-on/" target="_blank">overly complex</a>, Apple goes the opposite extreme. Six buttons do the job most of the time, but not always. One of the things I miss most is a dedicated power button. If you’re in the Netflix app for instance, you have to exit out of it to the home screen with multiple “menu” clicks before you hold the select button for two seconds to power down the Apple TV. Not exactly intuitive or convenient.</li>
</ul>
<p>Small and unergonomic. Tethered to a short range. Not enough buttons. Sound familiar? <strong>The Apple TV remote is the new puck mouse.</strong></p>
<p>The so-called <a href="http://en.wikipedia.org/wiki/Apple_USB_Mouse" target="_blank">“hockey puck” mouse</a> was included with the original iMac in 1998 and stubbornly thereafter for more two years. With its release came a chorus of complaints. It was too small for comfort, they said as they bought <a href="http://www.drbottkg.com/prod/iCatch.html" target="_blank">third-party plastic shells</a>. The round shape meant that it was constantly getting turned around and losing orientation. The two-foot cable was too short for most setups. And of course there was that old chestnut about the single button.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/imacpuckmouse.jpg" alt="" title="iMac puck mouse" width="540" height="330" class="aligncenter size-full wp-image-2231" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/08/imacpuckmouse.jpg 540w, https://thomaspark.co/wp/wp-content/uploads/2011/08/imacpuckmouse-300x183.jpg 300w" sizes="auto, (max-width: 540px) 100vw, 540px" /></p>
<p>Eventually Apple gave up on the puck mouse, though they still were never able to get the mouse quite right. Last year, they ditched the “faster horses” approach, going in a completely different direction with <a href="http://en.wikipedia.org/wiki/Magic_Trackpad" target="_blank">Magic Trackpad</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/magictrackpad.png" alt="" title="Magic Trackpad" width="595" height="239" class="alignnone size-full wp-image-2274" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/08/magictrackpad.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/08/magictrackpad-300x121.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>If, then, the current Apple TV remote is the puck remote, what would it take for it to become the magic remote?</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/08/puck-remotes-and-magic-remotes/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>The True Apple TV</title>
<link>https://thomaspark.co/2011/08/the-true-apple-tv/</link>
<comments>https://thomaspark.co/2011/08/the-true-apple-tv/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sun, 28 Aug 2011 17:19:42 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=2180</guid>
<description><![CDATA[In the face of rumors that Apple is working on a TV, many remain skeptical that they would get into such a commoditized business. Let me offer some counterpoints. The boundary between computers and TVs … <a href="https://thomaspark.co/2011/08/the-true-apple-tv/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>In the face of rumors that <a href="http://www.macrumors.com/2011/08/28/multiple-sources-suggest-apple-working-on-television-for-as-early-as-2012/" target="_blank">Apple is working on a TV</a>, many remain skeptical that they would get into such a commoditized business. Let me offer some counterpoints.</p>
<p><span id="more-2180"></span> <img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/appletv2.jpg" alt="" title="Apple TV 2" width="595" height="476" class="aligncenter size-full wp-image-2204" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/08/appletv2.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/08/appletv2-300x240.jpg 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>The boundary between computers and TVs is blurring. TVs are becoming increasingly connected and “smart”, while personal computers are becoming a platform for obtaining, viewing, and serving video content. This follows the convergence of mobile phones and computing, and <a href="http://www.asymco.com/2011/08/22/nokia-vs-android/" target="_blank">a shakeup of the mobile phone industry</a> since 2008.</p>
<p>While the hardware specs of current TVs are decent, the user interface leaves something to be desired, both in terms of software and hardware. Think of how poor the remote control, built-in Internet “apps”, channel guide, and configuration settings are on most TVs. There is room for improvement in the user experience, and no doubt Apple believes it can do much better.</p>
<p>In markets that Apple does enter, they favor streamlined integration, from the original Macintosh to the current iMac. Not only does this integration lead to simplicity and elegance, but it opens doors to new possibilities, some of which I’ll talk about in a later post. This also includes the aforementioned TV remote, channel guide, and settings. Having a standalone device like the current Apple TV doesn’t fit with this philosophy.</p>
<p>There are still compelling reasons to offer a standalone device: to reach those who’ve already bought an HDTV, and to allow people to upgrade their Apple TVs without tossing out their perfectly good TV sets. As to the second, upgrade concerns will soon become irrelevant. Once cloud-based storage and 1080p resolution are rolled out fully, only software updates will be needed to stay relatively up to date. They are nearly there. As to the first, Apple might offer a standalone device alongside the integrated model.</p>
<p>But only as a reluctant, and perhaps temporary, measure. To Apple, the standalone model is only a step toward their vision of an integrated one, the true Apple TV.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/08/the-true-apple-tv/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Toward the Man-Purse</title>
<link>https://thomaspark.co/2011/08/toward-the-man-purse/</link>
<comments>https://thomaspark.co/2011/08/toward-the-man-purse/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 24 Aug 2011 12:51:04 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=1949</guid>
<description><![CDATA[After nearly a decade of service, my messenger bag is finally giving up the ghost. I’ve been looking for a replacement that’s smaller and lighter: just enough to hold a 13-inch Macbook Air, some pen … <a href="https://thomaspark.co/2011/08/toward-the-man-purse/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>After nearly a decade of service, my messenger bag is finally giving up the ghost. I’ve been looking for a replacement that’s smaller and lighter: just enough to hold a 13-inch Macbook Air, some pen and paper, and maybe a book. And I’m realizing that the man-purse is an inevitability.</p>
<p><span id="more-1949"></span> <img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/manpurse.png" alt="" title="Toward the man-purse" width="595" height="400" class="alignnone size-full wp-image-1961" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/08/manpurse.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/08/manpurse-300x202.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Once upon a time, men used briefcases to carry around their contracts, bundles of cash, and nuclear launch codes. Over the years, these morphed into laptop bags and messenger bags. In the meantime, many have gotten quite used to the convenience, if not essentiality, of having things beyond their keys and wallet on them.</p>
<p>Until the state of the art reaches a point where <a href="http://tvtropes.org/pmwiki/pmwiki.php/Main/WeWillNotHavePocketsInTheFuture" target="_blank">pockets are pointless</a>, the need for such a bag remains. But the requirements are changing. Convergence means fewer devices to carry around; instead of a PDA, MP3 player, and camera, you have a smartphone. Miniaturization means the devices you do carry around are getting thinner and lighter; 15-inch behemoths make room for subnotebooks and iPads. Digitization means fewer documents printed on paper; paperbacks are replaced with a Kindle.</p>
<p>What’s needed is a smaller bag. And whether you can <a href="http://www.nytimes.com/2010/12/16/fashion/16ipad.html" target="_blank">come to grips with it or not</a>, let’s accept that we’re entering man-purse territory.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/08/toward-the-man-purse/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
<item>
<title>Version Inflation</title>
<link>https://thomaspark.co/2011/08/version-inflation/</link>
<comments>https://thomaspark.co/2011/08/version-inflation/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 17 Aug 2011 19:49:45 +0000</pubDate>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=1900</guid>
<description><![CDATA[Major versions sure don’t go as far as they used to. Both Google and Mozilla have adopted rapid release schedules for their web browsers, aiming for four or more major releases per year. As a … <a href="https://thomaspark.co/2011/08/version-inflation/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Major versions sure don’t go as far as they used to. Both Google and Mozilla have adopted rapid release schedules for their web browsers, aiming for four or more major releases per year. As a point of reference, it took Microsoft five long years to bump Internet Explorer from version 6 to 7! One per year seems about the norm.</p>
<p><span id="more-1900"></span> As with economic inflation, more versions means that each version holds less significance. It seems that this is precisely what Google and Mozilla hope to achieve, deemphasizing “What version are you on?” in favor of “Are you up to date?” <a href="http://www.techzoom.net/publications/silent-updates/">Silent, automatic updates</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=678775">hidden version numbers</a> certainly support this notion. Perhaps more people will stay up-to-date, benefiting both security and standards, but we’ll have to wait and see the impact it has on web development.</p>
<p>Mozilla hasn’t always had this approach, but when Firefox and Thunderbird asked me to update to 6.0 today, I had to take pause. “Am I going nuts, or did I just update to 5.0 last month?” It turns out I hadn’t lost it yet.</p>
<p>I went back to compare the release schedules of the major browsers. You can see them plotted by year…</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/08/browserversionsbyyear.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/browserversionsbyyear-1024x695.png" alt="" title="Browser Versions by Year" width="595" height="403" class="alignnone wp-image-1908" /></a></p>
<p>…and by months since initial release.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/08/browserversionsbyrelease.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/browserversionsbyrelease-1024x694.png" alt="" title="Browser Versions by Release" width="595" height="403" class="alignnone size-large wp-image-1932" /></a></p>
<p>There are clearly two schools of thought, the traditional versus the rapid releases of Chrome and Firefox as of late. Projecting with a simple linear regression (I know), here’s what’s in store for the year 2020.</p>
<ul>
<li>Internet Explorer 13</li>
<li>Firefox 10.4</li>
<li>Safari X</li>
<li>Chrome 55.1.531.866</li>
<li>Opera 17 Series</li>
</ul>
<p>But with the latest change in policy from Mozilla, and perhaps other organizations following suit, version inflation may be much greater, if they even matter at all.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/08/version-inflation/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
<item>
<title>Starcraft Collective</title>
<link>https://thomaspark.co/2011/05/starcraft-collective/</link>
<comments>https://thomaspark.co/2011/05/starcraft-collective/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 18 May 2011 14:14:32 +0000</pubDate>
<category><![CDATA[Data]]></category>
<category><![CDATA[Games]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=1525</guid>
<description><![CDATA[Groups of animals get special collective nouns1, some of which are familiar (e.g., a pride of lions, a gaggle of geese) and others that are less known but equally evocative: a crash of rhinos, a … <a href="https://thomaspark.co/2011/05/starcraft-collective/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Groups of animals get special collective nouns<sup class='footnote'><a href='#fn-1525-1' id='fnref-1525-1' onclick='return fdfootnote_show(1525)'>1</a></sup>, some of which are familiar (e.g., a pride of lions, a gaggle of geese) and others that are less known but equally evocative: a crash of rhinos, a charm of hummingbirds, a prickle of porcupines, a loveliness of ladybugs, a cackle of hyenas, a glint of goldfish, a parliament of owls.</p>
<p>Starcraft units aren’t too far off from animals — Zerglings are reminiscent of dogs, ultralisks elephants, and archons big, white fluffy bunnies — so what collective nouns would capture the spirit of each? Searching the web, I found that the question had been posed before, with lots of ideas but no consensus.</p>
<p><span id="more-1525"></span><img decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/05/scbanner.jpg" alt="" title="Immortals versus siege tanks" width="100%" height="275" class="aligncenter size-full wp-image-1643" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/05/scbanner.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/05/scbanner-300x139.jpg 300w" sizes="(max-width: 595px) 100vw, 595px" /></p>
<p>I conducted a survey to settle the matter<sup class='footnote'><a href='#fn-1525-2' id='fnref-1525-2' onclick='return fdfootnote_show(1525)'>2</a></sup>. Each SC2 unit was given five options (plus “other”) that were culled from various sources. In all, 764 people (40% Zerg, 27% Protoss, 19% Terran, and 14% Random) took the survey over the span of three days.</p>
<h4>Results</h4>
<p>The top vote-getters for each unit are summarized below.</p>
<table>
<tr>
<td><strong>Terran</strong></td>
<td><strong>Zerg</strong></td>
<td><strong>Protoss</strong></td>
</tr>
<tr>
<td>crew of SCVs</td>
<td>swarm of drones</td>
<td>cluster of probes</td>
</tr>
<tr>
<td>pack of MULEs</td>
<td>batch of larvae</td>
<td>legion of zealots</td>
</tr>
<tr>
<td>squad of marines</td>
<td>brood of broodlings</td>
<td>league of stalkers</td>
</tr>
<tr>
<td>band of marauders</td>
<td>cluster of overlords</td>
<td>force of sentries</td>
</tr>
<tr>
<td>pack of reapers</td>
<td>swarm of zerglings</td>
<td>watch of observers</td>
</tr>
<tr>
<td>company of ghosts</td>
<td>harem of queens</td>
<td>assembly of immortals</td>
</tr>
<tr>
<td>gang of hellions</td>
<td>horde of hydralisks</td>
<td>spectrum of warp prisms</td>
</tr>
<tr>
<td>battery of siege tanks</td>
<td>brood of banelings</td>
<td>sweep of colossi</td>
</tr>
<tr>
<td>battalion of thors</td>
<td>congress of overseers</td>
<td>plume of phoenix</td>
</tr>
<tr>
<td>squadron of vikings</td>
<td>infestation of roaches</td>
<td>cloud of void rays</td>
</tr>
<tr>
<td>convoy of medivacs</td>
<td>host of infestors</td>
<td>conclave of high templar</td>
</tr>
<tr>
<td>congress of ravens</td>
<td>outbreak of infested terrans</td>
<td>brotherhood of dark templar</td>
</tr>
<tr>
<td>brigade of banshees</td>
<td>flock of mutalisks</td>
<td>ball of archons</td>
</tr>
<tr>
<td>fleet of battlecruisers</td>
<td>cluster of corruptors</td>
<td>armada of carriers</td>
</tr>
<tr>
<td></td>
<td>network of nydus worms</td>
<td>cloud of interceptors</td>
</tr>
<tr>
<td></td>
<td>stampede of ultralisks</td>
<td>fleet of motherships</td>
</tr>
<tr>
<td></td>
<td>eclipse of brood lords</td>
<td></td>
</tr>
</table>
<h4>Some Notes</h4>
<p>The most consensus was for “pack” of MULEs. Ravens were the other unit named for an animal; its official collective (unkindness) actually came in last place, while it received the most write-ins with “murder” and “flock.”</p>
<p>The most contentious units were banelings (#1 and #4 separated by 6%), immortals (#1 and #2 by 2.4%), phoenix (#1 and #3 by 2.0%), and colossi (#1 and #3 by 1.4%). Protoss units in particular seem far from settled.</p>
<p>For Zerg units, “swarm” fared well both as an option and as a write-in. Should all Zerg units simply be considered “the swarm”?</p>
<p>Generally one can’t have more than one mothership in-game, which led to some interesting write-ins: paradox, singularity, singleton, FOREVER ALONE.</p>
<p>“Other” honorable mentions: a flower of vikings, a nevermore of ravens, a clutch of larva, a grack of zerglings, a useless of hydralisks, a gaggle of mutalisks, a bronze league of observers, a gathering of immortals, an imbalance of colossi, a wing of phoenix.</p>
<p>Finally, a creative exercise for the reader: given the units of your domain, can you come up with collectives that capture their spirit?</p>
<h4>Appendix</h4>
<p>Here are the full results for <a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/terran.png">Terran</a>, <a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/zerg.png">Zerg</a>, and <a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/protoss.png">Protoss</a>.</p>
<div class='footnotes' id='footnotes-1525'>
<div class='footnotedivider'></div>
<ol>
<li id='fn-1525-1'> A longer list of animal collective nouns can be found <a href="http://www.thealmightyguru.com/Pointless/AnimalGroups.html">here</a>. <span class='footnotereverse'><a href='#fnref-1525-1'>↩</a></span></li>
<li id='fn-1525-2'> The solicitation can be viewed <a href="http://www.reddit.com/r/starcraft/comments/h9riu/take_the_starcraft2_collective_nouns_survey/">here</a>. <span class='footnotereverse'><a href='#fnref-1525-2'>↩</a></span></li>
</ol>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/05/starcraft-collective/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>Icon Blues</title>
<link>https://thomaspark.co/2011/05/icon-blues/</link>
<comments>https://thomaspark.co/2011/05/icon-blues/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 04 May 2011 10:32:40 +0000</pubDate>
<category><![CDATA[Data]]></category>
<guid isPermaLink="false">http://pilcro.ws/?p=266</guid>
<description><![CDATA[I’m not the only one who’s noticed that blue icons seem to be totally overrepresented. But is it really this bad, or is the confirmation bias just acting up again? I decided to find out. … <a href="https://thomaspark.co/2011/05/icon-blues/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I’m not the only one who’s noticed that <a href="http://www.subtraction.com/2008/02/25/blue-in-the-">blue icons seem to be totally overrepresented</a>. But is it really this bad, or is the confirmation bias just acting up again? I decided to find out.</p>
<p><span id="more-266"></span> <a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/blueicons.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/05/blueicons.png" alt="" title="Blue Icons" width="582" height="118" class="aligncenter size-full wp-image-1488" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/05/blueicons.png 582w, https://thomaspark.co/wp/wp-content/uploads/2011/05/blueicons-300x61.png 300w" sizes="auto, (max-width: 582px) 100vw, 582px" /></a></p>
<h4>The Method</h4>
<p>From each of the twenty iTunes categories (e.g., books, business, education), I collected the icons of the top 30 paid iPhone apps. I used the <a href="http://www.pythonware.com/products/pil/">Python Imaging Library</a> to run through these images pixel by pixel, classifying them into 11 main colors and tallying them up.</p>
<p>Here are a couple of examples shown by percentage. <a href="http://itunes.apple.com/us/app/chat-for-google-talk/id407644858?mt=8">Chat for Google Talk</a>:</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/googletalk.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/05/googletalk.png" alt="" width="608" height="496" class="aligncenter size-full wp-image-1427" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/05/googletalk.png 608w, https://thomaspark.co/wp/wp-content/uploads/2011/05/googletalk-300x245.png 300w" sizes="auto, (max-width: 608px) 100vw, 608px" /></a></p>
<p>And <a href="http://itunes.apple.com/us/app/angry-birds/id343200656?mt=8">Angry Bird</a>s:</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/angrybirds.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/05/angrybirds.png" alt="" width="608" height="496" class="aligncenter size-full wp-image-1486" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/05/angrybirds.png 608w, https://thomaspark.co/wp/wp-content/uploads/2011/05/angrybirds-300x245.png 300w" sizes="auto, (max-width: 608px) 100vw, 608px" /></a></p>
<p>At this point, I could have aggregated all of the pixels across all icons and counted their colors, but that didn’t seem very informative. Instead, I focused on the major colors of each icon, which I defined as making up at least 30 percent of the pixels. With this criteria, the Google Talk icon is white and gray, and the Angry Birds icon is blue.</p>
<h4>The Results</h4>
<p>Here’s how the colors broke down for each category (click to enlarge):</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/categories.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/05/categories-1024x120.png" alt="" width="595" height="69" class="aligncenter size-large wp-image-1438" /></a></p>
<p>And the aggregate:</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/overall.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/05/overall.png" alt="" width="407" height="496" class="aligncenter size-full wp-image-1439" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/05/overall.png 407w, https://thomaspark.co/wp/wp-content/uploads/2011/05/overall-246x300.png 246w" sizes="auto, (max-width: 407px) 100vw, 407px" /></a></p>
<p>Blue icons were indeed the most common. But while I expected half or more of the icons to be blue, it came closer to one-third. Even at that level though, blue far exceeded the other colors. This is a shame, given that some of my favorite iPhone icons (e.g., <a href="http://itunes.apple.com/us/app/delivery-status-touch-package/id290986013?mt=8">Delivery Status</a>, <a href="http://itunes.apple.com/us/app/instagram/id389801252?mt=8">Instagram</a>, <a href="http://itunes.apple.com/us/app/paprika-recipe-manager-for/id406732590?mt=8">Paprika</a>) use little to no blue. The worst offenders in this regard were travel and navigation apps, half of which were blue. </p>
<p>Black was the least common color for an icon. There were also very few yellow, purple, pink, or white icons, so if you want your app to stand out, there you go.</p>
<p>Pink was most popular with health & fitness apps. Make of that what you will.</p>
<p>A couple of things I took away from the process. First, I couldn’t find much help in the way of information or software for reducing a million colors down to the ones you’d, say, find in a Crayola 12-pack. You can accomplish this by carving out the color space, but as <a href="http://imgs.xkcd.com/blag/satfaces_map_1024.png">this chart from the xkcd color survey</a> shows, the colors we define are quite idiosyncratic, both as a product of human perception and as an artifact of human culture. I ended up converting from RGBA to <a href="http://en.wikipedia.org/wiki/HSL_and_HSV">HSL</a>, which made it a bit easier to come up with clunky heuristics to classify the colors.</p>
<p>Second, the illusory nature of color. Juxtaposing different colors skewed them, the sizes of the backgrounds were overestimated, and shadows threw perceptions off. A case of the human mind outsmarting itself. This makes it tough to give an accurate account, when a pixel is technically one color, but people all perceive it to be another. Most of the time, it’s the perception that matters.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/05/icon-blues/feed/</wfw:commentRss>
<slash:comments>3</slash:comments>
</item>
<item>
<title>Pyramid Schemes</title>
<link>https://thomaspark.co/2011/04/pyramid-schemes/</link>
<comments>https://thomaspark.co/2011/04/pyramid-schemes/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 12 Apr 2011 20:32:19 +0000</pubDate>
<category><![CDATA[Visualization]]></category>
<guid isPermaLink="false">http://blindp.wordpress.com/?p=8</guid>
<description><![CDATA[The other day, I was having breakfast and scouring the cereal box for reading material when I came across the new food pyramid. What had they done! This version apparently replaced the old one back … <a href="https://thomaspark.co/2011/04/pyramid-schemes/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>The other day, I was having breakfast and scouring the cereal box for reading material when I came across <a href="https://en.wikipedia.org/wiki/Food_pyramid_(nutrition)#/media/File:MyPyramidFood.svg">the new food pyramid</a>. What had they done!</p>
<p><span id="more-8"></span> <img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidnew.png" alt="" title="New Food Pyramid" width="595" height="464" class="aligncenter size-full wp-image-4585" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidnew.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidnew-300x234.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /> </p>
<p>This version apparently replaced the old one back in 2005. No doubt the actual content of the original <em>was</em> highly dubious, but it’s hard to argue against its memorability. I can still picture the carb foundation and fatty capstone like it was yesterday.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidold.png" alt="" title="Old Food Pyramid" width="595" height="462" class="aligncenter size-full wp-image-4586" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidold.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidold-300x233.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Unfortunately, with the new version, a lot of what made the original effective was lost. Let’s run through the issues from an information design perspective.</p>
<h3>Mixed Signals</h3>
<p>Is the new pyramid just a logo, or is it conveying more specific information? It’s not clear at first glance. The old pyramid communicated its purpose as an information graphic and primed the mind for interpreting it this way.</p>
<h3>Missing the Point</h3>
<p>The value of a pyramid diagram is in using its shape to represent hierarchical or proportional information — large bottom to small top. In the new pyramid, the sections are proportional but drawn as vertical bands! The USDA give two reasons for this change. First, to emphasize variety, that you should have something from each food group every day. Fair enough. Second, to emphasize moderation, the wider base of each band representing that you should have more foods with low fat and sugar from that group, and the narrow top meaning less foods with high fat and sugar. I kid you not.</p>
<h3>Not Enough Info</h3>
<p>Sometimes a picture is worth a thousand words, but a bit of text can have a multiplicative effect. The widths of the colored bands vary and are meant to be general guidelines. But precisely what is anyone’s guess. Should we strive to balance the food groups equally, or cut down on meats and beans? Should we have more grains than anything else, as clearly suggested in the original? And what is the yellow band?</p>
<h3>Hidden Messages</h3>
<p>Did you realize that the white tip of the pyramid represents discretionary calories, such as from candy and alcohol? Me neither.</p>
<h3>Jack of all Trades, Master of None</h3>
<p>The food pyramid is supposedly a “food guidance system,” yet crammed in is Clippy McClipartson scaling it to symbolize the importance of physical activity. Let’s work on the “food guidance” part.</p>
<h3>Chartjunk</h3>
<p>Giving examples of each food group is a great idea, but the execution needs improvement. The cluttered layout and horrible quality of the clip art make it more distracting than informative.</p>
<p>The bottom line is, does the new food pyramid help people make informed decisions about the nutritional value of their meals? I would argue not. Effective information design hinges on a message that is consistent and focused. The new food pyramid, which reeks of design-by-committee, fails on both accounts.</p>
<p>What can be done then? I suggest stamping the pyramid in big, bold text with “MyPyramid.gov” and moving the <a href="http://www.mypyramid.gov/mypyramid/index.aspx">Daily Food Plan</a> to the front page of the website.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/04/pyramid-schemes/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Save Icon</title>
<link>https://thomaspark.co/2011/04/save-icon/</link>
<comments>https://thomaspark.co/2011/04/save-icon/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 07 Apr 2011 03:37:16 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://pilcro.ws/?p=187</guid>
<description><![CDATA[Earlier this week, David Friedman proposed a new save icon to replace the antiquated floppy disk. In the ensuing discussion, many noted that with automatic revision control à la Google Docs and Mac OS X … <a href="https://thomaspark.co/2011/04/save-icon/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Earlier this week, David Friedman proposed <a href="http://www.ironicsans.com/2011/04/idea_a_new_save_icon.html">a new save icon</a> to replace the antiquated floppy disk. In the ensuing discussion, many noted that with automatic revision control à la Google Docs and Mac OS X Lion becoming the norm, the whole notion of saving would become history and render the issue moot.</p>
<p><span id="more-187"></span> <a href="http://thomaspark.co/wp/wp-content/uploads/2011/04/saveicon.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/04/saveicon.png" alt="" title="Save Icon" width="149" height="173" class="alignleft size-full wp-image-1393" /></a></p>
<p>Whether that turns out to be the case or not, it raises several interesting questions. With so many computer icons based on specific technology, what happens when that technology fades from public consciousness? Does a lack of familiarity with that technology create usability problems with the icons? Should new icons be devised? And are they?</p>
<p>All English speakers understand the word <em>window</em> to mean an opening designed to let in air or light. But only the geeks among us know the rich history of this word. It originates from an Old Norse phrase describing an opening in a building’s roof as a <em>wind eye</em>. This poeticism was important early on for understandability and communicability of a new idea. But as the word took hold, it established a meaning of its own that transcended its legacy. Today, a window is no longer thought of as the metaphorical wind eye — a window is a window.</p>
<p>Icons are also a language, of the visual sort. In the early days of the graphical user interface, the <a href="http://en.wikipedia.org/wiki/Desktop_metaphor">desktop metaphor</a> was heavily relied upon to communicate new ideas about computing. This was essential to its success, as the nascent GUI made a newbie out of everyone.</p>
<p>However, GUI conventions have since become engrained in our culture, and the meaning of terms like desktop, file, and trash in a computing context now transcend the original metaphors. We are in an age where people interact with digital folders much more than manila ones, where they know how to search without having ever handled a magnifying glass, and where they adjust their volume control without realizing it depicts a speaker cone.</p>
<p>And just as these icons live on beyond their origins, I say long live the floppy disk!</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/04/save-icon/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
</channel>
</rss>
Raw text
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
>
<channel>
<title>Thomas Park</title>
<atom:link href="https://thomaspark.co/feed/" rel="self" type="application/rss+xml" />
<link>https://thomaspark.co</link>
<description>On web development, interface design, user research, and all the rest</description>
<lastBuildDate>Sat, 01 Mar 2025 17:29:51 +0000</lastBuildDate>
<language>en-US</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
1 </sy:updateFrequency>
<generator>https://wordpress.org/?v=6.7.2</generator>
<item>
<title>Redesigning Hanafuda & Hwatu Cards for Beginners</title>
<link>https://thomaspark.co/2025/02/redesigning-hanafuda-hwatu-cards-for-beginners/</link>
<comments>https://thomaspark.co/2025/02/redesigning-hanafuda-hwatu-cards-for-beginners/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 24 Feb 2025 15:08:55 +0000</pubDate>
<category><![CDATA[Games]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=14005</guid>
<description><![CDATA[I’ve been working on a redesign of hanafuda and hwatu cards to make them more approachable for beginners. Here’s what a recent iteration looks like. There’s two main goals with the redesign. First is to … <a href="https://thomaspark.co/2025/02/redesigning-hanafuda-hwatu-cards-for-beginners/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I’ve been working on a redesign of hanafuda and hwatu cards to make them more approachable for beginners. Here’s what a recent iteration looks like.</p>
<p><img fetchpriority="high" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-1600x1064.webp" alt="Hanafuda Neo" width="800" height="532" class="aligncenter size-large wp-image-14055" srcset="https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-1600x1064.webp 1600w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-800x532.webp 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-768x511.webp 768w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-1536x1022.webp 1536w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-2048x1362.webp 2048w" sizes="(max-width: 800px) 100vw, 800px" /></p>
<p>There’s two main goals with the redesign. First is to make the cards more vibrant and interpretable than the traditional black-heavy artwork. Second is to give some guidance on how the cards should be used by adding a caption with the plant species, month, and value each card represents.</p>
<p>This is a work-in-progress. I’ve improved on the captions since this version. As always, I welcome your feedback.</p>
<h2>Motivation</h2>
<p>Hanafuda and hwatu cards are gorgeous pieces of tiny art. These playing cards from Japan and Korea respectively entice adults and children alike, prompting them to ask, “how do you play?” That’s when you take a deep breath.</p>
<div id="attachment_14017" style="width: 1610px" class="wp-caption aligncenter"><img decoding="async" aria-describedby="caption-attachment-14017" src="https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda.webp" alt="Traditional Hanafuda" width="1600" height="1317" class="size-full wp-image-14017" srcset="https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda.webp 1600w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda-800x659.webp 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda-1458x1200.webp 1458w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda-768x632.webp 768w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda-1536x1264.webp 1536w" sizes="(max-width: 1600px) 100vw, 1600px" /><p id="caption-attachment-14017" class="wp-caption-text">Credit: Roy Levien</p></div>
<p>In broad strokes, hanafuda and hwatu cards have a scheme similar to poker cards. Poker has 4 suits — hearts, diamonds, clubs, spades — and each suit has 13 face values: Ace, 2, 3,… Jack, Queen, King.</p>
<p>Hanafuda and hwatu cards are transposed. They have 12 months of the year, and each month has 4 cards of different value, ranging from bright (20 points), animal (10), ribbon (5), to chaff (1).</p>
<p>The months are represented as plants: March is cherry blossom, October is maple, November is willow, and so on. Much of the symbolism of the plants, as well as the animals and other objects found on these cards can be lost to Westerners, myself included. It doesn’t help that leaves and grass are traditionally painted as black, making the art all the more inscrutable. And that all 48 cards have unique artwork. But part of the fun is learning about them.</p>
<p>The trouble comes with the inconsistency in their values. You’d think easy peasy: each month gets 1 bright, 1 animal, 1 ribbon, and 1 chaff card. But not so fast. Each month is made up differently to spice up gameplay. For example, January has 1 bright, 1 ribbon, and 2 chaffs. February has 1 animal, 1 ribbon, and 2 chaffs. December has 1 bright and 3 chaffs.</p>
<p>Simply refer to the drawings on the cards, you say. But then you learn an animal is not an animal — sometimes it’s a bright, as in the case of the crane. And objects like the wooden bridge and drinking cup are animals.</p>
<p>And don’t get me started on the convoluted scoring system for <a href="https://en.wikipedia.org/wiki/Go-Stop" rel="noopener" target="_blank">Go-Stop</a>, the predominate way that Hwatu is played in Korea.</p>
<div id="attachment_14075" style="width: 810px" class="wp-caption aligncenter"><img decoding="async" aria-describedby="caption-attachment-14075" src="https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-800x483.webp" alt="" width="800" height="483" class="size-medium wp-image-14075" srcset="https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-800x483.webp 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-1600x965.webp 1600w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-768x463.webp 768w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-1536x927.webp 1536w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-2048x1236.webp 2048w" sizes="(max-width: 800px) 100vw, 800px" /><p id="caption-attachment-14075" class="wp-caption-text">In Go-Stop, the cup and bridge cards can be played as either animal or double junk.</p></div>
<p>Needless to say, keeping straight the months, and more importantly for gameplay, point values poses a barrier. This redesign is my attempt to address that.</p>
<p>There have been plenty of alternative designs, like this <a href="https://www.nintendo.com/us/store/products/hanafuda-cards-mario-red-119579/" rel="noopener" target="_blank">Nintendo deck</a> with Mario characters. While fun, they don’t clarify the meaning or value of the cards for newcomers.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2025/02/Nintendo-Hwatu.png" alt="Nintendo Hwatu" width="1050" height="591" class="aligncenter size-full wp-image-14026" srcset="https://thomaspark.co/wp/wp-content/uploads/2025/02/Nintendo-Hwatu.png 1050w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Nintendo-Hwatu-800x450.png 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Nintendo-Hwatu-768x432.png 768w" sizes="auto, (max-width: 1050px) 100vw, 1050px" /></p>
<h2>Credits</h2>
<p>The artwork is designed by <a href="https://lmnt.me/" rel="noopener" target="_blank">Louie Mantia</a>, who’s also the talented designer behind the gorgeous <a href="https://www.junior.cards/" rel="noopener" target="_blank">Junior Hanafuda decks</a>.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda.png" alt="Junior Hanafuda" width="2474" height="1174" class="aligncenter size-full wp-image-14012" srcset="https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda.png 2474w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-800x380.png 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-1600x759.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-768x364.png 768w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-1536x729.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-2048x972.png 2048w" sizes="auto, (max-width: 2474px) 100vw, 2474px" /></p>
<p>The printed the initial runs through <a href="https://makeplayingcards.com/" rel="noopener" target="_blank">Make Playing Cards</a>. Traditional hwatu cards measure about 35mm x 54mm and are made of thick rigid plastic that makes a satisfying sound when slapped down on each other. Mine are made of thinner flexible plastic and are slightly larger at 44mm x 89mm.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2025/02/redesigning-hanafuda-hwatu-cards-for-beginners/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>575: A Daily Haiku Game for Reddit</title>
<link>https://thomaspark.co/2025/01/575-a-daily-haiku-game-for-reddit/</link>
<comments>https://thomaspark.co/2025/01/575-a-daily-haiku-game-for-reddit/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 14 Jan 2025 20:51:58 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Language]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13748</guid>
<description><![CDATA[For the 2024 Reddit Games and Puzzles Hackathon, I submitted 575, a daily word game where you compose a haiku using the words of the day. How to Play 575 Each day, a new set … <a href="https://thomaspark.co/2025/01/575-a-daily-haiku-game-for-reddit/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>For the <a href="https://redditgamesandpuzzles.devpost.com/" rel="noopener" target="_blank">2024 Reddit Games and Puzzles Hackathon</a>, I submitted 575, a daily word game where you compose a haiku using the words of the day. </p>
<h2>How to Play 575</h2>
<p>Each day, a new set of words is posted. Players can add any words from this bank to their poem. Your poem is limited, however, to three lines with 5, 7, and 7 syllables in the traditional haiku format. The challenge is to pen something beautiful or witty within these constraints.</p>
<p>After you’ve finalized your poem, you can give it a title and post it as a comment in the thread. Other Redditors can view and upvote your creation.</p>
<p>Try 575 out for yourself on the <a href="https://www.reddit.com/r/575game/">r/575game</a> subreddit.</p>
<div class="center">
<a class="standard-btn xlarge-btn blue-btn" href="https://www.reddit.com/r/575game/" target="_blank" rel="noopener">Play 575</a>
</div>
<p>Or watch the <a href="https://www.youtube.com/watch?v=jJTqXl5tJZ4" rel="noopener" target="_blank">video trailer</a>:</p>
<p><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/jJTqXl5tJZ4?si=h1cpt7YGt69S-uWE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h2>Inspirations</h2>
<p>The unique design challenges of a Reddit game are that it needs to be social, short and sweet, but replayable.</p>
<p>One of my inspirations were <a href="https://www.amazon.com/Magnetic-Poetry-Original-Essential-Refrigerator/dp/1890560014/" rel="noopener" target="_blank">magnetic poetry tiles</a> you combine to create unique messages. Using these, you can express yourself and be creative by simply selecting and arranging individual words on your fridge.</p>
<p>I settled on the 5-7-5 format of Japanese haikus to provide additional constraints, which makes it a more game-like experience. It also puts a ceiling on the playtime required.</p>
<p>The idea of having the word bank that changes daily came from popular word games like <a href="https://www.nytimes.com/games/wordle/" rel="noopener" target="_blank">Wordle</a> and <a href="https://www.nytimes.com/puzzles/spelling-bee" rel="noopener" target="_blank">Spelling Bee</a> which give players a reason to keep coming back.</p>
<h2>Implementing on Devvit</h2>
<p>Until this hackathon, I didn’t realize the rich support for interactive posts that <a href="https://developers.reddit.com/docs/" rel="noopener" target="_blank">Reddit’s Developer Platform</a> (playfully called Devvit) provides.</p>
<p>The Devvit boilerplate gets you up and running with a basic app, and supports block posts and a newer webview option. I opted for the latter.</p>
<p>There were a few technical issues I ran into that were unique to developing for Reddit.</p>
<p>First is that the space you have to work with is limited. Not only can the viewport be small, as in the case of mobile, but you have to account for the additional “chrome” of Reddit’s own interface. Not easy to squeeze 100 words in the remaining space.</p>
<p>For now, interactions on Devvit are limited to clicks — more advanced gestures like dragging aren’t well-supported. Fortunately, the click-only approach turned out to mesh with 575 just fine.</p>
<p>In webview, I found no way to detect whether the user was in light and dark mode. This meant a single set of styles had to look decent in both. Something for the API to support down the line.</p>
<h2>Future Plans</h2>
<p>575 could be improved by refining the pool of words the daily word bank draws from to strike a balance in terms of fun and usable words.</p>
<p>The word bank could run with themes, for example holiday words this time of year, or silly or provocative or timely themes for other occasions.</p>
<p>Lastly, there’s potential to add 575 to an established subreddit like <a href="https://www.reddit.com/r/Poetry/" rel="noopener" target="_blank">r/Poetry</a> as a weekly challenge.</p>
<h2>Hackathon Results</h2>
<p>Back to the hackathon, I’m pleased to say 575 was recognized with the UGC Award for best use of user-generated content (i.e. Reddit posts or comments) in a game.</p>
<p>The hackathon attracted nearly 2000 entrants, with many, many impressive entries. My favorites were <a href="https://devpost.com/software/emoji-charades" rel="noopener" target="_blank">Emoji Charades</a>, <a href="https://devpost.com/software/pixel-together" rel="noopener" target="_blank">Pixel Together</a>, and <a href="https://devpost.com/software/laddergram" rel="noopener" target="_blank">Laddergram</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2025/01/575-a-daily-haiku-game-for-reddit/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Learning CSS Anchor Positioning with Anchoreum</title>
<link>https://thomaspark.co/2024/11/learning-css-anchor-positioning-with-anchoreum/</link>
<comments>https://thomaspark.co/2024/11/learning-css-anchor-positioning-with-anchoreum/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 18 Nov 2024 13:46:30 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13575</guid>
<description><![CDATA[Way back when, vertically centering an element was a tall task. Setting consistent gaps between elements took some thinking and several lines of code. Then came flexbox and grid. Both were new and, at the … <a href="https://thomaspark.co/2024/11/learning-css-anchor-positioning-with-anchoreum/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-1600x1066.png" alt="anchoreum.com" width="800" height="533" class="aligncenter size-large wp-image-13618" srcset="https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-1600x1066.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-800x533.png 800w, https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-768x512.png 768w, https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-1536x1024.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-2048x1365.png 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Way back when, <a href="https://build-your-own.org/blog/20240813_css_vertical_center/" rel="noopener" target="_blank">vertically centering an element was a tall task</a>. Setting consistent gaps between elements took some thinking and several lines of code. Then came flexbox and grid. Both were new and, at the time, magical features of CSS. Those were the times in which I <a href="https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/">released Flexbox Froggy</a> and <a href="https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/">Grid Garden</a>.</p>
<p>Well now we have a new CSS layout module on the horizon: anchor positioning.</p>
<p>And with it comes the release of my new coding game, <a href="https://anchoreum.com" rel="noopener" target="_blank">Anchoreum</a>! Play it for free today.</p>
<div class="center">
<a class="standard-btn xlarge-btn blue-btn" href="https://anchoreum.com" target="_blank" rel="noopener">Anchoreum</a>
</div>
<p>Like its predecessors, Anchoreum is free to play with no registration required at <a href="https://anchoreum.com" rel="noopener" target="_blank">anchoreum.com</a>. Take a quick dive or refresher whenever you feel motivated.</p>
<p>You can also play Anchoreum for free on <a href="https://codepip.com">Codepip</a>. This is my platform of 19 coding games that touch on topics like <a href="https://codepip.com/games/css-scoops/" rel="noopener" target="_blank">CSS selectors</a>, <a href="https://codepip.com/games/disarray/" rel="noopener" target="_blank">JavaScript array methods</a>, <a href="https://codepip.com/games/regex-machina/">regular expressions</a>, and <a href="https://codepip.com/games/querymon/" rel="noopener" target="_blank">SQL</a>. Register a free account there to save your progress and get access to 10 bonus levels.</p>
<p>In Anchoreum, you use CSS anchor positioning to help a museum set up its new exhibit by affixing labels to each anchor display. It’s inspired in part by <a href="https://chrome.dev/anchor-tool/">this nifty anchor tool from Una Kravets</a>.</p>
<p>To get a taste of the game, here’s the video trailer.</p>
<p><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/_Ub5Aejoi7Q?si=UkXXw3CI53KOz98S" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h2>What Exactly is Anchor Positioning?</h2>
<p>The best way to answer to this is to play Anchoreum. But in a nutshell, CSS anchor positioning is a new layout module that let’s you position and size one element relative to another. There are also options to set fallback behaviors when the element is scrolled off the page. You can tether one element to another, useful for building components like tooltips, dialogs, and dropdown menus.</p>
<p>It introduces new CSS properties like <code>position-area</code>, <code>position-anchor</code>, <code>anchor-name</code>, <code>position-visibility</code>, and <code>position-try</code>, functions like <code>anchor()</code> and <code>anchor-size()</code>, and the <code>anchor-center</code> value. Take a deep dive on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning" rel="noopener" target="_blank">MDN</a>.</p>
<h2>How’s Support?</h2>
<p>Anchoreum can be played on Google Chrome or Microsoft edge as of today, and on other browsers as they implement CSS anchor thanks to feature detection.</p>
<p>CSS anchor is a bleeding-edge feature. Support is far from 100% — <a href="https://caniuse.com/?search=position-area" rel="noopener" target="_blank">at the time of this writing, it sits at 49%</a>. And as far as I can tell, no suitable polyfill exists. Here’s hoping Firefox and Safari get on board soon.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2024/11/learning-css-anchor-positioning-with-anchoreum/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>3D Printing a Whiteboard Template for NYT Spelling Bee</title>
<link>https://thomaspark.co/2024/09/3d-printing-a-whiteboard-template-for-nyt-spelling-bee/</link>
<comments>https://thomaspark.co/2024/09/3d-printing-a-whiteboard-template-for-nyt-spelling-bee/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 09 Sep 2024 12:10:29 +0000</pubDate>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13514</guid>
<description><![CDATA[My son’s current obsession is the New York Times word game Spelling Bee. Every day, he looks up the letters (he says it’s gonna be a good one if the puzzle has e & d, … <a href="https://thomaspark.co/2024/09/3d-printing-a-whiteboard-template-for-nyt-spelling-bee/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>My son’s current obsession is the New York Times word game <a href="https://www.nytimes.com/puzzles/spelling-bee" rel="noopener" target="_blank">Spelling Bee</a>. Every day, he looks up the letters (he says it’s gonna be a good one if the puzzle has e & d, or i & n & g). Then it’s time to work our way up the ranks to “genius”.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-1600x1018.png" alt="NYT Spelling Bee" width="800" height="509" class="border aligncenter size-large wp-image-13519" srcset="https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-1600x1018.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-800x509.png 800w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-768x488.png 768w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-1536x977.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-2048x1303.png 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Our routine is to put the daily puzzle on our whiteboard. We keep the honeycomb grid drawn on, and fill in the letters every morning. The problem with this is the hexagons frequently get smudged, and become crookeder and crookeder each time they’re redrawn. </p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-1412x1200.jpg" alt="Whiteboard" width="800" height="680" class="aligncenter size-large wp-image-13547" srcset="https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-1412x1200.jpg 1412w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-800x680.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-768x653.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-1536x1306.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2.jpg 1600w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>To address this, I 3D printed the honeycomb grid. The model is a simple one I made in <a href="https://www.tinkercad.com/" rel="noopener" target="_blank">Tinkercad</a>. An arrangement of hexagons, the Spelling Bee mascot on top, and insets on the back for neodymium magnets that can be attached to our magnetic whiteboard.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2024/09/Tinkercad.png" alt="Tinkercad" width="1400" height="914" class="aligncenter size-full wp-image-13528" srcset="https://thomaspark.co/wp/wp-content/uploads/2024/09/Tinkercad.png 1400w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Tinkercad-800x522.png 800w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Tinkercad-768x501.png 768w" sizes="auto, (max-width: 1400px) 100vw, 1400px" /></p>
<p>I uploaded this model to <a href="https://craftcloud3d.com/">Craftcloud</a> and ordered it in yellow PLA.</p>
<p>When the print arrived, I inserted in the magnets. Unfortunately, the magnetic force of <a href="https://www.amazon.com/dp/B0BRZSRPMP/" rel="noopener" target="_blank">my whiteboard</a> is weak due to its glass surface layer, and the 4mm magnets I used weren’t quite strong enough. That’ll have to be worked out in v2. I ended up reinforcing the bond with <a href="https://www.amazon.com/gp/product/B07VNSXY31/" rel="noopener" target="_blank">reusable double-sided tape</a>. Here’s the result.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-Whiteboard.jpg" alt="Spelling Bee Whiteboard" width="1400" height="1050" class="aligncenter size-full wp-image-13557" srcset="https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-Whiteboard.jpg 1400w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-Whiteboard-800x600.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-Whiteboard-768x576.jpg 768w" sizes="auto, (max-width: 1400px) 100vw, 1400px" /></p>
<p>On a side note, if you’re a developer, check out <a href="https://codepip.com/codections/">my code-themed homage</a> to another NYT word game, Connections. Be warned, it’s a challenge.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2024/09/3d-printing-a-whiteboard-template-for-nyt-spelling-bee/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
<item>
<title>Buttonhole: A Button You Can Unbutton</title>
<link>https://thomaspark.co/2023/09/buttonhole-a-button-you-can-unbutton/</link>
<comments>https://thomaspark.co/2023/09/buttonhole-a-button-you-can-unbutton/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 26 Sep 2023 12:49:10 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Humor]]></category>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13448</guid>
<description><![CDATA[Skeuomorphism taken to the extreme rarely works. But it can be fun. Like a turntable interface for playing YouTube music or a rotary telephone dial for number inputs. For buttons, skeuomorphic design usually takes form … <a href="https://thomaspark.co/2023/09/buttonhole-a-button-you-can-unbutton/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2023/09/buttonhole.gif" alt="Buttonhole Demo" width="791" height="392" class="aligncenter size-full wp-image-13483" /></p>
<p>Skeuomorphism taken to the extreme rarely works. But it can be fun. Like a <a href="https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/">turntable interface for playing YouTube music</a> or a <a href="https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/">rotary telephone dial for number inputs</a>.</p>
<p>For buttons, skeuomorphic design usually takes form of a physical switch or push button. But what about one that takes the form, and even the behavior, of that <em>other</em> button — the sartorial kind?</p>
<p>Enter <a href="https://thomaspark.co/projects/buttonhole/" rel="noopener" target="_blank">Buttonhole</a>, the UI button you can unbutton.</p>
<h2>Demo</h2>
<p>Drag the button below and observe the change in value:</p>
<p><iframe style="width: 100%; height: 420px; border: none;" src="https://thomaspark.co/projects/buttonhole/"></iframe></p>
<h2>Details</h2>
<p>Buttonhole is implemented as a custom element. Include <a href="https://thomaspark.co/projects/buttonhole/buttonhole.js"><code>buttonhole.js</code></a> on your page and start using the HTML element <code><button-hole></code>:</p>
<pre>
<code class="language-markup"><button-hole buttoned="false"></button-hole></code>
</pre>
<p>Besides dragging the button, you can set the <code>buttoned</code> attribute to <code>true</code> to button the button, and <code>false</code> to unbutton it and return to its initial position.</p>
<p>The element can be customized by setting the following CSS variables:</p>
<pre class="language-css">
<code class="language-css">
--buttonhole-bg-color-left: rgba(0, 0, 0, 1);
--buttonhole-bg-color-right: rgba(0, 0, 0, 0.7);
--buttonhole-button-color: yellow;
--buttonhole-button-size: 2.5rem;
--buttonhole-hole-size: 3rem;
</code>
</pre>
<p>Go on and ditch that dull checkbox!</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2023/09/buttonhole-a-button-you-can-unbutton/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>CarPlay Karaoke: Playing Music Videos and Lyrics Through Cover Art</title>
<link>https://thomaspark.co/2023/05/carplay-karaoke-playing-music-videos-and-lyrics-through-cover-art/</link>
<comments>https://thomaspark.co/2023/05/carplay-karaoke-playing-music-videos-and-lyrics-through-cover-art/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 19 May 2023 14:10:47 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13321</guid>
<description><![CDATA[Can you play videos natively through CarPlay? That is, without jailbreaking your phone or buying expensive hardware. The short answer is, no. The longer answer is, poorly. Poorly as in, slice up a video’s audio … <a href="https://thomaspark.co/2023/05/carplay-karaoke-playing-music-videos-and-lyrics-through-cover-art/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Can you play videos natively through CarPlay? That is, without <a href="https://carbridge.app/" rel="noopener nofollow" target="_blank">jailbreaking your phone</a> or <a href="https://www.amazon.com/s?k=carplay+ai+box&linkCode=ll2&tag=thomasparkco-20&linkId=b5f9131fd059d8df3f30ddc967853f57&language=en_US&ref_=as_li_ss_tl" rel="noopener nofollow" target="_blank">buying expensive hardware</a>. The short answer is, no.</p>
<p>The longer answer is, poorly.</p>
<p>Poorly as in, slice up a video’s audio track, treat each slice’s album art as a video frame, and play it back as a gapless album. How well can this simulate video? What follows is my experimentation with this hack.</p>
<p>Note: Apple restricts video from CarPlay for a reason. Keep your eyes on the road while driving.</p>
<h2>From Music Videos to Slideshows</h2>
<p>For my first test subject, I used the music video for A-Ha’s 1985 classic <em>Take On Me</em>. For my scalpel, I grabbed <a href="https://ffmpeg.org/" rel="noopener" target="_blank">FFmpeg</a>, the ultimate open source tool for manipulating audio and video.</p>
<p>I started ambitious, splitting the song’s audio track into 100-millisecond segments. This netted 2,271 MP3s and a theoretical frame rate of 10fps. Each MP3’s cover art was a still generated from its video segment. The MP3s were then loaded onto an Apple Music playlist and synced to CarPlay.</p>
<p>Predictably, this playlist stalled. The Music app had trouble playing a single MP3.</p>
<p>I bumped up the segments to 1 second. Lo and behold, Apple Music was able to start this playlist. Both the song and music video were recognizable now.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-1600x829.png" alt="Take On Me on CarPlay" width="800" height="415" class="aligncenter size-large wp-image-13431" srcset="https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-1600x829.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-800x415.png 800w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-768x398.png 768w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-1536x796.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay.png 1920w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Yet, it struggled. The biggest hiccups were in the transition from one MP3 to the next. Tracks would start too soon, leaving a tiny but perceptible gap of silence, or too late, skipping a beat. Sometimes the player would freeze.</p>
<p>Next I tried 10 seconds. Much improved, but by now the experience was less a video and more a slideshow. And the transitions between tracks still wasn’t perfectly smooth. Some tracks also suffered from pops and squelches at their start. This was the case on CarPlay, on iPhone, and on Mac.</p>
<p>Switching from a lossy format like MP3 to a lossless one — ALAC (Apple Lossless Audio Codec), fixed most of this. But it introduced even worse staticky noise at the end of a few tracks.</p>
<p>Trying to diagnose all this — was it the encoder or the player? — I played the same MP3 and ALAC files through <a href="https://mpv.io/" rel="noopener" target="_blank">mpv</a>. The MP3s were better, and the ALACs were flawless!</p>
<p>Apple Music, not the encoding process, appears to be the root of the problem. The part I have no control over. </p>
<p>My fears were confirmed when I tested Abbey Road, a gapless album purchased and downloaded from the iTunes Store. During the side 2 medley, I heard those same gaps.</p>
<p>This was about as a good as I was gonna get.</p>
<h2>Generating Lyrics from Subtitles</h2>
<p>With full-motion video out of reach, I pivoted from music videos to lyrics. This is actually a feature I’ve wanted in CarPlay. Who doesn’t want to host their own carpool karaoke?</p>
<p>As a quick test, I sliced up one of those lyric videos with a cheesy Hawaiian sunset background from YouTube. The text was a tad small, but the results were promising.</p>
<p>I took it a step further and generated my own images, keeping the stills from the music videos, overlaid with lyrics plucked from the associated SRT (SubRip subtitle file). SRTs contain timestamps for each line of the lyrics, which I used to mark the segments.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-1600x829.png" alt="Take On Me Lyrics on CarPlay" width="800" height="415" class="aligncenter size-large wp-image-13406" srcset="https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-1600x829.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-800x415.png 800w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-768x398.png 768w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-1536x796.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay.png 1920w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Success. But judge for yourself. Here are videos of it in action.</p>
<p>Judy Garland’s <em>Somewhere Over the Rainbow</em>:</p>
<p><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/CMPIw6EQrsI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></p>
<p>And Encanto’s <em>We Don’t Talk About Bruno</em>:</p>
<p><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/XjqrSSwgzbk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></p>
<h2>Flexing FFmpeg</h2>
<p>None of this would have been possible without FFmpeg. Using only FFmpeg, I was able to:</p>
<ul>
<li>Burn lyrics to the music video using subtitles from an SRT file</li>
<li>Re-encode the video with new keyframes to force segments at precise frames</li>
<li>Segment the video at timestamps to produce audio segments</li>
<li>Attach metadata to each audio segment including a screenshot from the video as cover art</li>
</ul>
<p>Here’s the full shell script if you want to try it out. To all the FFmpeg pros out there, please suggest any improvements to the code.</p>
<pre>
<code class="language-bash">
# settings
mp4="take-on-me.mp4"
srt="take-on-me.srt"
title="Take On Me"
artist="A-Ha"
album="Hunting High and Low"
date="1985"
# get timestamps from srt
timestamps=$(grep -oE "^\d+:\d+:\d+," $srt | sed -e "s/,/.999/" | paste -sd "," -)
# hardcode subtitles
mkdir temp
ffmpeg -i $mp4 \
-vf "subtitles=$srt:force_style='Fontsize=48,Alignment=10,PrimaryColour=&Hffffff&'" \
-c:a copy \
temp/subtitles.mp4
# add keyframes for exact segments
ffmpeg -i temp/subtitles.mp4 \
-force_key_frames $timestamps \
temp/keyframes.mp4
# segment mp4s
mkdir -p temp/mp4
ffmpeg -i temp/keyframes.mp4 \
-c copy \
-f segment \
-segment_times $timestamps \
-segment_start_number 1 \
-reset_timestamps 1 \
temp/mp4/%d.mp4
# add metadata to mp3s
mkdir output
files=(temp/mp4/*.mp4)
for ((i=1; i<=${#files[@]}; i++)); do
ffmpeg -y -i temp/mp4/$i.mp4 \
-map 0:a:0 \
-map 0:v:0 \
-c:a libmp3lame \
-metadata title="$title" \
-metadata artist="$artist" \
-metadata album="$album" \
-metadata date="$date" \
-metadata track="$i/${#files[@]}" \
output/"$title $(printf '%04d' $i)".mp3
done
# delete temp files
rm -r temp
</code>
</pre>
<h2>Next Chapter</h2>
<p>Two other avenues worth exploring are audiobooks and podcasts with chapter artwork. Wonder how far they could be pushed.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2023/05/carplay-karaoke-playing-music-videos-and-lyrics-through-cover-art/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>Needledrop: A Turntable Interface for Music Playback</title>
<link>https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/</link>
<comments>https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 03 Mar 2021 14:17:37 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13148</guid>
<description><![CDATA[My latest experiment is Needledrop, a turntable interface for playing music from YouTube. Enjoy chill vibes as you spin a virtual vinyl of your favorite album from YouTube. You can try it for yourself here: … <a href="https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/">Read more</a>]]></description>
<content:encoded><![CDATA[<div style="margin-bottom: 4rem;"><div style="width: 800px;" class="wp-video"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
<video class="wp-video-shortcode" id="video-13148-1" width="800" height="567" preload="metadata" controls="controls"><source type="video/mp4" src="https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop.mp4?_=1" /><a href="https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop.mp4">https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop.mp4</a></video></div></div>
<p>My latest experiment is <a href="https://thomaspark.co/projects/needledrop/" rel="noopener" target="_blank">Needledrop</a>, a turntable interface for playing music from YouTube. Enjoy chill vibes as you spin a virtual vinyl of your favorite album from YouTube. You can try it for yourself here:</p>
<div class="center"><a class="standard-btn black-btn xlarge-btn" href="https://thomaspark.co/projects/needledrop/" target="_blank" rel="noopener">Needledrop</a></div>
<p>With Needledrop, I went for the Dieter Rams school of design. It’s inspired by unapologetically skeuomorphic interfaces like Apple’s original Podcasts app, which featured a reel-to-reel tape machine. While I preferred the digitally native approach of <a href="https://apps.apple.com/us/app/overcast/id888422857" rel="noopener" target="_blank">Overcast</a> for day-to-day use, Apple’s approach was visually striking.</p>
<div id="attachment_13195" style="width: 460px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-13195" src="https://thomaspark.co/wp/wp-content/uploads/2021/03/apple-podcasts-600x800.jpg" alt="Apple Podcasts" width="450" height="600" class="size-medium wp-image-13195" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/03/apple-podcasts-600x800.jpg 600w, https://thomaspark.co/wp/wp-content/uploads/2021/03/apple-podcasts.jpg 768w" sizes="auto, (max-width: 450px) 100vw, 450px" /><p id="caption-attachment-13195" class="wp-caption-text">Photo by <a href="https://www.flickr.com/photos/atmasphere/8320805931/" rel="noopener" target="_blank">Jonathan Greene</a></p></div>
<p>Podcast’s interface wasn’t just veneer; the reels would progress as the podcast did, providing a subtle visual cue alongside the progress bar. Likewise in Needledrop, the tone arm travels across the record.</p>
<p>But Needledrop takes the interactivity one step further. Drop the needle and find your favorite track, more or less. It’s fuzzy and inexact, and emphasizes the continuous listening experience an album can be.</p>
<h2>Pick Your Track</h2>
<p>Click the “Track” button, paste the link to your favorite album from YouTube, and it’ll load on the platter. You can bookmark the URL for easy access and share it with friends.</p>
<p>A few quick picks:</p>
<ul>
<li><a href="https://thomaspark.co/projects/needledrop/?-3frA_rj918" rel="noopener" target="_blank">Beach House – Bloom</a></li>
<li><a href="https://thomaspark.co/projects/needledrop/?7OaKSeEX3ow" rel="noopener" target="_blank">Clairo – Best Of</a></li>
<li><a href="https://thomaspark.co/projects/needledrop/?X4YlPELZKdQ" rel="noopener" target="_blank">Joji – Nectar</a></li>
<li><a href="https://thomaspark.co/projects/needledrop/?sLKMmEpcogQ" rel="noopener" target="_blank">Radiohead – A Moon Shaped Pool</a></li>
<li><a href="https://thomaspark.co/projects/needledrop/?OB12BslMI3Q" rel="noopener" target="_blank">Tyler the Creator – Flower Boy</a></li>
</ul>
<p>Singles and podcasts work, and streams like <a href="https://thomaspark.co/projects/needledrop/?5qap5aO4i9A" rel="noopener" target="_blank">lofi hip hop radio</a> sorta work. And of course <a href="https://thomaspark.co/projects/needledrop/?VN562bgJRZ4" rel="noopener" target="_blank"><em>the</em> needle drop</a>.</p>
<p>Fun fact: <a href="https://www.bradyharanblog.com/vinyl/mount-doom" rel="noopener" target="_blank">podcasts have actually been pressed on vinyl</a>.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-1600x1133.jpg" alt="Hello Internet" width="800" height="567" class="aligncenter size-large wp-image-13254" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-1600x1133.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-800x567.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-768x544.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-1536x1088.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-2048x1451.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<h2>Skeuomorphic Effects in CSS</h2>
<p>Of course this post wouldn’t be complete if I didn’t geek out on implementation details.</p>
<p>First, to achieve spinning record, the following CSS animation was used. The 1.8 second duration corresponds with 33 1/3 rpm.</p>
<pre class="language-css">
<code class="language-css">
#record {
animation: spin 1.8s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
</code>
</pre>
<p>To pause the animation when the “Stop” button is tapped, I first tried <code class="language-css">animation: none;</code>. I quickly noticed that when you resume play, the animation will reset and the record jumps back to its initial position. To smooth out the animation, use this instead:</p>
<pre class="language-css">
<code class="language-css">
.pause #record {
animation-play-state: paused;
}
</code>
</pre>
<p>Needledrop can switch between 33 and 45 rpm. When changing the animation duration to account for this, I ran into a similar problem with the spinning animation being jerky. This happened even if I used a CSS variable like <code class="language-css">animation-duration: var(--duration);</code>.</p>
<p>To work around this, I nested two elements. When the mode is changed to 45 rpm, the second element activates a spin animation as well. After some quick maths, I set the duration of the second spin to 5.1428 seconds.</p>
<p>I also offset the rotation slightly with <code class="language-css">transform-origin</code>, creating a slight wobble effect.</p>
<p>To finish the record’s styles, I added grooves with:</p>
<pre class="language-css">
<code class="language-css">
background: repeating-radial-gradient(var(--record-color),
var(--record-groove-color) 3px,
var(--record-groove-color) 3px);
</code>
</pre>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-1600x962.jpg" alt="Needledrop Record" width="800" height="481" class="aligncenter size-large wp-image-13249" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-1600x962.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-800x481.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-768x462.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-1536x924.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record.jpg 1776w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>I also gave it a shine by positioning an element over the record with a conic background. A separate element was used so the shine wouldn’t rotate with the record.</p>
<pre class="language-css">
<code class="language-css">
background: conic-gradient(transparent 20deg,
rgba(255, 255, 255, .1) 40deg,
rgba(255, 255, 255, .1) 50deg,
transparent 60deg,
transparent 200deg,
rgba(255, 255, 255, .08) 220deg,
rgba(255, 255, 255, .08) 240deg,
transparent 250deg,
transparent 340deg);
</code>
</pre>
<p>To move the arm of the record player, I used <code class="language-css">transform: rotate(45deg);</code> and set a transition delay, calculating how long it should take for the arm to reach its final position in JavaScript. </p>
<h2>YouTube API</h2>
<p>Needledrop is built using the <a target="_blank" href="https://developers.google.com/youtube/iframe_api_reference" rel="noopener">YouTube Player API</a>.</p>
<p>The API makes it easy to speed up the video when set to 45 rpm, among other things:</p>
<pre class="language-javascript">
<code class="language-javascript">
player.setPlaybackRate(1.35);
</code>
</pre>
<p>Of course when you’re using a third-party API, you’re beholden to their terms of service. In this case, the key sections of <a href="https://developers.google.com/youtube/terms/developer-policies#i.-additional-prohibitions">Google’s TOS</a> are:</p>
<blockquote><p>
You and your API Clients must not, and must not encourage, enable, or require others to:</p>
<p>6. modify, build upon, or block any portion or functionality of a YouTube player;</p>
<p>7. separate, isolate, or modify the audio or video components of any YouTube audiovisual content made available as part of, or in connection with, YouTube API Services. For example, you must not apply alternate audio tracks to videos;</p>
<p>8. promote separately the audio or video components of any YouTube audiovisual content made available as part of, or in connection with, the YouTube API Services;</p>
<p>9. create, include, or promote features that play content, including audio or video components, from a background player, meaning a player that is not displayed in the page, tab, or screen that the user is viewing;
</p></blockquote>
<p>So yeah. Hiding the video so only the audio track is used was definitely out. To the label it goes. As for the rest, we’re probably pushing it.</p>
<p>Anyway, much of digital design is influenced by its analog analogue. It was fun to bring that to the foreground with Needledrop.</p>
<p>As far as next steps, stay tuned for YouTube playlist and Spotify support.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/feed/</wfw:commentRss>
<slash:comments>16</slash:comments>
<enclosure url="https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop.mp4" length="8852706" type="video/mp4" />
</item>
<item>
<title>Custom Dutch Blitz Cards</title>
<link>https://thomaspark.co/2021/02/custom-dutch-blitz-cards/</link>
<comments>https://thomaspark.co/2021/02/custom-dutch-blitz-cards/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 17 Feb 2021 14:26:07 +0000</pubDate>
<category><![CDATA[Games]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=13065</guid>
<description><![CDATA[The Obsession My family gets competitive with card games. Our latest obsession is Dutch Blitz, a fast-paced game that seems somewhat regional due to the Pennsylvania Dutch influence. To give you an idea of just … <a href="https://thomaspark.co/2021/02/custom-dutch-blitz-cards/">Read more</a>]]></description>
<content:encoded><![CDATA[<h2>The Obsession</h2>
<p>My family gets competitive with card games. Our latest obsession is <a href="https://www.amazon.com/Dutch-Blitz-201/dp/B000BBU0KS/?tag=thomasparkco-20" rel="noopener" target="_blank">Dutch Blitz</a>, a fast-paced game that seems somewhat regional due to the Pennsylvania Dutch influence. </p>
<p>To give you an idea of just how seriously we take it, we have a <a href="https://docs.google.com/spreadsheets/d/1v0TMuj690-1lNP0l-GEXHF-hD3uy70pEnL5LCLYhWAY/edit?usp=sharing" rel="noopener" target="_blank">spreadsheet</a> to keep score and maintain lifetime stats. Feel free to fork it for your own use.</p>
<p>We’ve also purpose-built a Dutch Blitz table with green felt.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-1600x1200.jpg" alt="Dutch Blitz Table" width="800" height="600" class="aligncenter size-large wp-image-13084" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-1600x1200.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-800x600.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-1536x1152.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-2048x1536.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>The latest endeavor? To create custom cards in the style of Dutch Blitz / Ligretto / Nerts.</p>
<h2>The Design</h2>
<p>The Dutch Blitz cards definitely have a charm, but they’ve also got some usability issues. The color combinations have poor contrast, black on blue in particular. Differentiating the boy and girl takes an extra second, which matters in the heat of the moment. The numbers are small and can be tough to read from across the table.</p>
<p>Flip the cards over, and the vintage etchings — the pump, carriage, plow, and pail — are endearing but have no personal significance to us. One is assigned to each player, but keeping straight which is whose takes a few rounds.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/expansion-pack.jpg" alt="Expansion Pack" width="600" height="322" class="aligncenter size-full wp-image-13107" /></p>
<p>For more than 4 players, <a href="https://www.amazon.com/Dutch-Blitz-DB-202-Expansion/dp/B00JJ4PNHI/?tag=thomasparkco-20" rel="noopener" target="_blank">the expansion pack</a> is just a palette swap of the same four objects.</p>
<p>If <a href="https://www.jamesrobertwatson.com/deck6.html" rel="noopener" target="_blank">a 5th and 6th suit</a> can be devised to fit with classic poker cards, it shouldn’t be tough to spot more things around the farm for Dutch Blitz.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/deck6.jpg" alt="Deck6" width="800" height="522" class="aligncenter size-full wp-image-13078" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/02/deck6.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/deck6-768x501.jpg 768w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<h2>The Redesign</h2>
<p>And so I took the opportunity to design custom cards and have some fun with personalized illustrations.</p>
<p>For the redesigned faces, I took a modern, minimalist style inspired by <a href="https://www.areaware.com/products/minim-playing-cards?variant=472356541">Minim playing cards</a> and <a href="https://www.amazon.com/Mattel-Games-GYH69-UNO-Minimalista/dp/B089DR3N7S/?tag=thomasparkco-20">UNO Minimalista</a>.</p>
<p>For the backs, I went with branded objects we already associate with different members of the family. Here are the results.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-1600x1065.jpg" alt="Custom Blitz Cards" width="800" height="533" class="aligncenter size-large wp-image-13112" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-1600x1065.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-800x532.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-768x511.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-1536x1022.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-2048x1363.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>You might be able to guess which object is mine.</p>
<p>Here are some alternative backs I had printed up for a gift.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-1600x900.jpg" alt="Custom Dutch Blitz Illustrations" width="800" height="450" class="aligncenter size-large wp-image-13072" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-1600x900.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-800x450.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-768x432.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-1536x864.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Now to playtest this deck and no doubt iterate on it, getting ever closer to the ultimate Dutch Blitz experience.</p>
<h2>Update</h2>
<p>Leeanne has graciously shared her own spin — silly animals in silly hats! They capture the art style of the original game perfectly. My personal favorite is the raccoon in a Croc. What’s yours?</p>
<p>Download her designs <a href="https://thomaspark.co/wp/wp-content/uploads/2021/02/v2PNGSVG.zip">in PNG and SVG format</a>.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-1600x892.png" alt="AnimalsinHats" width="800" height="446" class="aligncenter size-large wp-image-13310" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-1600x892.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-800x446.png 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-768x428.png 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-1536x856.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-2048x1142.png 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Lance Smith also shared his take, representing his family’s ties to DC, VA, OK, and FL.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2-1159x1200.png" alt="Dutch Blitz Lance" width="800" height="828" class="aligncenter size-large wp-image-13444" srcset="https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2-1159x1200.png 1159w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2-773x800.png 773w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2-768x795.png 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2.png 1200w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2021/02/custom-dutch-blitz-cards/feed/</wfw:commentRss>
<slash:comments>14</slash:comments>
</item>
<item>
<title>Chess Patch Notes</title>
<link>https://thomaspark.co/2020/09/chess-patch-notes/</link>
<comments>https://thomaspark.co/2020/09/chess-patch-notes/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 23 Sep 2020 12:39:38 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Humor]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12928</guid>
<description><![CDATA[Chess is a continuously evolving game. Technically. There have been many rule changes, but each one has taken centuries to be introduced and widely adopted. That might all change though with the latest work from … <a href="https://thomaspark.co/2020/09/chess-patch-notes/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Chess is a continuously evolving game. Technically. There have been many rule changes, but each one has taken centuries to be introduced and widely adopted.</p>
<p>That might all change though with <a href="https://www.chess.com/news/view/new-alphazero-paper-explores-chess-variants" rel="noopener noreferrer" target="_blank">the latest work from AlphaZero</a>, where the self-learning engine was used to evaluate 9 proposed variants of chess. These variants range from reverting the castling rule, to buffing pawns to move 2 square anywhere on the board (called torpedo), to allowing self-capture, all trying to enable more dynamic and creative gameplay.</p>
<p>Coupled with this, the chess and gaming worlds have collided. Led by collaborations like chess grandmaster Hikaru Nakamura mentoring Overwatch grandmaster xQc (or <a href="https://livestreamfails.com/post/81335" rel="noopener noreferrer" target="_blank">vice versa</a>), this has created an online chess boom, especially among younger generations.</p>
<p>Given these developments, it’s hard not to see chess through the lens of modern video games on multiple levels. <a href="https://www.mcsweeneys.net/articles/official-patch-notes-for-chesss-first-major-update-in-1500-years" rel="noopener noreferrer" target="_blank">Could microtransactions be right around the corner?</a></p>
<p>Probably not, but I wanted to show what the history of chess rules looks like presented as patch notes from Blizzard. Check it out:</p>
<div class="center"><a class="standard-btn blue-btn xlarge-btn" href="https://thomaspark.co/projects/chess-patch-notes/">Chess Patch Notes</a></div>
<p>The notes are best read bottom to top. Version numbers roughly correspond with the century in which each change was introduced. Credit to ToastyKen who first shared the patch notes <a href="https://www.reddit.com/r/AnarchyChess/comments/aapg9h/chess_patch_notes_in_the_style_of_video_game/" rel="noopener noreferrer" target="_blank">on Reddit</a> and gave me permission to style them up — PTR is in the works… Chess piece icons provided by <a href="https://www.vecteezy.com/vector-art/297860-four-set-of-chess-pieces" rel="noopener noreferrer" target="_blank">Vecteezy</a>.</p>
<p>Can’t wait to see what v2.1 holds.</p>
<p><a href="https://thomaspark.co/projects/chess-patch-notes/"><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-1600x1102.png" alt="Chess Patch Notes" width="800" height="551" class="aligncenter size-large wp-image-12954" srcset="https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-1600x1102.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-800x551.png 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-768x529.png 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-1536x1058.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes.png 1806w" sizes="auto, (max-width: 800px) 100vw, 800px" /></a></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2020/09/chess-patch-notes/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
<item>
<title>The IKEA Packout</title>
<link>https://thomaspark.co/2020/09/the-ikea-packout/</link>
<comments>https://thomaspark.co/2020/09/the-ikea-packout/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 16 Sep 2020 12:29:11 +0000</pubDate>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12815</guid>
<description><![CDATA[If you’re into tools — think hammers and drills — you’re probably familiar with the extremes people go to protect their prized possessions. The most popular system right now, based on my hours watching carpenter and electrician … <a href="https://thomaspark.co/2020/09/the-ikea-packout/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>If you’re into tools — think hammers and drills — you’re probably familiar with the extremes people go to protect their prized possessions. The most popular system right now, based on my hours watching carpenter and electrician setups on YouTube, is <a href="https://www.milwaukeetool.com/Products/Storage-Solutions/PACKOUT">Milwaukee Packout</a>, an expansive line of interlocking boxes in all shapes and sizes (check out the drag-and-drop builder halfway down the page). These packouts are often fitted with <a href="https://www.fastcap.com/product/kaizen-foam">Kaizen foam</a> to further organize the Milwaukee, Makita, and Knipex therein.</p>
<p>If these brands get this kind of treatment, I figure there’s one more company that deserves the same: IKEA. So I made the IKEA Packout, an ode to the most widely used tools in the world.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-1600x1200.jpg" alt="The IKEA Packout closed" width="800" height="600" class="aligncenter size-large wp-image-12893" srcset="https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-1600x1200.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-800x600.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-1536x1152.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-2048x1536.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<h2>The Parts List</h2>
<p>The IKEA Packout holds one of every single tool I could my hands on, mostly picked from the old IKEA hardware I had laying around. Grab this kit and you’re ready to assemble or disassemble any Swedish furniture thrown your way.</p>
<p>This is a complete collection of IKEA tools available as far as I can tell. But the part numbers do tell a different story. So let me know what I’m missing. Here’s the full list.</p>
<table class="table">
<thead>
<tr>
<th>Part No.</th>
<th>Description</th>
<th>Qty.</th>
</tr>
</thead>
<tbody>
<tr>
<td>100001</td>
<td>S-shaped hex key (4mm)</td>
<td>1</td>
</tr>
<tr>
<td>100002</td>
<td>S-shaped hex key (5mm)</td>
<td>1</td>
</tr>
<tr>
<td>110084</td>
<td>L-shaped hex key (2mm)</td>
<td>1</td>
</tr>
<tr>
<td>100006</td>
<td>L-shaped hex key (3mm)</td>
<td>1</td>
</tr>
<tr>
<td>100092</td>
<td>L-shaped hex key (4mm)</td>
<td>1</td>
</tr>
<tr>
<td>108490</td>
<td>L-shaped hex key (5mm)</td>
<td>1</td>
</tr>
<tr>
<td>100049</td>
<td>L-shaped hex key (6mm)</td>
<td>1</td>
</tr>
<tr>
<td>130445</td>
<td>Long ball-end L-shaped hex key (4mm)</td>
<td>1</td>
</tr>
<tr>
<td>100003</td>
<td>Short ball-end L-shaped hex key (5mm)</td>
<td>1</td>
</tr>
<tr>
<td>121030</td>
<td>Tool handle for hex keys (4mm and 5mm)</td>
<td>1</td>
</tr>
<tr>
<td>100089</td>
<td>Open spanner (8mm and 10mm)</td>
<td>1</td>
</tr>
<tr>
<td>108184</td>
<td>Ring spanner (11mm)</td>
<td>1</td>
</tr>
<tr>
<td>113453</td>
<td>Ring/open Z-shaped spanner (6mm and 13mm)</td>
<td>1</td>
</tr>
<tr>
<td>120202</td>
<td>Hollow wrench (13mm)</td>
<td>1</td>
</tr>
<tr>
<td>106699</td>
<td>Phillips #2 and slot S-shaped screwdriver</td>
<td>1</td>
</tr>
</tbody>
</table>
<p>For the container, I took a <a href="https://www.ikea.com/us/en/p/fixa-200-piece-wood-screw-set-70224228/">FIXA screw set</a>, retailing for $4.99, and removed the orange insert. I cut some 30mm Kaizen foam to size and arranged the tools to fit.</p>
<p>With that, the kit was complete. But who knows, mounting feet to make it compatible with Milwaukee’s stack might be in its future.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-1600x810.jpg" alt="The IKEA Packout open" width="800" height="405" class="aligncenter size-large wp-image-12895" srcset="https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-1600x810.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-800x405.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-768x389.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-1536x777.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-2048x1036.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<h2>The Golden Rule of Assembling IKEA Furniture</h2>
<p>Of course putting together your own IKEA Packout isn’t at all practical. There are far better ways to equip yourself than scrounging around for stamped tools. In fact, this leads to the golden rule: using the right tool for the job.</p>
<p>The IKEA experience has a reputation for being frustrating, with screws stripping and absolutely nothing level, square, plumb, or true. But this is actually the one case you can safely blame your tools.</p>
<h3>Put Down the Phillips</h3>
<p>When you open the instructions booklet, you might see something like this.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-1600x542.png" alt="IKEA screwdriver" width="800" height="271" class="aligncenter size-large wp-image-12903" srcset="https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-1600x542.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-800x271.png 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-768x260.png 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-1536x521.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver.png 1682w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>No text of course, but you see the cross symbol so naturally reach for your Phillips screwdriver. Put it down.</p>
<p>Being a European company and all, IKEA hardly uses Phillips screws, but rather the superior Pozidriv. Size #2. You can tell the difference by the screw head. If it’s a simple cross, it’s a Phillips. If it’s a cross with small hash lines on the diagonals, it’s a Pozi.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-1600x945.jpg" alt="Phillips vs Pozidriv" width="800" height="473" class="aligncenter size-large wp-image-12912" srcset="https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-1600x945.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-800x472.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-768x454.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-1536x907.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-2048x1209.jpg 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>While nearly everyone gets by with a Phillips, it’s what strips all the screws. You don’t get the perfect fit.</p>
<p><a href="https://www.ikea.com/us/en/p/fixa-17-piece-tool-kit-00169254/">This Fixa 17-piece tool kit</a> comes with a PZ2 bit along with a bunch of other tools for cheap. Or pick up a high quality one like <a href="https://amzn.to/35IF4qK">this Wera</a> and be set for life.</p>
<h3>Make it Metric</h3>
<p>If you’ve misplaced the hex key that came with your flat pack, fear not. There’s nothing special about them. Hex keys, aka Allen wrenches, can be found at any hardware store.</p>
<p>If you’re reaching for the hex keys in your toolbox, they’re most likely in imperial units. Being a European company, IKEA goes with the superior metric. You need millimeters instead of inches. As long as it covers from 2mm to 8mm (4mm being the classic IKEA size), like <a href="https://amzn.to/2FHvE3K">this Wera set</a>, you’re good to go.</p>
<p>Armed with a Pozidriv #2 screwdriver and metric hex keys, you’ll have the right tools to take on IKEA and beyond.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2020/09/the-ikea-packout/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>The Mad Magazine Fold-In Effect in CSS</title>
<link>https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/</link>
<comments>https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 08 Jun 2020 13:27:40 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Humor]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12754</guid>
<description><![CDATA[After 65 years at Mad Magazine, comic artist Al Jaffee announced his retirement. Jaffee was best known for his Mad Fold-Ins, where folding the page would reveal a hidden message in the artwork. Plenty of … <a href="https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>After 65 years at Mad Magazine, comic artist Al Jaffee <a href="https://www.washingtonpost.com/arts-entertainment/2020/06/06/al-jaffee-mad-magazine-retires/">announced his retirement</a>. Jaffee was best known for his Mad Fold-Ins, where folding the page would reveal a hidden message in the artwork. Plenty of examples can be found on the web. The problem is, they all show the before and after statically, side by side, which diminishes the magic (see <a href="https://en.wikipedia.org/wiki/Mad_Fold-in">here</a> and <a href="https://13thdimension.com/13-mad-fold-ins-an-al-jaffee-celebration/">here</a>). There’s a whole generation who may have only seen the fold-ins in this format.</p>
<p>Of course I had to create the paper folding effect for the web. There’s many different ways to achieve this, but this approach is nice because:</p>
<ul>
<li>It’s CSS only, relying on no JavaScript.</li>
<li>Uses a single image instead of requiring the image to be sliced up in Photoshop.</li>
<li>Can be configured with just HTML by setting CSS variables in a style attribute.</li>
</ul>
<p>Here’s a demo of it in action, using artwork by Johnny Sampson <a href="https://www.madmagazine.com/blog/2019/03/13/a-special-98th-birthday-fold-in-for-al-jaffee">in an issue that celebrated Jaffee’s 98th birthday</a>. Hover or tap to fold.</p>
<div class="jaffee-wrapper"><span class="jaffee" style="--bg: url('https://thomaspark.co/wp/wp-content/uploads/2020/06/jaffee.png');"><span class="a"></span><span class="bc"><span class="b"></span><span class="c"></span></span><img decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/06/jaffee.png"></span></div>
<p>And another by Jaffee himself.</p>
<div class="jaffee-wrapper"><span class="jaffee" style="--bg: url('https://thomaspark.co/wp/wp-content/uploads/2020/06/MAD-Magazine-520-Fold-in.jpg');"><span class="a"></span><span class="bc"><span class="b"></span><span class="c"></span></span><img decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2020/06/MAD-Magazine-520-Fold-in.jpg"></span></div>
<h3>The Code</h3>
<p>The HTML for the effect is fairly straightforward. You might be wondering about the standalone image element — it’s hidden but used to set the size and aspect ratio of the component. The image path is specified there and once again as a CSS variable to set the background image of the other elements.</p>
<pre class="language-markup">
<code class="language-markup">
<span class="jaffee" style="--bg: url('path/to/image.png');">
<span class="a"></span>
<span class="bc">
<span class="b"></span>
<span class="c"></span>
</span>
<img src="path/to/image.png">
</span>
</code>
</pre>
<p>And here is the CSS used to set the positioning, 3D transforms, and transitions.</p>
<pre class="language-css">
<code class="language-css">
.jaffee {
position: relative;
display: inline-flex;
transform: rotateX(10deg);
transform-style: preserve-3d;
cursor: grab;
}
.jaffee img {
width: auto;
height: auto;
max-width: 100%;
max-height: 56vh;
opacity: 0;
}
.jaffee .a,
.jaffee .b,
.jaffee .c {
top: 0;
display: inline-block;
height: 100%;
background-image: var(--bg);
background-size: cover;
background-repeat: no-repeat;
}
.jaffee .a {
position: absolute;
left: 0;
width: 50%;
background-position: 0 0;
}
.jaffee .bc {
position: absolute;
display: inline-flex;
width: 50%;
height: 100%;
left: 50%;
transform-origin: left;
transition: transform 3s;
transform-style: preserve-3d;
}
.jaffee .b,
.jaffee .c {
position: relative;
width: 50%;
backface-visibility: hidden;
}
.jaffee .b {
background-position: 66.666667% 0;
transform-style: preserve-3d;
}
.jaffee .b:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
transform: rotateY(180deg) translateZ(1px);
transform-style: preserve-3d;
backface-visibility: hidden;
}
.jaffee .c {
background-position: 100% 0;
transform-origin: left;
transition: transform 2s;
}
.jaffee:hover .bc,
.jaffee:active .bc {
transform: rotateY(-180deg) translateZ(-1px);
transition: transform 2s;
}
.jaffee:hover .c,
.jaffee:active .c {
transform: rotateY(180deg) translateZ(2px);
transition: transform 3s;
}
</code>
</pre>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/feed/</wfw:commentRss>
<slash:comments>28</slash:comments>
</item>
<item>
<title>No Scary Parts: A Browser Extension for Skipping Scary Scenes in Disney+ Movies</title>
<link>https://thomaspark.co/2020/05/no-scary-parts-a-browser-extension-for-skipping-scary-scenes-in-disney-movies/</link>
<comments>https://thomaspark.co/2020/05/no-scary-parts-a-browser-extension-for-skipping-scary-scenes-in-disney-movies/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 07 May 2020 12:11:37 +0000</pubDate>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12660</guid>
<description><![CDATA[I’ve made a Chrome browser extension called No Scary Parts. It automatically skips the scary scenes in family movies on Disney+, for the sake of your sensitive kids from age 1 to 100. Install it … <a href="https://thomaspark.co/2020/05/no-scary-parts-a-browser-extension-for-skipping-scary-scenes-in-disney-movies/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><a href="https://thomaspark.co/projects/no-scary-parts/"></p>
<div class="player">
<div class="toolbar">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="field"></div>
</p></div>
<div class="controls">
<div class="progress-bar">
<div class="scene scene-1"></div>
<div class="scene scene-2"></div>
<div class="bar"></div>
</p></div>
<div class="dot"></div>
</p></div>
<div class="video">
<img decoding="async" class="img-fluid" src="https://thomaspark.co/wp/wp-content/uploads/2020/05/scene-a.jpg"><img decoding="async" class="img-fluid" src="https://thomaspark.co/wp/wp-content/uploads/2020/05/scene-b.jpg">
</div>
</div>
<p></a></p>
<p>I’ve made a Chrome browser extension called No Scary Parts. It automatically skips the scary scenes in family movies on Disney+, for the sake of your sensitive kids from age 1 to 100. Install it or learn more by clicking the button below.</p>
<div class="center"><a class="standard-btn purple-btn xlarge-btn" href="https://thomaspark.co/projects/no-scary-parts/">No Scary Parts</a></div>
<h2>Background</h2>
<p>With the COVID-19 quarantine in effect and two little ones at home, Disney+ has provided some much-needed entertainment. But despite being aimed at kids, most Disney movies inevitably include <a href="https://www.buzzfeed.com/eleanorbate/scary-as-shit-disney-moments" rel="noopener noreferrer" target="_blank">a scene or two that ramp up the creepiness</a>. I mean, who wasn’t scarred by the pink elephants in Dumbo or “Night on Bald Mountain” in Fantasia as a youngin? Storytelling and character-building aside, at their age, my kids just want to enjoy the familiar characters and fun music. Other parents have relayed these sentiments to me too.</p>
<p>I could sit by, remote at the ready, fast forwarding scary scenes long burned into my memory. Maybe you already do that. But fortunately, having already written an extension with similar functionality, it didn’t take much code to do that work for me.</p>
<h2>Implementation</h2>
<p>Controlling video in Disney+ isn’t too different from Netflix, so much of the code outlined in <a href="https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/">the post about Slow Down x Terrace House</a> could be reused.</p>
<p>A new facet of this project however was highlighting upcoming scary scenes in the progress bar. As a React app, Disney+’s progress bar is added and removed from the DOM as the user hovers and unhovers the video. To detect each time the progress bar is added and then add our own highlights, <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="noopener noreferrer" target="_blank">MutationObserver</a> could be used.</p>
<p>Instead, I opted for CSS. A style rule is created that applies a linear gradient to the progress bar, with hard stops alternating between the highlight color and transparent to indicate skipped scenes.</p>
<p>As a side note, I quickly ran into <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=892711" rel="noopener noreferrer" target="_blank">Chrome bug 892711</a>, where if you have more than eight intervals (or basically three highlights) in your linear gradient, hard stops are rendered with blurry boundaries. It wasn’t a dealbreaker, but hopefully will get fixed.</p>
<h2>Future Work</h2>
<p>No Scary Parts currently supports Frozen, Moana, Beauty and the Beast, The Little Mermaid, and Fantasia. If there’s interest, more can be added. Leave your requests in the comments below.</p>
<p>Other streaming services like Netflix and Amazon Prime could be supported in the future, but I suspect my hands will be plenty full with creepy Disney scenes.</p>
<p>Everyone differs in their sensitivity, so setting your own level of filters, or time-stamping your own scenes, would be nice to add.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2020/05/no-scary-parts-a-browser-extension-for-skipping-scary-scenes-in-disney-movies/feed/</wfw:commentRss>
<slash:comments>33</slash:comments>
</item>
<item>
<title>Korean Keycaps for Your MacBook Pro</title>
<link>https://thomaspark.co/2019/11/korean-keycaps-for-the-macbook-pro/</link>
<comments>https://thomaspark.co/2019/11/korean-keycaps-for-the-macbook-pro/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 19 Nov 2019 13:33:20 +0000</pubDate>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12587</guid>
<description><![CDATA[So you want a different language keyboard for your MacBook Pro. And it’s too late to pick that option at checkout. Apple Support won’t be much help here. They won’t change your keyboard language after … <a href="https://thomaspark.co/2019/11/korean-keycaps-for-the-macbook-pro/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-scaled.jpg" alt="Korean Keycaps for MacBook Pro" width="2560" height="1199" class="aligncenter size-full wp-image-12588" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-scaled.jpg 2560w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-800x375.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-1600x749.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-768x360.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-1536x719.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-2048x959.jpg 2048w" sizes="auto, (max-width: 2560px) 100vw, 2560px" /></p>
<p>So you want a different language keyboard for your MacBook Pro. And it’s too late to <a href="http://thomaspark.co/wp/wp-content/uploads/2019/11/apple-keyboard-language-option.png">pick that option at checkout</a>.</p>
<p>Apple Support won’t be much help here. They won’t change your keyboard language after it’s been delivered. Even if they wanted to, they don’t carry the right parts for your “vintage model”, so they say.</p>
<p>You still have options.</p>
<h2>Keyboard Stickers</h2>
<p>The cheapest route are <a href="https://www.amazon.com/FORITO-Keyboard-Stickers-Background-Lettering/dp/B01N7R4EWC/?tag=thomasparkco-20">decals</a> you apply to your existing keys. But for someone as OCD as me, centering all of those stickers perfectly is a frustrating proposition. And before long, the stickers fade and peel.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-stickers.jpg" alt="Silicone Keyboard Cover" width="1024" height="498" class="aligncenter size-full wp-image-12622" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-stickers.jpg 1024w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-stickers-800x389.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-stickers-768x374.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></p>
<h2>Silicon Cover</h2>
<p>You can also go with a <a href="https://www.amazon.com/Kuzy-Language-Keyboard-MacBook-Silicone/dp/B00FX0KPN4/?tag=thomasparkco-20">silicone skin</a> that you lay over your keyboard. It looks nicer, and as a bonus, keeps Cheeto crumbs out of your keyboard. But as thin as it is, it still affects the feel of your keyboard, giving keys a spongier travel as you type. Also having the cover shift or flop around from time to time is an annoyance.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2019/11/silicone-keyboard-cover.jpg" alt="Silicone Keyboard Cover" width="1200" height="1006" class="aligncenter size-full wp-image-12619" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/11/silicone-keyboard-cover.jpg 1200w, https://thomaspark.co/wp/wp-content/uploads/2019/11/silicone-keyboard-cover-800x671.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/11/silicone-keyboard-cover-768x644.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h2>Replacement Keycaps</h2>
<p>There are vendors offering replacement keycaps, <a href="https://www.thebookyard.com/apple-keycaps.php">TheBookyard</a> carrying the most inventory. But at $6 per key, you’ll be dropping serious cash to switch 26 keys. They only carry EU languages too, so I was out of luck in my quest for Korean keys. Chinese and Japanese are also missing. I was surprised to find no sources for these languages anywhere.</p>
<h2>Salvage Keyboard Parts</h2>
<p>The best option I found was to salvage a third-party replacement keyboard part for keycaps. I got mine from <a href="https://www.ebay.com/itm/New-AC07-Korean-Keyboard-For-Macbook-Pro-Retina-15-A1398-2012-2013-2014-2015/392509473524">eBay here</a> and can vouch that the keys fit my late-2013 MacBook Pro 15 perfectly.</p>
<p><a href="https://www.ebay.com/itm/New-AC07-Korean-Keyboard-For-Macbook-Pro-Retina-15-A1398-2012-2013-2014-2015/392509473524"><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-part.jpg" alt="Korean Keyboard Part" width="900" height="553" class="aligncenter size-full wp-image-12614" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-part.jpg 900w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-part-800x492.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-part-768x472.jpg 768w" sizes="auto, (max-width: 900px) 100vw, 900px" /></a></p>
<p>You’ll want to make absolutely sure you get the right key type based on the different hinge mechanisms. For instance, the late-2013 model came in two different types — Type AC06 also referred to as Type J, and AC07 or K. You can determine yours by removing your keys and comparing the hinge with the reference photos <a href="https://thomaspark.co/wp/wp-content/uploads/2019/11/type-ac06-ac07-keys.png">here</a> and <a href="https://thomaspark.co/wp/wp-content/uploads/2019/11/type-j-k-keys.jpg">here</a>.</p>
<p>Be sure to also avoid damage when <a href="https://www.youtube.com/watch?v=kh88cn_rtLo">prying off the old and new keycaps</a>.</p>
<p>With care, you’ll get new language keys for relatively cheap, pretty much indistinguishable from Apple’s official keyboard.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2019/11/korean-keycaps-for-the-macbook-pro/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>A Simple Hack to get Impact Mode on your PixMob Band</title>
<link>https://thomaspark.co/2019/10/a-simple-hack-to-get-impact-mode-on-your-pixmob-band/</link>
<comments>https://thomaspark.co/2019/10/a-simple-hack-to-get-impact-mode-on-your-pixmob-band/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 02 Oct 2019 23:49:03 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12538</guid>
<description><![CDATA[At the Overwatch League Grand Finals in Philadelphia, attendees received white wristbands that blink different colors in sync with each other during the event. When the San Francisco Shock won a round, they flashed orange … <a href="https://thomaspark.co/2019/10/a-simple-hack-to-get-impact-mode-on-your-pixmob-band/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>At the <a href="https://carboncostume.com/cosplay-at-the-overwatch-league-grand-finals-2019-in-philadelphia/">Overwatch League Grand Finals in Philadelphia</a>, attendees received white wristbands that <a href="https://streamable.com/jnm6q">blink</a> different colors in sync with each other during the event. When the San Francisco Shock won a round, they flashed orange and white in unison. When the Vancouver Titans — well, nevermind…</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/10/sfshock-win.gif" alt="SF Shock Win" width="500" height="300" class="aligncenter size-full wp-image-12554" /></p>
<p>These bands, made by <a href="https://www.pixmob.com/">PixMob</a>, have been used at various sporting events and concerts, most famously on <a href="https://www.pixmob.com/projects/detail/taylor-swift-reputation-stadium-tour">Taylor Swift’s tours</a>. They’re synchronized using an array of infrared transmitters set up in the arena, each sending signals to a different seating section.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band.jpg" alt="PixMob Band from Overwatch League Grand Finals" width="1800" height="1149" class="aligncenter size-full wp-image-12548" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band.jpg 1800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-800x511.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-768x490.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-1600x1021.jpg 1600w" sizes="auto, (max-width: 1800px) 100vw, 1800px" /></p>
<p>Now you’re home from the event, and you don’t have an IR installation in your living room. But that doesn’t mean you have to throw your PixMob band away.</p>
<p>Instead, you can activate something called Impact Mode. Once it’s set, the band will blink different colors as you tap or shake it. Older PixMob models required <a href="https://www.youtube.com/watch?v=UQHpJ0dJJXQ">some disassembly</a> to achieve this. Fortunately, with the latest model, PixMob have made it easier than ever.</p>
<p>First open up the battery compartment on the back of the band and remove the two coin batteries.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open.jpg" alt="Open PixMob Band" width="1800" height="1200" class="aligncenter size-full wp-image-12549" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open.jpg 1800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open-800x533.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open-768x512.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open-1600x1067.jpg 1600w" sizes="auto, (max-width: 1800px) 100vw, 1800px" /></p>
<p>Underneath, you’ll find a circuit board. Locate the contact labeled “OPEN MODE”. Break this contact along the yellow line I drew in the photo below. I scratched mine off using the smallest screwdriver I could find.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-zoom.jpg" alt="PixMob Band Zoomed" width="1279" height="636" class="aligncenter size-full wp-image-12551" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-zoom.jpg 1279w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-zoom-800x398.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-zoom-768x382.jpg 768w" sizes="auto, (max-width: 1279px) 100vw, 1279px" /></p>
<p>Replace your batteries and enjoy your PixMob band back from the dead. Now you have proof that the band can also flash blue and green.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-band-hack.gif" alt="PixMob Band Hack" width="480" height="240" class="aligncenter size-full wp-image-12568" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2019/10/a-simple-hack-to-get-impact-mode-on-your-pixmob-band/feed/</wfw:commentRss>
<slash:comments>9</slash:comments>
</item>
<item>
<title>Querying Nearby Locations in WordPress using Geo Coordinates</title>
<link>https://thomaspark.co/2019/09/querying-nearby-locations-in-wordpress-using-geo-coordinates/</link>
<comments>https://thomaspark.co/2019/09/querying-nearby-locations-in-wordpress-using-geo-coordinates/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 16 Sep 2019 12:31:17 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12502</guid>
<description><![CDATA[In the course of developing Campus Arrival, a WordPress site that provides school-specific packing lists, we added a feature to suggest nearby universities. When viewing a school’s checklist, this feature displays other, nearby colleges. When … <a href="https://thomaspark.co/2019/09/querying-nearby-locations-in-wordpress-using-geo-coordinates/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>In the course of developing <a href="https://campusarrival.com" rel="noopener noreferrer" target="_blank">Campus Arrival</a>, a WordPress site that provides school-specific packing lists, we added a feature to suggest nearby universities. When viewing a school’s checklist, this feature displays other, nearby colleges. When viewing the front page, it suggests colleges near the visitor’s own location. For example, check out the suggestions for <a href="https://campusarrival.com/schools/massachusetts-institute-of-technology/#local">MIT</a>, <a href="https://campusarrival.com/schools/university-of-california-los-angeles/#local">UCLA</a>, or <a href="https://campusarrival.com/">your own location</a>.</p>
<p><a href="https://campusarrival.com" rel="noopener noreferrer" target="_blank"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_.png" alt="Campus Arrival nearby schools" width="2422" height="1366" class="aligncenter size-full wp-image-12511" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_.png 2422w, https://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_-800x451.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_-768x433.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_-1600x902.png 1600w" sizes="auto, (max-width: 2422px) 100vw, 2422px" /></a></p>
<p>This was implemented in WordPress by querying nearby schools based on geo coordinates, i.e., latitude and longitude. (Our first pass used a custom taxonomy with in-state schools, but we knew the results could be improved.)</p>
<p>If you’d like to do something similar, follow the steps in this guide.</p>
<h1>Post Meta</h1>
<p>Start by adding custom post meta fields for <code>latitude</code> and <code>longitude</code>. The WP plugin <a href="https://www.advancedcustomfields.com" rel="noopener noreferrer" target="_blank">Advanced Custom Fields</a> is a godsend for creating nice admin-facing interfaces to manage custom post meta.</p>
<h1>The Hooks</h1>
<p>First we start with the PHP code. The meat of the implementation is this function, cobbled together from <a href="https://wordpress.stackexchange.com/a/183503/154090" rel="noopener noreferrer" target="_blank">this comment</a> on the WordPress StackExchange, that accepts a set of coordinates, along with a few other parameters like the max search distance and number of posts to return, and returns the posts with the nearest latitude and longitude.</p>
<pre>
<code class="lang-php">
function query_neighbors( $latitude, $longitude, $post_id = -1, $distance = 400, $limit = 6 ) {
global $wpdb;
$earth_radius = 3959; // miles
$sql = $wpdb->prepare( "
SELECT DISTINCT
p.ID,
p.post_title,
map_lat.meta_value,
map_lng.meta_value,
( %d * acos(
cos( radians( %s ) )
* cos( radians( map_lat.meta_value ) )
* cos( radians( map_lng.meta_value ) - radians( %s ) )
+ sin( radians( %s ) )
* sin( radians( map_lat.meta_value ) )
) )
AS distance
FROM $wpdb->posts p
INNER JOIN $wpdb->postmeta map_lat ON p.ID = map_lat.post_id
INNER JOIN $wpdb->postmeta map_lng ON p.ID = map_lng.post_id
WHERE p.post_type = 'school'
AND p.post_status = 'publish'
AND p.ID != %d
AND map_lat.meta_key = 'latitude'
AND map_lng.meta_key = 'longitude'
HAVING distance < %s
ORDER BY distance ASC
LIMIT %d",
$earth_radius,
$latitude,
$longitude,
$latitude,
$post_id,
$distance,
$limit
);
$neighbors = $wpdb->get_results( $sql );
return $neighbors;
}
</code>
</pre>
<p>This function, along with the AJAX hook below, should be added to your custom plugin or <code>functions.php</code>. In the “do your thing” section, construct your markup, perhaps using a template.</p>
<pre>
<code class="lang-php">
function process_neighbors() {
check_ajax_referer( 'neighbors_validation', 'security');
$location = $_POST['location'];
$url = wp_get_referer();
$post_id = url_to_postid( $url );
if ( isset( $location ) ) {
$neighbors = query_neighbors( $location['latitude'], $location['longitude'], $post_id, 400, 6 );
$response = '';
if ( $neighbors ) {
foreach( $neighbors as $neighbor ) {
setup_postdata( $neighbor );
// do your thing
wp_reset_postdata();
}
}
if ( strlen( trim( $response ) ) > 0 ) {
wp_send_json_success( $response );
} else {
wp_send_json_error();
}
}
die();
}
add_action( 'wp_ajax_nopriv_post_neighbors', 'process_neighbors' );
add_action( 'wp_ajax_post_neighbors', 'process_neighbors' );
</code>
</pre>
<p>Next, enqueue the JS script that you’ll be creating in the next section.</p>
<pre>
<code class="lang-php">
function load_custom_js() {
$post_id = get_the_ID();
$location = array(
'latitude' => get_post_meta( $post_id, 'latitude', true ),
'longitude' => get_post_meta( $post_id, 'longitude', true ),
'post_id' => $post_id
);
$url = plugins_url( 'scripts/neighbors.js', __FILE__ );
wp_enqueue_script( 'neighbors_js', $url, array( 'jquery' ), '', true );
wp_localize_script( 'neighbors_js', 'ajax_neighbors_object', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'neighbors_validation' ),
'location' => $location
));
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );
</code>
</pre>
<h1>The Script</h1>
<p>Now we write the JavaScript code that makes the AJAX call to the PHP code to find nearby neighbors, then formats the results and appends them to the current page.</p>
<p>Start with a function that takes a location and sends a <code>POST</code> request to the hook above.</p>
<pre>
<code class="lang-javascript">
async function postNeighbors(location) {
let response;
try {
response = await $.ajax({
type: 'POST',
dataType: 'json',
url: ajax_neighbors_object.ajax_url,
data: {action: 'post_neighbors', security: ajax_neighbors_object.nonce, location: location}
});
return response;
} catch (error) {
console.error(error);
}
}
</code>
</pre>
<p>To compare with another school, call <code>postNeighbors</code> like so. In the <code>doYourThing</code> function, you’ll handle the markup you got in your response, perhaps injecting it into the page and sliding it into view.</p>
<pre>
<code class="lang-javascript">
postNeighbors(ajax_neighbors_object.location)
.then(({data})=>doYourThing(data));
</code>
</pre>
<p>To compare with the user’s own location, you just need to add one more step, making use of the handy WordPress geo API.</p>
<pre>
<code class="lang-javascript">
getUserLocation()
.then(postNeighbors)
.then(({data})=>doYourThing(data));
async function getUserLocation() {
const response = await fetch('https://public-api.wordpress.com/geo/');
const json = await response.json();
return json;
}
</code>
</pre>
<p>Check out <a href="https://campusarrival.com" rel="noopener noreferrer" target="_blank">Campus Arrival</a> to see all this in action.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2019/09/querying-nearby-locations-in-wordpress-using-geo-coordinates/feed/</wfw:commentRss>
<slash:comments>6</slash:comments>
</item>
<item>
<title>Integrating Video and Web Content: Lessons in User Interface Design</title>
<link>https://thomaspark.co/2019/09/integrating-video-and-web-content-lessons-in-user-interface-design/</link>
<comments>https://thomaspark.co/2019/09/integrating-video-and-web-content-lessons-in-user-interface-design/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 11 Sep 2019 12:21:05 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12385</guid>
<description><![CDATA[Recently I’ve been working on The Beautube, a site that integrates video tutorials with details about the products being mentioned in the videos, specifically in the realm of cosmetics. This project has presented numerous challenges … <a href="https://thomaspark.co/2019/09/integrating-video-and-web-content-lessons-in-user-interface-design/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Recently I’ve been working on <a href="https://thebeautube.com">The Beautube</a>, a site that integrates video tutorials with details about the products being mentioned in the videos, specifically in the realm of cosmetics.</p>
<p>This project has presented numerous challenges for how to design a tight, intuitive UI that makes efficient use of the available screen space when both video and web content are begging for more room.</p>
<p>Here I’d like to share a few lessons based on my experiences so far.</p>
<h1>Vertical scrolling trumps horizontal scrolling</h1>
<p>The basic requirements of the site are to display an embedded YouTube video, and alongside this, a list of elements containing product details. This list can be rather lengthy, so scrolling somehow has be involved. The question is how.</p>
<p>In our initial prototypes, I played with both vertical scrolling of the products adjacent to the video, and horizontal scrolling below the video. For horizontal scrolling, both a standard browser overflow scroll and a carousel were explored, even though <a href="http://shouldiuseacarousel.com/">carousels have been found to be ineffective</a>.</p>
<p>At first blush, horizontal scrolling is appealing. For desktops, the horizontal axis gives room for more products to be displayed at once. Horizontal scrolling also harmonizes well with the playback bar of the video itself.</p>
<p>In action, it’s a different story. Vertical scrolling is the standard behavior on webpages, and so familiar to users at this point that they instinctively know when to scroll down even when <a href="https://www.nytimes.com/2017/02/02/technology/personaltech/solving-the-case-of-the-disappearing-scroll-bars.html" >scrollbars have been removed</a>. Horizontal scrolling not so much. Additionally, scrolling down with a swipe of your finger is an engrained and comfortable motion compared to horizontal flicking, especially for long periods of time. And most computer mouses have a scroll wheel in just one direction — you guessed it, vertical.</p>
<p>In the end, one of our early design decisions was to go with vertical scrolling and have the rest of UI accommodate it, even if it added some tradeoffs to deal with.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling.png" alt="Vertical vs horizontal scrolling" width="2102" height="720" class="aligncenter size-full wp-image-12465" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling-1600x548.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<p>That’s not to say horizontal scrolling should be verboten. I imagine a strong case could be made for horizontal scrolling when there’s close integration with video playback with minimal user interaction. Or for <a href="https://uxplanet.org/bidirectional-scrolling-is-here-to-save-responsive-design-be1afe53206d">bidirectional scrolling</a>, as a secondary navigation.</p>
<p>Netflix is a good example of this, where users vertically scroll through categories, and then horizontally scroll through videos within a category.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu.png" alt="Netflix" width="2882" height="1550" class="aligncenter size-full wp-image-12425" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu.png 2882w, https://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu-800x430.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu-768x413.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu-1600x861.png 1600w" sizes="auto, (max-width: 2882px) 100vw, 2882px" /></p>
<h1>Limit lists to a single dimension when possible</h1>
<p>Having settled on a vertical list, I experimented with multiple columns, with the idea of increasing the information density. While I was able to squeeze a few more items into the visible part of the list, it came at the cost of readability. With a single column, users can quickly scan down the list to view all of the product images, all of the product titles, etc. When multiple columns are added, the user’s eyes have to dance back-and-forth as they make their way down the list, tiring faster and losing their place.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/columns.png" alt="Multiple vs single column" width="2102" height="720" class="aligncenter size-full wp-image-12467" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/columns.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/columns-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/columns-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/columns-1600x548.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<p>A single column works out in this case because the space available to the list is rather narrow to begin with. If the space were much wider, staying with a single column could lead to text that pushes beyond the <a href="https://baymard.com/blog/line-length-readability">optimal line length</a>, causing readability to suffer in a new way.</p>
<h1>Keep video in view with sticky positioning</h1>
<p>By default, when scrolling through the list of products, the video will also scroll off the page. This forces the user to jump back and forth, when the ideal behavior is to be able to reference both at the same time. Fortunately, the CSS property <code>position: sticky</code> comes to the rescue. Setting this on the video will keep it in the viewport, sticking to the top or bottom edge of the widow, so long as the list is on screen as well.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1.png" alt="Sticky positioning" width="2102" height="720" class="aligncenter size-full wp-image-12481" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1-1600x548.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<h1>For media queries, make use of orientation and aspect-ratio</h1>
<p>When using media queries, both developers and frameworks often rely solely on breakpoints set at different widths. For basic cases, such as turning two columns of text into one for mobile, this approach suffices. But for more complex situations, adding the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation">orientation</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio">aspect-ratio</a> features to media queries can make all the difference.</p>
<p>Consider our project, which needs to squeeze in both the video player, which is always present at its 16:9 aspect ratio, and the product list, whose design we have more room to play with. The naive approach of moving to a single column for smaller devices only works if the device is being held in portrait mode. If rotated to landscape however, the two-column layout will make better use of the space.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/orientation.png" alt="Orientation" width="2102" height="720" class="aligncenter size-full wp-image-12471" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/orientation.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/orientation-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/orientation-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/orientation-1600x548.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<p>As a side-note, remember to make your videos responsive. If you’re delivering your video in an iframe, as is the case with YouTube embeds, you’ll need <a href="https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php">some CSS trickery</a> to get this done.</p>
<h1>Disable the default fullscreen behavior on mobile</h1>
<p>One gotcha to watch out for is that on iOS by default, YouTube will automatically play embedded videos in full-screen, rendering all of the above design improvements moot. To allow mobile users to view all of our content simultaneously, <a href="https://developers.google.com/youtube/player_parameters#playsinline">enable inline playback</a> with the <code>playsinline</code> parameter.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen.png" alt="Fullscreen" width="2102" height="1200" class="aligncenter size-full wp-image-12472" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen-800x457.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen-768x438.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen-1600x913.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<h1>Two-way coupling between video and web content</h1>
<p>Everything up to this point has been about layout and positioning. But integrating video content with the web also affords integrated behaviors. For this project, two-way coupling was implemented, meaning that the state of the video content affects the web content, and vice versa. Communicating between the two is made possible by the <a href="https://developers.google.com/youtube/iframe_api_reference">YouTube Player API</a>, which exposes video player events like <code>onReady</code> and methods like <code>seekTo()</code> and <code>getCurrentTime()</code>.</p>
<p>In the list, each item has a clickable timestamp that seeks the player to that time in the video. On the video side, a listener checks when the current time elapses past a new timestamp, highlighting the respective item and scrolling it into view with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView">the native method</a> <code>scrollIntoView()</code>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/coupling.png" alt="Two-way coupling" width="2102" height="720" class="aligncenter size-full wp-image-12474" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/coupling.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/coupling-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/coupling-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/coupling-1600x548.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<h1>The lazy auto-scroll</h1>
<p>Lastly, I adopted what I call the lazy auto-scroll. By this principle, the current active list item is:</p>
<ol>
<li>always kept in the viewport</li>
<li>but by scrolling with the least amount of movement possible</li>
</ol>
<p>Let’s take a few concrete examples. When the newly active item is already within the viewport, no auto-scrolling happens, regardless of the item’s position. When the active item is above the fold, which can happen when the user has browsed around the list, the list auto-scrolls to put the item on the top edge of the viewport. When the active item is below the fold, the list auto-scrolls the item to the bottom edge of the viewport. And the auto-scrolling check happens only when the video reaches a new timestamp.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll.png" alt="Lazy autoscroll" width="2102" height="720" class="aligncenter size-full wp-image-12476" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll-1600x548.png 1600w" sizes="auto, (max-width: 2102px) 100vw, 2102px" /></p>
<p>The effect of this lazy auto-scrolling is that there’s less unnecessary movement creating distraction and a chance for the user to lose their place. If the active item is a few pixels off from the top or center of the list, does it really need to scroll those measly pixels?</p>
<p>Lazy auto-scrolling also gives users freedom to browse around a bit without auto-scroll hijacking their actions. Only when the video reaches a new timestamp, the list re-orients itself, benefiting users who do want to navigate back to the current active item eventually.</p>
<h1>Putting it all into practice</h1>
<p>Applying all of the lessons above, here’s the current, though likely not the final, state of <a href="https://thebeautube.com">The Beautube</a>.</p>
<p><a href="https://thebeautube.com"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube.png" alt="The Beautube" width="2420" height="1460" class="aligncenter size-full wp-image-12413 shadow" srcset="https://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube.png 2420w, https://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube-500x302.png 500w, https://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube-768x463.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube-800x483.png 800w" sizes="auto, (max-width: 2420px) 100vw, 2420px" /></a></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2019/09/integrating-video-and-web-content-lessons-in-user-interface-design/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>Verifying Money Inputs on the Web à la Personal Checks</title>
<link>https://thomaspark.co/2018/12/verifying-money-inputs-on-the-web-a-la-personal-checks/</link>
<comments>https://thomaspark.co/2018/12/verifying-money-inputs-on-the-web-a-la-personal-checks/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 13 Dec 2018 14:35:35 +0000</pubDate>
<category><![CDATA[Humor]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12287</guid>
<description><![CDATA[With the era of the humble unstyled and unscripted input field behind us, there’s increasing variety in how monetary inputs work on the web. And this inconsistency can lead to big mistakes. Take two cases … <a href="https://thomaspark.co/2018/12/verifying-money-inputs-on-the-web-a-la-personal-checks/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>With the era of the humble unstyled and unscripted input field behind us, there’s increasing variety in how monetary inputs work on the web. And this inconsistency can lead to big mistakes.</p>
<p>Take two cases from the same company. PayPal has you input money amounts by the cent. To input fifty dollars, you type <code>5</code> <code>0</code> <code>0</code> <code>0</code>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/12/paypal-500x342.png" alt="PayPal" width="500" height="342" class="aligncenter size-medium wp-image-12297" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/12/paypal-500x342.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/12/paypal-768x525.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/12/paypal-800x547.png 800w, https://thomaspark.co/wp/wp-content/uploads/2018/12/paypal.png 1250w" sizes="auto, (max-width: 500px) 100vw, 500px" /></p>
<p>Paypal-owned Venmo on the other hand, has you input money by the dollar, typing <code>5</code> <code>0</code>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/12/venmo-231x500.png" alt="Venmo" width="231" height="500" class="aligncenter size-medium wp-image-12298 border" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/12/venmo-231x500.png 231w, https://thomaspark.co/wp/wp-content/uploads/2018/12/venmo-768x1663.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/12/venmo-277x600.png 277w, https://thomaspark.co/wp/wp-content/uploads/2018/12/venmo.png 1125w" sizes="auto, (max-width: 231px) 100vw, 231px" /></p>
<p>Other sites have <a href="http://thomaspark.co/wp/wp-content/uploads/2018/12/capitalone.png">yet other variations</a>.</p>
<p>Carelessly mixing them up leads to overpaying or underpaying by two orders of magnitude. You end up paying $0.20 for your share of dinner, or worse yet, $2,000 for a pizza. Thankfully, most websites mitigate this by showing a confirmation screen or prompting a warning. But where’s the fun in that?</p>
<p>Instead, I propose we take inspiration from personal checks, the ones Grandma uses to pay for her groceries. Personal checks don’t have the tight feedback loop websites do, so how do they verify the amount you wrote is actually the intended value? That the decimal space isn’t a comma or an ink smudge? They have you spell out the dollar amount as text.</p>
<p><a href="https://en.wikipedia.org/wiki/Cheque"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/12/CanadianChequeSample.png" alt="" width="708" height="310" class="aligncenter size-full wp-image-12314" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/12/CanadianChequeSample.png 708w, https://thomaspark.co/wp/wp-content/uploads/2018/12/CanadianChequeSample-500x219.png 500w" sizes="auto, (max-width: 708px) 100vw, 708px" /></a></p>
<p>This design pattern isn’t unheard of on the web. On GitHub, high-stakes operations like deleting a repo require typing out the full name of the repository. The act of figuring out what to type and then typing it out is often enough to snap the user out of mindless, routine clicking when a catastrophic error could be made.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/12/github-500x423.png" alt="GitHub" width="500" height="423" class="aligncenter size-medium wp-image-12308" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/12/github-500x423.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/12/github-768x650.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/12/github-709x600.png 709w, https://thomaspark.co/wp/wp-content/uploads/2018/12/github.png 1032w" sizes="auto, (max-width: 500px) 100vw, 500px" /></p>
<p>So why not for big dollar amounts as well? Here’s a quick <a href="https://thomaspark.co/projects/moneycheck/">demo</a> made using <a href="https://github.com/finnfiddle/words-to-numbers">words-to-numbers</a>. Give it a spin.</p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" style="width: 100%; height: 300px; border: none;" src="https://thomaspark.co/projects/moneycheck/" width="100%" height="500" scrolling="yes" class="iframe-class" frameborder="0"></iframe>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2018/12/verifying-money-inputs-on-the-web-a-la-personal-checks/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
<item>
<title>Slow Down × Terrace House: Writing a Browser Extension to Change a Theme Song on Netflix</title>
<link>https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/</link>
<comments>https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 31 Jul 2018 13:24:43 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12042</guid>
<description><![CDATA[I just finished binging the latest release of Terrace House, a reality TV show from Japan. If you’re not familiar, Terrace House is hands down the slowest and quietest reality television you’ll find, although not … <a href="https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/06/slowdown-500x313.png" alt="Slow Down × Terrace House" width="500" height="313" class="aligncenter size-medium wp-image-12068" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/06/slowdown-500x313.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/06/slowdown-768x480.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/06/slowdown.png 800w" sizes="auto, (max-width: 500px) 100vw, 500px" /></p>
<p>I just finished binging <a href="https://www.theverge.com/2018/3/13/17114364/netflix-terrace-house-opening-new-doors">the latest release of Terrace House</a>, a reality TV show from Japan. If you’re not familiar, Terrace House is hands down <a href="https://www.polygon.com/tv/2016/12/8/13882986/terrace-house-netflix">the slowest and quietest reality television you’ll find</a>, although not without its own kind of drama. And while the fourth installment, Opening New Doors, kept a lot of what made the show an international hit, there’s one big problem: they changed the opening theme song.</p>
<p>The new song is fine. The problem is the song used in earlier series, “Slow Down” by Lights Follow, was a perfect fit. It set the mood for each episode with its theme of figuring yourself out and its relaxed, bittersweet vibe. <a href="https://www.reddit.com/r/terracehouse/comments/8nu0lf/do_you_guys_miss_slow_down/">I’m not the only one to feel this way</a>. One fan went so far as to <a href="https://www.youtube.com/watch?v=0LAVQA-DBpU">re-cut the new intro with the old theme song</a>.</p>
<p>Well, I decided to go a step further by writing a browser extension for Chrome, <a href="https://chrome.google.com/webstore/detail/slow-down-terrace-house/ohccpkjiolefjbdgakkaihamdcdfgdnm?hl=en-US">Slow Down × Terrace House</a>, that switches the theme song back for new episodes of Terrace House on Netflix. You can try it out on the Chrome Web Store:</p>
<div class="center"><a class="standard-btn green-btn xlarge-btn" href="https://chrome.google.com/webstore/detail/slow-down-terrace-house/ohccpkjiolefjbdgakkaihamdcdfgdnm?hl=en-US"><span>Slow Down × Terrace House on Chrome Web Store</span></a></div>
<p>Here I wanted to share my general approach and some specifics for anyone interested in making a similar browser extension. Maybe this will put you on the path to giving every season of The Wire your favorite rendition of “Way Down in the Hole”. Or blasting “Immigrant Song” over every battle scene involving Thor. The possibilities are endless.</p>
<h2>The Plan</h2>
<p>The general plan for the extension is simple:</p>
<ol>
<li>Check if an episode of Terrace House: Opening New Doors is playing on Netflix.
<li>Detect when the opening credits are about to start.
<li>Mute the Netflix player and play “Slow Down” instead.
<li>Unmute the Netflix player when the credits end.
</ol>
<p>As for knowing when the opening credits start, it unfortunately varies quite a bit by episode, starting as late as 17 minutes in. With only 16 episodes so far (and finding no better solution), I took the brute-force approach of hard-coding timestamps for all of the episodes. This added a step 1b for detecting the episode number and looking up the timestamp.</p>
<h2>Inside the Extension</h2>
<p>With this plan in hand, I created the skeleton of the Chrome extension by diving <a href="https://developer.chrome.com/extensions">into the docs</a>. I recommend you do the same.</p>
<p>But in a nutshell, there are two contexts: content scripts are injected into the active web page, in this case Netflix; and background scripts, which you can think of as your extension’s own context, which can detect browser actions like adding a bookmark and switching tabs, as well as communicate with your content scripts.</p>
<p>The content and background scripts, along with the extension’s metadata, are defined in a <code>manifest.json</code> file. Here’s what it looks like:</p>
<pre>
<code lang="javascript" class="lang-javascript">
{
"name": "Slow Down x Terrace House",
"short_name": "SD x TH",
"version": "1.0.0",
"manifest_version": 2,
"description": "Replace the Terrace House theme song on Netflix with \\"Slow Down\\" by Lights Follow.",
"homepage_url": "https://thomaspark.co",
"icons": {
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"content_scripts": [
{
"matches": ["https://www.netflix.com/*"],
"js": ["content.js"]
}
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": ["webNavigation"],
"web_accessible_resources": ["audio/slowdown.mp3"]
}
</code>
</pre>
<h2>Detecting Series, Season, Episode</h2>
<p>Detecting when Terrace House is being watched and grabbing the episode number happens in, you guessed it, the content script. Here, the script returns early if it’s on something other than an active video page (for example, the main menu or episode list), and keeps checking the page until the video is loaded. Then it grabs the series, season, and episode from the DOM.</p>
<pre>
<code lang="javascript" class="lang-javascript">
function init() {
if (!window.location.href.startsWith("https://www.netflix.com/watch/")) {
return;
}
const videoCheckInterval = setInterval(function() {
const video = document.querySelector(".VideoContainer video");
const titleElem = document.querySelector(".video-title h4");
if (video !== null && titleElem !== null) {
clearInterval(videoCheckInterval);
const title = document.querySelector(".video-title h4").innerText;
if (title.startsWith("Terrace House")) {
const id = video.parentElement.id;
const series = title.split(":")[1].trim();
const [season, episode] = document.querySelector(".video-title h4").nextSibling.innerText.split(":");
// The fun starts here.
}
}
}, 10);
}
</code>
</pre>
<h2>Messaging Between Contexts</h2>
<p>Once a Terrace House: Opening New Doors episode is detected, the content script needs to tell the background script to set up the “Slow Dive” audio. This starts by opening a connection and then passing a message.</p>
<p>In <code>content.js</code>, you can add the following:</p>
<pre>
<code lang="javascript" class="lang-javascript">
const port = chrome.runtime.connect({name: "slowdown"});
</code>
</pre>
<p>And wherever you need it in the meat of your function:</p>
<pre>
<code lang="javascript" class="lang-javascript">
port.postMessage({action: "play"});
</code>
</pre>
<p>In <code>background.js</code>, you’re listening for the connection and the play message:</p>
<pre>
<code lang="javascript" class="lang-javascript">
chrome.runtime.onConnect.addListener(function(port) {
const audio = new Audio("audio/slowdown.mp3");
port.onMessage.addListener(function(msg) {
if (msg.action == "play") {
audio.play();
}
}
}
</code>
</pre>
<p>Keep in mind that you can also send messages in the other direction, from <code>background.js</code> to <code>content.js</code>.</p>
<h2>Controlling Video & Audio</h2>
<p>If you’ve been paying close attention to the code snippets above, you’ll notice that we already have our references to the video element on Netflix’s site in <code>content.js</code> and the audio element for “Slow Down” in <code>background.js</code>. We can control these elements using JavaScript with some handy methods.</p>
<p>To mute and unmute:</p>
<pre>
<code lang="javascript" class="lang-javascript">
video.muted = true;
video.muted = false;
</code>
</pre>
<p>To play and pause:</p>
<pre>
<code lang="javascript" class="lang-javascript">
audio.play();
audio.pause();
</code>
</pre>
<p>To get and set the current time:</p>
<pre>
<code lang="javascript" class="lang-javascript">
const time = video.currentTime;
audio.currentTime = 500;
</code>
</pre>
<p>The video and audio elements also fire events. For example, in <code>inject.js</code>, this code will listen for when the video is paused, then send a message to <code>background.js</code> to also pause the song.</p>
<pre>
<code lang="javascript" class="lang-javascript">
video.addEventListener("pause", function() {
port.postMessage({action: "pause"});
});
</code>
</pre>
<p>And then in <code>background.js</code>:</p>
<pre>
<code lang="javascript" class="lang-javascript">
if (msg.action == "pause") {
audio.pause();
}
</code>
</pre>
<p>Another valuable event is <code>timeupdate</code>, which fires every time the play position of a video or audio file has changed. Use this to continuously check whether the opening credits start. Here’s a simplified version:</p>
<pre>
<code lang="javascript" class="lang-javascript">
video.addEventListener("timeupdate", function() {
if (video.currentTime === START_TIME) {
video.muted = true;
port.postMessage({action: "play"});
}
}
</code>
</pre>
<p>This is pretty much everything you need. Put it all together and you have the basic functionality of the extension.</p>
<p>With that said, there are a lot of edge cases and other details to account for that’ll considerably complicate your code. For example, in past series, the “Slow Down” theme song would begin fading in over the dialogue. To replicate this, you need to start playing the song first, then muting the video after a ten second delay, instead of simply having both events coincide.</p>
<p>Another hurdle I encountered is that Netflix behaves as a single-page app. When you navigate from one episode to another on Netflix’s site, a new page isn’t loaded, meaning whatever initialization your extension needs to make on the new video won’t run again. To work around this, <code>background.js</code> needs to listen for when <code>history.pushState()</code> is used by Netflix to display a new URL, and then send a message to <code>content.js</code> to re-initialize.</p>
<pre>
<code lang="javascript" class="lang-javascript">
chrome.webNavigation.onHistoryStateUpdated.addListener(function() {
audio.pause();
port.postMessage({action: "init"});
});
</code>
</pre>
<h2>Publishing to the Chrome Web Store</h2>
<p>Once you’ve finished your extension, you’ll want to distribute the fruits of your labor through the <a href="https://chrome.google.com/webstore/category/extensions">Chrome Web Store</a>. Pay the one-time developer fee of $5 and you can submit your extension. The process is short and sweet. Zip and upload your extension, then fill out some fields. Your listing will go live in a few minutes.</p>
<p>If you’re a fan of Terrace House, I hope you enjoy the <a href="https://chrome.google.com/webstore/detail/slow-down-terrace-house/ohccpkjiolefjbdgakkaihamdcdfgdnm?hl=en-US">Slow Down × Terrace House extension</a>.</p>
<p>Cue closing door sound.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/06/closing-1024x524.png" alt="Terrace House: Opening New Doors" width="780" height="399" class="aligncenter size-large wp-image-12116" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/06/closing-1024x524.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2018/06/closing-500x256.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/06/closing-768x393.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/06/closing.png 1600w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>Overwatch Collective</title>
<link>https://thomaspark.co/2018/06/overwatch-collective/</link>
<comments>https://thomaspark.co/2018/06/overwatch-collective/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 19 Jun 2018 12:17:16 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Language]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=12159</guid>
<description><![CDATA[Welcome to another installment of the collective nouns survey. This time we focus on Overwatch, following surveys for Team Fortress 2 and Starcraft. In Overwatch, there are 27 playable heroes so far, each with unique … <a href="https://thomaspark.co/2018/06/overwatch-collective/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis-800x486.jpg" alt="A Flurry of Meis" width="800" height="486" class="aligncenter size-large wp-image-12205" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis-800x486.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis-500x304.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis-768x467.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis.jpg 1480w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Welcome to another installment of the collective nouns survey. This time we focus on Overwatch, following surveys for <a href="https://thomaspark.co/2014/02/tf2-collective/">Team Fortress 2</a> and <a href="https://thomaspark.co/2011/05/starcraft-collective/">Starcraft</a>. </p>
<p>In Overwatch, there are <a href="https://playoverwatch.com/en-us/heroes/">27 playable heroes</a> so far, each with unique personalities and complementary abilities. When talking about a six-stack of McCrees or Meis (which isn’t seen outside of arcade mode anymore), it’s adequate but boring to refer to them as a “group” or “bunch”.</p>
<p>Better to invent language like the <a href="http://www.thealmightyguru.com/Pointless/AnimalGroups.html">terms of venery used for animals</a>. You’ve got familiar terms like a pride of lions and a swarm of bees. And even more evocative ones likes a murder of crows, a parliament of owls, a prickle of porcupines, and a flamboyance of flamingos.</p>
<p>To choose the terms that best evoke each hero, I polled the Overwatch community. I presented four randomized choices and the option to write in your own. A final question asked respondents to give their main hero. Check out the <a href="https://goo.gl/forms/B5ZxKETX6jUUVVXs1">survey</a> and the <a href="https://www.reddit.com/r/Overwatch/comments/8qlafc/">solicitation on r/Overwatch</a>.</p>
<p>The survey received 1,745 responses. I was surprised to find that many respondents placed little importance on alliteration. As far as the write-ins, some were so good that I kicked myself for not thinking of them. The best of these were given honorable mentions.</p>
<p>Here are the results. The full tally is given below.</p>
<h2>Update (May 14, 2020)</h2>
<p>I re-ran the survey for all heroes introduced since this post, including Ashe, Baptiste, Echo, Sigma, and Wrecking Ball, since there are no more heroes until Overwatch 2’s release. Those have been added to the results.</p>
<p class="hero-list">
<span class="column"><br />
<a href="#ana">An Assembly of Anas</a><br />
<a href="#ashe">An Ambush of Ashes</a><br />
<a href="#baptiste">A Band of Baptistes</a><br />
<a href="#bastion">A Battalion of Bastions</a><br />
<a href="#brigitte">A Brigade of Brigittes</a><br />
<a href="#dva">A Division of D.Vas</a><br />
<a href="#doomfist">A Drove of Doomfists</a><br />
<a href="#echo">An Array of Echoes</a><br />
<a href="#genji">A Gaggle of Genjis</a><br />
<a href="#hanzo">A Horde of Hanzos</a><br />
<a href="#junkrat">A Bombardment of Junkrats</a><br />
</span><br />
<span class="column"><br />
<a href="#lucio">A Rave of Lúcios</a><br />
<a href="#mccree">A Posse of McCrees</a><br />
<a href="#mei">A Flurry of Meis</a><br />
<a href="#mercy">A Mirage of Mercys</a><br />
<a href="#moira">A Mob of Moiras</a><br />
<a href="#orisa">A Stampede of Orisas</a><br />
<a href="#pharah">A Flock of Pharahs</a><br />
<a href="#reaper">A Wrath of Reapers</a><br />
<a href="#reinhardt">A Regiment of Reinhardts</a><br />
<a href="#roadhog">A Rodeo of Roadhogs</a><br />
<a href="#sigma">A Surge of Sigmas</a><br />
</span><br />
<span class="column"><br />
<a href="#soldier76">A Squad of Soldier: 76s</a><br />
<a href="#sombra">A Syndicate of Sombras</a><br />
<a href="#symmetra">A Spectrum of Symmetras</a><br />
<a href="#torbjorn">A Troupe of Torbjörns</a><br />
<a href="#tracer">A Trail of Tracers</a><br />
<a href="#widowmaker">A Web of Widowmakers</a><br />
<a href="#winston">A Troop of Winstons</a><br />
<a href="#wreckingball">A Rumble of Wrecking Balls</a><br />
<a href="#zarya">A Zeal of Zaryas</a><br />
<a href="#zenyatta">A Harmony of Zenyattas</a><br />
</span>
</p>
<h2 id="ana">An Assembly of Anas</h2>
<p class="ana">
<span class="option">Assembly</span><span class="progress"><span class="progress-bar" style="width: 37%;">37%</span></span><br />
<span class="option">Army</span><span class="progress"><span class="progress-bar" style="width: 35%;">35%</span></span><br />
<span class="option">Admonishment</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span><br />
<span class="option">Association</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span>
</p>
<p><strong>Ana Mains Call Themselves:</strong> Tie between Assembly and Army, which shows how close this one was.</p>
<p><strong>Honorable Mention:</strong> Annoyance, both in that Ana can annoy you with anti-heal and sleep, and that she seems perpetually disappointed in you.</p>
<p><strong>Other Write-Ins:</strong> Armada, Apocalypse, Tea Party, Retirement, Peek, Array, Eyeful, Arena, Parliament, Hobble, Administration, Arrangement, Abundance, Aviary</p>
<h2 id="ashe">An Ambush of Ashes</h2>
<p class="ashe">
<span class="option">Ambush</span><span class="progress"><span class="progress-bar" style="width: 55%;">55%</span></span><br />
<span class="option">Anger</span><span class="progress"><span class="progress-bar" style="width: 18%;">18%</span></span><br />
<span class="option">Association</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span><br />
<span class="option">Admonishment</span><span class="progress"><span class="progress-bar" style="width: 6%;">6%</span></span>
</p>
<p><strong>Ashe Mains Call Themselves:</strong> Tie between Ambush and Anger.</p>
<p><strong>Honorable Mention:</strong> Atonement, suggesting Ashe has turned the page on her criminal life.</p>
<p><strong>Other Write-Ins:</strong> Assembly, Urn, Arsenal, Phoenix, Posse, Gang</p>
<h2 id="baptiste">A Band of Baptistes</h2>
<p class="baptiste">
<span class="option">Band</span><span class="progress"><span class="progress-bar" style="width: 32%;">32%</span></span><br />
<span class="option">Battery</span><span class="progress"><span class="progress-bar" style="width: 29%;">29%</span></span><br />
<span class="option">Bundle</span><span class="progress"><span class="progress-bar" style="width: 21%;">21%</span></span><br />
<span class="option">Batch</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span>
</p>
<p><strong>Baptiste Mains Call Themselves:</strong> Band</p>
<p><strong>Honorable Mention:</strong> Bunch, not as evocative as some of the other terms but rolls off the tongue.</p>
<p><strong>Other Write-Ins:</strong> Bounce, Bevy, Brood, Battalion, Bond, Congregation</p>
<h2 id="bastion">A Battalion of Bastions</h2>
<p class="bastion">
<span class="option">Battalion</span><span class="progress"><span class="progress-bar" style="width: 53%;">53%</span></span><br />
<span class="option">Battery</span><span class="progress"><span class="progress-bar" style="width: 23%;">23%</span></span><br />
<span class="option">Band</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span><br />
<span class="option">Bulwark</span><span class="progress"><span class="progress-bar" style="width: 9%;">9%</span></span>
</p>
<p><strong>Bastion Mains Call Themselves:</strong> Battalion</p>
<p><strong>Honorable Mention:</strong> Bunch, which fits the subtlety and grace of Bastion. </p>
<p><strong>Other Write-Ins:</strong> Bevy, Balustrade, Boom, Brothel</p>
<h2 id="brigitte">A Brigade of Brigittes</h2>
<p class="brigitte">
<span class="option">Brigade</span><span class="progress"><span class="progress-bar" style="width: 69%;">69%</span></span><br />
<span class="option">Bunch</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span><br />
<span class="option">Bash</span><span class="progress"><span class="progress-bar" style="width: 9%;">9%</span></span><br />
<span class="option">Bombardment</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span>
</p>
<p><strong>Brigitte Mains Call Themselves:</strong> Brigade</p>
<p><strong>Honorable Mention:</strong> Crusade, it works nicely with Brigitte’s backstory, but can’t overcome the winner.</p>
<p><strong>Other Write-Ins:</strong> Barricade, Baguette, Bruschetta, Phalanx, Bonanza, Terror, Bestiary, Battalion</p>
<h2 id="dva">A Division of D.Vas</h2>
<p class="dva">
<span class="option">Division</span><span class="progress"><span class="progress-bar" style="width: 51%;">51%</span></span><br />
<span class="option">Dazzle</span><span class="progress"><span class="progress-bar" style="width: 28%;">28%</span></span><br />
<span class="option">Detachment</span><span class="progress"><span class="progress-bar" style="width: 12%;">12%</span></span><br />
<span class="option">Destruction</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span>
</p>
<p><strong>D.Va Mains Call Themselves:</strong> Division</p>
<p><strong>Honorable Mention:</strong> Dervish, nothing better to call six D.Va mechs boosting around you than a whirling dervish.</p>
<p><strong>Other Write-Ins:</strong> Defense, LAN Party, Deletion, Drove, Demolition, Dominion, Devotion, Detonation, Diversion, Dorito</p>
<h2 id="doomfist">A Drove of Doomfists</h2>
<p class="doomfist">
<span class="option">Drove</span><span class="progress"><span class="progress-bar" style="width: 36%;">36%</span></span><br />
<span class="option">Flurry</span><span class="progress"><span class="progress-bar" style="width: 30%;">30%</span></span><br />
<span class="option">Danger</span><span class="progress"><span class="progress-bar" style="width: 16%;">16%</span></span><br />
<span class="option">Flog</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span>
</p>
<p><strong>Doomfist Mains Call Themselves:</strong> Flurry, they might have to fight Mei mains for it though.</p>
<p><strong>Honorable Mention:</strong> Defenestration, because you have to use that word whenever possible.</p>
<p><strong>Other Write-Ins:</strong> Disorder, Fistful, Crater, Handful, Domination, Dojo, Damnation, Dominion, Dragoon</p>
<h2 id="echo">An Array of Echoes</h2>
<p class="echo">
<span class="option">Array</span><span class="progress"><span class="progress-bar" style="width: 47%;">47%</span></span><br />
<span class="option">Echelon</span><span class="progress"><span class="progress-bar" style="width: 33%;">33%</span></span><br />
<span class="option">Exaltation</span><span class="progress"><span class="progress-bar" style="width: 9%;">9%</span></span><br />
<span class="option">Reverberation</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span>
</p>
<p><strong>Echo Mains Call Themselves:</strong> Array.</p>
<p><strong>Honorable Mention:</strong> Echo, as in an Echo of Echoes… is there an echo in here?</p>
<p><strong>Other Write-Ins:</strong> Ring, Choir, Flight, Sound, Squadron</p>
<h2 id="genji">A Gaggle of Genjis</h2>
<p class="genji">
<span class="option">Gaggle</span><span class="progress"><span class="progress-bar" style="width: 50%;">50%</span></span><br />
<span class="option">Gang</span><span class="progress"><span class="progress-bar" style="width: 37%;">37%</span></span><br />
<span class="option">Group</span><span class="progress"><span class="progress-bar" style="width: 6%;">6%</span></span><br />
<span class="option">Gulp</span><span class="progress"><span class="progress-bar" style="width: 3%;">3%</span></span>
</p>
<p><strong>Genji Mains Call Themselves:</strong> Gang, because apparently Genji mains seem to take themselves much more seriously than other Overwatch players do.</p>
<p><strong>Honorable Mention:</strong> Clan</p>
<p><strong>Other Write-Ins:</strong> Dash, Gale, Gathering, Gimmick, Brotherhood, Gradient</p>
<h2 id="hanzo">A Horde of Hanzos</h2>
<p class="hanzo">
<span class="option">Horde</span><span class="progress"><span class="progress-bar" style="width: 33%;">33%</span></span><br />
<span class="option">Quiver</span><span class="progress"><span class="progress-bar" style="width: 28%;">28%</span></span><br />
<span class="option">Herd</span><span class="progress"><span class="progress-bar" style="width: 28%;">28%</span></span><br />
<span class="option">Host</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span>
</p>
<p><strong>Hanzo Mains Call Themselves:</strong> Horde</p>
<p><strong>Honorable Mention:</strong> Scatter, because now that the ability has been patched out of the game, we have to honor its memory somehow.</p>
<p><strong>Other Write-Ins:</strong> Hierarchy, Geometry Class, Clan, Hazard, Harem</p>
<h2 id="junkrat">A Bombardment of Junkrats</h2>
<p class="junkrat">
<span class="option">Bombardment</span><span class="progress"><span class="progress-bar" style="width: 34%;">34%</span></span><br />
<span class="option">Jalopy</span><span class="progress"><span class="progress-bar" style="width: 29%;">29%</span></span><br />
<span class="option">Jury</span><span class="progress"><span class="progress-bar" style="width: 20%;">20%</span></span><br />
<span class="option">Drove</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span>
</p>
<p><strong>Junkrat Mains Call Themselves:</strong> Bombardment</p>
<p><strong>Honorable Mention:</strong> Heap, another common write-in was Spam which was the winner for Junkrat’s TF2 counterpart, Demoman.</p>
<p><strong>Other Write-Ins:</strong> Juggle, Jank, Dumpster, Jamboree, Jive, Spam, Cackle, Cluster, Jumble</p>
<h2 id="lucio">A Rave of Lúcios</h2>
<p class="lucio">
<span class="option">Rave</span><span class="progress"><span class="progress-bar" style="width: 39%;">39%</span></span><br />
<span class="option">Legion</span><span class="progress"><span class="progress-bar" style="width: 26%;">26%</span></span><br />
<span class="option">League</span><span class="progress"><span class="progress-bar" style="width: 22%;">22%</span></span><br />
<span class="option">Leap</span><span class="progress"><span class="progress-bar" style="width: 10%;">10%</span></span>
</p>
<p><strong>Lúcio Mains Call Themselves:</strong> Legion</p>
<p><strong>Honorable Mention:</strong> Wave, let’s be honest… pickings were slim here, but at least this plays off the idea of a sound wave.</p>
<p><strong>Other Write-Ins:</strong> Loop, Line, Favela, Wall</p>
<h2 id="mccree">A Posse of McCrees</h2>
<p class="mccree">
<span class="option">Posse</span><span class="progress"><span class="progress-bar" style="width: 48%;">48%</span></span><br />
<span class="option">Murder</span><span class="progress"><span class="progress-bar" style="width: 21%;">21%</span></span><br />
<span class="option">Maraud</span><span class="progress"><span class="progress-bar" style="width: 14%;">14%</span></span><br />
<span class="option">Maelstrom</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span>
</p>
<p><strong>McCree Mains Call Themselves:</strong> Posse</p>
<p><strong>Honorable Mention:</strong> Mishap, because McCree’s ultimate “High Noon” goes sideways more often than not.</p>
<p><strong>Other Write-Ins:</strong> Misery, Meddling, Gang, Mass, Saloon, Mob, Hoedown, Passel, Mischief, Mid-Day, Magazine</p>
<h2 id="mei">A Flurry of Meis</h2>
<p class="mei">
<span class="option">Flurry</span><span class="progress"><span class="progress-bar" style="width: 38%;">38%</span></span><br />
<span class="option">Mob</span><span class="progress"><span class="progress-bar" style="width: 35%;">35%</span></span><br />
<span class="option">Monsoon</span><span class="progress"><span class="progress-bar" style="width: 16%;">16%</span></span><br />
<span class="option">Squall</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span>
</p>
<p><strong>Mei Mains Call Themselves:</strong> Flurry</p>
<p><strong>Honorable Mention:</strong> Malefaction, because a lineup of Meis is about as evil and terrifying as you can get. See image at top of post.</p>
<p><strong>Other Write-Ins:</strong> Malady, Medley, Murder, Mash, Storm, Manifold, Maze, Maelstrom</p>
<h2 id="mercy">A Mirage of Mercys</h2>
<p class="mercy">
<span class="option">Mirage</span><span class="progress"><span class="progress-bar" style="width: 34%;">34%</span></span><br />
<span class="option">Vale</span><span class="progress"><span class="progress-bar" style="width: 27%;">27%</span></span><br />
<span class="option">Mend</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span><br />
<span class="option">Remedy</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span>
</p>
<p><strong>Mercy Mains Call Themselves:</strong> Mirage</p>
<p><strong>Honorable Mention:</strong> Martyrdom, for the suffering Mercy players endure just to have a shot at winning the match.</p>
<p><strong>Other Write-Ins:</strong> Chorus, Menagerie, Murmur, Cloud, Miracle, Mob, Choir, Staff, Marvel, Mound, Flutter, Mangle, Myriad, Wainscot, Mothball, Coterie, Menage, Mottle, Marquee</p>
<h2 id="moira">A Mob of Moiras</h2>
<p class="moira">
<span class="option">Mob</span><span class="progress"><span class="progress-bar" style="width: 41%;">41%</span></span><br />
<span class="option">Marvel</span><span class="progress"><span class="progress-bar" style="width: 25%;">25%</span></span><br />
<span class="option">Mania</span><span class="progress"><span class="progress-bar" style="width: 22%;">22%</span></span><br />
<span class="option">Midnight</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span>
</p>
<p><strong>Moira Mains Call Themselves:</strong> Mob</p>
<p><strong>Honorable Mention:</strong> Miasma, which reflects the visual vomit on your screen whenever a Moira ults, although masquerade and malevolence were also inspired.</p>
<p><strong>Other Write-Ins:</strong> Masquerade, Malevolence, Aura, Massacre, Mosh, Coven</p>
<h2 id="orisa">A Stampede of Orisas</h2>
<p class="orisa">
<span class="option">Stampede</span><span class="progress"><span class="progress-bar" style="width: 50%;">50%</span></span><br />
<span class="option">Onslaught</span><span class="progress"><span class="progress-bar" style="width: 23%;">23%</span></span><br />
<span class="option">Orchestra</span><span class="progress"><span class="progress-bar" style="width: 20%;">20%</span></span><br />
<span class="option">Observance</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span>
</p>
<p><strong>Orisa Mains Call Themselves:</strong> Stampede</p>
<p><strong>Honorable Mention:</strong> Orgy, it’s fun to say, although not to imagine.</p>
<p><strong>Other Write-Ins:</strong> Obstruction, Optimization, Fortitude, Orchard, March, Omnibus, Enforcement, Oasis, Innocence</p>
<h2 id="pharah">A Flock of Pharahs</h2>
<p class="pharah">
<span class="option">Flock</span><span class="progress"><span class="progress-bar" style="width: 43%;">43%</span></span><br />
<span class="option">Fleet</span><span class="progress"><span class="progress-bar" style="width: 26%;">26%</span></span><br />
<span class="option">Phalanx</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span><br />
<span class="option">Flight</span><span class="progress"><span class="progress-bar" style="width: 12%;">12%</span></span>
</p>
<p><strong>Pharah Mains Call Themselves:</strong> Flock</p>
<p><strong>Honorable Mention:</strong> Formation, who wouldn’t want to watch a team of Pharahs try to do precision air acrobatics like the Blue Angels.</p>
<p><strong>Other Write-Ins:</strong> Flank, Parade, Plunge, Flimflam, Pandemonium, Barrage, Justice, Phoenix, Flotilla, Squadron</p>
<h2 id="reaper">A Wrath of Reapers</h2>
<p class="reaper">
<span class="option">Wrath</span><span class="progress"><span class="progress-bar" style="width: 35%;">35%</span></span><br />
<span class="option">Revenant</span><span class="progress"><span class="progress-bar" style="width: 26%;">26%</span></span><br />
<span class="option">Ravage</span><span class="progress"><span class="progress-bar" style="width: 23%;">23%</span></span><br />
<span class="option">Revenge</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span>
</p>
<p><strong>Reaper Mains Call Themselves:</strong> Wrath</p>
<p><strong>Honorable Mention:</strong> Ring, which is the arrangement a bunch of edgy Reapers would make to practice the occult.</p>
<p><strong>Other Write-Ins:</strong> Murder, Edge, Wrangle, Wraith, Rout, Haunt, Blossom, Heap, Host, Blight, Rampage, Coven, Ruse, Resurgence, Renegade, Rally, Spook, Hot Topic</p>
<h2 id="reinhardt">A Regiment of Reinhardts</h2>
<p class="reinhardt">
<span class="option">Regiment</span><span class="progress"><span class="progress-bar" style="width: 48%;">48%</span></span><br />
<span class="option">Rampage</span><span class="progress"><span class="progress-bar" style="width: 18%;">18%</span></span><br />
<span class="option">Charge</span><span class="progress"><span class="progress-bar" style="width: 16%;">16%</span></span><br />
<span class="option">Rampart</span><span class="progress"><span class="progress-bar" style="width: 15%;">15%</span></span>
</p>
<p><strong>Reinhardt Mains Call Themselves:</strong> Regiment</p>
<p><strong>Honorable Mention:</strong> Triumph, just sounds so knightly alongside a crusade of Brigittes.</p>
<p><strong>Other Write-Ins:</strong> Bombast, Army, Wall, Crusade, Radiance, Romp, Rutting, Glory, Crash</p>
<h2 id="roadhog">A Rodeo of Roadhogs</h2>
<p class="roadhog">
<span class="option">Rodeo</span><span class="progress"><span class="progress-bar" style="width: 51%;">51%</span></span><br />
<span class="option">Ragtag</span><span class="progress"><span class="progress-bar" style="width: 16%;">16%</span></span><br />
<span class="option">Rash</span><span class="progress"><span class="progress-bar" style="width: 15%;">15%</span></span><br />
<span class="option">Rout</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span>
</p>
<p><strong>Roadhog Mains Call Themselves:</strong> Rodeo</p>
<p><strong>Honorable Mention:</strong> Rasher, imagine all the bacon you could get out of a Roadhog. Mmmm.</p>
<p><strong>Other Write-Ins:</strong> Rumble, Rebuff, Rebellion, Chain Gang, Wall, Absolute Unit, Drove, Rotund, Onslaught, Ravage, Glut, Riot, Rack</p>
<h2 id="sigma">A Surge of Sigmas</h2>
<p class="sigma">
<span class="option">Surge</span><span class="progress"><span class="progress-bar" style="width: 34%;">34%</span></span><br />
<span class="option">School</span><span class="progress"><span class="progress-bar" style="width: 32%;">32%</span></span><br />
<span class="option">Study</span><span class="progress"><span class="progress-bar" style="width: 21%;">21%</span></span><br />
<span class="option">Set</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span>
</p>
<p><strong>Sigma Mains Call Themselves:</strong> School</p>
<p><strong>Honorable Mention:</strong> Symposium, a nod to Sigma’s background in space and science, not to mention his obsession with music.</p>
<p><strong>Other Write-Ins:</strong> Symphony, Asylum, System, Whisper, Schism</p>
<h2 id="soldier76">A Squad of Soldier: 76s</h2>
<p class="soldier76">
<span class="option">Squad</span><span class="progress"><span class="progress-bar" style="width: 81%;">81%</span></span><br />
<span class="option">Service</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span><br />
<span class="option">Sprint</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span><br />
<span class="option">Slaughter</span><span class="progress"><span class="progress-bar" style="width: 4%;">4%</span></span>
</p>
<p><strong>Soldier: 76 Mains Call Themselves:</strong> Squad</p>
<p><strong>Honorable Mention:</strong> Salvo, as in a stream of Soldiers who fire their helix rockets and then immediately sprint away from the danger.</p>
<p><strong>Other Write-Ins:</strong> Salute, Platoon, Army, Slew, Barracks, Retirement Home</p>
<h2 id="sombra">A Syndicate of Sombras</h2>
<p class="sombra">
<span class="option">Syndicate</span><span class="progress"><span class="progress-bar" style="width: 67%;">67%</span></span><br />
<span class="option">Shade</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span><br />
<span class="option">Stealth</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span><br />
<span class="option">Sovereign</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span>
</p>
<p><strong>Sombra Mains Call Themselves:</strong> Syndicate</p>
<p><strong>Honorable Mention:</strong> Conspiracy, nearly as good as the winning choice.</p>
<p><strong>Other Write-Ins:</strong> Breach, Collective, Sneak, Sample, Shimmer, Swarm, Scurry, Murder, Suite, Cell, Sheen, Score</p>
<h2 id="symmetra">A Spectrum of Symmetras</h2>
<p class="symmetra">
<span class="option">Spectrum</span><span class="progress"><span class="progress-bar" style="width: 42%;">42%</span></span><br />
<span class="option">System</span><span class="progress"><span class="progress-bar" style="width: 27%;">27%</span></span><br />
<span class="option">Surplus</span><span class="progress"><span class="progress-bar" style="width: 19%;">19%</span></span><br />
<span class="option">Sentinel</span><span class="progress"><span class="progress-bar" style="width: 10%;">10%</span></span>
</p>
<p><strong>Symmetra Mains Call Themselves:</strong> Spectrum, as in the electromagnetic spectrum of course.</p>
<p><strong>Honorable Mention:</strong> Circuit</p>
<p><strong>Other Write-Ins:</strong> Council, Symmetry, Sandbox, Sovereign, Suffering, Projection, Assembly</p>
<h2 id="torbjorn">A Troupe of Torbjörns</h2>
<p class="torbjorn">
<span class="option">Troupe</span><span class="progress"><span class="progress-bar" style="width: 47%;">47%</span></span><br />
<span class="option">Team</span><span class="progress"><span class="progress-bar" style="width: 22%;">22%</span></span><br />
<span class="option">Temper</span><span class="progress"><span class="progress-bar" style="width: 14%;">14%</span></span><br />
<span class="option">Tempest</span><span class="progress"><span class="progress-bar" style="width: 12%;">12%</span></span>
</p>
<p><strong>Torbjörn Mains Call Themselves:</strong> Troupe, because a bunch of Torbs seem like they’d be boisterous and merry.</p>
<p><strong>Honorable Mention:</strong> Tango, Tumescence</p>
<p><strong>Other Write-Ins:</strong> Torrent, Trebuchet, Temblor, Workshop, Turret, Tragedy, Travesty, Tinker, Tumor, Thunder, Trove, Cast, Torment, Testament, Tsunami, Trollful, Letterbox, Gäng, Blight</p>
<h2 id="tracer">A Trail of Tracers</h2>
<p class="tracer">
<span class="option">Trail</span><span class="progress"><span class="progress-bar" style="width: 36%;">36%</span></span><br />
<span class="option">Torment</span><span class="progress"><span class="progress-bar" style="width: 22%;">22%</span></span><br />
<span class="option">Twitch</span><span class="progress"><span class="progress-bar" style="width: 20%;">20%</span></span><br />
<span class="option">Trace</span><span class="progress"><span class="progress-bar" style="width: 16%;">16%</span></span>
</p>
<p><strong>Tracer Mains Call Themselves:</strong> Torment</p>
<p><strong>Honorable Mention:</strong> Cavalcade, a callback to Tracer’s voiceline, “The cavalry’s here!”</p>
<p><strong>Other Write-Ins:</strong> Zip, Blink, Troupe, Team, Swarm, Trounce, Flash, Flit, Cavalry, Gaggle, Fleet, Tribe, Marathon, Stream, Rush, Slipstream, Track, Trope</p>
<h2 id="widowmaker">A Web of Widowmakers</h2>
<p class="widowmaker">
<span class="option">Web</span><span class="progress"><span class="progress-bar" style="width: 52%;">52%</span></span><br />
<span class="option">Nest</span><span class="progress"><span class="progress-bar" style="width: 33%;">33%</span></span><br />
<span class="option">Wave</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span><br />
<span class="option">Ward</span><span class="progress"><span class="progress-bar" style="width: 6%;">6%</span></span>
</p>
<p><strong>Widowmaker Mains Call Themselves:</strong> Web</p>
<p><strong>Honorable Mention:</strong> Whisper, even though after Widowmaker’s nerf she’s practically screaming her infra-sight voiceline.</p>
<p><strong>Other Write-Ins:</strong> Weave, Murder, Sight, Wake, Baguette, Waste, Ballet, Wedding, Window, Wrath, Range</p>
<h2 id="winston">A Troop of Winstons</h2>
<p class="winston">
<span class="option">Troop</span><span class="progress"><span class="progress-bar" style="width: 35%;">35%</span></span><br />
<span class="option">Wrangle</span><span class="progress"><span class="progress-bar" style="width: 30%;">30%</span></span><br />
<span class="option">Warren</span><span class="progress"><span class="progress-bar" style="width: 18%;">18%</span></span><br />
<span class="option">Wisdom</span><span class="progress"><span class="progress-bar" style="width: 12%;">12%</span></span>
</p>
<p><strong>Winston Mains Call Themselves:</strong> Troop</p>
<p><strong>Honorable Mention:</strong> Barrel, either a group of raging apes barreling through you, or the chaos of a barrel full of monkeys.</p>
<p><strong>Other Write-Ins:</strong> Family, Band, Jungle, Coalition, Shrewdness, Wince, Rampage, Faculty, Whoop, Waddle, Warmth, Wallop</p>
<h2 id="wreckingball">A Rumble of Wrecking Balls</h2>
<p class="wreckingball">
<span class="option">Rumble</span><span class="progress"><span class="progress-bar" style="width: 39%;">39%</span></span><br />
<span class="option">Cluster</span><span class="progress"><span class="progress-bar" style="width: 33%;">33%</span></span><br />
<span class="option">Bobble</span><span class="progress"><span class="progress-bar" style="width: 15%;">15%</span></span><br />
<span class="option">Hail</span><span class="progress"><span class="progress-bar" style="width: 9%;">9%</span></span>
</p>
<p><strong>Wrecking Ball Mains Call Themselves:</strong> Cluster</p>
<p><strong>Honorable Mention:</strong> Hail, as in a Hail of Hammonds.</p>
<p><strong>Other Write-Ins:</strong> Bobble, Crash, Crew, Hail, Roll, Buttload, Orbit, Round, Rabble, Rout, Bombardment, Bunch</p>
<h2 id="zarya">A Zeal of Zaryas</h2>
<p class="zarya">
<span class="option">Zeal</span><span class="progress"><span class="progress-bar" style="width: 34%;">34%</span></span><br />
<span class="option">Ray</span><span class="progress"><span class="progress-bar" style="width: 23%;">23%</span></span><br />
<span class="option">Buzz</span><span class="progress"><span class="progress-bar" style="width: 22%;">22%</span></span><br />
<span class="option">Glow</span><span class="progress"><span class="progress-bar" style="width: 14%;">14%</span></span>
</p>
<p><strong>Zarya Mains Call Themselves:</strong> Zeal</p>
<p><strong>Honorable Mention:</strong> Surge, it was right there in the ultimate name all along.</p>
<p><strong>Other Write-Ins:</strong> Mass, Motherland, Bubble, Gulag, Zest, Zamboni, Commune, Pack, Girth, Regime, Flex, Army, Attraction, Zap, Accretion, Burst, Zephyr, Zenith, команда</p>
<h2 id="zenyatta">A Harmony of Zenyattas</h2>
<p class="zenyatta">
<span class="option">Harmony</span><span class="progress"><span class="progress-bar" style="width: 38%;">38%</span></span><br />
<span class="option">Nirvana</span><span class="progress"><span class="progress-bar" style="width: 27%;">27%</span></span><br />
<span class="option">Om</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span><br />
<span class="option">Tranquility</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span>
</p>
<p><strong>Zenyatta Mains Call Themselves:</strong> Harmony</p>
<p><strong>Honorable Mention:</strong> Zenith, far and away the best write-in. There just aren’t that many words that start with Z.</p>
<p><strong>Other Write-Ins:</strong> Zoom, Zoo, Order, Zephyr, Monastery, Collective, Meditation, Mandala, Float, Unity, Ziggurat, A Lotta, Embrace, Trance, Zeppelin, Cult, Zeitgeist, Zealot, Singularity</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2018/06/overwatch-collective/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>3D Printing a Wireless Charging Case for the Apple TV Remote</title>
<link>https://thomaspark.co/2018/03/3d-printing-a-wireless-charging-case-for-the-apple-tv-remote/</link>
<comments>https://thomaspark.co/2018/03/3d-printing-a-wireless-charging-case-for-the-apple-tv-remote/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 08 Mar 2018 13:29:25 +0000</pubDate>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=11983</guid>
<description><![CDATA[I recently got a new phone that supports wireless charging, allowing me to switch out my rather hefty clock radio dock for a teeny wireless charging pad, continuing the minimalist march in my living room. … <a href="https://thomaspark.co/2018/03/3d-printing-a-wireless-charging-case-for-the-apple-tv-remote/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup.jpg" alt="Wireless Charging Setup" width="3803" height="2751" class="aligncenter size-full wp-image-11997" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup.jpg 3803w, https://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup-500x362.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup-768x556.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup-1024x741.jpg 1024w" sizes="auto, (max-width: 3803px) 100vw, 3803px" /></p>
<p>I recently got a new phone that supports wireless charging, allowing me to switch out <a href="https://www.amazon.com/gp/product/B001U086NC?ie=UTF8&tag=bigicecube-20&camp=1789&linkCode=xm2&creativeASIN=B001U086NC">my rather hefty clock radio dock</a> for <a href="https://www.amazon.com/gp/product/B0756Z8X82?ie=UTF8&tag=bigicecube-20&camp=1789&linkCode=xm2&creativeASIN=B0756Z8X82">a teeny wireless charging pad</a>, continuing the <a href="https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/">minimalist march in my living room</a>. Things were good until my Apple TV remote needed a recharge, and I had to dig out my old lightning cable anyway.</p>
<p>Apple will likely add wireless charging to the ATV remote eventually, bolstering support for AirPower, but I decided to come up with my own solution in the meantime.</p>
<p>I started with a <a href="https://www.amazon.com/gp/product/B077QJQXMJ?ie=UTF8&tag=bigicecube-20&camp=1789&linkCode=xm2&creativeASIN=B077QJQXMJ">Lightning to QI wireless charging receiver module</a>, which worked well but didn’t look so great dangling from the remote.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver.jpg" alt="Wireless Charging Receiver" width="3024" height="2068" class="aligncenter size-full wp-image-12015" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver.jpg 3024w, https://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver-500x342.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver-768x525.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver-1024x700.jpg 1024w" sizes="auto, (max-width: 3024px) 100vw, 3024px" /></p>
<p>What I needed next was a case to tuck the receiver into. I decided to go the 3D printing route.</p>
<p>After taking some measurements with a caliper borrowed from a friend, I built a 3D model using <a href="https://www.tinkercad.com/">Tinkercad</a>. I strongly recommend Tinkercad if you’re a beginner, as I was able to get up to speed with it very quickly and accomplish everything I needed.</p>
<p>I started with a basic case shape that had a hollowed out area to tuck the charging receiver into. After a few iterations, I arrived at a case with a separate cover piece that hid away the receiver and allowed the Lightning plug to be snapped into it, exposing only the plug end when the two pieces cases were assembled.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/03/tinkercad-model.png" alt="TinkerCAD model" width="909" height="522" class="aligncenter size-full wp-image-12009" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/03/tinkercad-model.png 909w, https://thomaspark.co/wp/wp-content/uploads/2018/03/tinkercad-model-500x287.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/tinkercad-model-768x441.png 768w" sizes="auto, (max-width: 909px) 100vw, 909px" /></p>
<p>I exported the model and submitted it to <a href="https://www.shapeways.com/">Shapeways</a>, a popular 3D printing service. I also got the more basic model printed to compare. About a week later, the pieces arrived.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces.jpg" alt="3D Printed Case Pieces" width="3916" height="2939" class="aligncenter size-full wp-image-12022" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces.jpg 3916w, https://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces-500x375.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces-1024x769.jpg 1024w" sizes="auto, (max-width: 3916px) 100vw, 3916px" /></p>
<p>Here’s the assembly. You can see how the charging receiver gets plugged into the cover piece, which then slides into the main piece. The fit between the pieces was snug and the seam barely noticeable.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/03/assembly.jpg" alt="3D Printed Apple TV 4 Wireless Charging Case Assembly" width="6000" height="3613" class="aligncenter size-full wp-image-12014" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/03/assembly.jpg 6000w, https://thomaspark.co/wp/wp-content/uploads/2018/03/assembly-500x301.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/assembly-768x462.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/assembly-1024x617.jpg 1024w" sizes="auto, (max-width: 6000px) 100vw, 6000px" /></p>
<p>Here’s the final product. Now the lightning cable can be packed away for good.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase.jpg" alt="Apple TV 4 Remote Wireless Charging Case" width="3890" height="2954" class="aligncenter size-full wp-image-12016" srcset="https://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase.jpg 3890w, https://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase-500x380.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase-768x583.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase-1024x778.jpg 1024w" sizes="auto, (max-width: 3890px) 100vw, 3890px" /></p>
<h2>Notes</h2>
<h3>Fit</h3>
<p>I modeled the case to have tight tolerances between the pieces and the remote. Since this was the first time I used 3D printing, I didn’t know what I was gonna get. The 3D print job was as precise as hoped for, but the tolerances ended up being a bit too tight. Even after sanding down the pieces, the remote was a tight squeeze and required some muscle to remove. For the next version, I’d leave bigger gaps and add little nubs (not sure the right term) inside the case to hold the remote in place instead.</p>
<h3>Finish</h3>
<p>The texture of the Shapeways pieces wasn’t as rough as other 3D printed works I’ve seen in the past. Still, they were far from the smooth or even matte surfaces you get in commercial products. Finishing them using the methods described <a href="https://www.fictiv.com/hwg/fabricate/ultimate-guide-to-finishing-3d-printed-parts">in this guide</a> would go a long way.</p>
<h3>Financials</h3>
<p>Getting the pieces printed by Shapeways was quite pricey. The model could definitely be optimized to reduce the amount of materials used, or if these were to be made in bulk, an entirely different, cheaper process could be taken. But given that this was a one-off project and as much a learning experience as anything else, cost wasn’t a big consideration.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2018/03/3d-printing-a-wireless-charging-case-for-the-apple-tv-remote/feed/</wfw:commentRss>
<slash:comments>3</slash:comments>
</item>
<item>
<title>Putting TV Clutter Out of Sight</title>
<link>https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/</link>
<comments>https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 13 Oct 2017 13:18:44 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">https://thomaspark.co/?p=11919</guid>
<description><![CDATA[The Problem The clutter. While I admit this setup is cleaner than most, there’s still the white power strip peeking out and the Nintendo Switch obscuring a corner of the TV. Then there’s the random … <a href="https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/">Read more</a>]]></description>
<content:encoded><![CDATA[<h2>The Problem</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before.jpg" alt="" width="1600" height="1200" class="aligncenter size-full wp-image-11939" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before-500x375.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before-1024x768.jpg 1024w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></p>
<p>The clutter. While I admit this setup is cleaner than most, there’s still the white power strip peeking out and the Nintendo Switch obscuring a corner of the TV. Then there’s the random cables drooping here and there. You might say I’m obsessive about cable management, decluttering, and minimalism in general.</p>
<p>But while I’ve endured this setup to this point, clearing it became an urgent matter once Baby Clara entered the picture. To her, it’s all strings to be pulled and toys to be tossed.</p>
<h2>The Solution</h2>
<p>To hide the clutter, I decided to mount everything onto the back of the TV.</p>
<p>I picked up black MDF board, cut it to size, and drilled holes that lined up with the VESA mounting holes. Long bolts that fit the VESA holes (M8 x 55mm in my case) are paired with nuts to secure the board several centimeters away from the TV. By not being flush, there’s still room to ventilate both the TV and devices.</p>
<p>Throw in a couple of custom mounts for the <a href="https://www.amazon.com/TotalMount-Nintendo-Switch-Mounts-wall/dp/B071HLJL4Q/?tag=bigicecube-20">Nintendo Switch</a> and <a href="https://www.amazon.com/TotalMount-Apple-Mount-Compatible-including/dp/B017K17PQ8/?tag=bigicecube-20">Apple TV</a>, a dash of velcro and Command strips, and this is what I got.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount.jpg" alt="" width="1600" height="1200" class="aligncenter size-full wp-image-11941" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount-500x375.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount-1024x768.jpg 1024w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></p>
<h2>The Result</h2>
<p>And here’s the view from the couch. This will work… At least till Baby Clara discovers the other side of the TV.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after.jpg" alt="" width="1600" height="1200" class="aligncenter size-full wp-image-11940" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after-500x375.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after-1024x768.jpg 1024w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/feed/</wfw:commentRss>
<slash:comments>3</slash:comments>
</item>
<item>
<title>Learning CSS Grid with Grid Garden</title>
<link>https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/</link>
<comments>https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 03 Apr 2017 14:37:40 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Learning]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11836</guid>
<description><![CDATA[I’m pleased to announce Grid Garden, a sequel to Flexbox Froggy. This time, you’ll learn about CSS grid, the hot new layout module, and cultivate a carrot or two in the process. Grid is cutting … <a href="https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><a href="http://cssgridgarden.com"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot.png" alt="Grid Garden Screenshot" width="2264" height="1372" class="aligncenter size-full wp-image-11843" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot.png 2264w, https://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot-500x303.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot-768x465.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot-1024x621.png 1024w" sizes="auto, (max-width: 2264px) 100vw, 2264px" /></a></p>
<p>I’m pleased to announce <a href="http://cssgridgarden.com">Grid Garden</a>, a sequel to <a href="http://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/">Flexbox Froggy</a>. This time, you’ll learn about CSS grid, the hot new layout module, and cultivate a carrot or two in the process.</p>
<p>Grid is cutting edge, with <a href="http://caniuse.com/#feat=css-grid">browser support landing just last month</a>. What this means is that you’ll need to update to the latest Firefox, Chrome, or Safari in order to play Grid Garden. So hop to it!</p>
<div class="center">
<a class="standard-btn xlarge-btn orange-btn" href="http://cssgridgarden.com">Grid Garden</a>
</div>
<h2>Grid versus Flexbox</h2>
<p>If you’re anything like me, you’re thinking to yourself, “We just figured out flexbox, now we have another layout technique?!” But just as <code class="language-css">position</code> and <code class="language-css">float</code> will continue to find use, grid and flexbox will coexist and fulfill different purposes based on their strengths.</p>
<p>So what exactly is the difference between grid and flexbox? In a nutshell, flexbox works along one primary dimension, with niceties like wrapping, alignment, and justification thrown in. Grid, on the other hand, works in two dimensions by defining rows and columns. Think table-based positioning, but with a separation of content and presentation.</p>
<p>More concretely, grid is good for laying out macro elements like headers, footers, and sidebars, while flexbox is well-suited to multiples of similar items, like lists of features, testimonials, and navigation links.</p>
<h2>Learn More about Grid</h2>
<p>My objective with Grid Garden is not to cover every last aspect of CSS grid, but to help players develop an intuition and recognize its potential. Things get left out, like the <code class="language-css">grid-gap</code> property, <code class="language-css">grid-auto-columns</code>, and custom naming of grid lines and areas.</p>
<p>Fortunately, there are some excellent resources to fill in the gaps, including <a href="http://gridbyexample.com/">Grid by Example</a>, Jen Simmons’s <a href="http://labs.jensimmons.com/">experimentation</a>, and <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS-Trick’s guide</a>. And of course <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">MDN’s comprehensive docs</a>.</p>
<p>CSS grid is powerful and elegant (more so than flexbox), and should quickly become an essential tool in your web development toolkit. But don’t just take my word for it — play <a href="http://cssgridgarden.com">Grid Garden</a> and see for yourself.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/feed/</wfw:commentRss>
<slash:comments>25</slash:comments>
</item>
<item>
<title>Where I End and You Begin: Finding the Most Depressing Radiohead Songs using Crowd Data from SongMeanings</title>
<link>https://thomaspark.co/2017/02/where-i-end-and-you-begin-finding-the-most-depressing-radiohead-songs-using-crowd-data-from-songmeanings/</link>
<comments>https://thomaspark.co/2017/02/where-i-end-and-you-begin-finding-the-most-depressing-radiohead-songs-using-crowd-data-from-songmeanings/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 28 Feb 2017 13:51:58 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Language]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11697</guid>
<description><![CDATA[Last week, a fun article titled fitteR happieR crowned the most depressing Radiohead song as True Love Waits. This was determined by a “gloom index” calculated with Spotify’s valence metric — which measures the musical … <a href="https://thomaspark.co/2017/02/where-i-end-and-you-begin-finding-the-most-depressing-radiohead-songs-using-crowd-data-from-songmeanings/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Last week, a fun article titled <a href="http://rcharlie.com/2017-02-16-fitteR-happieR/">fitteR happieR</a> crowned the most depressing Radiohead song as <em>True Love Waits</em>. This was determined by a “gloom index” calculated with Spotify’s valence metric — which measures the musical positiveness of a track — and sentiment analysis of lyrics.</p>
<p>The results were pretty spot on in this Radiohead fan’s opinion, particularly how the tracks of each album stacked up to one another <a href="http://rcharlie.com/htmlwidgets/fitterhappier/album_chart.html">in this visualization</a>. But the approach failed in a few cases, most notably the eponymous <em>Fitter Happier</em>. According to the gloom index, it’s one of the happiest songs, but trust me when I say that quite the opposite is true.</p>
<p>Why this approach falls short with a song like <em>Fitter Happier</em> is two-fold. First, this particular track overlays a collage of audio samples with a spoken-word synthesizer, breaking away from conventional song structures that, as far as I can guess, Spotify’s machine learning techniques train with to calculate valence. Second, this sentiment analysis takes the lyrics at face value, assuming “happier” means “happier”, blind to the nuances of irony.</p>
<p>Here I’d like to share an alternate approach that tries to deal with these outliers. One that might fare better at contextualizing experimental music and understanding sarcasm. To do this, I’m bringing the wisdom of the crowds into the loop, ranking the most depressing Radiohead songs by applying sentiment analysis to data from the SongMeanings community.</p>
<h2>Scraping SongMeanings</h2>
<p>As the name suggests, <a href="http://songmeanings.com/artist/view/songs/200/">SongMeanings</a> is one of the oldest, most popular online communities for people to share their impressions or interpretations of songs. Unfortunately, it doesn’t offer a public API as Spotify and Genius do, so I had to scrape the comments for each Radiohead song.</p>
<p><a href="http://www.nightmarejs.org/">Nightmare</a>, which you can see in action below, turned out to be a fantastic tool for this job, especially as someone comfortable with JavaScript.</p>
<p><video class="share-video" id="share-video" poster="https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.jpg" autoplay="" muted="" loop="" style="width: 100%;"><source id="webmSource" src="https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.webm" type="video/webm"><source id="mp4Source" src="https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.mp4" type="video/mp4"><img decoding="async" title="Sorry, your browser doesn't support HTML5 video." src="https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.jpg"></video></p>
<p>And here is the code for scraping the comments.</p>
<p><pre>
<code lang="javascript" class="language-javascript">
var Nightmare = require('nightmare');
var vo = require('vo');
var fs = require('fs');
function* run() {
var nightmare = Nightmare({show: true});
var url = 'http://songmeanings.com/artist/view/songs/200/'; // Artist page
// Grab list of song links from artist page
var songs = yield nightmare
.goto(url)
.evaluate(function() {
var songs = {};
var songsList = document.querySelectorAll('#songslist tr');
songsList.forEach(function(tr) {
var id = tr.id.slice(6);
var title = tr.querySelector('td:first-child a').title.slice(0, -7);
var href = tr.querySelector('td:first-child a').href;
var commentCount = tr.querySelector('.comments a').innerText;
songs[title] = {'id': id, 'title': title, 'href': href, 'commentCount': commentCount};
});
return songs;
});
// Visit each song page and save comments
for (var key in songs) {
var song = songs[key];
var page_max = Math.ceil(song.commentCount / 10);
var comments = [];
yield nightmare
.goto(song.href)
.wait('body');
for (i = 1; i <= page_max; i++) {
yield nightmare
.evaluate(function() {
var page_comments = [...document.querySelectorAll('#comments-list .com-normal')].map(function(elem) {
var text = elem.querySelector('.text').innerHTML.split('</strong>')[1].split('\t\t\t\t\n\t\t\t\t<div class=')[0].split('<p>')[0].replace(/<br>\n|"/g, ' ');
var rating = elem.querySelector('.numb').innerText;
return {'text': text, 'rating': rating};
});
return page_comments;
})
.then(function (result) {
comments.push(...result);
console.log('Success: ', result);
})
.catch(function (error) {
console.error('Error: ', error);
});
yield nightmare
.exists('a#page-' + (i+1))
.then(function(nextExists) {
if (nextExists) {
return nightmare
.click('#pagination a:last-child')
.wait(500);
}
});
}
song.comments = comments;
}
yield nightmare.end();
return songs;
}
vo(run)(function(err, result) {
if (err) throw err;
fs.writeFileSync('whereiend.json', JSON.stringify(result));
});
</code>
</pre>
</p>
<p>The text and score of each comment were collected, the latter of which is based on the upvotes and downvotes assigned to a comment by other members of the community.</p>
<p>It turned out that the number of comments for a given song was quite uneven, with some songs having very few comments or none at all. A recent decline in activity on SongMeanings probably contributed to this, bad news for last year’s superb “A Moon Shaped Pool”. For the analysis, I filtered out songs with less than 40 comments.</p>
<h2>Sentiment Analysis</h2>
<p>The sentiment analysis followed the previous one, calculating the percentage of words in each Radiohead song’s comments that expressed sadness using the word list provided by <a href="http://saifmohammad.com/WebPages/NRC-Emotion-Lexicon.htm">NRC EmoLex</a>. The node package <a href="https://www.npmjs.com/package/text-miner">text-miner</a> was used to clean up, stem, and remove stop words first.</p>
<p>A second score was calculated by weighting comments based on their scores. Comments with negative scores not factored in here, while comments with a score of zero were given a weight of 1 (owing to the author’s implicit self-vote), those with a score of one given a weight of 2, etc. This broadens the crowd from just commenters to lurkers who have cast votes, and gets at the idea of a community reaching consensus about what each song means.</p>
<p>Here is the code that was used for the analysis.</p>
<p><pre>
<code lang="javascript" class="lang-javascript">
var tm = require('text-miner');
var fs = require('fs');
var songs = JSON.parse(fs.readFileSync('whereiend.json'));
var sadWords = loadSadWords('NRC-Emotion-Lexicon-Wordlevel-v0.92.txt');
function loadSadWords(file) {
var sadWords = [];
var lines = fs.readFileSync(file, 'ascii').split('\r\n');
lines.forEach(function(line) {
var [term, category, flag] = line.split('\t');
if ((category == 'sadness') && (flag == 1)) {
sadWords.push(term);
}
});
return sadWords;
}
// Calculate sad score for a song's comments
function analyzeComments(song) {
var sadWordTotal = 0;
var wordTotal = 0;
var sadWordWeighted = 0;
var wordWeighted = 0;
song.comments.forEach(function(comment) {
var rating = comment.rating[0] == '+' ? parseInt(comment.rating.slice(1)) : parseInt(comment.rating);
var score = scoreComment(comment);
sadWordTotal = sadWordTotal + score.sadWordCount;
wordTotal = wordTotal + score.wordCount;
if (rating >= 0) {
sadWordWeighted = sadWordWeighted + ((rating+1) * score.sadWordCount);
wordWeighted = wordWeighted + ((rating+1) * score.wordCount);
}
});
var percentage = 100*sadWordTotal/wordTotal;
var weighted = 100*sadWordWeighted/wordWeighted;
return {'percentage': percentage, 'weighted': weighted, 'wordTotal': wordTotal};
}
// Count number of words and sad words in comment
function scoreComment(comment) {
var text = comment.text.replace(/\(|\)|:|\'/g, '');
var corpus = new tm.Corpus([]);
corpus.addDoc(text);
corpus
.clean()
.removeNewlines()
.removeInterpunctuation()
.removeInvalidCharacters()
.removeWords(tm.STOPWORDS.EN)
.toLower()
.stem('Lancaster');
var terms = new tm.Terms(corpus);
var vocabulary = terms.vocabulary;
var counts = terms.dtm[0];
var wordCount = counts.reduce((a, b) => a + b, 0);
var sadWordCount = 0;
vocabulary.forEach(function(word) {
if (sadWords.indexOf(word) > -1) {
sadWordCount = sadWordCount + 1;
}
});
return {'sadWordCount': sadWordCount, 'wordCount': wordCount};
}
function run() {
var output = 'song\tpercentage\tweighted\twordTotal\tcommentCount\n';
for (var key in songs) {
var score = analyzeComments(songs[key]);
var commentCount = songs[key].commentCount;
output = output + key + '\t' + score.percentage + '\t' + score.weighted + '\t' + score.wordTotal + '\t' + commentCount + '\n';
}
fs.writeFileSync('output.txt', output);
}
run();
</code>
</pre>
</p>
<h2>The Saddest Radiohead Songs According to SongMeanings</h2>
<p>So how did the songs stack up? Using this approach, the most depressing Radiohead song of all time is <em>Black Star</em>, an early song about interpersonal troubles rather than the more grandiose themes of later songs. The winner in the previous analysis, <em>True Love Waits</em>, also ranks highly here at #4.</p>
<p>Also deserving of spots on the list are <em>No Surprises</em>, <em>Motion Picture Soundtrack</em>, and <em>Big Ideas (Don’t Get Any)</em>, though <em>There There</em> and <em>Weird Fishes/Arpeggi</em> are kind of a surprise.</p>
<table>
<tr>
<th>Rank</th>
<th>Song</th>
<th>Percentage</th>
</tr>
<tr>
<td>1</td>
<td>Black Star</td>
<td>7.63</td>
</tr>
<tr>
<td>2</td>
<td>No Surprises</td>
<td>6.30</td>
</tr>
<tr>
<td>3</td>
<td>High and Dry</td>
<td>6.04</td>
</tr>
<tr>
<td>4</td>
<td>True Love Waits</td>
<td>6.02</td>
</tr>
<tr>
<td>5</td>
<td>Fog</td>
<td>6.02</td>
</tr>
<tr>
<td>6</td>
<td>Motion Picture Soundtrack</td>
<td>5.97</td>
</tr>
<tr>
<td>7</td>
<td>Street Spirit</td>
<td>5.68</td>
</tr>
<tr>
<td>8</td>
<td>There There</td>
<td>5.57</td>
</tr>
<tr>
<td>9</td>
<td>Weird Fishes/Arpeggi</td>
<td>5.47</td>
</tr>
<tr>
<td>10</td>
<td>Big Ideas (Don’t Get Any)</td>
<td>5.43</td>
</tr>
</table>
<p>At the bottom of the list are placid songs like <em>Sail to the Moon</em> and <em>The Tourist</em>, plus instrumental interludes like <em>Pulk/Pull Revolving Doors</em> and <em>Treefingers</em>. Not that people didn’t have plenty of comments to make about them too.</p>
<table>
<tr>
<th>Rank</th>
<th>Song</th>
<th>Percentage</th>
</tr>
<tr>
<td>75</td>
<td>Life in a Glasshouse</td>
<td>3.00</td>
</tr>
<tr>
<td>76</td>
<td>Anyone Can Play Guitar</td>
<td>2.95</td>
</tr>
<tr>
<td>77</td>
<td>Sail to the Moon</td>
<td>2.90</td>
</tr>
<tr>
<td>78</td>
<td>Reckoner</td>
<td>2.87</td>
</tr>
<tr>
<td>79</td>
<td>The Tourist</td>
<td>2.86</td>
</tr>
<tr>
<td>80</td>
<td>Pulk/Pull Revolving Doors</td>
<td>2.73</td>
</tr>
<tr>
<td>81</td>
<td>Treefingers</td>
<td>2.72</td>
</tr>
<tr>
<td>82</td>
<td>Go to Sleep</td>
<td>2.71</td>
</tr>
<tr>
<td>83</td>
<td>(Nice Dream)</td>
<td>2.65</td>
</tr>
<tr>
<td>84</td>
<td>Electioneering</td>
<td>2.42</td>
</tr>
</table>
<p>What happens to the rankings when you factor in comment scores? The list generally looks the same, with <em>Black Star</em> still topping the list. But there are a few movers and shakers: <em>Bullet Proof…I Wish I Was</em> and <em>Where I End and You Begin</em> shoot up 10 and 14 spots respectively to land at #2 and #6.</p>
<table>
<tr>
<th>Rank</th>
<th>Song</th>
<th>Weighted</th>
</tr>
<tr>
<td>1</td>
<td>Black Star</td>
<td>6.72</td>
</tr>
<tr>
<td>2</td>
<td>Bullet Proof…I Wish I Was</td>
<td>6.41</td>
</tr>
<tr>
<td>3</td>
<td>There There</td>
<td>6.25</td>
</tr>
<tr>
<td>4</td>
<td>High and Dry</td>
<td>6.24</td>
</tr>
<tr>
<td>5</td>
<td>Backdrifts</td>
<td>6.08</td>
</tr>
<tr>
<td>6</td>
<td>Where I End and You Begin</td>
<td>6.01</td>
</tr>
<tr>
<td>7</td>
<td>No Surprises</td>
<td>6.01</td>
</tr>
<tr>
<td>8</td>
<td>True Love Waits</td>
<td>5.78</td>
</tr>
<tr>
<td>9</td>
<td>Motion Picture Soundtrack</td>
<td>5.78</td>
</tr>
<tr>
<td>10</td>
<td>Fog</td>
<td>5.77</td>
</tr>
</table>
<p>The bottom also looks similar, though some more defiant or triumphant songs like <em>Karma Police</em> and <em>Airbag</em> appear, dropping down 33 and 18 spots respectively.</p>
<table>
<tr>
<th>Rank</th>
<th>Song</th>
<th>Weighted</th>
</tr>
<tr>
<td>75</td>
<td>Thinking About You</td>
<td>2.94</td>
</tr>
<tr>
<td>76</td>
<td>Go to Sleep</td>
<td>2.91</td>
</tr>
<tr>
<td>77</td>
<td>Airbag</td>
<td>2.91</td>
</tr>
<tr>
<td>78</td>
<td>Idioteque</td>
<td>2.89</td>
</tr>
<tr>
<td>79</td>
<td>Karma Police</td>
<td>2.86</td>
</tr>
<tr>
<td>80</td>
<td>Treefingers</td>
<td>2.73</td>
</tr>
<tr>
<td>81</td>
<td>Reckoner</td>
<td>2.67</td>
</tr>
<tr>
<td>82</td>
<td>(Nice Dream)</td>
<td>2.22</td>
</tr>
<tr>
<td>83</td>
<td>Pulk/Pull Revolving Doors</td>
<td>2.19</td>
</tr>
<tr>
<td>84</td>
<td>Electioneering</td>
<td>2.06</td>
</tr>
</table>
<p>When looking at the most frequent sad words found in the comments, many are taken directly from the lyrics. For instance, “black” and “falling” from <em>Black Star</em>, “death” and “unhappy” from <em>No Surprises</em>, “haunted” and “killing” from <em>True Love Waits</em>. So is this nothing more than a proxy for a lyrical analysis? Not entirely.</p>
<p>If you recall, by gloom index <em>Fitter Happier</em> was one of the least depressing Radiohead songs. But here, by percentage <em>Fitter Happier</em> lands in the middle of the pack at #55 of 84, and by the weighted score turns out to be one of the most depressing Radiohead songs of all time at #15.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/02/where-i-end-and-you-begin-finding-the-most-depressing-radiohead-songs-using-crowd-data-from-songmeanings/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
<enclosure url="https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.webm" length="1020419" type="video/webm" />
<enclosure url="https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.mp4" length="2139633" type="video/mp4" />
</item>
<item>
<title>QuickLine: A Mac Utility for Saving and Launching Terminal Commands</title>
<link>https://thomaspark.co/2017/02/quickline-a-mac-utility-for-saving-and-launching-terminal-commands/</link>
<comments>https://thomaspark.co/2017/02/quickline-a-mac-utility-for-saving-and-launching-terminal-commands/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 21 Feb 2017 13:08:06 +0000</pubDate>
<category><![CDATA[Demo]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11608</guid>
<description><![CDATA[From deep in the vaults, here’s an app called QuickLine that I made and then promptly forgot about in 2014. It’s a Mac utility for quickly saving and launching terminal commands. QuickLine is made with … <a href="https://thomaspark.co/2017/02/quickline-a-mac-utility-for-saving-and-launching-terminal-commands/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo-150x150.png" alt="QuickLine Logo" width="150" height="150" class="aligncenter size-thumbnail wp-image-11628" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo-150x150.png 150w, https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo-500x500.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo-768x768.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo.png 1000w" sizes="auto, (max-width: 150px) 100vw, 150px" /></p>
<p>From deep in the vaults, here’s an app called QuickLine that I made and then promptly forgot about in 2014. It’s a Mac utility for quickly saving and launching terminal commands. QuickLine is made with <a href="https://nwjs.io/">NW.js</a> (called node-webkit back then), an incredible tool for writing cross platform desktop apps using JavaScript. I’m making the project available here for posterity.</p>
<p><a href="https://thomaspark.co/wp/wp-content/uploads/2017/02/commands.png"><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2017/02/commands-500x381.png" alt="QuickLine Commands" width="500" height="381" class="aligncenter size-medium wp-image-11624" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/02/commands-500x381.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/02/commands-768x584.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/02/commands-1024x779.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2017/02/commands.png 1766w" sizes="auto, (max-width: 500px) 100vw, 500px" /></a></p>
<p>Using QuickLine, you can save and label your most commonly used and easily forgotten terminal commands, and execute them with a single click. For instance, if you want to disable shadows in screen captures, you no longer need to commit to memory or — more likely — google every time for this command:</p>
<p><pre><code class="lang-bash">defaults write com.apple.screencapture disable-shadow -bool TRUE; killall SystemUIServer</code></pre>
</p>
<p>You can also view the status and output of your commands using the built-in console.</p>
<p><a href="https://thomaspark.co/wp/wp-content/uploads/2017/02/console.png"><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2017/02/console-500x381.png" alt="QuickLine Console" width="500" height="381" class="aligncenter size-medium wp-image-11613" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/02/console-500x381.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/02/console-768x584.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/02/console-1024x779.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2017/02/console.png 1766w" sizes="auto, (max-width: 500px) 100vw, 500px" /></a></p>
<p>Finally, you can discover and import commands from the included library, and modify them to suit your needs. I’ve collected a bunch of commands to access hidden features, configure your system, and speed up repetitive tasks. For the mother of all lists, check out <a href="https://github.com/herrbischoff/awesome-osx-command-line">Awesome OS X Command Line</a>.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2017/02/library.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/02/library-500x381.png" alt="QuickLine Library" width="500" height="381" class="aligncenter size-medium wp-image-11614" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/02/library-500x381.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/02/library-768x584.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/02/library-1024x779.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2017/02/library.png 1766w" sizes="auto, (max-width: 500px) 100vw, 500px" /></a></p>
<p>Without further ado, download and play around with QuickLine here:</p>
<div class="center"><a class="standard-btn black-btn xlarge-btn" href="https://thomaspark.co/projects/quickline/QuickLine-1.0.0.zip"><span>Download QuickLine</span></a></div>
<h3>The Motivation Behind It</h3>
<p>Part of the motivation for this app was the simple utility of being able to “bookmark” commonly used, but verbose, terminal commands.</p>
<p>At the same time, I wanted to put within reach the power of the command line to people who aren’t necessarily power users. At least give them a toehold so they aren’t put off and might eventually discover the joys of grepping and vimming and piping. As with my other projects like <a href="https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/">Snowball</a> and <a href="https://thomaspark.co/2012/02/introducing-bootswatch/">Bootswatch</a>, the goal was <a href="https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/">to find the sweet spot between beginner and expert</a>. QuickLine bridges apps like <a href="https://www.bresink.com/osx/TinkerTool.html">TinkerTool</a> that are easy to use but limited by what their developers design for, and Terminal, a magical cauldron that requires mysterious incantations. QuickLine achieves this by making terminal commands discoverable, transparent, and tweakable.</p>
<h3>Why It Was Never Released Until Now</h3>
<p>At the time I was developing QuickLine, I felt enthusiastic that it could resonate with Mac users. But that was tempered on the one hand by OS’x GateKeeper feature, which disables unsigned apps by default, and on the other hand the Mac App Store’s sandboxing requirement, which would render the app useless. I felt these were pretty significant hurdles to the very users I wanted to reach.</p>
<p>And then I got busy with other stuff.</p>
<p>I’m releasing QuickLine now to have a record of what was a fun personal project, and to make it freely available to the few willing to seek it out.</p>
<h3>Caveats</h3>
<p>Since QuickLine isn’t signed, you’ll need to <a href="https://support.apple.com/en-us/HT202491">exempt it from Gatekeeper</a>.</p>
<p>Only trust copies downloaded from this page. Any other source is suspect.</p>
<p>I’m making it available on an as-is basis. Consider it abandonware, with no support or updates planned.</p>
<p>Finally, all the usual caveats of the command line apply. While the commands included in QuickLine have been vetted, copy and paste random commands from the internet at your own risk. Malicious commands can do serious damage to your system, so user discretion is advised.</p>
<h3>Acknowledgements</h3>
<p>My thanks to Amy, Anthony, James, and Bernie for helping out with testing way back when.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/02/quickline-a-mac-utility-for-saving-and-launching-terminal-commands/feed/</wfw:commentRss>
<slash:comments>5</slash:comments>
</item>
<item>
<title>Closed as Not Constructive: The Top-Voted Discussions on Stack Overflow</title>
<link>https://thomaspark.co/2017/02/closed-as-not-constructive-the-top-voted-discussions-on-stack-overflow/</link>
<comments>https://thomaspark.co/2017/02/closed-as-not-constructive-the-top-voted-discussions-on-stack-overflow/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 06 Feb 2017 14:07:57 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Learning]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11540</guid>
<description><![CDATA[It goes without saying that Stack Overflow is an invaluable resource for any coder seeking help. This is in large part because they enforce stringent guidelines such as sticking to factual questions and answers. As … <a href="https://thomaspark.co/2017/02/closed-as-not-constructive-the-top-voted-discussions-on-stack-overflow/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>It goes without saying that <a href="http://stackoverflow.com/">Stack Overflow</a> is an invaluable resource for any coder seeking help. This is in large part because they enforce stringent guidelines such as sticking to factual questions and answers. As a result, many posts that don’t meet these guidelines get locked down.</p>
<p>Many are duplicates or desperate students doing homework in the eleventh hour, but every once in awhile a fascinating and insightful discussion will emerge from the community. These too will get closed by moderators eventually of course, with reasons like being off-topic, too broad, opinion-based, or not constructive, and with notices like:</p>
<blockquote><p>As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion…</p></blockquote>
<p>Thankfully they remain online for posterity because they also make for some of the best reading fodder you can find on Stack Overflow. Judge for yourself: diving into the archives, I’ve collected an anthology of the top-voted “extended discussions” year by year for your reading pleasure. Enjoy!</p>
<p>(I’ll note that earlier years of Stack Overflow seem to have more of these rich discussions. I guess the moderation policies have been effective. <a href="https://news.ycombinator.com/news">Hacker News</a> and <a href="https://www.reddit.com/r/programming/">Proggit</a> are the places to turn for these sort of discussions now.)</p>
<h3>2016</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/38700923/how-can-i-make-sure-that-my-javascript-files-delivered-over-a-cdn-are-not-altere">How can I make sure that my JavaScript files delivered over a CDN are not altered?</a></li>
<li><a href="http://stackoverflow.com/questions/38042624/can-two-groups-of-n-people-find-each-other-around-a-circle">Can two groups of N people find each other around a circle?</a></li>
<li><a href="http://stackoverflow.com/questions/35917734/how-do-i-traverse-an-array-diagonally-in-javascript">How do I traverse an array diagonally in javascript</a></li>
<li><a href="http://stackoverflow.com/questions/39455123/is-force-unwrapping-a-variable-bad">Is force unwrapping a variable bad?</a></li>
<li><a href="http://stackoverflow.com/questions/40036165/equal-to-versus-not-equal-to-operators-in-an-if-else-statement">“equal to” versus “not equal to” operators in an if-else statement</a></li>
</ul>
<h3>2015</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/29363321/picasso-v-s-imageloader-v-s-fresco-vs-glide">Picasso v/s Imageloader v/s Fresco vs Glide</a></li>
<li><a href="http://stackoverflow.com/questions/28082581/what-is-the-difference-between-apache-spark-and-apache-flink">What is the difference between Apache Spark and Apache Flink?</a></li>
<li><a href="http://stackoverflow.com/questions/31634476/which-css-framework-to-use-with-angular2">Which CSS framework to use with Angular2?</a></li>
<li><a href="http://stackoverflow.com/questions/34114593/angular-vs-angular-2">Angular vs Angular 2</a></li>
<li><a href="http://stackoverflow.com/questions/29479814/spring-mvc-or-spring-boot">Spring MVC or Spring Boot</a></li>
</ul>
<h3>2014</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/22126078/what-is-the-difference-between-sublime-text-and-githubs-atom">What is the difference between Sublime text and Github’s Atom</a></li>
<li><a href="http://stackoverflow.com/questions/21375073/best-way-to-represent-a-grid-or-table-in-angularjs-with-bootstrap-3">Best way to represent a Grid or Table in AngularJS with Bootstrap 3?</a></li>
<li><a href="http://stackoverflow.com/questions/24993282/how-does-a-language-expand-itself">How does a language expand itself?</a></li>
<li><a href="http://stackoverflow.com/questions/25501098/difference-between-microservices-architecture-and-soa">Difference between Microservices Architecture and SOA</a></li>
<li><a href="http://stackoverflow.com/questions/22648829/fastest-exit-strategy-for-a-panic-button-in-crisis-abuse-websites">Fastest exit strategy for a Panic Button in Crisis/Abuse Websites?</a></li>
</ul>
<h3>2013</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background">“Thinking in AngularJS” if I have a jQuery background?</a></li>
<li><a href="http://stackoverflow.com/questions/14301389/why-does-one-use-dependency-injection">Why does one use dependency injection?</a></li>
<li><a href="http://stackoverflow.com/questions/14333857/how-to-master-angularjs">How to master AngularJS?</a></li>
<li><a href="http://stackoverflow.com/questions/16573668/best-practices-when-running-node-js-with-port-80-ubuntu-linode">Best practices when running Node.js with port 80 (Ubuntu / Linode)</a></li>
<li><a href="http://stackoverflow.com/questions/18542353/angularjs-folder-structure">AngularJS Folder Structure</a></li>
</ul>
<h3>2012</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/12694530/what-is-typescript-and-why-would-i-use-it-in-place-of-javascript">What is TypeScript and why would I use it in place of JavaScript?</a></li>
<li><a href="http://stackoverflow.com/questions/12529083/does-it-make-sense-to-use-require-js-with-angular-js">Does it make sense to use Require.js with Angular.js?</a></li>
<li><a href="http://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span">Should I use <i> tag for icons instead of <span>?</a></li>
<li><a href="http://stackoverflow.com/questions/9554636/the-use-of-multiple-jframes-good-or-bad-practice">The Use of Multiple JFrames: Good or Bad Practice?</a></li>
<li><a href="http://stackoverflow.com/questions/10941249/separate-rest-json-api-server-and-client">Separate REST JSON API server and client?</a></li>
</ul>
<h3>2011</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/7888880/what-is-redis-and-what-do-i-use-it-for">What is Redis and what do I use it for?</a></li>
<li><a href="http://stackoverflow.com/questions/5928061/using-a-piano-keyboard-as-a-computer-keyboard">Using a piano keyboard as a computer keyboard</a></li>
<li><a href="http://stackoverflow.com/questions/4904096/whats-the-difference-between-unit-functional-acceptance-and-integration-test">What’s the difference between unit, functional, acceptance, and integration tests?</a></li>
<li><a href="http://stackoverflow.com/questions/4797534/how-do-i-manually-fire-http-post-requests-with-firefox-or-chrome">How do I manually fire HTTP POST requests with Firefox or Chrome?</a></li>
<li><a href="http://stackoverflow.com/questions/5446316/code-first-vs-model-database-first">Code-first vs Model/Database-first</a></li>
</ul>
<h3>2010</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/3220404/why-use-pip-over-easy-install">Why use pip over easy_install?</a></li>
<li><a href="http://stackoverflow.com/questions/3077866/large-scale-design-in-haskell">Large-scale design in Haskell?</a></li>
<li><a href="http://stackoverflow.com/questions/4493001/good-use-case-for-akka">Good use case for Akka</a></li>
<li><a href="http://stackoverflow.com/questions/2794016/what-should-every-programmer-know-about-security">What should every programmer know about security?</a></li>
<li><a href="http://stackoverflow.com/questions/2039904/what-statistics-should-a-programmer-or-computer-scientist-know">What statistics should a programmer (or computer scientist) know?</a></li>
</ul>
<h3>2009</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format">JavaScript equivalent to printf/string.format</a></li>
<li><a href="http://stackoverflow.com/questions/507343/using-git-with-visual-studio">Using Git with Visual Studio</a></li>
<li><a href="http://stackoverflow.com/questions/448673/how-do-emulators-work-and-how-are-they-written">How do emulators work and how are they written?</a></li>
<li><a href="http://stackoverflow.com/questions/731832/designing-function-ffn-n">Designing function f(f(n)) == -n</a></li>
<li><a href="http://stackoverflow.com/questions/1722726/is-the-scala-2-8-collections-library-a-case-of-the-longest-suicide-note-in-hist">Is the Scala 2.8 collections library a case of “the longest suicide note in history”?</a></li>
</ul>
<h3>2008</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/549/the-definitive-guide-to-form-based-website-authentication">The definitive guide to form-based website authentication</a></li>
<li><a href="http://stackoverflow.com/questions/9033/hidden-features-of-c">Hidden Features of C#?</a></li>
<li><a href="http://stackoverflow.com/questions/1711/what-is-the-single-most-influential-book-every-programmer-should-read">What is the single most influential book every programmer should read?</a></li>
<li><a href="http://stackoverflow.com/questions/101268/hidden-features-of-python">Hidden features of Python</a></li>
<li><a href="http://stackoverflow.com/questions/137975/what-is-so-bad-about-singletons">What is so bad about singletons?</a></li>
</ul>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/02/closed-as-not-constructive-the-top-voted-discussions-on-stack-overflow/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Mimicking Pokemon Go’s Battery Saver Mode on the Web</title>
<link>https://thomaspark.co/2017/01/mimicking-pokemon-gos-battery-saver-mode-on-the-web/</link>
<comments>https://thomaspark.co/2017/01/mimicking-pokemon-gos-battery-saver-mode-on-the-web/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 30 Jan 2017 19:11:08 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11426</guid>
<description><![CDATA[So here’s a fun but useless trick: mimicking Pokemon Go’s battery saver mode on the web. For the few who missed the craze, Pokemon Go dims your phone’s screen when you turn it upside-down. With … <a href="https://thomaspark.co/2017/01/mimicking-pokemon-gos-battery-saver-mode-on-the-web/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>So here’s a fun but useless trick: mimicking Pokemon Go’s battery saver mode on the web. For the few who missed the craze, Pokemon Go dims your phone’s screen when you turn it upside-down. With the game being something of a battery hog, this can save you precious charge as you walk from one PokeStop to the next, phone in hand. I do appreciate how frictionless and natural this feature is.</p>
<div id="pogo">
<div class="back">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/01/pokemonbatterysaver.png" alt="" width="450" height="800" class="aligncenter size-full wp-image-11429" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/01/pokemonbatterysaver.png 450w, https://thomaspark.co/wp/wp-content/uploads/2017/01/pokemonbatterysaver-281x500.png 281w" sizes="auto, (max-width: 450px) 100vw, 450px" />
</div>
<div class="front">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/01/pokemongo.png" alt="" width="450" height="800" class="aligncenter size-full wp-image-11430" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/01/pokemongo.png 450w, https://thomaspark.co/wp/wp-content/uploads/2017/01/pokemongo-281x500.png 281w" sizes="auto, (max-width: 450px) 100vw, 450px" />
</div>
</div>
<p>So how might we mimic this on the web? Start by creating your overlay, and adding your favicon to the overlay if one is available. </p>
<p><code class="lang-javascript" lang="javascript"><br />
document.addEventListener('DOMContentLoaded', function () {<br />
var favicon = getFavicon();<br />
var node = document.createElement('div');<br />
var child = document.createElement('div');</p>
<p> node.id = 'overlay';</p>
<p> if (favicon) {<br />
child.style.backgroundImage = 'url(' + favicon + ')';<br />
node.appendChild(child);<br />
}</p>
<p> document.body.appendChild(node);<br />
});</p>
<p>var getFavicon = function() {<br />
var nodes = document.getElementsByTagName('link');</p>
<p> for (var i = 0; i < nodes.length; i++) {<br />
var rel = nodes[i].getAttribute('rel');</p>
<p> if (rel == 'apple-touch-icon-precomposed' || rel == 'apple-touch-icon' || rel == 'icon' || rel == 'shortcut icon') {<br />
return nodes[i].getAttribute('href');<br />
}<br />
}<br />
};<br />
</code></p>
<p>Next, listen for the orientationchange event and toggle the overlay on if orientation has a value of portrait-secondary, meaning upside-down.</p>
<p><code class="lang-javascript" lang="javascript"><br />
window.addEventListener("orientationchange", function() {<br />
var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;<br />
var node = document.getElementById('overlay');</p>
<p> if (orientation && orientation.type === 'portrait-secondary') {<br />
node.classList = 'on';<br />
} else {<br />
node.classList = '';<br />
}<br />
});<br />
</code></p>
<p>Lastly, style your overlay.</p>
<p><code class="lang-css" lang="css"><br />
#overlay {<br />
position: absolute;<br />
left: 0;<br />
right: 0;<br />
top: 0;<br />
bottom: 0;<br />
background-color: #000;<br />
opacity: 0;<br />
pointer-events: none;<br />
transition: opacity 0.5s;<br />
}</p>
<p>#overlay > div {<br />
width: 100%;<br />
height: 100%;<br />
background-position: center;<br />
background-repeat: no-repeat;<br />
background-size: 200px 200px;<br />
filter: grayscale(100%);<br />
opacity: 0.15;<br />
}</p>
<p>#overlay.on {<br />
pointer-events: auto;<br />
opacity: 1;<br />
}<br />
</code></p>
<p>And there you have it.</p>
<p>So why is this so useless? First, support for <code class="lang-css">orientation</code> is <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation">spotty</a>. Safari, for example, doesn’t support it. Second, while native apps like Pokemon Go actually decrease the display’s brightness, web apps can only mimic this with a black screen, saving no power at all on iPhone and other LCD displays.</p>
<p>But with the growing adoption of AMOLED displays, <a href="http://www.greenbot.com/article/2834583/how-much-power-does-a-black-interface-really-save-on-amoled-displays.html">which do save battery with black pixels</a>, maybe this will go from totally useless to mostly useless.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/01/mimicking-pokemon-gos-battery-saver-mode-on-the-web/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Relevant XKCD</title>
<link>https://thomaspark.co/2017/01/relevant-xkcd/</link>
<comments>https://thomaspark.co/2017/01/relevant-xkcd/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 23 Jan 2017 18:18:17 +0000</pubDate>
<category><![CDATA[Humor]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11396</guid>
<description><![CDATA[Footnotes An xkcd tribute inspired by what has become a meme. Also inspired by all things recursive like We Become What We Behold and xkcd itself. Made with the official xkcd font. Can you guess … <a href="https://thomaspark.co/2017/01/relevant-xkcd/">Read more</a>]]></description>
<content:encoded><![CDATA[<div class="iframe-wrapper">
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" src="https://thomaspark.co/projects/relevantxkcd/" width="100%" height="500" scrolling="yes" class="iframe-class" frameborder="0"></iframe>
</div>
<div id="footnotes">
<h3>Footnotes</h3>
<ol>
<li>An xkcd tribute inspired by what has become a <a href="https://relevantxkcd.appspot.com/">meme</a>.
<li>Also inspired by all things recursive like <a href="https://ncase.itch.io/wbwwb">We Become What We Behold</a> and <a href="https://xkcd.com/1416/">xkcd</a> itself.
<li>Made with the <a href="https://github.com/ipython/xkcd-font">official xkcd font</a>.
<li>Can you guess which xkcd this was traced from? Winner gets seven Vienna Fingers cookies.
<li>If you click enough times, this is actually a relevant xkcd to relevant xkcds to relevant xkcds ad infinitum.
<li>On second thought, this would only truly be a relevant xkcd to relevant xkcds if it were embedded as an iframe on xkcd.com. As it stands, it’s merely relevant to relevant xkcds.
</ol>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/01/relevant-xkcd/feed/</wfw:commentRss>
<slash:comments>12</slash:comments>
</item>
<item>
<title>Fidgeting in the Digital Realm</title>
<link>https://thomaspark.co/2017/01/fidgeting-in-the-digital-realm/</link>
<comments>https://thomaspark.co/2017/01/fidgeting-in-the-digital-realm/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 16 Jan 2017 13:20:55 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11311</guid>
<description><![CDATA[Fidgeting is a natural impulse that seems to relieve our anxiety and aid us in contemplation. It often involves mindlessly interacting with everyday objects like stones, pen and paper, bubble wrap, and more. Of course … <a href="https://thomaspark.co/2017/01/fidgeting-in-the-digital-realm/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><a href="https://www.kickstarter.com/projects/antsylabs/fidget-cube-a-vinyl-desk-toy"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetcubes.jpg" alt="Fidget Cubes" width="833" height="196" class="aligncenter size-full wp-image-11373" srcset="https://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetcubes.jpg 833w, https://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetcubes-500x118.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetcubes-768x181.jpg 768w" sizes="auto, (max-width: 833px) 100vw, 833px" /></a></p>
<p>Fidgeting is a natural impulse that seems to relieve our anxiety and aid us in contemplation. It often involves mindlessly interacting with everyday objects like stones, pen and paper, bubble wrap, <a href="http://fidgetwidgets.tumblr.com/">and more</a>. Of course there are also products purpose-built for this, from stress balls to the Swiss Army knife of fidget contraptions, <a href="https://www.kickstarter.com/projects/antsylabs/fidget-cube-a-vinyl-desk-toy">Fidget Cube</a>, which raised a whopping $6.5 million on Kickstarter.</p>
<p>With how much we do on our computers, fidgeting is sure to follow. But what does fidgeting look like in the digital realm? And how can we intentionally design for it?</p>
<p>More specifically, what would the analogue of Fidget Cube look like?</p>
<p>There’s been some work in this area. <a href="https://christophernoessel.medium.com/one-free-interaction-14155a85d93a">One Free Interaction</a> is a design pattern that describes quick and repeatable actions that satisfy users as much on an emotional level as a utilitarian level. A few cases of it — though not all — count as fidgeting, like repeatedly selecting and deselecting text as you read. There’s also <a href="http://gil.poly.edu/fidget-widgets/">Fidget Widgets</a>, which bridge the physical and the virtual.</p>
<p><a href="http://thomaspark.co/projects/fidgetgrid/">Fidget Grid</a> is my take. It includes some of my own fidgets, like doodling pixels (Microsoft Paint), pulling to refresh (Twitter), button toggling (iOS), and dock magnifying (Mac OS X). Did I miss any big ones? What are your favorites?</p>
<p><a href="http://thomaspark.co/projects/fidgetgrid/"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetgrid.png" alt="Fidget Grid" width="2770" height="776" class="aligncenter size-full wp-image-11391" /></a></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/01/fidgeting-in-the-digital-realm/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>Wrangling the Tangle of Apple Cables and Dongles</title>
<link>https://thomaspark.co/2017/01/wrangling-the-tangle-of-apple-cables-and-dongles/</link>
<comments>https://thomaspark.co/2017/01/wrangling-the-tangle-of-apple-cables-and-dongles/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 09 Jan 2017 13:35:15 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<category><![CDATA[Hardware]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11222</guid>
<description><![CDATA[Since Steve Job’s return in 1997, Apple has been bold about dropping legacy I/O standards, on a knife edge between marching the state-of-the-art forward and convincing the world to follow suit. It’s been the same … <a href="https://thomaspark.co/2017/01/wrangling-the-tangle-of-apple-cables-and-dongles/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Since Steve Job’s return in 1997, Apple <a href="http://www.theverge.com/2016/6/29/12054410/apple-tech-death-chart-headphone-jack-ports-usb-c">has been bold about dropping legacy I/O standards</a>, on a knife edge between marching the state-of-the-art forward and convincing the world to follow suit. It’s been the same story for the floppy, SCSI, optical, VGA, and most recently, USB and the headphone jack. </p>
<p>There’s always pain when making this kind of transition, manifest as confusion, costs, and cables. Lots of cables.</p>
<p>But it’s a bitter pill swallowed for the sake of progress. Make a clean break and rethink computing without the baggage. Unfortunately, Apple’s most recent announcements show a distinct lack of vision. Not only are the current generation devices making a break with the previous gen, as has often been the case, but their flagship products are incompatible with one another. Dongles aren’t a stop-gap but the new status quo. Want to connect your shiny new iPhone 7 to your shiny new MacBook Pro with touch bar? Need a dongle. The EarPods that come with the iPhone 7 to the MacBook Pro? Can’t be done.</p>
<p>Ignoring the burden on your wallet and the inconvenience of lugging around a bunch of adapters, it’s just complicated keeping track of how things must connect in the Apple ecosystem. So much so that I felt compelled to create the following guide:</p>
<div id="idongle">
<div class="row connection bad">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/iphone-7.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-iphone/iphone-7" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-iPhone-Unlocked-32-GB/dp/B01LYT95XR/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>iPhone 7</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">Apple’s flagship products — the MacBook Pro with Touch Bar and iPhone 7 / 7 Plus — are not compatible out of the box. The iPhone 7 has a cable with the old, familiar USB plug, while the MacBook Pro sports a port that accepts ThunderBolt 3 and USB-C. Purchase a USB-C to USB adapter to use the included cable, as well as any other legacy USB devices. Or you can drop a bit more cash and replace the cable altogether with a USB-C to Lightning cable.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-c-usb-a.jpg"></div>
<div class="caption">
<h3>USB-C to USB Adapter</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MJ1M2AM/A/usb-c-to-usb-adapter" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-USB-C-to-USB-Adapter/dp/B00VU2OID2/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-c-lightning.jpg"></div>
<div class="caption">
<h3>USB-C to Lightning Cable</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MK0X2AM/A/usb-c-to-lightning-cable-1-m" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MK0X2AM-USB-C-Lightning-Cable/dp/B01DGYJBQA/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection bad">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/earpods-lightning.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMTN2AM/A/earpods-with-lightning-connector" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-EarPods-Lightning-Connector-MMTN2AM/dp/B01M0GB8CC/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>EarPods with Lightning Connector</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">The EarPods included with the iPhone 7 sport a Lightning plug, which the MacBook Pro with Touch Bar doesn’t support. There is no official way to connect them, even with a dongle. Though untested, you might try to chain this USB-C to USB adapter with a USB to Lightning cable.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-c-usb-a.jpg"></div>
<div class="caption">
<h3>USB-C to USB Adapter</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MJ1M2AM/A/usb-c-to-usb-adapter" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-USB-C-to-USB-Adapter/dp/B00VU2OID2/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-lightning.jpg"></div>
<div class="caption">
<h3>Female Lightning to Male USB Cable</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="#" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Charging-Adapter-Cocoxin-Extension-Charger/dp/B01FK6MW1I/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection soso">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/airpods.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMEF2AM/A/airpods" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="#?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>AirPods</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">The wireless AirPods work flawlessly with the MacBook Pro with Touch Bar. If you want to recharge the AirPods through the MacBook Pro, that’s a different story. The charging cable for the new AirPods comes with the familiar USB port, which means there’s no place to plug it into the current gen MacBook Pro. You’ll need to buy this USB-C to USB adapter to hook them up.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-c-usb-a.jpg"></div>
<div class="caption">
<h3>USB-C to USB Adapter</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MJ1M2AM/A/usb-c-to-usb-adapter" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-USB-C-to-USB-Adapter/dp/B00VU2OID2/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection good">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/earpods-3.5mm.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MD827LL/A/earpods-with-35-mm-headphone-plug" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-EarPods-Remote-Certified-Refurbished/dp/B012OVRS1Q/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>EarPods with 3.5mm Headphone Plug</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">The MacBook Pro with Touch Bar still sports a standard 3.5mm headphone jack, so you can use your old EarPods and most other headphones without packing additional gear.</p>
</p></div>
</p></div>
<div class="row connection bad">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/magsafe-2.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MD506LL/A/apple-85w-magsafe-2-power-adapter-for-macbook-pro-with-retina-display" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MagSafe-Adapter-MacBook-MD506LL/dp/B008ALAAV0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MagSafe 2 Power Adapter</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">If you’ve got some old MagSafe power cords lying around, you won’t be able to use them with the MacBook Pro with Touch Bar, which charges through its versatile USB-C ports.</p>
</p></div>
</p></div>
<div class="row connection soso">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/thunderbolt-display.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/FC914LL/B/refurbished-thunderbolt-display-27-inch" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MC914LL-27-inch-Thunderbolt-Display/dp/B004YLCKYA/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>Thunderbolt Display</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">If you’ve got a Thunderbolt Display (with the two-headed MagSafe and Thunderbolt cable), you’ll need this adapter to use it with the new MacBook Pro with Touch Bar.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/thunderbolt-3-thunderbolt-2.jpg"></div>
<div class="caption">
<h3>Thunderbolt 3 (USB-C) to Thunderbolt 2 Adapter</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMEL2AM/A/thunderbolt-3-usb-c-to-thunderbolt-2-adapter" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MMEL2AM-Thunderbolt-Usb-C-Adapter/dp/B01MQ26QIY/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection soso">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-mac/macbook-pro" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Late 2016</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/led-cinema-display.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/FC007LL/A/refurbished-non-thunderbolt-apple-led-cinema-display-27-flat-panel" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-MC007LL-27-Inch-Cinema-Display/dp/B0043GCBU4/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>LED Cinema Display</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">If you’ve got an older Apple Cinema LED Display (with the three-headed USB, MagSafe, and Mini DisplayPort cable), you’ll need this adapter to use it with the new MacBook Pro with Touch Bar.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-c-mini-displayport.jpg"></div>
<div class="caption">
<h3>AllSmartLife USB-C to Mini DisplayPort Adapter</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="#" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/AllSmartLife-DisplayPort-Aluminium-resolution-ChromeBook/dp/B017TZTMBG/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection good">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/iphone-7.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-iphone/iphone-7" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-iPhone-Unlocked-32-GB/dp/B01LYT95XR/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>iPhone 7</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/earpods-lightning.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMTN2AM/A/earpods-with-lightning-connector" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-EarPods-Lightning-Connector-MMTN2AM/dp/B01M0GB8CC/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>EarPods with Lightning Connector</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">The iPhone 7 and accompanying EarPods work great together, but in order to listen and charge your iPhone 7 at the same time, you’ll need this officially licensed dongle from Belkin.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/belkin-lightning-audio-charge.jpg"></div>
<div class="caption">
<h3>Belkin Lightning Audio + Charge Rockstar</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/HKKP2ZM/A/belkin-lightning-audio-charge-rockstar" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Belkin-Lightning-Charge-RockStar-iPhone/dp/B01LXFKSNA/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection soso">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/iphone-7.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/buy-iphone/iphone-7" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-iPhone-Unlocked-32-GB/dp/B01LYT95XR/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>iPhone 7</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/earpods-3.5mm.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MD827LL/A/earpods-with-35-mm-headphone-plug" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-EarPods-Remote-Certified-Refurbished/dp/B012OVRS1Q/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>EarPods with 3.5mm Headphone Plug</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">If you want to use an older pair of EarPods, Beats, or any other 3.5mm headphones with your iPhone 7, you can use this Lightning to 3.5mm adapter that comes included with the iPhone 7. If you want to charge while you listen, the iPhone Lightning Dock from Apple will do the trick.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/lightning-3.5mm.jpg"></div>
<div class="caption">
<h3>Lightning to 3.5 mm Headphone Jack Adapter</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMX62AM/A/lightning-to-35-mm-headphone-jack-adapter" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-Lightning-3-5mm-Headphone-Adapter/dp/B01LXJFMGF/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/iphone-lightning-dock.jpg"></div>
<div class="caption">
<h3>iPhone Lightning Dock</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MNN62/iphone-lightning-dock-black" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-iPhone-Lightning-Dock-Space/dp/B015KSARTU/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection good">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-mid-2015.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/G0QP3LL/A/refurbished-133-inch-macbook-pro-27ghz-dual-core-intel-i7-with-retina-display" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-Macbook-MJLQ2LL-15-inch-Processor/dp/B00XZGMBVC/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Mid 2015</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/airpods.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMEF2AM/A/airpods" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="#?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>AirPods</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">The AirPods work wirelessly with the mid-2015 MacBook Pro, and you can even recharge them via USB without a dongle.</p>
</p></div>
</p></div>
<div class="row connection soso">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-mid-2015.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/G0QP3LL/A/refurbished-133-inch-macbook-pro-27ghz-dual-core-intel-i7-with-retina-display" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-Macbook-MJLQ2LL-15-inch-Processor/dp/B00XZGMBVC/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Mid 2015</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/earpods-lightning.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MMTN2AM/A/earpods-with-lightning-connector" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-EarPods-Lightning-Connector-MMTN2AM/dp/B01M0GB8CC/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>EarPods with Lightning Connector</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">Using your new EarPods with the mid-2015 MacBook Pro or older isn’t so straightforward. Apple doesn’t provide a dongle for this situation, but this third-party cable may do the trick.</p>
<div class="dongle">
<div class="photo"><img decoding="async" src="/wp/wp-content/uploads/2017/01/usb-lightning.jpg"></div>
<div class="caption">
<h3>Female Lightning to Male USB Cable</h3>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="#" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Charging-Adapter-Cocoxin-Extension-Charger/dp/B01FK6MW1I/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
</p></div>
</p></div>
</p></div>
<div class="row connection good">
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/macbook-pro-mid-2015.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/G0QP3LL/A/refurbished-133-inch-macbook-pro-27ghz-dual-core-intel-i7-with-retina-display" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-Macbook-MJLQ2LL-15-inch-Processor/dp/B00XZGMBVC/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>MacBook Pro – Mid 2015</h3>
</p></div>
</p></div>
<div class="device col-sm-3">
<div class="photo">
<img decoding="async" src="/wp/wp-content/uploads/2017/01/earpods-3.5mm.jpg"></p>
<div class="buttons">
<a class="btn btn-sm btn-primary" href="http://www.apple.com/shop/product/MD827LL/A/earpods-with-35-mm-headphone-plug" target="_blank">Apple</a><a class="btn btn-sm btn-primary" href="https://www.amazon.com/Apple-EarPods-Remote-Certified-Refurbished/dp/B012OVRS1Q/?tag=bigicecube-20" target="_blank">Amazon</a>
</div>
</p></div>
<div class="caption">
<h3>EarPods with 3.5mm Headphone Plug</h3>
</p></div>
</p></div>
<div class="dongles col-sm-6">
<div class="status"></div>
<p class="comments">It just works.</p>
</p></div>
</p></div>
</p></div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2017/01/wrangling-the-tangle-of-apple-cables-and-dongles/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Rotary: A Retro Web Input for Phone Numbers</title>
<link>https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/</link>
<comments>https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 25 Apr 2016 14:05:46 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11145</guid>
<description><![CDATA[A bad web form sparked a series of increasingly absurd designs for inputting phone numbers, including an incrementer, slider, random number generator, and very large table. Here’s a good rundown of the solutions developers came … <a href="https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><a href="https://twitter.com/stelian/status/720913927639560194">A bad web form</a> sparked a series of increasingly absurd designs for inputting phone numbers, including an incrementer, slider, random number generator, and very large table. <a href="http://kottke.org/16/04/hilariously-bad-phone-number-web-forms">Here’s a good rundown</a> of the solutions developers came up with.</p>
<p>This is my take. It’s a retro, skeuomorphic input based on the rotary telephone. Inefficient, but kinda fun. Try it out below, <i>especially</i> those of you <a href="https://www.youtube.com/watch?v=XkuirEweZvM">too young to have ever handled a rotary</a>.</p>
<p>You can also view the <a href="https://thomaspark.co/projects/rotary/">standalone demo</a> and <a href="https://github.com/thomaspark/rotary/">source on GitHub</a>. </p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" style="width: 100%; height: 500px; border: none;" src="https://thomaspark.co/projects/rotary/" width="100%" height="500" scrolling="yes" class="iframe-class" frameborder="0"></iframe>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/feed/</wfw:commentRss>
<slash:comments>9</slash:comments>
</item>
<item>
<title>Learning CSS Layout with Flexbox Froggy</title>
<link>https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/</link>
<comments>https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 25 Nov 2015 13:26:04 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Games]]></category>
<category><![CDATA[Learning]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11108</guid>
<description><![CDATA[I’ve created a game for learning CSS flexbox called Flexbox Froggy. The goal of the game is to help the frogs get to their lilypads by writing CSS code. See if you can beat all … <a href="https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><a href="http://flexboxfroggy.com"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/flexboxfroggy.png" alt="Flexbox Froggy" width="2506" height="1474" class="aligncenter size-full wp-image-11113" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/flexboxfroggy.png 2506w, https://thomaspark.co/wp/wp-content/uploads/2015/11/flexboxfroggy-500x294.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/11/flexboxfroggy-1024x602.png 1024w" sizes="auto, (max-width: 2506px) 100vw, 2506px" /></a></p>
<p>I’ve created a game for learning CSS flexbox called Flexbox Froggy. The goal of the game is to help the frogs get to their lilypads by writing CSS code. See if you can beat all the levels!</p>
<div class="center">
<a class="standard-btn xlarge-btn green-btn" href="http://flexboxfroggy.com">Flexbox Froggy</a>
</div>
<p>Flexbox Froggy takes inspiration from the classic arcade game <a href="https://en.wikipedia.org/wiki/Frogger">Frogger</a>, and web literacy games like the brilliant <a href="http://flukeout.github.io/">CSS Diner</a> and <a href="https://eraseallkittens.com/">Erase All Kittens</a>, where you learn about CSS selectors and HTML markup respectively.</p>
<p>I chose CSS flexbox in part because its layout properties make for good gameplay mechanics. The game levels are similar to the “positioning zombies” activity that featured <a href="http://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/">in my work with Mozilla Thimble tutorials</a>, but using the powerful new flexbox model instead of absolute positioning.</p>
<p>Flexbox is also a good topic because beginners can learn this improved way of positioning right out of the gate, while many experienced web developers who aren’t familiar with it yet can finally get on with it. It’s something I myself have been meaning to learn for awhile now. There are topnotch tutorials out there for this purpose like those by <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">CSS Tricks</a>, <a href="http://tympanus.net/codrops/css_reference/flexbox/">Codrops</a>, and <a href="https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties">Scotch.io</a>, but few interactive learning experiences.</p>
<p>If you spot any bugs or have ideas for new levels, please open an issue on <a href="http://github.com/thomaspark/flexboxfroggy">GitHub</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/feed/</wfw:commentRss>
<slash:comments>71</slash:comments>
</item>
<item>
<title>Bob Ross’ Color Palette in CSS</title>
<link>https://thomaspark.co/2015/11/bob-ross-color-palette-in-css/</link>
<comments>https://thomaspark.co/2015/11/bob-ross-color-palette-in-css/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 19 Nov 2015 13:05:16 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=11021</guid>
<description><![CDATA[Even if you’ve never watched an episode of The Joy of Painting, there’s a good chance you’re familiar with artist Bob Ross, with his trademark afro and “happy little trees”. But if you’ve seen his … <a href="https://thomaspark.co/2015/11/bob-ross-color-palette-in-css/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/bobross.jpg" alt="Bob Ross" width="1600" height="870" class="aligncenter size-full wp-image-11053" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/bobross.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2015/11/bobross-500x272.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2015/11/bobross-1024x557.jpg 1024w" sizes="auto, (max-width: 1600px) 100vw, 1600px" /></p>
<p>Even if you’ve never watched an episode of <a href="https://www.youtube.com/user/BobRossInc/videos">The Joy of Painting</a>, there’s a good chance you’re familiar with artist Bob Ross, with his trademark afro and “happy little trees”.</p>
<p>But if you’ve seen his show, then you’ll know that another trademark was his choice of paints. Bob Ross always used the same 13 paints, with decidedly un-Crayolan names like Alizarin Crimson and Pthalo Blue, loading his palette <a href="http://grignonsart.com/art-supplies/bob-ross/ross-easels.html">in the same arrangement</a> each time, as you see in the photo above.</p>
<p>By <a href="http://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/">limiting his tools and simplifying his techniques</a>, Bob Ross introduced the joy of painting to countless non-artists, and for that he was beloved.</p>
<div class="swatch dark sap-green">
<p>Sap Green</p>
<p>#0a3410</p>
<p>rgb(10, 52, 16)</p>
<p>hsl(128.6, 67.7%, 12.2%)</p>
</div>
<div class="swatch dark alizarin-crimson">
<p>Alizarin Crimson</p>
<p>#4e1500</p>
<p>rgb(78, 21, 0)</p>
<p>hsl(16.2, 100%, 15.3%)</p>
</div>
<div class="swatch dark van-dyke-brown">
<p>Van Dyke Brown</p>
<p>#221b15</p>
<p>rgb(34, 27, 21)</p>
<p>hsl(27.7, 23.6%, 10.8%)</p>
</div>
<div class="swatch dark dark-sienna">
<p>Dark Sienna</p>
<p>#5f2e1f</p>
<p>rgb(95, 46, 31)</p>
<p>hsl(14.1, 50.8%, 24.7%)</p>
</div>
<div class="swatch dark midnight-black">
<p>Midnight Black</p>
<p>#000000</p>
<p>rgb(0, 0, 0)</p>
<p>hsl(0, 0%, 0%)</p>
</div>
<div class="swatch dark prussian-blue">
<p>Prussian Blue</p>
<p>#021e44</p>
<p>rgb(2, 30, 68)</p>
<p>hsl(214.5, 94.3%, 13.7%)</p>
</div>
<div class="swatch dark phthalo-blue">
<p>Phthalo Blue</p>
<p>#0c0040</p>
<p>rgb(12, 0, 64)</p>
<p>hsl(251.3, 100%, 12.5%)</p>
</div>
<div class="swatch dark phthalo-green">
<p>Phthalo Green</p>
<p>#102e3c</p>
<p>rgb(16, 46, 60)</p>
<p>hsl(199.1, 57.9%, 14.9%)</p>
</div>
<div class="swatch light cadmium-yellow">
<p>Cadmium Yellow</p>
<p>#ffec00</p>
<p>rgb(255, 236, 0)</p>
<p>hsl(55.5, 100%, 50%)</p>
</div>
<div class="swatch light yellow-ochre">
<p>Yellow Ochre</p>
<p>#c79b00</p>
<p>rgb(199, 155, 0)</p>
<p>hsl(46.7, 100%, 39%)</p>
</div>
<div class="swatch light indian-yellow">
<p>Indian Yellow</p>
<p>#ffb800</p>
<p>rgb(255, 184, 0)</p>
<p>hsl(43.3, 100%, 50%)</p>
</div>
<div class="swatch dark bright-red">
<p>Bright Red</p>
<p>#db0000</p>
<p>rgb(219, 0, 0)</p>
<p>hsl(0, 100%, 42.9%)</p>
</div>
<div class="swatch light titanium-white">
<p>Titanium White</p>
<p>#ffffff</p>
<p>rgb(255, 255, 255)</p>
<p>hsl(0, 0%, 100%)</p>
</div>
<p>As a fan of Bob Ross, I wanted the colors he popularized to live on through the web. I’ve collected their hex values above and created a stylesheet so you can use class names like <code class="lang-css">.phthalo-blue</code>, <code class="lang-css">.phthalo-blue-text</code>, and <code class="lang-css">.phthalo-blue-border</code> to get a Phthalo Blue background, text, and border color respectively. You can grab the CSS, and the SASS used to generate it, below.</p>
<div class="center">
<a class="standard-btn xlarge-btn phthalo-blue dark" href="https://gist.github.com/thomaspark/41f381048adcceb6d261#file-bobross-css">CSS</a> <a class="standard-btn xlarge-btn phthalo-blue dark" href="https://gist.github.com/thomaspark/41f381048adcceb6d261#file-bobross-scss">SASS</a>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/11/bob-ross-color-palette-in-css/feed/</wfw:commentRss>
<slash:comments>33</slash:comments>
</item>
<item>
<title>Survey of CMS Usage on Newspaper Websites</title>
<link>https://thomaspark.co/2015/11/survey-of-cms-usage-on-newspaper-websites/</link>
<comments>https://thomaspark.co/2015/11/survey-of-cms-usage-on-newspaper-websites/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 16 Nov 2015 13:07:22 +0000</pubDate>
<category><![CDATA[Data]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=10956</guid>
<description><![CDATA[As of this month, 25 percent of all websites are using WordPress, according to W3Techs survey. This ubiquity was one of the leading factors in choosing WordPress as the platform for Snowball. Of course Snowball’s … <a href="https://thomaspark.co/2015/11/survey-of-cms-usage-on-newspaper-websites/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>As of this month, 25 percent of all websites are using WordPress, <a href="http://ma.tt/2015/11/seventy-five-to-go/">according to W3Techs survey</a>. This ubiquity was one of the leading factors in <a href="http://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/">choosing WordPress as the platform for Snowball</a>. Of course Snowball’s main target are news organizations and journalism students, which raises the question of how closely this general 25 percent figure tracks with newspaper websites.</p>
<p>It turns out, not much at all.</p>
<h2>Collecting the Data</h2>
<p>To survey CMS usage among newspaper websites, I analyzed the websites of the top 100 newspapers in North America <a href="http://www.4imn.com/topNorth-America/">according to 4IMN</a>, which ranges from the New York Times to the Knoxville News-Sentinel. I also took a look at websites for 100 exemplary college newspapers, based on a list from <a href="http://journalismdegree.org/exemplary-college-newspapers/">the Journalism Degrees blog</a> with the substitution of Drexel University’s The Triangle (gotta represent!). The analysis was done in November 2015.</p>
<p>To determine the CMS run by each website, I used several online tools including <a href="http://builtwith.com/">BuiltWith</a>, <a href="http://whatcms.org/">WhatCMS</a>, and <a href="http://guess.scritch.org/">CMS Detector</a>.</p>
<p>When these tools didn’t suffice, I fell back to manual inspection and online research. In a number of cases, this was still not enough.</p>
<h2>The Results</h2>
<p>Among the top newspaper websites, WordPress is the most identified CMS, though at 11% it’s less than half the general rate. The rest of the numbers reveal a balkanized landscape. Drupal is the next most common, followed by 20 other different CMSes. For the remaining 62 websites, the CMS could not be identified. These “others” might be using yet another CMS platform or a custom solution, but we can be reasonably confident that they’re not using WordPress.</p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" width="770" height="371" 0="seamless" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1bVYBrdbDb8OR1ju3MiL74oM5jWwv5Rj3Hbs0pbnP00s/pubchart?oid=38969996&format=interactive" class="iframe-class"></iframe>
<p>I’m somewhat surprised at the low figure for WordPress. Perhaps this is due to news orgs being entrenched with legacy systems, having very particular business needs, or fear of open source. WordPress is best known for its ease of use, but it has also proven its mettle with a number of world-class news websites.</p>
<p>The numbers for college newspapers show a very different picture. WordPress makes up a full 68%! This is followed by Blox, Gryphon, Drupal, etc. WordPress dominates a much more homogeneous scene.</p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" width="770" height="371" 0="seamless" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1bVYBrdbDb8OR1ju3MiL74oM5jWwv5Rj3Hbs0pbnP00s/pubchart?oid=1589217120&format=interactive" class="iframe-class"></iframe>
<p>This supports our argument that building <a href="http://snowball.openhtml.org/">Snowball</a> as a WordPress plugin is the most effective way to reach a large audience of active journalism students.</p>
<p>As a next step, it would be interesting compare small newspapers to these two groups, but I haven’t found a good way of identifying these yet.</p>
<h2>Appendix</h2>
<p>Here’s the raw data used to calculate these numbers. If you can provide any information on the missing data points, please reach out.</p>
<h3>Top Newspapers</h3>
<table style="max-width: 500px;">
<tr>
<th>Newspaper</th>
<th>CMS</th>
</tr>
<tr>
<td>The New York Times</td>
<td>Other</td>
</tr>
<tr>
<td>The Washington Post </td>
<td>WordPress</td>
</tr>
<tr>
<td>USA Today </td>
<td>Gannett CMS</td>
</tr>
<tr>
<td>The Wall Street Journal </td>
<td>Other</td>
</tr>
<tr>
<td>Los Angeles Times </td>
<td>Other</td>
</tr>
<tr>
<td>The Examiner</td>
<td>Drupal</td>
</tr>
<tr>
<td>Daily News</td>
<td>Atex PoloPoly</td>
</tr>
<tr>
<td>Chicago Tribune </td>
<td>Other</td>
</tr>
<tr>
<td>The Globe and Mail</td>
<td>WordPress</td>
</tr>
<tr>
<td>New York Post</td>
<td>WordPress</td>
</tr>
<tr>
<td>Houston Chronicle</td>
<td>Other</td>
</tr>
<tr>
<td>The Hollywood Reporter </td>
<td>Drupal</td>
</tr>
<tr>
<td>The Christian Science Monitor</td>
<td>eZ Systems</td>
</tr>
<tr>
<td>The Toronto Star </td>
<td>Adobe CQ</td>
</tr>
<tr>
<td>The Boston Globe </td>
<td>Other</td>
</tr>
<tr>
<td>The Chicago Sun-Times</td>
<td>Other</td>
</tr>
<tr>
<td>The Washington Times </td>
<td>Other</td>
</tr>
<tr>
<td>The Philadelphia Inquirer</td>
<td>Other</td>
</tr>
<tr>
<td>The Onion</td>
<td>Other</td>
</tr>
<tr>
<td>San Jose Mercury News</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Denver Post</td>
<td>Other</td>
</tr>
<tr>
<td>Star Tribune </td>
<td>Other</td>
</tr>
<tr>
<td>The Dallas Morning News</td>
<td>Other</td>
</tr>
<tr>
<td>The Seattle Times</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Oregonian</td>
<td>Other</td>
</tr>
<tr>
<td>National Post</td>
<td>WordPress</td>
</tr>
<tr>
<td>Newsday</td>
<td>Atex PoloPoly</td>
</tr>
<tr>
<td>The Miami Herald </td>
<td>Other</td>
</tr>
<tr>
<td>The Baltimore Sun</td>
<td>Other</td>
</tr>
<tr>
<td>The Plain Dealer </td>
<td>Other</td>
</tr>
<tr>
<td>The Sacramento Bee </td>
<td>Other</td>
</tr>
<tr>
<td>Pittsburgh Post-Gazette</td>
<td>Other</td>
</tr>
<tr>
<td>The Hill </td>
<td>Drupal</td>
</tr>
<tr>
<td>The Atlanta Journal-Constitution </td>
<td>Other</td>
</tr>
<tr>
<td>Detroit Free Press </td>
<td>Other</td>
</tr>
<tr>
<td>Orlando Sentinel </td>
<td>Covide</td>
</tr>
<tr>
<td>Boston Herald</td>
<td>Drupal</td>
</tr>
<tr>
<td>Milwaukee Journal Sentinel </td>
<td>Other</td>
</tr>
<tr>
<td>The New York Observer</td>
<td>WordPress</td>
</tr>
<tr>
<td>South Florida Sun-Sentinel </td>
<td>Other</td>
</tr>
<tr>
<td>The Kansas City Star </td>
<td>Drupal</td>
</tr>
<tr>
<td>Seattle Post-Intelligencer </td>
<td>Other</td>
</tr>
<tr>
<td>The Vancouver Sun</td>
<td>Other</td>
</tr>
<tr>
<td>St. Louis Post-Dispatch</td>
<td>Other</td>
</tr>
<tr>
<td>The Orange County Register </td>
<td>OpenCMS</td>
</tr>
<tr>
<td>Deseret News </td>
<td>Other</td>
</tr>
<tr>
<td>The News & Observer</td>
<td>Other</td>
</tr>
<tr>
<td>Salt Lake Tribune</td>
<td>Other</td>
</tr>
<tr>
<td>Hartford Courant </td>
<td>Mezzanine</td>
</tr>
<tr>
<td>Express-News </td>
<td>PencilBlue</td>
</tr>
<tr>
<td>Toronto Sun</td>
<td>Angel LMS</td>
</tr>
<tr>
<td>The Montréal Gazette </td>
<td>WordPress</td>
</tr>
<tr>
<td>The Buffalo News </td>
<td>Eduwave</td>
</tr>
<tr>
<td>The San Diego Union-Tribune</td>
<td>Other</td>
</tr>
<tr>
<td>Times Union</td>
<td>Other</td>
</tr>
<tr>
<td>The Indianapolis Star</td>
<td>Other</td>
</tr>
<tr>
<td>Investor’s Business Daily</td>
<td>Other</td>
</tr>
<tr>
<td>The Tennessean </td>
<td>Other</td>
</tr>
<tr>
<td>Ottawa Citizen </td>
<td>WordPress</td>
</tr>
<tr>
<td>The Charlotte Observer </td>
<td>Other</td>
</tr>
<tr>
<td>The Record </td>
<td>Other</td>
</tr>
<tr>
<td>Las Vegas Sun</td>
<td>Other</td>
</tr>
<tr>
<td>The Tampa Tribune</td>
<td>Other</td>
</tr>
<tr>
<td>St. Paul Pioneer Press </td>
<td>Other</td>
</tr>
<tr>
<td>The Des Moines Register</td>
<td>Other</td>
</tr>
<tr>
<td>The Oklahoman</td>
<td>Other</td>
</tr>
<tr>
<td>Calgary Herald </td>
<td>WordPress</td>
</tr>
<tr>
<td>Contra Costa Times </td>
<td>Other</td>
</tr>
<tr>
<td>Austin American-Statesman</td>
<td>Other</td>
</tr>
<tr>
<td>Las Vegas Review-Journal </td>
<td>Other</td>
</tr>
<tr>
<td>The Daily Princetonian </td>
<td>WordPress</td>
</tr>
<tr>
<td>Fort Worth Star-Telegram </td>
<td>Other</td>
</tr>
<tr>
<td>The Morning Call </td>
<td>Other</td>
</tr>
<tr>
<td>The Patriot-News </td>
<td>Other</td>
</tr>
<tr>
<td>The Palm Beach Post</td>
<td>Other</td>
</tr>
<tr>
<td>Daily Herald </td>
<td>Other</td>
</tr>
<tr>
<td>The Republican </td>
<td>sNews</td>
</tr>
<tr>
<td>Anchorage Daily News </td>
<td>OneTool</td>
</tr>
<tr>
<td>The Province </td>
<td>Other</td>
</tr>
<tr>
<td>The Courier-Journal</td>
<td>Stiqr</td>
</tr>
<tr>
<td>Edmonton Journal </td>
<td>WordPress</td>
</tr>
<tr>
<td>The Spokesman-Review </td>
<td>Other</td>
</tr>
<tr>
<td>The Detroit News </td>
<td>Other</td>
</tr>
<tr>
<td>The Florida Times-Union</td>
<td>Other</td>
</tr>
<tr>
<td>Los Angeles Daily News </td>
<td>Other</td>
</tr>
<tr>
<td>Winnipeg Free Press</td>
<td>SchoolWires Centricity</td>
</tr>
<tr>
<td>Metro</td>
<td>IronPoint</td>
</tr>
<tr>
<td>Star Advertiser</td>
<td>Other</td>
</tr>
<tr>
<td>The Press-Enterprise </td>
<td>Drupal</td>
</tr>
<tr>
<td>Daily Press</td>
<td>JoomD</td>
</tr>
<tr>
<td>The State</td>
<td>Other</td>
</tr>
<tr>
<td>Omaha World-Herald </td>
<td>Other</td>
</tr>
<tr>
<td>The News Tribune </td>
<td>Other</td>
</tr>
<tr>
<td>Democrat and Chronicle </td>
<td>Other</td>
</tr>
<tr>
<td>Chicago Reader </td>
<td>CiviCRM</td>
</tr>
<tr>
<td>Miami New Times</td>
<td>Other</td>
</tr>
<tr>
<td>The Blade</td>
<td>Other</td>
</tr>
<tr>
<td>Sarasota Herald-Tribune</td>
<td>Other</td>
</tr>
<tr>
<td>The Wichita Eagle</td>
<td>Other</td>
</tr>
<tr>
<td>News-Sentinel </td>
<td>Liferay</td>
</tr>
</table>
<h3>College Newspapers</h3>
<table>
<tr>
<th>Newspaper</th>
<th>School</th>
<th>CMS</th>
</tr>
<tr>
<td>The Lantern</td>
<td>The Ohio State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Aztec</td>
<td>San Diego State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Gamecock</td>
<td>University of South Carolina</td>
<td>Gryphon</td>
</tr>
<tr>
<td>The Anchor</td>
<td>Rhode Island College</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Oxford Student Online</td>
<td>University of Oxford</td>
<td>WordPress</td>
</tr>
<tr>
<td>Cardinal Points</td>
<td>Plattsburgh State University College</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Guardian</td>
<td>University of California, San Diego</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Titan</td>
<td>California State University, Fullerton</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Heights</td>
<td>Boston College</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Post</td>
<td>Ohio University</td>
<td>Blox</td>
</tr>
<tr>
<td>The Vermilion</td>
<td>University of Louisiana at Lafayette</td>
<td>WordPress</td>
</tr>
<tr>
<td>NYULocal</td>
<td>New York University</td>
<td>WordPress</td>
</tr>
<tr>
<td>Clarion</td>
<td>University of Denver</td>
<td>WordPress</td>
</tr>
<tr>
<td>The State Press</td>
<td>Arizona State University</td>
<td>Gryphon</td>
</tr>
<tr>
<td>The Houstonian</td>
<td>Sam Houston State University </td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Iowan</td>
<td>University of Iowa</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Minaret</td>
<td>University of Tampa</td>
<td>WordPress</td>
</tr>
<tr>
<td>CU Independent</td>
<td>University of Colorado</td>
<td>WordPress</td>
</tr>
<tr>
<td>Minnesota Daily</td>
<td>University of Minnesota</td>
<td>Drupal</td>
</tr>
<tr>
<td>The Hawks’ Herald</td>
<td>Roger Williams University</td>
<td>WordPress</td>
</tr>
<tr>
<td>Old Gold & Black</td>
<td>Wake Forest University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Johns Hopkins News-Letter</td>
<td>John Hopkins University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Famuan</td>
<td>Florida A&M University </td>
<td>Other</td>
</tr>
<tr>
<td>The Campbell Times</td>
<td>Campbell University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Vermont Cynic</td>
<td>The University of Vermont</td>
<td>College Publisher</td>
</tr>
<tr>
<td>Student Life</td>
<td>Washington University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Spectrum</td>
<td>North Dakota State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Sentinel</td>
<td>Kennesaw State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>Daily 49er</td>
<td>California State University, Long Beach</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Telescope</td>
<td>Palomar College</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Herald</td>
<td>Arkansas State University</td>
<td>Blox</td>
</tr>
<tr>
<td>University of Wisconsin-La Crosse Racquet</td>
<td>University of Wisconsin-La Crosse</td>
<td>WordPress</td>
</tr>
<tr>
<td>The State Press</td>
<td>Arizona State University </td>
<td>Gryphon</td>
</tr>
<tr>
<td>The Kenyon Collegian</td>
<td>Kenyon College</td>
<td>WordPress</td>
</tr>
<tr>
<td>Central Florida Future</td>
<td>University of Central Florida</td>
<td>Gannett CMS</td>
</tr>
<tr>
<td>The Daily Reveille</td>
<td>Louisiana State University</td>
<td>Blox</td>
</tr>
<tr>
<td>The GW Hatchet</td>
<td>George Washington University</td>
<td>WordPress</td>
</tr>
<tr>
<td>Los Angeles Loyolan</td>
<td>Loyola Marymount University</td>
<td>Blox</td>
</tr>
<tr>
<td>The Advance-Titan </td>
<td>UW-Oshkosh</td>
<td>Blox</td>
</tr>
<tr>
<td>The Berkeley Beacon</td>
<td>Emerson College</td>
<td>Other</td>
</tr>
<tr>
<td>Flyer News</td>
<td>University of Dayton</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Triangle</td>
<td>Drexel University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Chronicle </td>
<td>Duke University</td>
<td>Gryphon</td>
</tr>
<tr>
<td>The Georgetown Voice</td>
<td>Georgetown University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Emory Wheel </td>
<td>Emory University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Ball State Daily News</td>
<td>Ball State University</td>
<td>Gryphon</td>
</tr>
<tr>
<td>Iowa State Daily</td>
<td>Iowa State</td>
<td>Blox</td>
</tr>
<tr>
<td>Royal Purple News</td>
<td>University of Wisconsin-Whitewater</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Bona Venture</td>
<td>St. Bonaventure</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Chaparral</td>
<td>College of the Desert</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Shorthorn</td>
<td>UT-Arlington</td>
<td>Blox</td>
</tr>
<tr>
<td>The Chicago Maroon</td>
<td>University of Chicago</td>
<td>WordPress</td>
</tr>
<tr>
<td>Central Michigan Life</td>
<td>Central Michigan University</td>
<td>Gryphon</td>
</tr>
<tr>
<td>The Commonwealth Times</td>
<td>Virginia Commonwealth University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Barometer</td>
<td>Oregon State University</td>
<td>Blox</td>
</tr>
<tr>
<td>The Daily Californian</td>
<td>UC Berkeley</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Orange</td>
<td>Syracuse University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Tarheel</td>
<td>University of North Carolina</td>
<td>Gryphon</td>
</tr>
<tr>
<td>The Daily Texan</td>
<td>University of Texas at Austin</td>
<td>Drupal</td>
</tr>
<tr>
<td>Daily Trojan </td>
<td>University of Southern California</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily</td>
<td>University of Washington</td>
<td>Blox</td>
</tr>
<tr>
<td>The Daily Eastern News</td>
<td>Eastern Illinois UniversitySchool:</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Mississippian</td>
<td>University of Mississippi</td>
<td>WordPress</td>
</tr>
<tr>
<td>Campus Times</td>
<td>University of Rochester</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Battalion</td>
<td>Texas A&M </td>
<td>Blox</td>
</tr>
<tr>
<td>The Daily Cougar</td>
<td> University of Houston</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Stanford Daily</td>
<td>Stanford University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Cornellian</td>
<td>Cornell College</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Tech Online Edition</td>
<td>Massachusetts Institute of Technology</td>
<td>Other</td>
</tr>
<tr>
<td>The Pendulum</td>
<td>Elon University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The New Perspective</td>
<td>Carroll University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Rensselaer Polytechnic</td>
<td>Rensselaer Polytechnic Institute </td>
<td>WordPress</td>
</tr>
<tr>
<td>The Louisville Cardinal</td>
<td>University of Louisville</td>
<td>WordPress</td>
</tr>
<tr>
<td>Spartan Daily</td>
<td>San Jose State</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Fine Print</td>
<td>Gainesville Florida</td>
<td>Blox</td>
</tr>
<tr>
<td>The Pitt News</td>
<td>University of Pittsburgh </td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Cardinal</td>
<td>University of Wisconsin-Madison</td>
<td>Blox</td>
</tr>
<tr>
<td>The DePaulia</td>
<td>DePaul University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Exponent </td>
<td>Purdue University</td>
<td>Blox</td>
</tr>
<tr>
<td>The Dartmouth</td>
<td>Dartmouth College</td>
<td>WordPress</td>
</tr>
<tr>
<td>Yale Daily News</td>
<td>Yale University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Brown Daily Herald</td>
<td>Brown University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Daily Pennsylvanian</td>
<td>University of Pennsylvania</td>
<td>Gryphon</td>
</tr>
<tr>
<td>Columbia Spectator</td>
<td>Columbia University</td>
<td>Drupal</td>
</tr>
<tr>
<td>The Harvard Crimson</td>
<td>Harvard University</td>
<td>Other</td>
</tr>
<tr>
<td>The Cornell Daily Sun</td>
<td>Cornell University</td>
<td>WordPress</td>
</tr>
<tr>
<td>Fourth Estate</td>
<td>University of Wisconsin – Green Bay</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Diamondback</td>
<td>University of Maryland</td>
<td>Blox</td>
</tr>
<tr>
<td>The Tech Talk</td>
<td>Louisiana Tech University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Temple News</td>
<td>Temple University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Sentry</td>
<td>Robert Morris University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Michigan Daily</td>
<td>University of Michigan</td>
<td>Drupal</td>
</tr>
<tr>
<td>The News</td>
<td>Murray State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Argonaut</td>
<td>University of Idaho</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Arka Tech</td>
<td>Arkansas State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Bucknellian</td>
<td>Bucknell University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Rebel Yell</td>
<td>University of Nevada Las Vegas</td>
<td>WordPress</td>
</tr>
<tr>
<td>Luther College Chips</td>
<td>Luther College</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Colonnade</td>
<td>Georgia College & State University</td>
<td>WordPress</td>
</tr>
<tr>
<td>The Concordian</td>
<td>Concordia College</td>
<td>WordPress</td>
</tr>
</table>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/11/survey-of-cms-usage-on-newspaper-websites/feed/</wfw:commentRss>
<slash:comments>3</slash:comments>
</item>
<item>
<title>Repositioning Tutorials in Mozilla Thimble</title>
<link>https://thomaspark.co/2015/11/repositioning-tutorials-in-mozilla-thimble/</link>
<comments>https://thomaspark.co/2015/11/repositioning-tutorials-in-mozilla-thimble/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 13 Nov 2015 00:59:04 +0000</pubDate>
<category><![CDATA[Learning]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=10856</guid>
<description><![CDATA[I just returned from another great Mozilla Festival. For most of the attendees, Mozfest seems to be a chance to kick back and celebrate the daily work they do with their teams. For me, it … <a href="https://thomaspark.co/2015/11/repositioning-tutorials-in-mozilla-thimble/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I just returned from another great <a href="https://2015.mozillafestival.org/">Mozilla Festival</a>. For most of the attendees, Mozfest seems to be a chance to kick back and celebrate the daily work they do with their teams. For me, it was a rare opportunity to get face-time with some really talented people working on the same kind of problems I do. Trying to make the most of that, I felt a bit intense.</p>
<p>One of the sessions I attended was on the new version of the web editor <a href="https://thimble.mozilla.org/">Thimble</a>, with overhauled architecture and new look. I was heartened to find that embedded tutorials had made the cut. Not only because this was a feature I had worked on (although admittedly there’s some of that), but because I believe Thimble’s greatest potential is in supporting learning both formal and informal.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/newthimble-tutorials-1024x525.png" alt="New Thimble Tutorials" width="780" height="400" class="alignnone size-large wp-image-10877" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/newthimble-tutorials-1024x525.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/newthimble-tutorials-500x256.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<p>The tutorial feature was not entirely unchanged however. Before, tutorials were presented in a third column. Now, due to the new filesystem panel, there is less space available and so tutorials are relegated to a toggle in the preview panel. While adding new tutorials is easier than ever (just add a <code>tutorial.html</code> to your project), they can no longer be viewed simultaneously with the output. Several of the session attendees raised concerns about how much switching back and forth this can cause, sparking discussion about the placement of tutorials. Ideas were tossed around, including a bottom panel and inline comments inspired by <a href="http://flukeout.github.io/fancy-comments/">Fancy Comments</a>.</p>
<p>When we originally implemented tutorials, <a href="http://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/">we experimented with 6 variations</a>, including the side panel (dubbed Sidebar at the time), bottom panel (Drawer), and inline (Expander) versions. Unfortunately, a toggled view was not one of the designs tested in this study. Based on user ratings, Sidebar, Drawer, and Expander ranked as first, second, and third most popular respectively, matching our own intuitions.</p>
<p>But beyond the question of “which?”, there is the “why?”. To answer this, I decided to revisit the old data, doing a quick qualitative analysis of what the participants found positive and negative about each design. For the frontrunner designs, I’ll briefly summarize these point below, and then propose a couple of alternatives.</p>
<h2>Sidebar</h2>
<p><a href="http://polar-tor-6216.herokuapp.com/examples/sidebar.html"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/sidebar-1024x525.png" alt="Sidebar" width="780" height="400" class="alignnone size-large wp-image-10921" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/sidebar-1024x525.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/sidebar-500x256.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a></p>
<p>For the sidebar design, most of the complaints related to the cramped view. Using up some space is unavoidable, but the sidebar can be especially problematic since it spans the whole window vertically. Significant space could be wasted on larger displays, but the lack of space was particularly a problem for smaller windows.</p>
<blockquote><p>This one works best when I use it on a large-screen monitor. When I adjust my browser to a smaller size, some corresponding code parts are not automatically visible.</p></blockquote>
<p>A few commented that they found it uncomfortable to scan their eyes from the sidebar to the code to the preview and back again. The ideal order of panes is an interesting open question.</p>
<blockquote><p>Don’t care for this design. Harder for me to read far left block of directions, switch quickly to code, and follow what i’m doing to the right. Feels more difficult to concentrate.</p></blockquote>
<p>As far as positives go, most boiled down to a clean and simple design that was consistent with the rest of the interface.</p>
<blockquote><p>Fit in well visually with the columns interface of the thimble. Obviously the tutorial “section” of the page. Very distinct.</p></blockquote>
<p>Respondents noted that the sidebar was good at getting out of the way, which was a theme that came up frequently when discussing the other designs as well.</p>
<blockquote><p>Very similar to Drawer, but better, as it doesn’t pop over the code nor does it effect the editor space nearly as much (losing vertical space from the sides less frustrating then losing horizontal space from the bottom). Also how it takes space from both the input and output sides equally, rather then just squeeze the input.</p></blockquote>
<p>A couple of the respondents commented that when it came to longer tutorials, sidebar was best-suited design.</p>
<blockquote><p>This looks like a better interface. It is easier to read long instructions.</p></blockquote>
<h2>Drawer</h2>
<p><a href="http://polar-tor-6216.herokuapp.com/examples/drawer.html"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/drawer-1024x525.png" alt="Drawer" width="780" height="400" class="alignnone size-large wp-image-10920" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/drawer-1024x525.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/drawer-500x256.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a></p>
<p>For the drawer design, most of the complaints related to reduced space for the code editor. Some respondents felt that it was annoying and got in the way.</p>
<blockquote><p>From the start it feels like it’s blocking your access to the code (which it is, of course, but I’m talking about the sensation you get).</p></blockquote>
<p>Like the sidebar, there were several comments that it felt unnatural to scan your eyes from the code editor down to the tutorial. Again, this is an interesting question with no obvious answer.</p>
<blockquote><p>it was hard for my eyes to look at the bottom of the screen for instructions and then go edit the code. It was even harder when I had to scroll the code to see where I am.</p></blockquote>
<p>Respondents liked that the horizontal space of the existing panels was not compromised.</p>
<blockquote><p>Makes the most of use of the space available therefore there is no need to scroll from left to right as much on the preview screen.</p></blockquote>
<p>But perhaps the biggest win was that it was really easy and obvious to toggle into and out of view.</p>
<blockquote><p>Can easily move the tutorial out of the way. Tab is within coding area as well so I didn’t have to move the mouse as far.</p></blockquote>
<h2>Expander</h2>
<p><a href="http://polar-tor-6216.herokuapp.com/examples/expander.html"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/expander-1024x525.png" alt="Expander" width="780" height="400" class="alignnone size-large wp-image-10919" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/expander-1024x525.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/expander-500x256.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a></p>
<p>For the expander design, several respondents found it unintuitive. In particular, they reported trouble accessing the tutorial again after they had closed it, feeling that it was “gone forever”.</p>
<blockquote><p>Visually I found it hard to find the tutorial again after I “close”d it. Also, the animations right on top of hte code I was editing was distracting and felt like it was slowing me down considerably. Though it pointed me to the right part of the code it wasn’t obvious in the beginning.</p></blockquote>
<p>The majority of negative comments related to breaking the flow while coding and obscuring the overall picture of the code. They complained that the tutorial was constantly jumping and shifting the code around.</p>
<blockquote><p>Felt it cluttered and interfered with the code. felt annoyed each time I need to click the button to hide it. Dont mix it up with the code.</p></blockquote>
<p>Some of the respondents appreciated the tighter integration between instruction and code. </p>
<blockquote><p>I like this design the best so far. Tutorial is directly next to the code that is meant to be changed so you know exactly where you are in the code.</p></blockquote>
<p>A few comments noted that the design was fun!</p>
<blockquote><p>It was fun, funny, and interactive. It gave me tasks to do and while I did them, I learned different ways to do the same kind of task. It made it more memorable than looking up the method in a book.</p></blockquote>
<p>Looking back at the user ratings, expander was the only design novices preferred more than experienced coders. For experienced coders, it’s likely the novelty would wear off very quickly.</p>
<h2>Proposed Designs</h2>
<p>Based on the feedback, it’s clear that sidebar is the preferred position, with drawer a solid alternative when horizontal space is at a premium (as is the case with the new Thimble). Keeping these comments in mind, I wanted to put a couple more possibilities out there.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-1-1024x546.png" alt="Proposal 1" width="780" height="416" class="alignnone size-large wp-image-10942" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-1-1024x546.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-1-500x267.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<p>The first is to keep the sidebar layout, but toggle it through the file panel instead of the preview. For beginner coders, it’s critical to have a tight feedback loop between editing code and seeing the results, cause and effect. At the same time, having a tutorial suggests that it contains instruction that’s needed to guide their activity. In contrast, many beginner projects involve only one or two files at once, and switching between files is a relatively infrequent task. The ideal setup, then, it to have the editor, preview, and tutorial on screen at once.</p>
<p>One of the main drawbacks of this occurs when beginners are first learning to relate markup in an HTML document with stylesheet rules in a CSS file. In this case, the proposed design would actually cause more friction. To mitigate this, file references could be supported within the tutorial. Like the smartline feature in the original tutorials, which allowed a tutorial author to create interactive links to specific lines of code, these references could allow the user to jump to the most relevant files from within the tutorial. Yet another drawback is that users could lose awareness of the file panel entirely, especially if they grow accustomed to the file references within tutorials.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2-1024x415.png" alt="Proposal 2 Wide" width="780" height="316" class="alignnone size-large wp-image-10946" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2-1024x415.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2-500x203.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<p>The second is to offer a responsive layout. For larger screens that can afford it, the tutorial can be displayed as its own panel, giving Thimble a 4-column layout. For smaller screens, the tutorial could adapt to a drawer position at the bottom of the editor panel. The drawback of this is that most users might be working on smaller screens (there’s probably analytics to answer this), and that the transition between layouts is jarring.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2b-500x438.png" alt="Proposal 2 Narrow" width="500" height="438" class="aligncenter size-medium wp-image-10948" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2b-500x438.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2b-1024x897.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2b.png 1940w" sizes="auto, (max-width: 500px) 100vw, 500px" /></p>
<p>So that’s my two cents on positioning tutorials in a code editor. All in all, I’m excited by the evolution of Thimble and, along with the rest of <a href="http://openhtml.org">the openHTML group</a>, look forward to contributing to its progress.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/11/repositioning-tutorials-in-mozilla-thimble/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Developing for Web Developers</title>
<link>https://thomaspark.co/2015/08/developing-for-web-developers/</link>
<comments>https://thomaspark.co/2015/08/developing-for-web-developers/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 05 Aug 2015 14:31:55 +0000</pubDate>
<category><![CDATA[Data]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=10724</guid>
<description><![CDATA[As web developers, the deal is that we try to support our users on all the different platforms they might use to view our site. Generally speaking, that spans everything from the latest mobile devices … <a href="https://thomaspark.co/2015/08/developing-for-web-developers/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>As web developers, the deal is that we try to support our users on all the different platforms they might use to view our site. Generally speaking, that spans everything from the latest mobile devices to Internet Explorers that’ve long outstayed their welcome.</p>
<p>But what about when your site isn’t meant for the general public, but rather other web developers. How closely does that still hold? That’s the question I had when <a href="http://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/">building FontCDN</a>.</p>
<p>W3Schools provides <a href="httsp://www.w3schools.com/browsers/">stats on browser and OS share</a>, but given their focus is web tutorials, their audience skews toward the beginner. Fortunately, two of my previous projects, <a href="https://bootswatch.com">Bootswatch</a> and <a href="http://glyphsearch.com">GlyphSearch</a>, are closer to the crowd I was aiming for with <a href="https://thomaspark.co/projects/fontcdn/">FontCDN</a>.</p>
<h2>The Numbers</h2>
<p>Comparing logs, I found the breakdown surprisingly consistent between the two sites. In fact, they were within a few percentage points of each other across the board with one exception. So for this section, I’ll present data for Bootswatch since it’s been around longer.</p>
<p>As you can see below, when it comes to device share, desktop has consistently eclipsed mobile and tablets. You probably don’t want to neglect mobile visitors entirely, since they might be checking out your site before deciding to share it or come back to it on desktop, but gracefully degrading the experience may be enough.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/devices.png" alt="Device Share on Bootswatch" width="1800" height="1100" class="alignnone size-full wp-image-10747 size-xl" /></p>
<p>Here’s the breakdown by operating system. Maybe it’s because I’m in a bubble of universities and startups, but I was surprised by how low the Mac share was. Perhaps this is due to the more design-oriented Mac developers not needing designed Bootswatch themes (Mac share was 10% higher on GlyphSearch). On the flip side, Linux share was greater than I expected.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/os.png" alt="OS Share on Bootswatch" width="1800" height="1100" class="alignnone size-full wp-image-10749 size-xl" /></p>
<p>Chrome and Firefox are the most used browsers. Not a surprise given the quality of their dev tools.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/browsers.png" alt="Browser Share on Bootswatch" width="1800" height="1100" class="alignnone size-full wp-image-10742 size-xl" /></p>
<p>A pleasant surprise was that among IE users, two-thirds are on the latest version.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/ie.png" alt="Internet Explorer Versions on Bootswatch" width="1800" height="1100" class="alignnone size-full wp-image-10748 size-xl" /></p>
<p>Just for fun, here’s what the update cycle looks like for Chrome in that same time.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/chrome.png" alt="Chrome Versions on Bootswatch" width="1800" height="1100" class="alignnone size-full wp-image-10743 size-xl" /></p>
<p>So how do the Bootswatch and GlyphSeach numbers stack up to the general public? Here’s a comparison of device share based on data from <a href="http://www.w3counter.com/globalstats.php">W3Counter</a>. Think of green as global and blues as different subsets of web developers.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/compare-devices.png" alt="Device Share Comparison" width="1800" height="1100" class="alignnone size-full wp-image-10770 size-xl" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-devices.png 1800w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-devices-500x306.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-devices-1024x626.png 1024w" sizes="auto, (max-width: 1800px) 100vw, 1800px" /></p>
<p>Here’s OS share:</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/compare-os.png" alt="OS Share Comparison" width="1800" height="1100" class="alignnone size-full wp-image-10771 size-xl" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-os.png 1800w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-os-500x306.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-os-1024x626.png 1024w" sizes="auto, (max-width: 1800px) 100vw, 1800px" /></p>
<p>And browser share:</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/08/compare-browsers.png" alt="Browser Share Comparison" width="1800" height="1100" class="alignnone size-full wp-image-10769 size-xl" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-browsers.png 1800w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-browsers-500x306.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-browsers-1024x626.png 1024w" sizes="auto, (max-width: 1800px) 100vw, 1800px" /></p>
<p>Here’s the takeaway: If you’re developing web tools for web developers, you’ll do alright by targeting modern browsers on the desktop.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/08/developing-for-web-developers/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>A Better Way to Search Google Fonts</title>
<link>https://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/</link>
<comments>https://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 03 Aug 2015 14:09:37 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=10624</guid>
<description><![CDATA[Like most web developers, Google Fonts is an indispensable resource for me. What would otherwise be a choice between sticking to a small handful of web safe fonts or wrangling WOFFs, OTFs, and TTFs is … <a href="https://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Like most web developers, <a href="https://www.google.com/fonts">Google Fonts</a> is an indispensable resource for me. What would otherwise be a choice between sticking to a small handful of web safe fonts or wrangling WOFFs, OTFs, and TTFs is solved with just two lines of code.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-1024x746.png" alt="Google Fonts" width="780" height="568" class="alignnone size-large wp-image-10652" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-300x219.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<h2>Clicks and Conundrums</h2>
<p>While Google Fonts is a valuable tool, its interface leaves much to be desired, a fact that hasn’t escaped the attention of folks like <a href="http://www.smashingmagazine.com/2013/09/dear-web-font-providers/">Laura Franz</a> or <a href="http://sachagreif.com/more-google-webfonts-that-dont-suck/">Sascha Grief</a>. As a devoted user of Google Fonts, I’d like to add a few of my own pet peeves to the conversation.</p>
<p>First, one of the most common ways people arrive on Google Fonts is through a web search. <a href="https://www.google.com/fonts/specimen/Roboto">The page you’ll land on</a>, while admittedly chock full of interesting history and statistics, doesn’t include the information you’re there for.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-landing1-1024x746.png" alt="Google Fonts landing page" width="780" height="568" class="alignnone size-large wp-image-10664" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-landing1-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-landing1-500x364.png 500w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<p>For that, you’ll need to click the “Open in Google Fonts” link in the top right. “I thought I was already on Google Fonts,” you might wonder.</p>
<p>Second, the Google Fonts interface is peppered with buttons, many unlabelled, that always give me a half-second pause. “Which one do I click to start using the font?” Hint: it’s not the bright blue button that beckons.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-buttons.png" alt="Google Fonts Buttons" width="895" height="100" class="alignnone size-full wp-image-10673" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-buttons.png 895w, https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-buttons-500x56.png 500w" sizes="auto, (max-width: 895px) 100vw, 895px" /></p>
<p>Finally, Google Fonts includes a lot of directions and tips that are useful for the first-time user, but after the 100th visit, only serve to waste space. Add fixed bars at the top and bottom of the page and you end up with the most crucial bits below the fold, maybe even buried in a hidden tab.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-detail-1024x746.png" alt="Google Fonts detail view" width="780" height="568" class="alignnone size-large wp-image-10649" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-detail-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-detail-300x219.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<h2>Enter FontCDN</h2>
<p>Last week I tried my hand at building the Google Fonts interface that I wanted to use. The result is <a href="https://thomaspark.co/projects/fontcdn/">FontCDN</a>.</p>
<p><a href="https://thomaspark.co/projects/fontcdn/"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-1024x746.png" alt="FontCDN" width="780" height="568" class="alignnone size-large wp-image-10653" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-300x219.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a></p>
<p>FontCDN addresses a different use case than what Google Fonts seems to be designed for. Rather than deeply exploring and comparing different fonts within Google Fonts or within a prototyping tool like <a href="https://typecast.com/">Typecast</a>, the goal of FontCDN is to quickly grab the fonts you’re interested in and try them out within the context of your actual project.</p>
<p>You can sort and filter the 700+ fonts available on Google Fonts any which way. You can even browse fonts that have been recommended around <a href="http://sachagreif.com/google-webfonts-that-dont-suck/">the</a> <a href="http://www.smashingmagazine.com/2014/03/taking-a-second-look-at-free-fonts/">web</a>, a feature inspired by <a href="https://typekit.com/fonts">Typekit</a>.</p>
<p>Click a font to view the import and style code. Click a button to copy it to your clipboard. There’s no step three.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-modal-1024x746.png" alt="FontCDN modal" width="780" height="568" class="alignnone size-large wp-image-10651" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-modal-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-modal-300x219.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<p>Give <a href="https://thomaspark.co/projects/fontcdn/">FontCDN</a> a try and let me know what you think.</p>
<h2>Lessons</h2>
<p>Performance was a priority given how resource-intensive it is to browse hundreds of fonts, and using <a href="http://facebook.github.io/react/">React</a> was one of the keys. But there are surely many more optimizations to be made. If you want help out, the project is on <a href="https://github.com/thomaspark/fontcdn/">GitHub</a>.</p>
<p>While JSX resides in some kind of uncanny valley, the componentization and render methods made it worthwhile. So much so that when it comes time to revamp <a href="http://glyphsearch.com/">GlyphSearch</a>, I’ll probably give it the React treatment.</p>
<p>On a final note, hat tip to <a href="http://webpack.github.io/">WebPack</a>, <a href="https://github.com/seatgeek/react-infinite">React Infinite</a>, and <a href="https://github.com/typekit/webfontloader">Web Font Loader</a>, which saved me a boatload of effort on this project.</p>
<h2>Response</h2>
<p>My announcement of this project was <a href="https://twitter.com/thomashpark/status/628593168414572544/retweets" rel="noopener" target="_blank">retweeted</a> by the official Google Fonts account (@googlefonts). Not only did they seem to take the critiques in stride, but soon after they released a major overhaul of Google Fonts that was in the same direction as my approach — and about a mile further. Clearly it had been in the works!</p>
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">Blog post: A Better Way to Search Google Fonts. <a href="http://t.co/UlxHaQtyqP">http://t.co/UlxHaQtyqP</a></p>
<p>— Thomas H. Park (@thomashpark) <a href="https://twitter.com/thomashpark/status/628593168414572544?ref_src=twsrc%5Etfw">August 4, 2015</a></p></blockquote>
<p> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/feed/</wfw:commentRss>
<slash:comments>17</slash:comments>
</item>
<item>
<title>Polyfill for Scoped CSS</title>
<link>https://thomaspark.co/2015/07/polyfill-for-scoped-css/</link>
<comments>https://thomaspark.co/2015/07/polyfill-for-scoped-css/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 22 Jul 2015 13:53:45 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=10545</guid>
<description><![CDATA[Scoped CSS is a new feature that makes it possible to add <style> elements anywhere in your document, scoping the CSS rules it contains to its parent element. This was just what we needed while … <a href="https://thomaspark.co/2015/07/polyfill-for-scoped-css/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Scoped CSS is a new feature that makes it possible to add <code class="language-markup"><style></code> elements anywhere in your document, scoping the CSS rules it contains to its parent element. This was just what we needed while <a href="http://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/">developing Snowball</a>.</p>
<p>Unfortunately, support is <a href="http://caniuse.com/#feat=style-scoped">limited to Firefox</a>, and existing polyfills like <a href="https://github.com/PM5544/scoped-polyfill">scoped-polyfill</a> and <a href="https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin">jQuery-Scoped-CSS</a> weren’t working quite the way we needed. So I ended up creating a new polyfill for our project, which I’ve made available on GitHub.</p>
<div class="center">
<a class="standard-btn blue-btn xlarge-btn" href="https://github.com/thomaspark/scoper"><span>Scoper</span></a>
</div>
<p>To use Scoper, simply include scoper.js on your page.</p>
<p><script async src="//jsfiddle.net/thomaspark/rpe402LL/embed/result,html,css/"></script></p>
<p>How Scoper works is that for each <code class="language-markup"><style scoped></code> element, the parent (or scoping) element is wrapped with a new element that’s been assigned a unique ID. This ID is prepended to all of its selectors.</p>
<p>Scoper should work in Chrome, Safari, and IE9+, with tests built using <a href="http://mochajs.org/">Mocha</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/07/polyfill-for-scoped-css/feed/</wfw:commentRss>
<slash:comments>5</slash:comments>
</item>
<item>
<title>Snowball: A WordPress Plugin for Storytelling on the Web</title>
<link>https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/</link>
<comments>https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 20 Jul 2015 13:30:30 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Learning]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.co/?p=10422</guid>
<description><![CDATA[Since May, our research group has been developing a new tool called Snowball. As with our other tools, the purpose of Snowball is to empower people from all sorts of backgrounds to express and create … <a href="https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball-1024x323.png" alt="Snowball" width="780" height="246" class="alignnone size-large wp-image-10497" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball-1024x323.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball-300x95.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></p>
<p>Since May, <a href="http://openhtml.org">our research group</a> has been developing a new tool called <a href="http://snowball.openhtml.org/">Snowball</a>. As with our other tools, the purpose of Snowball is to empower people from all sorts of backgrounds to express and create — tell their stories — on the web.</p>
<p>We chose to implement Snowball as a WordPress plugin because WordPress users represent our target audience, and WordPress powers over 20% of the <em>entire web</em>, used everywhere from CNN and TechCrunch to the classroom.</p>
<h1>Storytelling in the Digital Age</h1>
<p>Stories take many forms, but we drew inspiration from articles like <a href="http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek">Snow Fall</a> (if you couldn’t guess by the name). The work of the New York Times and a handful of other visionary organizations are exemplars of effective storytelling on the web. Three qualities set their work apart.</p>
<div id="attachment_10487" style="width: 790px" class="wp-caption alignnone"><a href="http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-10487" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowfall-1024x668.png" alt="Snow Fall by John Branch — New York Times" width="780" height="509" class="size-large wp-image-10487" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowfall-1024x668.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/snowfall-300x196.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a><p id="caption-attachment-10487" class="wp-caption-text">Snow Fall by John Branch — New York Times</p></div>
<h3>Minimalist</h3>
<p>Articles tend to be minimalist. This reflects a respect for both the audience and the content, and makes for a more immersive experience.</p>
<div id="attachment_10480" style="width: 790px" class="wp-caption alignnone"><a href="https://medium.com/matter/the-web-we-have-to-save-2eb1fe15a426"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-10480" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/thewebwehavetosave-1024x668.png" alt="The Web We Have to Save by Hossein Derakhshan — Medium" width="780" height="509" class="size-large wp-image-10480" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/thewebwehavetosave-1024x668.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/thewebwehavetosave-300x196.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a><p id="caption-attachment-10480" class="wp-caption-text">The Web We Have to Save by Hossein Derakhshan — Medium</p></div>
<h3>Bespoke</h3>
<p>Not only are distractions removed, but what remains purposefully enhances the content. The design is tailored to the content, advancing from the realm of grayscale newsprint to <a href="http://www.smashingmagazine.com/the-death-of-the-blog-post/">vivid magazine spreads</a>.</p>
<div id="attachment_10478" style="width: 790px" class="wp-caption alignnone"><a href="http://jasonsantamaria.com/articles/chunky-in-fury"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-10478" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/chunkyinfury-1024x668.png" alt="Chunky in Fury by Mike Monteiro — Jason Santa Maria" width="780" height="509" class="size-large wp-image-10478" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/chunkyinfury-1024x668.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/chunkyinfury-300x196.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a><p id="caption-attachment-10478" class="wp-caption-text">Chunky in Fury by Mike Monteiro — Jason Santa Maria</p></div>
<h3>Interactive</h3>
<p>Perhaps most importantly, the content is interactive. One of the things that sets the web apart from mass media like newspapers and television is the interplay between creator and consumer. Online journalism is only now starting to tap into this potential by making articles <a href="http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/">interactive</a> and <a href="http://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html?_r=0">social</a>.</p>
<div id="attachment_10479" style="width: 790px" class="wp-caption alignnone"><a href="http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-10479" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/whatiscode-1024x668.png" alt="What is Code? by Paul Ford — Bloomberg" width="780" height="509" class="size-large wp-image-10479" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/07/whatiscode-1024x668.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/whatiscode-300x196.png 300w" sizes="auto, (max-width: 780px) 100vw, 780px" /></a><p id="caption-attachment-10479" class="wp-caption-text">What is Code? by Paul Ford — Bloomberg</p></div>
<h1>Snowball Effect</h1>
<p>Unfortunately, most organizations don’t have the luxury of keeping world-class art departments and software development teams on staff. And most individuals, though they may have a story to tell, lack the technical skills required to craft these types of articles.</p>
<p>This is where Snowball comes in.</p>
<p>Although we’ve left plenty of headroom for people who know how to code or want to learn along the way, we’ve designed Snowball so that technical skills or a technical staff are not requirements. To make Snowball accessible to the beginner, we’ve adopted the following principles.</p>
<h3>Chunking</h3>
<p>Gone are the days where you can “View Source” on a webpage and make any sense of it. Likewise, it takes a lot more code nowadays just to start making something meaningful. No doubt one of the big leaps in the coming years will be <a href="http://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/">componentization</a>, paving the way for web development at a higher level of abstraction.</p>
<p>While we wait for the new standards to crystalize, we’ve taken our own approach in Snowball. First, we’ve decomposed modern web articles, identifying different chunks of content that are used to construct them. We’ve then given users a way to build up new articles using these content types, one block at a time. Snowball supports content ranging from pull quotes to interactive visualizations.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball1.gif" alt="Blocks" width="780" height="273" class="alignnone size-large wp-image-10531"></p>
<h3>Looping</h3>
<p>A tight feedback loop encourages playful experimentation and learning, so we’ve equipped Snowball with a live preview feature, which is something WordPress doesn’t offer by default. Tinker with a value and you can immediately see the rendered results. Not only that, but within the code view, you can inspect changes in the underlying HTML and CSS.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball2.gif" alt="Live Preview" width="780" height="273" class="alignnone size-large wp-image-10532"></p>
<h3>Scaffolding</h3>
<p>While the overall structure of each block is determined by its type, users still need to give it their own touch. Snowball provides different degrees of support depending on the user’s abilities and goals.</p>
<p>Snowball offers a graphical interface that makes it easy to populate a block’s content and most pertinent styles. If you want to go beyond that, a code interface allows you to add your own tweaks with just a dash of CSS. And for the power users, an entirely custom block can be created with code.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball3.gif" alt="Code View" width="780" height="273" class="alignnone size-large wp-image-10530"></p>
<h1>Trying It Out</h1>
<p>We’ve started our rollout, presenting Snowball <a href="https://twitter.com/excitecenter/status/621768521266147328">last week at the ExCITe Center’s T3 event</a>. With that said, Snowball is a research prototype at heart, and still a work in progress.</p>
<p>Next month, we’ll be hosting workshops in Philadelphia, where anyone interested in Snowball, from journalists and bloggers to students, will be invited to try it out and give their feedback.</p>
<p>In the fall, we plan to conduct more sustained pilot tests with partners, including news organizations and journalism courses.</p>
<p>If you’re interested in participating in either the workshops or pilot tests, drop me an email. And for more details about Snowball, check out the <a href="http://snowball.openhtml.org/">project site</a> or the <a href="https://github.com/thomaspark/snowball/">GitHub repository</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/feed/</wfw:commentRss>
<slash:comments>28</slash:comments>
</item>
<item>
<title>PubCSS: Formatting Academic Publications in HTML & CSS</title>
<link>https://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/</link>
<comments>https://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 21 Jan 2015 12:25:52 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=9486</guid>
<description><![CDATA[You have two choices when it comes to formatting academic papers for conferences and journals: Microsoft Word and LaTeX. Word is familiar and easy for anyone to pick up. But the WYSIWYG interface that makes … <a href="https://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>You have two choices when it comes to formatting academic papers for conferences and journals: Microsoft Word and LaTeX.</p>
<p>Word is familiar and easy for anyone to pick up. But the WYSIWYG interface that makes it so easy also makes it easy to create inconsistent, amateur-looking documents that are tough to maintain and fine-tune. On top of this, you get a file format that isn’t friendly to revision control, diminishing collaboration through a system like GitHub.</p>
<p>LaTeX is powerful and produces beautiful documents, but requires installing a hefty toolchain, learning a new syntax, and familiarizing yourself with its powerful abstractions. This is a <a href="http://www.johndcook.com/blog/2008/04/03/microsoft-word-and-latex/">significant front-end investment</a>, one that <a href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0115069">may not pay off</a>. In my experience, there’s usually at least one author who hasn’t made that investment, and so the team falls back to Word anyway. </p>
<p><a href="https://github.com/thomaspark/pubcss/">PubCSS</a> is an exploration of HTML and CSS as a third option. It’s a library of stylesheets and templates for formatting academic papers. Perhaps HTML and CSS can hit the sweet spot between the ease of Word and the efficiency LaTeX. Like LaTeX, HTML is a markup language, but one that a lot more people have experience with. CSS has proven its worth for styling fluid layouts, and with <a href="http://www.smashingmagazine.com/2015/01/07/designing-for-print-with-css/">CSS3 modules</a> around the corner, things can only improve for print.</p>
<h1>Output</h1>
<p>So how’s PubCSS’s output look? Pretty darn good. Here’s a sample page for the ACM SIG proceedings. Note that most of the layout, typography, and numbering is handled by a single stylesheet.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/01/acm-sig-sample-latex.png" alt="acm-sig-sample-latex" width="1275" height="1650" class="aligncenter size-full wp-image-9545 border" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/01/acm-sig-sample-latex.png 1275w, https://thomaspark.co/wp/wp-content/uploads/2015/01/acm-sig-sample-latex-232x300.png 232w, https://thomaspark.co/wp/wp-content/uploads/2015/01/acm-sig-sample-latex-791x1024.png 791w" sizes="auto, (max-width: 1275px) 100vw, 1275px" /></p>
<p>You can compare the actual PDF output for the following formats:</p>
<ul>
<li><a href="http://www.acm.org/sigs/publications/proceedings-templates">ACM SIG Proceedings</a> vs. <a href="https://github.com/thomaspark/pubcss/blob/master/dist/acm-sig/templates/acm-sig-sample-latex.pdf">PubCSS</a></li>
<li><a href="http://www.sigchi.org/publications/chipubform">ACM SIGCHI Proceedings</a> vs. <a href="https://github.com/thomaspark/pubcss/blob/master/dist/acm-sigchi/templates/acm-sigchi-sample.pdf">PubCSS</a></li>
<li><a href="http://www.sigchi.org/publications/chipubform">ACM SIGCHI Extended Abstracts</a> vs. <a href="https://github.com/thomaspark/pubcss/blob/master/dist/acm-sigchi-ea/templates/acm-sigchi-ea-sample.pdf">PubCSS</a></li>
<li><a href="http://www.ieee.org/conferences_events/conferences/publishing/templates.html">IEEE Conference Proceedings</a> vs. <a href="https://github.com/thomaspark/pubcss/blob/master/dist/ieee/templates/ieee-sample.pdf">PubCSS</a></li>
</ul>
<p>A bonus of using HTML is that with a few lines of CSS targeting <code class="language-css" inline="true">@media screen</code>, you’ve got yourself a <a href="https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web.html">web version</a> of the paper.</p>
<p><a href="https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web.html"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper1.png" alt="Web Paper" width="2422" height="1834" class="aligncenter size-full wp-image-9564" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper1.png 2422w, https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper1-300x227.png 300w, https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper1-1024x775.png 1024w" sizes="auto, (max-width: 2422px) 100vw, 2422px" /></a></p>
<p>You can also add niceties like responsive design, reference tooltips, and image lightboxes to create an <a href="https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web-theme.html">interactive web paper</a> that feels at home on the web.</p>
<p><a href="https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web-theme.html"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper-theme1.png" alt="Web Paper Theme" width="2422" height="1834" class="aligncenter size-full wp-image-9565" srcset="https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper-theme1.png 2422w, https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper-theme1-300x227.png 300w, https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper-theme1-1024x775.png 1024w" sizes="auto, (max-width: 2422px) 100vw, 2422px" /></a></p>
<h1>Quick Start</h1>
<p>Using PubCSS is simple:</p>
<ol>
<li>Create an HTML file, or modify one of the templates, to add your content</li>
<li>Link your HTML to a <code inline="true">pub.css</code> stylesheet</li>
<li>Build a PDF from the HTML using Prince with the command<br /><code class="language-bash" inline="true">prince input.html output.pdf</code></li>
</ol>
<p>You can grab the templates and stylesheets from the <a href="https://github.com/thomaspark/pubcss/">GitHub repo</a>. ACM and IEEE formats are available so far. The only dependency is <a href="http://www.princexml.com/">Prince</a>, which is free for non-commercial use.</p>
<h1>Documentation</h1>
<p>OK, it’s not quite that simple. You still have to mark up your content. <a href="http://htmlpreview.github.io/?https://github.com/thomaspark/pubcss/blob/master/dist/acm-sig/templates/acm-sig-sample-word.html">Here’s</a> what the markup for a typical paper looks like. The main components are outlined below.</p>
<p>Sections are automatically numbered by PubCSS. Just follow this pattern.</p>
<pre>
<code class="language-markup" lang="html"><p>
<h1>Section Header</h1>
<section>
<h2>Subsection Header</h2>
<p>Lorem ipsum</p>
</section>
</p></code>
</pre>
<p>Figures and tables are similarly numbered if you include a caption.</p>
<pre>
<code class="language-markup" lang="html"><table>
<tr><td>1</td><td>2<td></tr>
<caption>Example Table</caption>
</table>
<figure>
<img src="graph.png">
<figcaption>Example Figure</figcaption>
</figure></code></pre>
<p>References are also numbered. Don’t forget to assign them unique IDs.</p>
<pre>
<code class="language-markup" lang="html"><cite id="nicole">Nicole. 2015. Title of paper. <em>Journal</em>, 4(3), 1-10.</cite></code>
</pre>
<p>Citations to the references make use of these IDs.</p>
<pre>
<code class="language-markup" lang="html"><a href="#nicole"></a></code>
</pre>
<p>Sections, tables, and figures can also be referenced by adding a class.</p>
<pre>
<code class="language-markup" lang="html"><a href="#intro" class="section"></a>
<a href="#example-table" class="table"></a>
<a href="#example-figure" class="figure"></a></code>
</pre>
<p>Equations are also numbered. MathML is well-supported by Prince. For the web, you’ll need <a href="http://www.mathjax.org/">MathJax</a> to render MathML properly in Chrome and Internet Explorer.</p>
<pre>
<code class="language-markup" lang="html"><div class="equation">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>E</mi>
<mo>=</mo>
<mi>m</mi>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</math>
</div></code>
</pre>
<p>Footnotes are made within the body text, and are automatically moved to the bottom of the current page.</p>
<pre>
<code class="language-markup" lang="html"><p>This is text.<span class="footnote">And this is a footnote.</span></p></code>
</pre>
<p>Smart quotes can be used in lieu of straight quotes by enclosing the text like so. You can nest quotes within quotes.</p>
<pre>
<code class="language-markup" lang="html"><q>To be or not be.</q></code>
</pre>
<p>Utility classes are also available to modify layout and counter behavior.</p>
<ul>
<li><code class="language-css" inline="true">col-2</code> divide the element into 2 columns</li>
<li><code class="language-css" inline="true">col-3</code> divide the element into 3 columns</li>
<li><code class="language-css" inline="true">col-4</code> divide the element into 4 columns</li>
<li><code class="language-css" inline="true">col-span</code> span all of the columns of parent</li>
<li><code class="language-css" inline="true">col-break-before</code> force column break before element</li>
<li><code class="language-css" inline="true">col-break-after</code> force column break after element</li>
<li><code class="language-css" inline="true">page-break-before</code> force page break before element</li>
<li><code class="language-css" inline="true">page-break-after</code> force page break after element</li>
<li><code class="language-css" inline="true">counter-skip</code> do not count this header</li>
<li><code class="language-css" inline="true">counter-reset</code> reset counter to 0</li>
</ul>
<p>For customization, one of the major advantages of PubCSS is that you can use CSS. All of the usual rules apply.</p>
<p>The architecture of PubCSS is similar to <a href="http://bootswatch.com">Bootswatch</a> — a set of LESS files used to generate CSS for the current themes and to bootstrap new ones. If you want to make more extensive changes, or create a new theme, you’ll want to dig into the LESS source. The most common changes can be made through <code inline="true">variables.less</code>, such as toggling page numbers and setting counter styles.</p>
<h1>Notes</h1>
<p>PubCSS is meant to be proof-of-concept, a demonstration of HTML and CSS as viable alternative for formatting academic papers. Note that these templates are not officially sanctioned by ACM or IEEE. Unless a venue requires only the PDF output, they’ll also be expecting the source in the form of LaTeX files or a Word document.</p>
<p>Among the limitations of PubCSS are that citations in APA or MLA style (Park, 2015) are possible but clumsier than their counterpart [1]. You also lose the magic of BibTeX for reference management, though on the bright side, all of your content is localized to a single file. Finally, when debugging PDF output, you really come to miss the developer tools available in web browsers today.</p>
<p>For the <a href="https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web-theme.html">interactive web paper</a>, I used JavaScript and hard-coded HTML to achieve many of the interactive effects. But once browsers start supporting CSS3 properties like <code inline="true">target-counter</code> and <code inline="true">target-content</code>, as Prince already does, it’ll be possible to implement most of these effects with only CSS — that is, outputting both print and fully interactive web versions with a single pub.css file. How cool.</p>
<p>Finally, get in touch if you have a request for another publication format. I’d love to hear from you if you’re interested in using PubCSS.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/feed/</wfw:commentRss>
<slash:comments>25</slash:comments>
</item>
<item>
<title>Graduated Experiences in Golf and Programming</title>
<link>https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/</link>
<comments>https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 23 Apr 2014 12:27:39 +0000</pubDate>
<category><![CDATA[Learning]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=9265</guid>
<description><![CDATA[A recent post about efforts to counter the declining popularity of golf got me thinking. I’m a pretty terrible golfer, but still have fond memories of playing with friends and family over the years, and … <a href="https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>A recent post <a href="http://www.marco.org/2014/04/21/golf">about efforts to counter the declining popularity of golf</a> got me thinking. I’m a pretty terrible golfer, but still have fond memories of playing with friends and family over the years, and do my best to make a couple of rounds each summer. The reason I started playing wasn’t my father, who admittedly is an avid golfer, or stars like Tiger Woods on TV every Sunday. The single greatest influence was a place just a few miles from where I grew up called Woody’s.</p>
<p><a href="http://www.philly.com/philly/sports/golf/course_guide/Wood_s_Golf_Center.html">Woody’s</a> was a golf complex with a driving range, two mini-putt courses, a 9-hole chip & putt course, and an 18-hole par-3 course. Many summer nights were spent with friends on the driving range, the mini-putt courses, or simply hanging out. Woody’s offered three things that made it a great introduction to golf: an accessible environment, beginner-friendly equipment, and graduated experiences.</p>
<p>Woody’s made golf accessible. It was nearby, cheap, and had a welcoming atmosphere. Rather than sitting at the end of a winding, cloistered driveway, the facility and parking lot stretched along a busy highway. People of all ages and backgrounds could be seen there on any given day, from those practicing drills on the driving range or putting green, to others whiffing on swings and generally making fools of themselves. There was an air of playfulness to this prim sport.</p>
<p>A big factor in Woody’s accessibility was that you didn’t need to invest time researching and money purchasing your own equipment. Woody’s provided putters, a rack of old clubs to experiment with on the driving range, a pitching wedge and putter combo for chip & putt, and full sets to rent for the par-3 course. And whether you decided to borrow clubs or bring your own, there was no stigma. Well, you might have gotten some looks bringing your own putter to mini-putt, although <a href="http://grantland.com/the-triangle/putt-putt-perfection/">apparently it’s not unheard of</a>.</p>
<p>Most important of all, there were graduated experiences. Individually, none of the courses at Woody’s were the best. There were mini-putt courses with far fancier animatronics and better-groomed 18-hole courses for sure. But Woody’s offered proximity between these different activities. The sum was greater than the parts. Each activity was a complete, self-contained experience, but you were exposed to them all and could easily transition from one to another requiring more skill. When you started outgrowing the chip & putt course, you’d be tempted to try the par-3 course.</p>
<p>Time spent at Woody’s wasn’t as highly focused and organized as it would be through golf lessons, yet its impacts were long-lasting. For me and most people who spent time at Woody’s, we didn’t start by identifying ourselves as golfers. The goal and reality was never to become a professional on the PGA tour. But we were rewarded with developed skills, rich experiences, and an affection for the sport, whether we winded up as spectating fans, casual hobbyists, or the obsessed.</p>
<p>A few years ago, <a href="http://fanadelphia.com/woodys-golf-center-the-end-of-an-era/">Woody’s was closed</a> to make way for a hospital. My hometown still boasts many 18-hole golf courses where khakied and cleated men make the rounds, and driving ranges (often accompanied by batting cages—another narrow slice of a sport) where boisterous children play. But where Woody’s once provided intermediate activities that acted as pathways to “real” golf, there is now a chasm. Hard to imagine anyone but the most determined and resourced making it from the driving range to the clubhouse.</p>
<h2>What’s This Got To Do With Programming?</h2>
<p>To me, concerns about the declining popularity of golf parallel those about getting people involved in programming. Golf and programming share many criticisms, from being the domain of a privileged few to requiring a steep learning curve to start, let alone enjoy. This leads me to wonder about the Woody’s of programming.</p>
<p>Like Woody’s accessible atmosphere, there are initiatives like <a href="https://webmaker.org/">Mozilla Webmaker</a> that create a welcoming environment for learning to code and free online courses like <a href="http://www.codecademy.com/">Codecademy</a> that target beginners. And like the putters, pitching wedges, and basic golf club sets you could borrow at Woody’s, there are free and easy-to-use tools like <a href="http://thimble.webmaker.org">Thimble</a> and <a href="http://openhtml.org">openHTML</a> suitable for beginners.</p>
<p>But I’m not sure where the graduated experiences are. Technology can be explicitly designed to support this, as in the case of <a href="https://wiki.mozilla.org/Webmaker/Concept-Nimble">Nimble</a>. But missing is the social component, akin to what sociologists Lave and Wenger refer to as <a href="https://en.wikipedia.org/wiki/Legitimate_peripheral_participation">legitimate peripheral participation</a>.</p>
<p>You might argue that the web as a whole serves this function. But that’s about as true as the roads helping kids get from the driving range to the country club. Open source projects can also provide these experiences. Doubtless there are many examples of contributors who have gone from fixing typos in the readme to the core team. But if you’re spending time on GitHub, the battle’s already been won. Perhaps ultra-inclusive hackerspaces would be a start.</p>
<p>Where are these communities where programmers of different levels of expertise, from the most novice of novices and casual of casuals, can have complete and meaningful experiences, yet still play and work in proximity with, observe, and learn from one another? Where are the pathways from the driving range <a href="http://www.amazon.com/Unlocking-Clubhouse-Computing-Jane-Margolis/dp/0262632691">to the clubhouse</a>?</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>TF2 Collective</title>
<link>https://thomaspark.co/2014/02/tf2-collective/</link>
<comments>https://thomaspark.co/2014/02/tf2-collective/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 27 Feb 2014 18:32:20 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Language]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=9649</guid>
<description><![CDATA[In Team Fortress 2, there are nine playable classes with unique personalities and complementary abilities: pyro, engineer, spy, heavy, sniper, scout, soldier, demo, and medic. When referring to several scouts, or pyros, or heavies, it’d … <a href="https://thomaspark.co/2014/02/tf2-collective/">Read more</a>]]></description>
<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/classes.jpg" alt="TF2 Classes" width="1200" height="675" class="aligncenter size-full wp-image-9769" /></p>
<p>In Team Fortress 2, there are <a href="https://wiki.teamfortress.com/wiki/Classes">nine playable classes</a> with unique personalities and complementary abilities: pyro, engineer, spy, heavy, sniper, scout, soldier, demo, and medic.</p>
<p>When referring to several scouts, or pyros, or heavies, it’d be perfectly adequate to refer to each as a “group” or “bunch”. But given TF2’s whimsical style, why not adopt creative language like the <a href="http://www.thealmightyguru.com/Pointless/AnimalGroups.html">terms of venery used for animals</a>? A pod of dolphins, a murder of crows, a zeal of zebras, a wisdom of wombats…</p>
<p>To decide on the term that best evokes each class, I polled the TF2 community, like I <a href="http://thomaspark.co/2011/05/starcraft-collective/">had previously done for Starcraft</a>. For each class, I presented five choices and the option to write-in your own. A final question asked respondents to give their primary class. You can view the survey <a href="https://docs.google.com/forms/d/1ZHnoLykTP7ZCnk_jCW2j90_NYtZ80JDzDeObVwLY7aY/viewform?usp=send_form">here</a>.</p>
<p>Here are the results, based on 404 responses:</p>
<p><a href="#scout">Swarm of Scouts</a><br />
<a href="#soldier">Squad of Soldiers</a><br />
<a href="#pyro">Pack of Pyros</a><br />
<a href="#demo">Spam of Demos</a><br />
<a href="#heavy">Horde of Heavies</a><br />
<a href="#engineer">Nest of Engineers</a><br />
<a href="#medic">Mob of Medics</a><br />
<a href="#sniper">Surplus of Snipers</a><br />
<a href="#spy">Murder of Spies</a></p>
<p>Read on for the full details.</p>
<h2 id="scout">Swarm of Scouts</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/scouts.jpg" alt="Scouts" width="1200" height="675" class="aligncenter size-full wp-image-9712" /></p>
<p>Scouts can certainly feel like a swarm of irritating gnats. I propose the alternate “flock” be used for soda-popper scouts.</p>
<p><span class="option">Swarm</span><span class="progress"><span class="progress-bar" style="width: 32%;">32%</span></span><br />
<span class="option">Scatter</span><span class="progress"><span class="progress-bar" style="width: 21%;">21%</span></span><br />
<span class="option">Flock</span><span class="progress"><span class="progress-bar" style="width: 19%;">19%</span></span><br />
<span class="option">Rush</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span><br />
<span class="option">Bonk</span><span class="progress"><span class="progress-bar" style="width: 9%;">9%</span></span></p>
<p>Write-Ins:<br />
Scoot, Squad</p>
<p>Scouts call themselves:<br />
Swarm</p>
<h2 id="soldier">Squad of Soldiers</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/soldiers.jpg" alt="Soldiers" width="1200" height="674" class="aligncenter size-full wp-image-9714" /></p>
<p>For soldiers, “squad” was the winner among the militaristic options. As write-ins, “flight” and “pocketful” were best at capturing the styles of gameplay soldiers are known for.</p>
<p><span class="option">Squad</span><span class="progress"><span class="progress-bar" style="width: 46%;">46%</span></span><br />
<span class="option">Battalion</span><span class="progress"><span class="progress-bar" style="width: 32%;">32%</span></span><br />
<span class="option">Spam</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span><br />
<span class="option">Stock</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span><br />
<span class="option">Service</span><span class="progress"><span class="progress-bar" style="width: 3%;">3%</span></span></p>
<p>Write-Ins:<br />
Flight, Pocketful, Platoon, Barrage, ‘Merica</p>
<p>Soldiers call themselves:<br />
Squad</p>
<h2 id="pyro">Pack of Pyros</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/pyros.jpg" alt="Pyros" width="1200" height="675" class="aligncenter size-full wp-image-9711" /></p>
<p>All five options for Pyro were popular, but “pack” was the frontrunner. There were plenty of write-ins as well. One of these was “patrol”, which works well to describe pybros who dutifully spycheck.</p>
<p><span class="option">Pack</span><span class="progress"><span class="progress-bar" style="width: 32%;">32%</span></span><br />
<span class="option">Plague</span><span class="progress"><span class="progress-bar" style="width: 17%;">17%</span></span><br />
<span class="option">Huddle</span><span class="progress"><span class="progress-bar" style="width: 15%;">15%</span></span><br />
<span class="option">Phlog</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span><br />
<span class="option">Conflagration</span><span class="progress"><span class="progress-bar" style="width: 12%;">12%</span></span></p>
<p>Write-Ins:<br />
Patrol, Hudda, Mmmph, Kindling, Inferno, Infestation, Blaze, Backdraft</p>
<p>Pyros call themselves:<br />
Pack</p>
<h2 id="demo">Spam of Demos</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/demos.jpg" alt="Demos" width="1200" height="675" class="aligncenter size-full wp-image-9707" /></p>
<p>For demos, “spam” edged out the other choices. Demos mains saw it differently however, preferring the more neutral “drove”. Most of the write-ins made reference to the demo’s predilection for scrumpy. Like “keg”, which nicely doubles as a reference to explosive gunpowder. Another write-in, “charge”, is fitting for the demoknights headed your way.</p>
<p><span class="option">Spam</span><span class="progress"><span class="progress-bar" style="width: 42%;">42%</span></span><br />
<span class="option">Drove</span><span class="progress"><span class="progress-bar" style="width: 34%;">34%</span></span><br />
<span class="option">Kaboom</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span><br />
<span class="option">Detonation</span><span class="progress"><span class="progress-bar" style="width: 3%;">3%</span></span><br />
<span class="option">Domination</span><span class="progress"><span class="progress-bar" style="width: 2%;">2%</span></span></p>
<p>Write-Ins:<br />
Charge, Demonstration, Keg, Drunk, Flask, Patch</p>
<p>Demos call themselves:<br />
Drove</p>
<h2 id="heavy">Horde of Heavies</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/heavies.jpg" alt="Heavies" width="1200" height="675" class="aligncenter size-full wp-image-9709" /></p>
<p>For heavies, it was neck-and-neck between “horde” and “herd”, with “horde” on top by just 1 vote. Among the slow-moving, sandvich-munching heavy themselves, “herd” was more popular, proving that heavies have the best sense of humor. “Bevy” was an inspired write-in, and frankly should have been one of the original options on the survey.</p>
<p><span class="option">Horde</span><span class="progress"><span class="progress-bar" style="width: 30%;">30%</span></span><br />
<span class="option">Herd</span><span class="progress"><span class="progress-bar" style="width: 30%;">30%</span></span><br />
<span class="option">Mass</span><span class="progress"><span class="progress-bar" style="width: 19%;">19%</span></span><br />
<span class="option">Hulk</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span><br />
<span class="option">Heap</span><span class="progress"><span class="progress-bar" style="width: 6%;">6%</span></span></p>
<p>Write-Ins:<br />
Bevy, Pootis, Stampede, Pile, Huddle, Bulk, Bulge, Blob</p>
<p>Heavies call themselves:<br />
Herd</p>
<h2 id="engineer">Nest of Engineers</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/engies.jpg" alt="Engies" width="1200" height="675" class="aligncenter size-full wp-image-9708" /></p>
<p>For engineers, “nest” was a predictable outcome, since it already exists in the TF2 lexicon. It’s fitting all the same given that “nest” is also the collective noun for the turtle.</p>
<p><span class="option">Nest</span><span class="progress"><span class="progress-bar" style="width: 47%;">47%</span></span><br />
<span class="option">Hive</span><span class="progress"><span class="progress-bar" style="width: 19%;">19%</span></span><br />
<span class="option">Crew</span><span class="progress"><span class="progress-bar" style="width: 14%;">14%</span></span><br />
<span class="option">Rodeo</span><span class="progress"><span class="progress-bar" style="width: 7%;">7%</span></span><br />
<span class="option">Wrangle</span><span class="progress"><span class="progress-bar" style="width: 6%;">6%</span></span></p>
<p>Write-Ins:<br />
Hub, Network, Shed, Crib, Camp, Turtle, Mess</p>
<p>Engineers call themselves:<br />
Nest</p>
<h2 id="medic">Mob of Medics</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/medics.jpg" alt="Medics" width="1200" height="675" class="aligncenter size-full wp-image-9710" /></p>
<p>For medics, “mob” was the runaway choice, though you’re unlikely to ever actually see one in the wild. Most of the write-ins played off the idea of medicine, though several also made bird-like references due to the plague masks they sometimes wear.</p>
<p><span class="option">Mob</span><span class="progress"><span class="progress-bar" style="width: 42%;">42%</span></span><br />
<span class="option">Quack</span><span class="progress"><span class="progress-bar" style="width: 15%;">15%</span></span><br />
<span class="option">Prescription</span><span class="progress"><span class="progress-bar" style="width: 9%;">9%</span></span><br />
<span class="option">Mirage</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span><br />
<span class="option">Mend</span><span class="progress"><span class="progress-bar" style="width: 6%;">6%</span></span></p>
<p>Write-Ins:<br />
Dose, Ward, Triage, Chain, Uber, Practice, Flock, Gaggle, Crusade, Paradox</p>
<p>Medics call themselves:<br />
Mob</p>
<h2 id="sniper">Surplus of Snipers</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/snipers.jpg" alt="Snipers" width="1200" height="675" class="aligncenter size-full wp-image-9713" /></p>
<p>For snipers, “surplus” was the clear winner. On any given server, you’re more likely to see an excess of snipers than any other class, and plenty of people expressed their displeasure at this fact. Based on their votes, even sniper mains themselves recognized it.</p>
<p><span class="option">Surplus</span><span class="progress"><span class="progress-bar" style="width: 46%;">46%</span></span><br />
<span class="option">Score</span><span class="progress"><span class="progress-bar" style="width: 13%;">13%</span></span><br />
<span class="option">Society</span><span class="progress"><span class="progress-bar" style="width: 12%;">12%</span></span><br />
<span class="option">Shelter</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span><br />
<span class="option">Snivel</span><span class="progress"><span class="progress-bar" style="width: 4%;">4%</span></span></p>
<p>Write-Ins:<br />
Scope, Firing Squad, Battlement, Stand, Stakeout, Camper Van, Salvage, Teamful, Deadweight</p>
<p>Snipers call themselves:<br />
Surplus</p>
<h2 id="spy">Murder of Spies</h2>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2015/02/spies.jpg" alt="Spies" width="1200" height="675" class="aligncenter size-full wp-image-9715" /></p>
<p>For spies, “murder” was most popular, though spy mains prefer to call themselves a “syndicate”. Several write-ins deserve honorable mention, particularly “society”, “conspiracy”, “cloak”, and “spook”. A murder of spies is always a nightmare, for both teams. </p>
<p><span class="option">Murder</span><span class="progress"><span class="progress-bar" style="width: 33%;">33%</span></span><br />
<span class="option">Syndicate</span><span class="progress"><span class="progress-bar" style="width: 27%;">27%</span></span><br />
<span class="option">Sneak</span><span class="progress"><span class="progress-bar" style="width: 11%;">11%</span></span><br />
<span class="option">Slaughter</span><span class="progress"><span class="progress-bar" style="width: 8%;">8%</span></span><br />
<span class="option">Mischief</span><span class="progress"><span class="progress-bar" style="width: 5%;">5%</span></span></p>
<p>Write-Ins:<br />
Spook, Society, Conspiracy, Cloak, Shpee, Shadow, Smorgasborg, Shit-Ton</p>
<p>Spies call themselves:<br />
Syndicate</p>
<h3>Credits</h3>
<p>My thanks to <a href="http://steamcommunity.com/profiles/76561198085628990">sting.</a> for providing the artwork.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2014/02/tf2-collective/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>3 Simple Design Bookmarklets to Improve Your Aesthetics</title>
<link>https://thomaspark.co/2013/11/3-simple-design-bookmarklets-to-improve-your-aesthetics/</link>
<comments>https://thomaspark.co/2013/11/3-simple-design-bookmarklets-to-improve-your-aesthetics/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 11 Nov 2013 11:54:44 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=9197</guid>
<description><![CDATA[In math, you’re sometimes so focused on getting the calculations right that you end up with nonsensical answers without realizing it. In web design there’s a similar phenomenon, where you’re so intent on pixel perfection … <a href="https://thomaspark.co/2013/11/3-simple-design-bookmarklets-to-improve-your-aesthetics/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>In math, you’re sometimes so focused on getting the calculations right that you end up with nonsensical answers without realizing it. In web design there’s a similar phenomenon, where you’re so intent on pixel perfection that you lose sight of the bigger picture.</p>
<p>This is where Nick Pettit’s <a href="http://blog.teamtreehouse.com/3-simple-design-tests-to-improve-your-aesthetics" target="_blank" rel="noopener noreferrer">three “design tests”</a> come in — simple aesthetic exercises that serve as sanity checks for your website’s design. In the post, he suggests opening up a screenshot of your website in Photoshop, and applying the following filters:</p>
<ul>
<li><strong>Grayscale</strong> to gauge contrast between light and dark, rather than by colors</li>
<li><strong>Blurry</strong> to examine the composition of colors</li>
<li><strong>Upside-down</strong> to get a fresh perspective on composition and balance</li>
</ul>
<p>Fortunately, with CSS3 properties like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter" target="_blank" rel="noopener noreferrer">filter</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform" target="_blank" rel="noopener noreferrer">transform</a>, Photoshop is not required. All it takes are these simple bookmarklets to run the design tests right in your browser.</p>
<h3>Gray Effect</h3>
<pre>
<code class="language-javascript" lang="js">
javascript:(function(){
document.body.setAttribute('style',
'filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
-webkit-filter:grayscale(1);
filter:grayscale(1);'
);
})();
</code>
</pre>
<h3>Blur Effect</h3>
<pre>
<code class="language-javascript" lang="js">
javascript:(function(){
document.body.setAttribute('style',
'filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='10' /></filter></svg>#blur");
-webkit-filter:blur(10px);
filter:blur(10px);'
);
})();
</code>
</pre>
<h3>Flip Effect</h3>
<pre>
<code class="language-javascript" lang="js">
javascript:(function(){
document.body.setAttribute('style',
'-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
transform:rotate(180deg);'
);
})();
</code>
</pre>
<h3>The Bookmarklets</h3>
<p>Do these design tests make a difference? Judge for yourself by following the link below.</p>
<div class="center">
<a class="standard-btn red-btn xlarge-btn" href="https://thomaspark.co/projects/designbookmarklets/"><span>Demo</span></a>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2013/11/3-simple-design-bookmarklets-to-improve-your-aesthetics/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>GlyphSearch: Improving the Search for Icon Fonts</title>
<link>https://thomaspark.co/2013/11/glyphsearch-improving-the-search-for-icon-fonts/</link>
<comments>https://thomaspark.co/2013/11/glyphsearch-improving-the-search-for-icon-fonts/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 05 Nov 2013 14:52:47 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=9066</guid>
<description><![CDATA[Right now we’re blessed with many, well, awesome icon fonts that continue to grow with every release, like Font Awesome, Glyphicons, and Ionicons. And game-changers like Iconic might be just around the bend. But searching … <a href="https://thomaspark.co/2013/11/glyphsearch-improving-the-search-for-icon-fonts/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Right now we’re blessed with many, well, awesome icon fonts that continue to grow with every release, like <a href="http://fontawesome.io/">Font Awesome</a>, <a href="http://glyphicons.com/">Glyphicons</a>, and <a href="http://ionicons.com/">Ionicons</a>. And game-changers like <a href="http://useiconic.com/">Iconic</a> might be just around the bend. But searching through this abundance of icons one by one often leads me to tedium and eye strain.</p>
<p>Sure, I can use the browser’s find function or the in-page search filter to search a library. But unless I match the class name exactly, it won’t be found. This is a problem <a href="http://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/">I’ve talked about before</a>, and one that Font Awesome takes some steps to address by aliasing icon names. But then I compare multiple libraries, deliberating on which to use based on coverage and design, and this problem multiplies.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/11/speedometers.png" alt="Speedometers" width="800" height="200" class="aligncenter size-full wp-image-9080" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/11/speedometers.png 800w, https://thomaspark.co/wp/wp-content/uploads/2013/11/speedometers-300x75.png 300w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>To scratch this itch of mine, this past weekend I created <a href="http://glyphsearch.com/">GlyphSearch</a>.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-1600x1081.png" alt="GlyphSearch" width="800" height="541" class="aligncenter size-large wp-image-13713" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-1600x1081.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-800x540.png 800w, https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-768x519.png 768w, https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-1536x1037.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-2048x1383.png 2048w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>It allows you to search Font Awesome, Glyphicons, and Ionicons simultaneously, and icons have been tagged with additional terms, meaning for example that all three of the icons above should be found regardless of whether you query for “tachometer”, “dashboard”, or “speedometer”. You can also click an icon to quickly copy the class name to your clipboard.</p>
<div class="center">
<a class="standard-btn red-btn xlarge-btn" href="http://glyphsearch.com"><span>GlyphSearch</span></a>
</div>
<p>GlyphSearch is about as minimal a tool as I could make for this, but it gets the job done for me, and hopefully you agree. I was tempted to add settings like font size and color but resisted; if there’s any demand, let me know.</p>
<h3>Notes</h3>
<p>Besides the icon font libraries themselves, I use <a href="http://www.algolia.com/">Algolia</a> for search and <a href="http://bootswatch.com/flatly/">Flatly</a> for styles. The project is hosted on <a href="https://github.com/thomaspark/glyphsearch">GitHub</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2013/11/glyphsearch-improving-the-search-for-icon-fonts/feed/</wfw:commentRss>
<slash:comments>11</slash:comments>
</item>
<item>
<title>Weaving Tutorials into Mozilla Thimble</title>
<link>https://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/</link>
<comments>https://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 22 Oct 2013 14:56:52 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Learning]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=8906</guid>
<description><![CDATA[I’m headed to Mozilla Festival this week, after spending the summer working for Mozilla Webmaker. Everything at Webmaker is a team effort, so I helped out on a number of projects and had a blast … <a href="https://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I’m headed to <a href="http://mozillafestival.org/">Mozilla Festival</a> this week, after spending the summer working for <a href="https://webmaker.org/">Mozilla Webmaker</a>. Everything at Webmaker is a team effort, so I helped out on a number of projects and had a blast doing it. But I wanted to document my main effort — adding a tutorial feature to Thimble — from design to research to implementation.</p>
<h2>Designing Tutorials</h2>
<p><a href="https://thimble.webmaker.org/">Thimble</a> is a web-based editor that makes it dead simple to create and publish web pages. It’s often used to teach web development to beginners, with educators relying on HTML comments to provide inline explanations of the code. This summer, our goal was to give Thimble explicit support for this kind of instruction.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/10/thimble.png" alt="Thimble" width="1412" height="975" class="aligncenter size-full wp-image-8958" /></p>
<p>I started out the process by sketching mockups of potential designs with pen and paper. While I already had a sense of what direction I wanted to take it, this was colored mostly by unsupported assumptions and personal preferences. So instead I took a breadth-first approach, exploring many different designs and making use of user testing.</p>
<p>Eventually, I settled on five designs. Some, like Sidebar and Drawer, are already commonplace in coding environments. Others, like Expander, have more distant inspirations like Google Images and iTunes. I then turned these into functional prototypes. Some smoke and mirrors may have been involved.</p>
<p>You can hover over a mockup below to see how the eventual prototype turned out, and click to try it out for yourself.</p>
<div class="two-columns-one">
<h3 style="margin: 1em 0 0; text-align: center;">Palette</h3>
<div class="crossfade">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/palette-prototype.jpg" alt="Palette Prototype" width="1314" height="982" class="aligncenter size-full wp-image-8882" /><br />
<a href="http://polar-tor-6216.herokuapp.com/examples/palette.html" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/palette-mockup.jpg" alt="Palette Mockup" width="1314" height="982" class="aligncenter size-full wp-image-8881 top" /></a>
</div>
</div>
<div class="two-columns-one last">
<h3 style="margin: 1em 0 0; text-align: center;">Sidebar</h3>
<div class="crossfade">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/sidebar-prototype.jpg" alt="Sidebar Prototype" width="388" height="290" class="aligncenter size-full wp-image-8886" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/09/sidebar-prototype.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/sidebar-prototype-300x224.jpg 300w" sizes="auto, (max-width: 388px) 100vw, 388px" /><br />
<a href="http://polar-tor-6216.herokuapp.com/examples/sidebar.html" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/sidebar-mockup.jpg" alt="Sidebar Mockup" width="388" height="290" class="aligncenter size-full wp-image-8885 top" /></a>
</div>
</div>
<div class="two-columns-one">
<h3 style="margin: 1em 0 0; text-align: center;">Drawer</h3>
<div class="crossfade">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/drawer-prototype.jpg" alt="Drawer Prototype" width="388" height="290" class="aligncenter size-full wp-image-8880" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/09/drawer-prototype.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/drawer-prototype-300x224.jpg 300w" sizes="auto, (max-width: 388px) 100vw, 388px" /><br />
<a href="http://polar-tor-6216.herokuapp.com/examples/drawer.html" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/drawer-mockup.jpg" alt="Drawer Mockup" width="388" height="290" class="aligncenter size-full wp-image-8879 top" /></a>
</div>
</div>
<div class="two-columns-one last">
<h3 style="margin: 1em 0 0; text-align: center;">Popover</h3>
<div class="crossfade">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/popover-prototype.jpg" alt="Popover Prototype" width="388" height="290" class="aligncenter size-full wp-image-8884" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/09/popover-prototype.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/popover-prototype-300x224.jpg 300w" sizes="auto, (max-width: 388px) 100vw, 388px" /><br />
<a href="http://polar-tor-6216.herokuapp.com/examples/popover.html" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/popover-mockup.jpg" alt="Popover Mockup" width="388" height="290" class="aligncenter size-full wp-image-8883 top" /></a>
</div>
</div>
<div class="two-columns-one">
<h3 style="margin: 1em 0 0; text-align: center;">Expander</h3>
<div class="crossfade">
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/expander-prototype.jpg" alt="Expander Prototype" width="388" height="290" class="size-full wp-image-8862" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/09/expander-prototype.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/expander-prototype-300x224.jpg 300w" sizes="auto, (max-width: 388px) 100vw, 388px" /><br />
<a href="http://polar-tor-6216.herokuapp.com/examples/expander.html" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/09/expander-mockup.jpg" alt="Expander Mockup" width="388" height="290" class="size-full wp-image-8864 top" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/09/expander-mockup.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/expander-mockup-300x224.jpg 300w" sizes="auto, (max-width: 388px) 100vw, 388px" /></a>
</div>
</div>
<div class="divider"></div>
<h2>Getting User Feedback</h2>
<p>Next, I wanted to learn about users’ perceptions of the designs. To get as many people trying out the prototypes as possible, we ran an online survey. Respondents completed basic tasks using all five of the prototypes, as well as the HTML comments version as a baseline, in randomized order. They then rated them and answered a few brief questions.</p>
<p>92 responses were accepted, from 12 females and 80 males. Respondents averaged 25 years of age, ranging from 16 to 52, and representing 16 different countries.</p>
<p>The graph below shows the average ranking given for each design on a scale of 1 to 5. As you can see, Sidebar was most preferred, followed by the similarly conventional Drawer.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsoverall.png" alt="Ratings Overall" width="800" height="500" class="aligncenter size-full wp-image-9041" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsoverall.png 800w, https://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsoverall-300x188.png 300w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<p>Breaking down responses by 17 novices versus 75 experienced coders of HTML, the trends hold for the most part. But Expander is a notable exception, its highly guided interface far more popular with beginners than experts. I should also note that Expander was the most complex design, and its prototype the most rough-around-the-edges, leaving plenty of room for improvement.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsbyexperience.png" alt="Ratings by Experience" width="800" height="500" class="aligncenter size-full wp-image-9040" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsbyexperience.png 800w, https://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsbyexperience-300x188.png 300w" sizes="auto, (max-width: 800px) 100vw, 800px" /></p>
<h2>Implementing Tutorials</h2>
<p>Based on these results, we built the Sidebar design. (For the record, my hunch at the outset was to go with Drawer.)</p>
<p>Basic functionality includes displaying the tutorial in a pane, toggling it into and out of view, toggling between two sizes, and switching between tutorials if multiple ones are associated with a document. You can see the results below. </p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/10/thimbletutorials.png" alt="Thimble Tutorials" width="1456" height="975" class="aligncenter size-full wp-image-8975" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/10/thimbletutorials.png 1456w, https://thomaspark.co/wp/wp-content/uploads/2013/10/thimbletutorials-300x201.png 300w, https://thomaspark.co/wp/wp-content/uploads/2013/10/thimbletutorials-1024x686.png 1024w" sizes="auto, (max-width: 1456px) 100vw, 1456px" /></p>
<p>I also created options to automatically paginate a tutorial and enable a feature dubbed smartlines, which detects line references in the tutorial, turns them into links that highlight the relevant line of code on hover and smooth-scroll to it on click, and updates their line number as the code is edited. The resize button, smooth-scrolling, and moving the tutorial navigation from bottom to top are all a direct result of feedback given in the survey.</p>
<p>One interesting issue in implementing interactive behaviors across tutorial and code editor is that tutorials are displayed in a cross-domain iframe, even when that tutorial is another Thimble make. To overcome this, the tutorials must include a script that communicates with the editor via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage">postMessage</a>.</p>
<p>To implement all this, I had to learn the ropes in many systems, including <a href="https://github.com/mozilla/webmaker-suite">Webmaker Suite</a>, <a href="https://bugzilla.mozilla.org/">Bugzilla</a>, and libraries like <a href="http://requirejs.org/">RequireJS</a> and <a href="http://codemirror.net/">CodeMirror</a>.</p>
<p>The commit is found <a href="https://github.com/mozilla/thimble.webmaker.org/commit/ed516a25ad7beaf2f3c00f7283249c0d8ff0d71d">here on GitHub</a>.</p>
<h2>How to Use Tutorials Today</h2>
<p>As of this week, the tutorials feature is live! To link a tutorial to your own Thimble document, simply tag the document with the following, where the URL points to the tutorial:</p>
<pre>
<code class="markup">tutorial-http://foo.com</code>
</pre>
<p>Essentially any webpage can be used as a tutorial, but we provide a <a href="https://thimble.webmaker.org/projects/tutorial">starter tutorial</a> for you to remix and use. This starter tutorial includes the aforementioned pagination and smartline features. Of course you can always go your own road and build your own tutorials in Thimble, taking HTML, CSS, and JS as far as they will go.</p>
<p>Here’s the <a href="https://support.mozilla.org/en-US/kb/thimble-tutorials">official SuMo article</a> and <a href="https://cynthiang.ca/2013/10/26/webmaker-education-friendly-tutorials-in-thimble/">Cynthia Ng’s excellent walkthrough</a>.</p>
<h2>Tutorials in Action</h2>
<p>Some examples of tutorials:</p>
<ul>
<li><a href="https://thimble.webmaker.org/project/22957/remix">Rainy day</a></li>
<li><a href="https://thimble.webmaker.org/project/22915/remix">Maps and geolocation</a></li>
<li><a href="https://thimble.webmaker.org/project/23585/remix">A todo app</a></li>
<li><a href="https://thimble.webmaker.org/project/21875/remix">Positioning zombies</a></li>
<li><a href="https://thomaspark.makes.org/thimble/tutorial-tutorial/remix">Tutorial on making tutorials</a></li>
<li><a href="https://thimble.webmaker.org/es/project/26537/edit">Tutorial on making tutorials en español</a></li>
</ul>
<h2>Future Directions</h2>
<p>Although the tutorial feature has landed, it’s far from finished. Among the features I hope to see are support for line ranges, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=928793">a more powerful way to associate line references with code</a>, an indicator for when a line is highlighted off-screen, draggable resizing, and state persistence. Line widgets in CodeMirror 3 also pave the way for Expander as an alternative interface.</p>
<p>On the research front, I’ve been looking for an excuse to conduct an eye-tracking study, and the different tutorial interfaces seem ripe for that kind of thing. And lest we forget, learning is a complicated phenomenon, and the survey only scratches the surface by probing first impressions. How the different designs impact understanding remains a wide open question.</p>
<h2>Acknowledgements</h2>
<p>My thanks to the Webmaker team, especially <a href="https://twitter.com/remixmanifesto">Brett Gaylor</a> for giving me the opportunity this summer, <a href="https://twitter.com/cassiemc">Cassie McDaniel</a> for helping get the research rolling, and <a href="https://twitter.com/TheRealPomax">Mike “Pomax” Kamermans</a> for his invaluable code reviews. And thanks to all of you who took the time to complete our survey.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>CRAPCHA: Completely Ridiculous And Phony Captcha that Hassles for Amusement</title>
<link>https://thomaspark.co/2013/04/crapcha-completely-ridiculous-and-phony-captcha-that-hassles-for-amusement/</link>
<comments>https://thomaspark.co/2013/04/crapcha-completely-ridiculous-and-phony-captcha-that-hassles-for-amusement/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 01 Apr 2013 12:08:46 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=8618</guid>
<description><![CDATA[We’ve all run into CAPTCHAs, those annoying registration fields you never get right on the first try. But CAPTCHAs do play a valuable role, keeping spambots out by verifying that you’re a human. On top … <a href="https://thomaspark.co/2013/04/crapcha-completely-ridiculous-and-phony-captcha-that-hassles-for-amusement/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>We’ve all run into <a href="http://en.wikipedia.org/wiki/CAPTCHA">CAPTCHAs</a>, those annoying registration fields you never get right on the first try. But CAPTCHAs do play a valuable role, keeping spambots out by verifying that you’re a human. On top of this, <a href="http://www.google.com/recaptcha">reCAPTCHA</a> serves a greater good, having you digitize old books in the process.</p>
<p>Meet CRAPCHA.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/04/crapcha.png" alt="CRAPCHA" width="395" height="215" class="aligncenter size-full wp-image-8809" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/04/crapcha.png 395w, https://thomaspark.co/wp/wp-content/uploads/2013/04/crapcha-300x163.png 300w" sizes="auto, (max-width: 395px) 100vw, 395px" /></p>
<p>CRAPCHA doesn’t serve a dual purpose. It barely serves a single purpose. And it isn’t to keep spammers out.</p>
<p>What CRAPCHA does is annoy users by presenting a CAPTCHA with indecipherable text. Nothing new so far? Well, CRAPCHA attempts are posted to the CRAPCHA board, providing amusement for all. You can even click on a timestamp to save one for posterity. Try it out for yourself:</p>
<div class="center">
<a class="standard-btn red-btn xlarge-btn" href="https://crapcha.com"><span>CRAPCHA</span></a>
</div>
<h4>Add To Your Site</h4>
<p>If you run a site and want to spring this on your unsuspecting guests, simply copy and paste the following code.</p>
<p><code lang="html4strict"><iframe src="https://crapcha.com/embed/" frameborder="0" scrolling="0" width="300" height="150"></iframe></code></p>
<p>Word of warning, CRAPCHA doesn’t actually validate anything. On the other hand, it’s fun.</p>
<h4>Notes</h4>
<p>CRAPCHAs are created using a mix of weird <a href="http://unicode-table.com/">Unicode</a> and <a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a> characters that have undergone CSS3 transforms.</p>
<p>Attempts are saved and retrieved using the lovely service provided by <del datetime="2018-04-30T15:46:18+00:00"><a href="https://parse.com/">Parse</a></del> <a href="https://firebase.google.com/">Firebase</a>.</p>
<p>You can check out CRAPCHA’s source on <a href="https://github.com/thomaspark/crapcha">Github</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2013/04/crapcha-completely-ridiculous-and-phony-captcha-that-hassles-for-amusement/feed/</wfw:commentRss>
<slash:comments>9</slash:comments>
</item>
<item>
<title>iRoll: Rickrolling with iPhone Web Apps</title>
<link>https://thomaspark.co/2013/03/iroll-rickrolling-with-iphone-web-apps/</link>
<comments>https://thomaspark.co/2013/03/iroll-rickrolling-with-iphone-web-apps/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sun, 31 Mar 2013 18:50:26 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Gadgets]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=8719</guid>
<description><![CDATA[One feature that’s often overlooked in iOS is adding webpages to your homescreen. You even get a nice retina icon if the webpage author designates one. Naturally, my mind went to how this feature could … <a href="https://thomaspark.co/2013/03/iroll-rickrolling-with-iphone-web-apps/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>One feature that’s often overlooked in iOS is adding webpages to your homescreen. You even get a nice retina icon if the webpage author designates one.</p>
<p>Naturally, my mind went to how this feature could be used for a prank: Replace legitimate app with fake. The fake looks exactly the same, but takes you to an annoying video instead. If you’re feeling really cruel, you surround the one real app with a screenful of imposters.</p>
<p>Spot the Instagram that <em>doesn’t</em> take you to a rendition of “Never Gonna Give You Up”.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/03/instagram.png" alt="Instagram" width="640" height="189" class="aligncenter size-full wp-image-8782" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/03/instagram.png 640w, https://thomaspark.co/wp/wp-content/uploads/2013/03/instagram-300x89.png 300w" sizes="auto, (max-width: 640px) 100vw, 640px" /></p>
<p>I started by making a one-off site, but as programmers tend to do, I decided to generalize it. The result is iRoll.</p>
<div class="center">
<a class="standard-btn red-btn xlarge-btn" href="https://thomaspark.co/projects/iroll/"><span>iRoll</span></a>
</div>
<h2>How to Use</h2>
<p>First, choose an app or enter a custom app ID — it uses this to grab any app’s name and icon. To find an app ID, go to the app in iTunes, right-click on the icon to copy the link, and then get the 9-digit number in the URL. For example, the app ID in the link below is 585259203.</p>
<p><code>https://itunes.apple.com/us/app/super-stickman-golf-2/id585259203?mt=8</code></p>
<p>Next, give iRoll a destination URL. This can be a Rick Astley video, a Rick Astley image, or anything else on the web.</p>
<p>Then, open the generated link on the target iPhone or iPad. You can email or manually type the shortened URL, or snap the QR code using a <a href="https://itunes.apple.com/us/app/qr-reader-for-iphone/id368494609?mt=8">QR reader app</a>.</p>
<p>Finally, open the link in Safari and save it to the home screen. In Safari, you’ll find the option by tapping the Send button, which you might have used before to email or tweet a link.</p>
<h2>Let’s Talk Design</h2>
<p>Technically speaking, iRoll is simple. It takes two inputs, app ID and destination URL, and formats a webpage with the app’s title and touch icon, and a redirect to the destination URL.</p>
<p>But <em>using</em> iRoll can be surprisingly complicated task, especially for the average end user. Sit Grandma down, and have her find an app ID, copy a link from her laptop to phone, and add the page to her home screen. See how that plays out.</p>
<p>So how did I design iRoll to simplify the task for users?</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2013/03/iroll.png" alt="iRoll" width="1335" height="916" class="aligncenter size-full wp-image-8788" srcset="https://thomaspark.co/wp/wp-content/uploads/2013/03/iroll.png 1335w, https://thomaspark.co/wp/wp-content/uploads/2013/03/iroll-300x206.png 300w, https://thomaspark.co/wp/wp-content/uploads/2013/03/iroll-1024x703.png 1024w" sizes="auto, (max-width: 1335px) 100vw, 1335px" /></p>
<h3>Progressive Disclosure</h3>
<p>iRoll takes advantage of <a href="http://en.wikipedia.org/wiki/Progressive_disclosure">progressive disclosure</a>. The task of creating a fake app is presented in simple, discrete steps. As you complete one step, the next comes into view, avoiding the overload that might come with presenting them all at once.</p>
<p>Take advantage of the third dimension. By that I don’t mean the z-axis — which is often ill-advised, but time.</p>
<h3>Sensible Presets</h3>
<p>iRoll’s design started with two input fields, for the app ID and destination URL. Simple! But getting an app ID is fairly involved, from the nonobvious way to copy an app’s link, to visually parsing the 9-digit number from it. On top of that, there’s a great deal of cognitive load in <em>choosing</em> an app.</p>
<p>To address this, iRoll provides a few preset options for both app and URL. They lower the bar to getting started with iRoll, and signal to users how it can be used.</p>
<p>Provide options that cover what you assume to be the “fat head”, while offering freer input for the “long tail”.</p>
<h3>Little Big Details</h3>
<p>Finally, the main use case for iRoll is generating a link on your PC, and then copying it over to your iPhone or iPad. Unfortunately, moving digital data like a URL from one device to another still involves a great deal of friction. Recognizing this, I provided a shortened URL and a QR code.</p>
<p>Look for the <a href="http://littlebigdetails.com/">little touches</a> that can oil the wheels, or simply delight.</p>
<p>It goes to show that what’s initially a simple app to build can morph a great deal once the user experience is taken into consideration.</p>
<h2>Notes</h2>
<p>App names and icons are pulled from Apple’s <a href="http://www.apple.com/itunes/affiliates/resources/documentation/itunes-store-web-service-search-api.html">iTunes Search API</a>.</p>
<p>URLs are shortened using the <a href="http://is.gd/developers.php">is.gd API</a>.</p>
<p>There are a few JavaScript libraries out there for generating QR codes, but <a href="http://hg.mearie.org/qrjs/">qr.js by Kang Seonghoon</a> worked best for me.</p>
<p>Check out the source code on <a href="https://github.com/thomaspark/iroll">GitHub</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2013/03/iroll-rickrolling-with-iphone-web-apps/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Cinnamon.js: Find In-Page Text using Synonyms</title>
<link>https://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/</link>
<comments>https://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 07 Feb 2013 13:14:30 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=8440</guid>
<description><![CDATA[A visitor to your site decides to follow you on Twitter. You have a link in your footer — but their search for “Twitter” comes up empty and they move on. Unfortunately, you named the … <a href="https://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>A visitor to your site decides to follow you on Twitter. You have a link in your footer — but their search for “Twitter” comes up empty and they move on. Unfortunately, you named the link “@username” instead.</p>
<p><a href="https://github.com/thomaspark/cinnamon.js">Cinnamon.js</a> prevents just this situation, taking some of the pain out of naming things. It allows users to find links, images, and other content by their synonyms, using the browser’s built-in Find function.</p>
<h4>Demo</h4>
<p>To see it in action, search this page for “Twitter”, “Spice”, “Email”, or “Contact”.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus orci ut mi laoreet rhoncus. Pellentesque congue urna tincidunt tortor rhoncus dapibus. Duis faucibus dolor a sem ultrices at facilisis risus cursus. Cras vel euismod nisl. Ut vitae risus et libero sagittis ultrices et vitae ligula. Follow me at <a href="https://twitter.com/thomashpark" data-cinnamon="Twitter">@thomashpark</a>. Aliquam at turpis id diam placerat consequat at vitae est. Aenean tellus magna, lacinia vitae facilisis facilisis, egestas ut sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <span data-cinnamon="Email,Contact">Reach</span> me <a href="mailto:[email protected]">here</a>. Donec tincidunt dapibus dui luctus rhoncus. Nam sagittis egestas blandit. Nulla imperdiet tincidunt enim, a tempus sapien volutpat a. Maecenas sed elit ipsum, ut tristique odio. Suspendisse potenti.</p>
<p><span data-cinnamon="Spice"><img decoding="async" src="https://farm4.staticflickr.com/3039/2660995478_fa23f10c6e.jpg" alt="Cinnamon"></span><br />Photo by <a href="https://www.flickr.com/photos/27369469@N08/2660995478/">kobiz7</a></p>
</blockquote>
<h4>Download</h4>
<p>You can download the script or view it on GitHub below.</p>
<div class="center">
<a class="standard-btn red-btn xlarge-btn" href="https://raw.github.com/thomaspark/cinnamon.js/master/cinnamon.min.js"><span>Download</span></a> <a class="standard-btn black-btn xlarge-btn" href="https://github.com/thomaspark/cinnamon.js"><span>GitHub</span></a>
</div>
<h4>Usage</h4>
<p>Add Cinnamon.js just before your body’s end tag. Then wrap your element of choice (span tags are recommended) and give it a data-cinnamon attribute with a comma-separated list of synonyms as its value. If you wrap an image, its alt text will also be used, as in the image above. Cinnamon.js works on modern browsers and IE8+.</p>
<p>Here’s an example:</p>
<pre>
<code lang="html" class="lang-markup"><span data-cinnamon="Azure,Cerulean,Cobalt">Blue</span></code>
</pre>
<h4>Notes</h4>
<p>This is meant to be a proof of concept, and you probably shouldn’t use it in production. <a href="http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353">Hidden text</a>, used deceptively, can be penalized by Google. Precisely what’s counted as deception is anyone’s guess, but there’s a risk that it’s deemed a dirty SEO tactic even if it is not intended as such.</p>
<p>Cinnamon.js doesn’t hurt accessibility; it uses <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden">aria-hidden</a> to tell screen readers to ignore the synonyms.</p>
<p>In the course of testing, one thing I discovered was that Safari handles in-page search quite differently from other browsers. Safari doesn’t search for strings mid-word unless the word uses CamelCase. When highlighting matched text, it ignores certain CSS properties like overflow, opacity, and z-index. Highlighting is semi-disabled by setting -webkit-user-select to none.</p>
<p>Check out the <a href="https://github.com/thomaspark/cinnamon.js/blob/master/cinnamon.js">source</a> to see how it works.</p>
<p>Some questions: Do regular people even use their browser’s Find function? Is the user’s reliance on the Find function a symptom of poor design, or is there room for better in-page search as there has been for site and web search?</p>
<h4>Updates</h4>
<ul>
<li><strong>26 February 2013:</strong> I wrote an article with <a href="http://robertnyman.com/">Robert Nyman</a> about this for <a href="https://hacks.mozilla.org/2013/02/finding-words-by-synonym-with-cinnamon-js/">Mozilla Hacks</a>.
<li><strong>5 March 2013:</strong> <a href="http://www.artiss.co.uk/">David Artiss</a> has packaged Cinnamon.js up as <a href="http://wordpress.org/extend/plugins/cinnamon/">a WordPress plugin</a>.
<li><strong>25 March 2013:</strong> Michael Kutschall is making some promising strides with an empty font approach. He goes into more detail in <a href="http://www.chaotic-good.de/sandbox/cinnamon.php">a blog post</a>.
</ul>
<p><script type="text/javascript" src="https://thomaspark.co/projects/cinnamon.js/cinnamon.js"></script></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/feed/</wfw:commentRss>
<slash:comments>20</slash:comments>
</item>
<item>
<title>Digitizing Books on the Cheap and Easy</title>
<link>https://thomaspark.co/2012/12/digitizing-books-on-the-cheap-and-easy/</link>
<comments>https://thomaspark.co/2012/12/digitizing-books-on-the-cheap-and-easy/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 19 Dec 2012 16:15:41 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=8186</guid>
<description><![CDATA[In 2011, for the first time, Amazon sold more Kindle ebooks than paperbacks. Last June, ebook sales surpassed hardcovers for all of the US. The futurist dream of a paperless world is slowly but surely … <a href="https://thomaspark.co/2012/12/digitizing-books-on-the-cheap-and-easy/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>In 2011, for the first time, Amazon sold more Kindle ebooks than paperbacks. Last June, ebook sales surpassed hardcovers for all of the US. The futurist dream of a paperless world is slowly but surely becoming reality.</p>
<p>With books, there are downsides to going digital, but perhaps the greatest upside is that they become omnipresent. You can load up <em>all</em> your books on <em>all</em> your devices. A thousand ebooks weigh the same and take up the same physical space as one. Anyone who’s dealt with textbooks or moved recently will attest to the value in that.</p>
<p>Unfortunately, not all books are available in digital format, and may never be. And you’ve got all these expensive books already sitting on the shelf. You could DIY and build your own book scanner (costing anywhere from <a href="http://www.instructables.com/id/DIY-High-Speed-Book-Scanner-from-Trash-and-Cheap-C/?ALLSTEPS">$300</a> to <a href="http://www.theverge.com/2012/11/13/3639016/google-books-scanner-vacuum-diy">$1,500</a>), but is there an easier way?</p>
<h4>At Your Service</h4>
<p>Enter <a href="http://1dollarscan.com/">1DollarScan</a>. As their name suggests, books can be scanned for as little as $1. How it works is that you mail them your book, and they scan it and send it back as a PDF.</p>
<p>This is a destructive process, where the book spine is cut off to improve and expedite scanning. In other words, you won’t be seeing your book again. If that’s a dealbreaker, there are <a href="http://www.blueleaf-book-scanning.com/">services offering a non-destructive option</a>, but expect to pay a premium.</p>
<p>Pricing is $1 per 100-page “set”. Options include OCR for $1 per set, high resolution (600 dpi) for $2 per set, and touch-up such as angle correction and compression for $2 per set. There’s also a free automated feature called Fine Tune that optimizes scans for target devices like the iPhone, iPad, Kindle, and Nook.</p>
<h4>A First Pass</h4>
<p>I have several books I’d like to digitize, but started with <a href="http://www.amazon.com/Interaction-Design-Beyond-Human-Computer/dp/0470665769/">Interaction Design: Beyond Human-Computer Interaction</a>. It’s a book I use at regular but infrequent intervals, weighs in at a hefty 3 pounds and 600 pages, and for which an official ebook is not available. This makes it a prime candidate.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-book.jpg" alt="Interaction Design book" width="960" height="640" class="aligncenter size-full wp-image-8418" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-book.jpg 960w, https://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-book-300x200.jpg 300w" sizes="auto, (max-width: 960px) 100vw, 960px" /></p>
<h6>Quality</h6>
<p>Here’s how the scan turned out. The <a href="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-1dollarscan.pdf">PDF</a> shows exactly how it looks. As you can see, it’s very good quality. My only criticisms are that the scan is slightly askew, and the text is fainter than I’d like it to be (possibly due to the slightly glossy finish of the pages). There’s the touch-up option that promises to be even better, but I was satisfied without it.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-1dollarscan.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-1dollarscan-701x960.png" alt="Interaction Design - 1DollarScan" width="700" height="960" class="aligncenter size-large wp-image-8338 border" /></a></p>
<p>Just for fun, here’s what you get with <a href="http://books.google.com/books?id=b-v_6BeCwwQC&printsec=frontcover&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false">Google Books</a>, who does their own scanning:</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-googlebooks.jpg"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-googlebooks-754x960.jpg" alt="Interaction Design - Google Books" width="700" height="891" class="aligncenter size-large wp-image-8343 border" /></a></p>
<p>And the scan of the 2nd edition I was working with before:</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-manual.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-manual-743x960.png" alt="interactiondesign-manual" width="743" height="960" class="aligncenter size-large wp-image-8347" /></a></p>
<h6>OCR</h6>
<p>OCR is key for being able to search within a book and copy text out of it. I sprang for the option so I could compare their job (top) with my own using Adobe Acrobat Pro 8 (bottom). Both do an excellent job, with only an extraneous space added in the header by Acrobat. However, notice that 1DollarScan’s OCR leaves hyphenation as is, while Acrobat joins each word together. This gives Acrobat the edge in finding these words in a text search.</p>
<blockquote>
<pre>
11.7.1 Design Patterns for Interaction Design
Design patterns capture experience, but they have a different structure and a different phi-
losophy from other forms of guidance or specific methods. One of the intentions of the pat-
terns community is to create a vocabulary, based on the names of the patterns, that designers
can use to communicate with one another and with users. Another is to produce a literature
in the field that documents experience in a compelling form.
The idea of patterns was first proposed by Christopher Alexander, a British architect
who described patterns in architecture. His hope was to capture the 'quality without a name'
that is recognizable in something when you know it is good.
</pre>
</blockquote>
<blockquote>
<pre>
11.<span style="color: red;"> 7</span>.1 Design Patterns for Interaction Design
Design patterns capture experience, but they have a different structure and a different philosophy
from other forms of guidance or specific methods. One of the intentions of the patterns
community is to create a vocabulary, based on the names of the patterns, that designers
can use to communicate with one another and with users. Another is to produce a literature
in the field that documents experience in a compelling form.
The idea of patterns was first proposed by Christopher Alexander, a British architect
who described patterns in architecture. His hope was to capture the 'quality without a name'
that is recognizable in something when you know it is good.
</pre>
</blockquote>
<p>Here’s another comparison of 1DollarScan’s OCR (top) with Acrobat Pro’s (bottom), for a different font. They make the same four errors.</p>
<blockquote>
<pre>
Figure 11.23 The LilyPad Arduino kit. <span style="color: red;">l</span>t comprises sensors, actuator boards, and conductive threa<span style="color: red;">o</span>.
Online tutorials are available that enable anyone to build their own (see web.media.mit.edu/<span style="color: red;">-</span>leah/
LilyPad/build/turn_signaljacket.<span style="color: red;"> h</span>tml)
</pre>
</blockquote>
<blockquote>
<pre>
Figure 11.23 The LilyPad Arduino kit. <span style="color: red;">l</span>t comprises sensors, actuator boards, and conductive threa<span style="color: red;">o</span>.
Online tutorials are available that enable anyone to build their own (see web.media.mit.edu/<span style="color: red;">-</span>leah/
LilyPad/build/turn_signaljacket.<span style="color: red;"> h</span>tml)
</pre>
</blockquote>
<p>My advice is to skip the OCR option and run it yourself if you have a program for it.</p>
<h6>Fine Tune</h6>
<p>Fine Tune is a free service offered by 1DollarScan that targets specific devices through compression, margin removal, resolution optimization, and character optimization. The original scan comes in at 332 MB, compared to the iPad at 88 MB, iPhone at 63 MB, and Kindle at 30 MB. The iPad-optimized version looks pretty close to the original. On other devices, there are more substantial changes.</p>
<p>Here’s a comparison for the iPhone, with the original on the left and the fine-tuned version on the right. The margins, including running headers and page numbers, have been cropped out. It doesn’t account for the iPhone 5’s larger screen yet however.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-iphone.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-iphone-280x600.png" alt="Interaction Design - iPhone" width="280" height="600" class="aligncenter size-medium wp-image-8384" /></a></p>
<p>And here’s a comparison for the Kindle Touch.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-kindle.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-kindle-470x600.png" alt="Interaction Design - Kindle" width="470" height="600" class="aligncenter size-medium wp-image-8385" /></a></p>
<p>It’s a tough call. The optimized version has a smaller file size and makes better use of screen real estate, but there is noticeable artifacting and distortion. Since it’s free, you can try both out and decide for yourself.</p>
<h6>Price</h6>
<p>With 6 sets and the OCR option, the total came to $12. Shipping via media mail tacked on $3. Not one dollar by any means, but not costly either. And by far the cheapest book scanning service out there. For a 200-page book without OCR, you’re looking at about $4 including shipping.</p>
<h6>Turnaround</h6>
<p>1DollarScan is located in California. With media mail, it took 8 days for the book to reach them from Philadelphia. Once it arrived, turnaround was a single day.</p>
<h6>Legality</h6>
<p>Scanning a book you have legally acquired for personal usage would appear to fall under fair use, just the same as ripping a CD you’ve bought. 1DollarScan requires you to include <a href="http://1dollarscan.com/pdf/user_agreement.pdf">a signed agreement form</a> with the book declaring the same.</p>
<h4>Parting Thoughts</h4>
<p>For certain books, there’s no substitute for touch of the printed page. But for most, the convenience of an ebook trumps all. And as the technology and design of ebooks marches forward, while publishers use cheaper and cheaper materials for print, this will increasingly be the case.</p>
<p>If you’re considering digitization, <a href="http://1dollarscan.com/">1DollarScan</a> is a good choice. In fact, I’ve got a few more books on the shelf that I intend to get scanned in the near future.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-ipad.jpg" alt="Interaction Design iPad" width="960" height="640" class="aligncenter size-full wp-image-8419" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-ipad.jpg 960w, https://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-ipad-300x200.jpg 300w" sizes="auto, (max-width: 960px) 100vw, 960px" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/12/digitizing-books-on-the-cheap-and-easy/feed/</wfw:commentRss>
<slash:comments>19</slash:comments>
</item>
<item>
<title>The iTunes Expanding Album Effect</title>
<link>https://thomaspark.co/2012/12/the-itunes-expanding-album-effect-in-css-js/</link>
<comments>https://thomaspark.co/2012/12/the-itunes-expanding-album-effect-in-css-js/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 12 Dec 2012 12:56:35 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[User Interface]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=8078</guid>
<description><![CDATA[iTunes 11 marks a significant departure from previous versions. While many of the changes are problematic (another post for another time), I want to focus on one positive: the expanding album effect. Similar to folders … <a href="https://thomaspark.co/2012/12/the-itunes-expanding-album-effect-in-css-js/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>iTunes 11 marks a significant departure from previous versions. While many of the changes are problematic (another post for another time), I want to focus on one positive: the expanding album effect.</p>
<p>Similar to folders in iOS, this effect lets users to scan a list of items and open one up in place. This has advantages over more traditional pop-up windows and mode changes, which can obscure content and cause the user to lose their place in the list.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/itunes11.png" alt="iTunes 11" width="960" height="854" class="aligncenter size-full wp-image-8079" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/12/itunes11.png 960w, https://thomaspark.co/wp/wp-content/uploads/2012/12/itunes11-300x267.png 300w" sizes="auto, (max-width: 960px) 100vw, 960px" /></p>
<p>A second aspect of this feature is that it uses content to enhance the chrome. In the detailed view, the background and text colors are generated algorithmically from album art. This not only serves a practical purpose in making the detailed view stand out from the list, but creates a nice (in most cases) aesthetic effect and a sense of feeling that differentiates one album from the next. The intrepid Seth Thompson and Wade Cosgrove have already recreated this, using <a href="http://stackoverflow.com/questions/13637892/how-does-the-algorithm-to-color-the-song-list-in-itunes-11-work">Mathematica</a> and <a href="http://www.panic.com/blog/2012/12/itunes-11-and-colors/">Cocoa</a> respectively. Apple’s algorithm, it turns out, is pretty sophisticated.</p>
<p>Here’s my take, using HTML, CSS, and Javascript.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/12/expandingalbums.png" alt="Expanding Albums Demo" width="1159" height="918" class="aligncenter size-full wp-image-8133" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/12/expandingalbums.png 1159w, https://thomaspark.co/wp/wp-content/uploads/2012/12/expandingalbums-300x238.png 300w, https://thomaspark.co/wp/wp-content/uploads/2012/12/expandingalbums-1024x811.png 1024w" sizes="auto, (max-width: 1159px) 100vw, 1159px" /></p>
<p>And you can check it out for yourself here:</p>
<div class="center"><a class="standard-btn red-btn xlarge-btn" href="https://thomaspark.co/projects/expandingalbums/"><span>Demo</span></a></div>
<h4>Details</h4>
<p>The demo is built with <a href="http://app-folders.com/">App Folders</a>, with behavior and style modified to mimic iTunes. <a href="http://lokeshdhakar.com/projects/color-thief/">Color Thief</a> is used to derive colors on-the-fly from album art using a median cut algorithm. On top of this, I selected colors for acceptable contrast by converting RGB to YIQ, a color space that <a href="http://24ways.org/2010/calculating-color-contrast/">better reflects human perceptions</a>. Last but not least, <a href="http://mustache.github.com/">Mustache</a> is used to pull album data from a JSON file into templates.</p>
<p>I got to play with several exciting HTML5 and CSS3 properties in making this demo, including <a href="http://www.quirksmode.org/css/textoverflow.html">text-overflow</a>, <a href="http://www.quirksmode.org/css/multicolumn.html">multi-columns</a>, <a href="http://www.quirksmode.org/css/transitions.html">transitions</a>, <a href="http://www.quirksmode.org/css/animations.html">animations</a>, and canvas. Unfortunately, this means the demo requires a modern browser. The future can’t come fast enough.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/12/the-itunes-expanding-album-effect-in-css-js/feed/</wfw:commentRss>
<slash:comments>49</slash:comments>
</item>
<item>
<title>The Hacker News Slap</title>
<link>https://thomaspark.co/2012/10/the-hacker-news-slap/</link>
<comments>https://thomaspark.co/2012/10/the-hacker-news-slap/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sat, 20 Oct 2012 17:11:33 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=7678</guid>
<description><![CDATA[For those who aren’t familiar, Hacker News is a popular site where a community of techies discuss a wide range of topics. According to HN’s guidelines, on-topic submissions are “[a]nything that good hackers would find … <a href="https://thomaspark.co/2012/10/the-hacker-news-slap/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>For those who aren’t familiar, <a href="http://news.ycombinator.com/news">Hacker News</a> is a popular site where a community of techies discuss a wide range of topics. According to HN’s guidelines, on-topic submissions are “[a]nything that good hackers would find interesting. That includes more than hacking and startups. If you had to reduce it to a sentence, the answer might be: anything that gratifies one’s intellectual curiosity.”</p>
<p><span id="more-7678"></span>Getting your content on the HN front page can be <a href="http://swombat.com/2011/1/13/how-to-get-your-startup-on-hacker-news">a big deal</a>, a fact that hasn’t escaped spammers. To keep them at bay and maintain the quality of the site, moderators have had to be quite active. And whether you’re in agreement with it or not, it’s fair to say that they’ve operated opaquely, from <a href="https://jcs.org/notaweblog/2012/06/13/hellbanned_from_hacker_news/">hellbans</a> to <a href="http://techzinglive.com/page/1023/178-tz-discussion-the-hacker-news-slap">the slap</a> — where a submission rises to the front page, and just as quickly vanishes from it.</p>
<p>Mods can kill a submission and instantly send it into oblivion. But more marginal submissions can also be flagged by mods or users for being off topic, low-content fluff, spammy, or otherwise poor quality — or perfectly valid submissions by those who disagree with it. This can even happen to articles occupying the coveted top spot, with plenty of points and a lively discussion. If enough mods and users flag it, it’ll quietly slip down the rankings and off the front page.</p>
<p>From the perspective of the community, these are silent failures. They’re a missed opportunity to learn how the flag feature is being used and what content the community does (or more to the point, does not) value. If you’ve been visiting HN for awhile, you might feel that you’ve already developed a sense for how things work. But <a href="http://blog.rjmetrics.com/surprising-hacker-news-data-analysis/">as a recent analysis of HN shows</a>, the reality can surprise you.</p>
<h4>A User Script</h4>
<p>I wrote a <a href="http://userscripts.org/scripts/show/150452">user script</a> that highlights the submissions that have been on the receiving end of the slap. The script inserts scores based on the <a href="http://amix.dk/blog/post/19574">HN ranking algorithm</a>, a function of each submission’s points and age. Submissions ranked below others with half their score are highlighted in red; a rough heuristic but definitely indicative of being slapped down. Weaker candidates are highlighted in orange; while they may have penalized, it could also be explained by the algorithm being out-of-date or incomplete (it is).</p>
<p>The script also works on the <a href="http://www.domador.net/extras/services/hourly-hn-snapshot/">Hourly HN Snapshot archive</a>. Try it out on past frontpages, like <a href="http://hhn.domador.net/2011/10/27/10/">October 27, 2011</a>.</p>
<h4>Installation</h4>
<p>You can get the script here: <a href="http://userscripts.org/scripts/show/150452">http://userscripts.org/scripts/show/150452</a>.</p>
<p>Install it in Chrome either by downloading the file and dragging it into the Extensions tab (sadly, user scripts can no longer be installed directly), or through the extension <a href="https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo">Tampermonkey</a>. Firefox users can install through <a href="https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/">Greasemonkey</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/10/hn.png" alt="" title="Hacker News" width="727" height="521" class="alignnone size-full wp-image-7711" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/10/hn.png 727w, https://thomaspark.co/wp/wp-content/uploads/2012/10/hn-300x215.png 300w" sizes="auto, (max-width: 727px) 100vw, 727px" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/10/the-hacker-news-slap/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
<item>
<title>Learning to Code from Play by Play</title>
<link>https://thomaspark.co/2012/08/learning-to-code-from-play-by-play/</link>
<comments>https://thomaspark.co/2012/08/learning-to-code-from-play-by-play/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sun, 12 Aug 2012 19:17:03 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Learning]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=7489</guid>
<description><![CDATA[It’s a great time to learn to code. It seems as long as there’s been the web, there’s been text tutorials on coding. But now we’re seeing the rise of lecture videos (see iTunes U), … <a href="https://thomaspark.co/2012/08/learning-to-code-from-play-by-play/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>It’s a great time to learn to code.</p>
<p>It seems as long as there’s been the web, there’s been text tutorials on coding. But now we’re seeing the rise of lecture videos (see <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewTop?genreId=40000009&id=29666&popId=65" target="_blank">iTunes U</a>), massive open online courses (see <a href="https://www.coursera.org/" target="_blank">Coursera</a>), and interactive tutorials (see <a href="http://www.codecademy.com/" target="_blank">Codecademy</a>). I’ve sampled them all, but what’s hooked me lately is watching pros at work — most recently 37signals designer Ryan Singer as he <a href="https://peepcode.com/products/ryan-singer-ii" target="_blank">designs and prototypes a UI</a>.</p>
<p><span id="more-7489"></span>Aside from the satisfaction of watching a master of his craft, these videos offer learning opportunities that would be edited out in more structured tutorials and polished lectures. Here are a few things I picked up from the screencast, things I wouldn’t have gotten from other sources on the subject.</p>
<h4>Taking in the Environment</h4>
<p>Many tutorials skip over the tools, provide their own simplified version, or go with the standard and most widely used. And this may well be the right approach for beginners. But for those with a bit more experience, it can be both fascinating and instructive to peer into the environments that developers have shaped to their needs and idiosyncrasies.</p>
<ul>
<li>Ryan carries out the screencast on his own machine (or at least his loaner). For prototyping, he uses Rails to take advantage of SCSS and templates, along with the hassle-free dev server <a href="http://pow.cx/" target="_blank">Pow</a>.</li>
</ul>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/08/environment.png" alt="" title="Pow" width="1000" height="600" class="alignnone size-full wp-image-7628" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/08/environment.png 1000w, https://thomaspark.co/wp/wp-content/uploads/2012/08/environment-300x180.png 300w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /></p>
<h4>Tricks of the Trade</h4>
<p>While small tricks make good blog fodder, tutorials usually don’t leave room for them. Screencasts bring them to life, set in a greater context.</p>
<ul>
<li>Ryan would switch from code editor to Photoshop depending on what he wanted to mockup. On his Mac, he copied the browser window directly to clipboard a la Windows. I was familiar with <strong>command-shift-3</strong> to save a screenshot to file and <strong>command-shift-4</strong> to save a region, but didn’t know you could skip the file by adding <strong>control</strong> to each key combo.</li>
<li>In Photoshop, he experimented with the width of elements by selecting an edge, holding down <strong>command-option-shift</strong>, and then arrowing in the direction he wanted the element to expand. Another must-know for designers.</li>
</ul>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/08/photoshop.png" alt="" title="Photoshop" width="1000" height="600" class="alignnone size-full wp-image-7631" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/08/photoshop.png 1000w, https://thomaspark.co/wp/wp-content/uploads/2012/08/photoshop-300x180.png 300w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /></p>
<h4>Resolving Issues</h4>
<p>Screencasts often center on ill-defined problems that are rife with unanticipated issues. These issues can make for teachable moments in how to troubleshoot and resolve them effectively.</p>
<ul>
<li>At one point, Ryan wasn’t happy with where the header was breaking into two lines, but wanted to avoid a break tag if possible. The facilitator mentioned the <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/wbr" target="_blank">HTML5 word break opportunity element</a>, which neither Ryan or I were familiar with before.</li>
</ul>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/08/linebreak.png" alt="" title="Line break" width="1000" height="600" class="alignnone size-full wp-image-7632" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/08/linebreak.png 1000w, https://thomaspark.co/wp/wp-content/uploads/2012/08/linebreak-300x180.png 300w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /></p>
<h4>As an Aside</h4>
<p>Given airtime, most pros will inevitably expound on some higher level-issues about the field or community. In measured doses, these asides can be thought-provoking and reveal the bigger picture.</p>
<ul>
<li>Ryan discusses patterns for marking up sections like the one below. Do you tightly wrap the section content, or include the section header so the whole section is neatly encapsulated? He proposes a solution that’s sometimes used at 37signals, but explains that a good pattern hasn’t really been established yet.</li>
<li>A few minutes later, he talks about the semantic baggage that ordered and unordered lists bring compared to divs.</li>
</ul>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/08/markup.png" alt="" title="Markup" width="1000" height="600" class="alignnone size-full wp-image-7633" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/08/markup.png 1000w, https://thomaspark.co/wp/wp-content/uploads/2012/08/markup-300x180.png 300w" sizes="auto, (max-width: 1000px) 100vw, 1000px" /></p>
<h4>Conclusion</h4>
<p>I hope we see more of these videos of designers and developers in action. With so many people relying on online learning and parlaying that into professional work that might also be remote, these videos help recover some of the tacit knowledge that’s been lost in other, more refined resources.</p>
<p>If you haven’t already, check out previews for the rest of PeepCode’s <a href="https://peepcode.com/screencasts/play-by-play" target="_blank">Play by Play series</a>. Minecraft-creator <a href="http://www.mrspeaker.net/2011/09/27/notch-on-film" target="_blank">Notch’s marathon livestreams</a> are an epiphany, and Chris Coyier’s <a href="http://www.kickstarter.com/projects/150422311/screencasting-a-complete-redesign" target="_blank">redesign of CSS Tricks</a>, which has been successfully funded on Kickstarter, is another one to look forward to.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/08/learning-to-code-from-play-by-play/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>Apple Storefronts Redux</title>
<link>https://thomaspark.co/2012/07/apple-storefronts-redux/</link>
<comments>https://thomaspark.co/2012/07/apple-storefronts-redux/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 10 Jul 2012 02:37:06 +0000</pubDate>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=7095</guid>
<description><![CDATA[Last year, I posted a gallery of every Apple Store ever. It was a quick and dirty project, made on a whim. But it eventually took on a life of its own, getting coverage from … <a href="https://thomaspark.co/2012/07/apple-storefronts-redux/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Last year, I posted <a href="http://thomaspark.co/2011/11/every-apple-storefront/">a gallery of every Apple Store ever</a>. It was a quick and dirty project, made on a whim. But it eventually took on a life of its own, getting coverage from such heavyweights as <a href="http://www.macrumors.com/2011/11/09/gallery-of-storefront-photos-from-apples-357-retail-stores/" target="_blank">MacRumors</a>, <a href="http://gizmodo.com/5858264/every-single-apple-store-on-the-planet-in-under-60-seconds" target="_blank">Gizmodo</a>, and <a href="http://techland.time.com/2011/11/10/check-out-every-apple-store-ever-opened-in-order/" target="_blank">Time</a> (in that order).</p>
<p><span id="more-7095"></span> If I knew so many eyeballs would be on it, I’d have spent more time getting things right. It looked nice enough, but I knew that it didn’t work right. After that initial wave of attention subsided however, I decided to leave well enough alone, apart from adding the odd new store. It was a side project after all.</p>
<p>And that went fine, until <a href="http://www.ifoapplestore.com/db/retail-web-pages-revised-2012/" target="_blank">Apple revised their site with high-resolution images</a>. Now the images were larger and cropped wider, meaning new stores no longer fit with the rest. So I started digging into Apple Storefronts again last week. At first, it was just to update it with the new images. But then I couldn’t help myself, and it snowballed into more.</p>
<h4>More Changes</h4>
<p>With the new, larger images, you see the trees more so than the forest. To address this, I added a toggle between two sizes, as well as a toggle for the labels.</p>
<p>In addition to the old country and state filters, you can filter by year now, and sort by oldest or newest. And these views are mapped to different URLs, meaning you can save and share them.</p>
<p>Then there’s the interface. I wanted the site to work better on mobile, so I adopted as my framework the tried-and-true <a href="http://twitter.github.com/bootstrap/" target="_blank">Bootstrap</a>. This also allowed me to use the Slate theme I created on <a href="http://bootswatch.com/" target="_blank">Bootswatch</a> for the visual design.</p>
<p>The new features forced other interface changes. The old navbar was overloaded with links, and now I needed to make room for more. Where to put it all, especially on mobile? My solution was to move primary filters to a drop-down menu, but keep secondary filters out. Instead, they can be accessed by clicking a particular state or year on a label.</p>
<p>Lastly, there’s been a host of performance improvements and a streamlined update process, thanks to <a href="https://developers.google.com/appengine/" target="_blank">Google App Engine</a> and Django’s templating system.</p>
<p>So tweaked images… and then all this: version 2.0 of <a href="http://applestorefronts.appspot.com" target="_blank">Apple Storefronts</a>.</p>
<p><a href="http://applestorefronts.appspot.com" target="_blank"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/07/applestorefronts2.png" alt="" title="Apple Storefronts 2" width="555" height="385" class="aligncenter size-full wp-image-7255 margin-small" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/07/applestorefronts2.png 555w, https://thomaspark.co/wp/wp-content/uploads/2012/07/applestorefronts2-300x208.png 300w" sizes="auto, (max-width: 555px) 100vw, 555px" /></a></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/07/apple-storefronts-redux/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>Introducing Bootswatch</title>
<link>https://thomaspark.co/2012/02/introducing-bootswatch/</link>
<comments>https://thomaspark.co/2012/02/introducing-bootswatch/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 14 Feb 2012 21:39:57 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=6909</guid>
<description><![CDATA[Although I spilled the beans in an interview yesterday, I wanted to formally announce a personal project called Bootswatch. It’s a collection of themed swatches that you can download for free and drop into your … <a href="https://thomaspark.co/2012/02/introducing-bootswatch/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Although I spilled the beans in <a target="_blank" href="http://www.domain.me/blog/thomas-park-3691">an interview yesterday</a>, I wanted to formally announce a personal project called <strong>Bootswatch</strong>. It’s a collection of themed swatches that you can download for free and drop into your Bootstrap site. You can check it out at <a target="_blank" onclick="pageTracker._link(this.href); return false;" href="http://bootswatch.com">bootswatch.com</a>.</p>
<p><span id="more-6909"></span></p>
<h4>What’s Bootstrap Again?</h4>
<p><a target="_blank" href="http://twitter.github.com/bootstrap/">Bootstrap</a> is a popular web framework made by some talented people at Twitter. It allows even the most time-constrained and design-impaired to create nice-looking sites.</p>
<p>As more and more sites adopt Bootstrap though, a growing issue is the uniformity between them. You might already recognize the signature black bar and blue buttons. Here are a few examples, taken from <a href="http://builtwithbootstrap.com/" target="_blank">Built with Bootstrap</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/02/bwbootstrap.png" alt="" title="Built with Bootstrap" width="600" height="407" class="aligncenter size-full wp-image-7004 paddedLarger bordered" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/02/bwbootstrap.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/02/bwbootstrap-300x204.png 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p>My goal with Bootswatch is to enable developers using Bootstrap to try on a new look, without investing much time or energy. The best thing about it is that it doesn’t significantly alter your code or your workflow. </p>
<h4>So how do I use Bootswatch?</h4>
<p>First, head over to <a target="_blank" onclick="pageTracker._link(this.href); return false;" href="http://bootswatch.com">Bootswatch</a> and pick a swatch. Download the bootswatch.min.css file associated with it.</p>
<p>In Bootstrap’s CSS directory, you’ll find a stylesheet in full (bootstrap.css) and minified (bootstrap.min.css) forms. Rename them or move them to a safe place. Then drop in the new CSS file and check that your HTML points to it. If you ever change your mind, simply drop in another swatch or switch back to the original.</p>
<h4>What if I want to extend Bootswatch?</h4>
<p>Bootswatch is an open source project, and you’re welcome to modify the swatches further or create your own. If you’re interested, fork or follow the <a href="https://github.com/thomaspark/bootswatch" target="_blank">GitHub repository</a>.</p>
<p>Each raw swatch consists of two <a href="http://lesscss.org/" target="_blank">LESS</a> files. One is variables.less, which is included by default in Bootstrap and allows you to customize <a href="http://twitter.github.com/bootstrap/less.html#variables" target="_blank">these settings</a>. The other is a new file called bootswatch.less that introduces more extensive changes. </p>
<p>First, add these two files to <a href="https://github.com/twitter/bootstrap/" target="_blank">Bootstrap’s own LESS files</a>. You’ll be overwriting the default variables.less.</p>
<p>Next, open up bootstrap.less and just before the line “Utility classes” at the end, add <code class="language-css" lang="text">@import "bootswatch.less";</code>. This command includes bootswatch.less when compiling the LESS files to CSS, and placing it near the end overrides earlier styles with the same <a href="http://www.w3.org/TR/CSS2/cascade.html#specificity" target="_blank">CSS selector specificity</a>.</p>
<p>Now you can start customizing variables.less and bootswatch.less. You are also free to modify the other LESS files, which in some cases will be easier, but your swatch may become brittle to future changes in Bootstrap itself. When you’re ready to test your code, <a href="http://twitter.github.com/bootstrap/less.html#compiling" target="_blank">compile to CSS</a> and enjoy!</p>
<h4>Update</h4>
<p>Check out my article on Smashing Magazine about <a href="http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/">Customizing Bootstrap</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/02/introducing-bootswatch/feed/</wfw:commentRss>
<slash:comments>38</slash:comments>
</item>
<item>
<title>Startups, Dotcoms, and Other TLDs</title>
<link>https://thomaspark.co/2012/02/startups-dotcoms-and-other-tlds/</link>
<comments>https://thomaspark.co/2012/02/startups-dotcoms-and-other-tlds/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 01 Feb 2012 15:08:16 +0000</pubDate>
<category><![CDATA[Data]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=6732</guid>
<description><![CDATA[I recently spent way too much time trying to find a domain for a project. Every good .com, and even most of the terrible ones, had long been claimed by squatters. This got me to … <a href="https://thomaspark.co/2012/02/startups-dotcoms-and-other-tlds/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I recently spent way too much time trying to find a domain for a project. Every good .com, and even most of the terrible ones, had long been claimed by squatters.</p>
<p>This got me to wonder how startups are dealing with this. From reading the news, it seems as though more and more are going with alternative TLDs like .me and .us. Many are even using <a target="_blank" href="http://en.wikipedia.org/wiki/Domain_hack" rel="noopener">domain hacks</a> to turn this weakness into a strength. Are we reaching a tipping point with alternative TLDs, given their increasing visibility and viability?</p>
<p><span id="more-6732"></span> To find out, I went to <a target="_blank" href="http://www.crunchbase.com/" rel="noopener">CrunchBase</a> and collected the domains of 1,000 companies founded in each year from 2005 to 2011<sup class='footnote'><a href='#fn-6732-1' id='fnref-6732-1' onclick='return fdfootnote_show(6732)'>1</a></sup>. Of course there are other factors at play in this sample, but it’s a fairly good way to uncover domain trends in the startup world.</p>
<p>What I found was that .com (in blue below) dominates, same as it ever has. The recognizability and prestige of .com is a powerful, self-perpetuating thing. For the past seven years, it’s hovered at 85 percent with little sign of dropping. About 50 other TLDs nibble on the leftover slice of pie. Mouse over the graph for more details.</p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" width="600" height="350" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkXMXPqHS7NAdGhZdUNoY2VfSHVTTEYwQzBYbERhNFE&single=true&gid=2&output=html&widget=false" class="iframe-class"></iframe>
<p>Have startups been using the B-list TLDs, .net and .org? Only a bit. About 2 percent of startups use each, although while .org is finding a niche with NGOs and the like, .net may be falling out of vogue (relatively speaking) in recent years. </p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" width="600" height="350" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkXMXPqHS7NAdGhZdUNoY2VfSHVTTEYwQzBYbERhNFE&single=true&gid=3&output=html&widget=false" class="iframe-class"></iframe>
<p>And here’s a closer look at an assortment of TLDs that seem to be popular with startups. Ironically but perhaps unsurprisingly, .biz is a flop, while .me, .io, and .co enjoy upticks in the last year. It remains to be seen if this is part of a larger trend.</p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" width="600" height="350" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkXMXPqHS7NAdGhZdUNoY2VfSHVTTEYwQzBYbERhNFE&single=true&gid=4&output=html&widget=false" class="iframe-class"></iframe>
<p>For startups, one strategy might be to grab an alternative domain cheaply to start with, and to acquire the .com version when you get funded down the line. But with alternative TLDs hardly making a dent, it’s evident that having a .com is a priority right from the start, and that they’re perhaps willing to compromise their name to ensure that they land one.</p>
<p>Despite the crowding on .com, it turns out that domain names aren’t getting any longer. Here’s a graph showing that there’s even a slight decrease in the number of characters since 2009.</p>
<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->
<iframe loading="lazy" width="600" height="350" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkXMXPqHS7NAdGhZdUNoY2VfSHVTTEYwQzBYbERhNFE&single=true&gid=5&output=html&widget=false" class="iframe-class"></iframe>
<p>To keep domain names short, there’s certainly much of the same creativity with naming startups today as <a href="http://messymatters.com/pgnames" target="_blank" rel="noopener">Paul Graham noted back in 2006</a>. And despite the influx of alternative TLDs, startups are, for the time being, still dotcoms.</p>
<div class='footnotes' id='footnotes-6732'>
<div class='footnotedivider'></div>
<ol>
<li id='fn-6732-1'> For the list, and a brief trip down memory lane, here’s the <a href="http://thomaspark.co/wp/wp-content/uploads/2012/02/domains.csv" target="_blank" rel="noopener">CSV</a>. <span class='footnotereverse'><a href='#fnref-6732-1'>↩</a></span></li>
</ol>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/02/startups-dotcoms-and-other-tlds/feed/</wfw:commentRss>
<slash:comments>7</slash:comments>
</item>
<item>
<title>Better Badges on Netflix</title>
<link>https://thomaspark.co/2012/01/better-badges-on-netflix/</link>
<comments>https://thomaspark.co/2012/01/better-badges-on-netflix/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 17 Jan 2012 23:04:02 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=6585</guid>
<description><![CDATA[Today our attention is divided among many apps on many devices, networked and constantly updating. Given this, status badges are used more than ever to help users maintain awareness. They’re used everywhere from operating systems … <a href="https://thomaspark.co/2012/01/better-badges-on-netflix/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Today our attention is divided among many apps on many devices, networked and constantly updating. Given this, status badges are used more than ever to help users maintain awareness. They’re used everywhere from operating systems to applications to websites, to varying degrees of success.</p>
<p>What makes a badge well-designed is that it communicate a bit of timely information in a punchy way. This is accomplished through consistency and contrast. Consistency helps users to recognize a badge by sticking with a standard look and position. Contrast helps users to notice a badge by choosing a color and shape that stands out from the content.</p>
<p><span id="more-6585"></span> Facebook is one example that achieves both consistency and contrast, though they have it relatively easy. Given the monochromatic context, nearly any splash of color will do.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/facebook.png" alt="" title="Facebook" width="600" height="40" class="aligncenter size-full wp-image-6693 paddedLarge" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/facebook.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/facebook-300x20.png 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p>Apple and Netflix have a tougher job because their badges are applied to wildly varying content. In iOS, Apple overcomes this in two ways. First, they give the badge a drop shadow and border that contrasts with the badge itself, making it stand out whether it’s applied to an icon that’s dark, light, or nearly any combination of colors. Second, Apple offsets the badge to a position that’s outside the bounds of the icon. This alters the icon’s silhouette and, more importantly, creates a separation between metadata and object.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/iphone.png" alt="" title="iPhone" width="600" height="171" class="aligncenter size-full wp-image-6695 paddedLarge" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/iphone.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/iphone-300x86.png 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p>Netflix does neither, and the result is that as you scan through their offerings a screenful at a time, the badges hardly stand out.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/netflix.png" alt="" title="Netflix" width="600" height="190" class="aligncenter size-full wp-image-6691 paddedLarge" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/netflix.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/netflix-300x95.png 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p>A challenge faced by Netflix stems from the semantics of their badges. Instead of communicating a number or simple alert, they need to depict “New Episodes” and perhaps other meanings like “New to Netflix” and “Expiring Soon”, for which there aren’t standard symbols, yet<sup class='footnote'><a href='#fn-6585-1' id='fnref-6585-1' onclick='return fdfootnote_show(6585)'>1</a></sup>.</p>
<p>Netflix’s has an amazing track record, designing slick interfaces <a href="http://functionsource.com/post/netflix-feature" target="_blank">for over 400 different devices</a>. They can do much better with their badges.</p>
<div class='footnotes' id='footnotes-6585'>
<div class='footnotedivider'></div>
<ol>
<li id='fn-6585-1'> Other video services like Hulu Plus, iTunes, and Amazon Instant Video don’t even attempt badges like these, though they would do well to. <span class='footnotereverse'><a href='#fnref-6585-1'>↩</a></span></li>
</ol>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/01/better-badges-on-netflix/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Kindle Touch Gestures</title>
<link>https://thomaspark.co/2012/01/kindle-touch-gestures/</link>
<comments>https://thomaspark.co/2012/01/kindle-touch-gestures/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 04 Jan 2012 14:43:23 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=6125</guid>
<description><![CDATA[Here’s a quick guide to multitouch gestures on Kindle Touch, since Amazon doesn’t provide documentation and some commands are less than obvious. Gestures include taps, holds, swipes, and pinches. Let me know if there are … <a href="https://thomaspark.co/2012/01/kindle-touch-gestures/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Here’s a quick guide to multitouch gestures on <a href="http://www.amazon.com/Kindle-Touch-Wi-Fi-Ink-Display/dp/B005890G8Y/" target="_blank">Kindle Touch</a>, since Amazon doesn’t provide documentation and some commands are less than obvious. Gestures include taps, holds, swipes, and pinches. Let me know if there are any I’ve missed.</p>
<p><span id="more-6125"></span> </p>
<h3>Tap</h3>
<p>Kindle Touch uses a system of invisible tapzones called EasyReach.<br />
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-zones.png" alt="" title="Zones" width="600" height="674" class="aligncenter size-full wp-image-6139" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-zones.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-zones-267x300.png 267w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p><strong>Tap right zone:</strong> Next page<br />
<strong>Tap left zone:</strong> Previous page<br />
<strong>Tap top-right zone:</strong> Toggle bookmark<br />
<strong>Tap top zone:</strong> Book options<br />
<a href="http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-options.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-options.png" alt="" title="Options" width="600" height="674" class="aligncenter size-full wp-image-6137" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-options.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-options-267x300.png 267w" sizes="auto, (max-width: 600px) 100vw, 600px" /></a></p>
<h3>Hold</h3>
<p><strong>Hold:</strong> Dictionary + text options<br />
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-hold.png" alt="" title="Hold" width="600" height="674" class="aligncenter size-full wp-image-6134" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-hold.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-hold-267x300.png 267w" sizes="auto, (max-width: 600px) 100vw, 600px" /><br />
<strong>Hold and drag:</strong> Text options<br />
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-holddrag.png" alt="" title="Hold and drag" width="600" height="674" class="aligncenter size-full wp-image-6136" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-holddrag.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-holddrag-267x300.png 267w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<h3>Swipe</h3>
<p><strong>Swipe right:</strong> Next page<br />
<strong>Swipe left:</strong> Previous page<br />
<strong>Swipe up:</strong> Next chapter<br />
<strong>Swipe down:</strong> Previous chapter</p>
<h3>Pinch</h3>
<p><strong>Pinch together:</strong> Decrease font size<br />
<strong>Pinch apart:</strong> Increase font size<br />
<img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-pinch.png" alt="" title="Pinch" width="600" height="674" class="aligncenter size-full wp-image-6138" srcset="https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-pinch.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-pinch-267x300.png 267w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/01/kindle-touch-gestures/feed/</wfw:commentRss>
<slash:comments>17</slash:comments>
</item>
<item>
<title>99designs and Eight Values of Identity</title>
<link>https://thomaspark.co/2012/01/99designs-and-eight-values-of-identity/</link>
<comments>https://thomaspark.co/2012/01/99designs-and-eight-values-of-identity/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 03 Jan 2012 15:09:47 +0000</pubDate>
<category><![CDATA[Data]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=5717</guid>
<description><![CDATA[Over at 99designs, businesses can hold contests to get logos designed for them. To provide better direction to identity designers than “I’ll know it when I see it” or “just make it pop”, each business … <a href="https://thomaspark.co/2012/01/99designs-and-eight-values-of-identity/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Over at <a href="http://99designs.com/" target="_blank">99designs</a>, businesses can hold contests to get logos designed for them. To provide better direction to identity designers than “I’ll know it when I see it” or “just make it pop”, each business is asked to create a design brief that includes a description of their business, the type of logo they want, and the values that their logo should communicate.</p>
<p><span id="more-5717"></span> The values are dubbed <strong>manliness, maturity, bling factor, ageness, fun, volume, complexity, and in-your-faceness</strong> in the source code, and they’re input via sliders on an integer scale from -5 to +5. </p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/sliders.png" alt="" title="Sliders" width="463" height="434" class="aligncenter size-full wp-image-5821" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/sliders.png 463w, https://thomaspark.co/wp/wp-content/uploads/2011/12/sliders-300x281.png 300w" sizes="auto, (max-width: 463px) 100vw, 463px" /></p>
<p>The sliders seem like a good idea, but I began to wonder about them. To what extent do contest holders really use them? What values do businesses wish to communicate? Are they useful to designers?</p>
<p>All of the design briefs on 99designs are publicly accessible, so naturally the research side of me took hold. To get at the questions above, I ended up scraping slider data for the last 999 contests<sup class='footnote'><a href='#fn-5717-1' id='fnref-5717-1' onclick='return fdfootnote_show(5717)'>1</a></sup>.</p>
<h3>To what extent are the sliders used?</h3>
<p>I’m starting with the assumption that a slider left at 0 is unused, in the sense that the contest holder doesn’t particularly care either way about that value. The table below tallies up the number of sliders used in each contest.</p>
<table>
<tr>
<th>Sliders Used</th>
<th>Percent of Contests</th>
</tr>
<tr>
<td>8</td>
<td>9%</td>
</tr>
<tr>
<td>7</td>
<td>15%</td>
</tr>
<tr>
<td>6</td>
<td>21%</td>
</tr>
<tr>
<td>5</td>
<td>20%</td>
</tr>
<tr>
<td>4</td>
<td>13%</td>
</tr>
<tr>
<td>3</td>
<td>9%</td>
</tr>
<tr>
<td>2</td>
<td>6%</td>
</tr>
<tr>
<td>1</td>
<td>2%</td>
</tr>
<tr>
<td>0</td>
<td>5%</td>
</tr>
</table>
<p>It turns out that in 95% of contests, at least one slider is used. However, the modus operandi seems to be to pick a few values to emphasize, while skipping over the rest. Only in 9% of cases are all eight sliders used. On average, it’s closer to five sliders.</p>
<h3>Is there variety in the responses?</h3>
<p>Even if contest holders are using the sliders, it’s not very informative if they’re all using them to give identical responses. Here’s a breakdown of how each slider is used by percent and standard deviation, which gives a taste of how diverse the responses are.</p>
<table>
<tr>
<th></th>
<th>-5</th>
<th>-4</th>
<th>-3</th>
<th>-2</th>
<th>-1</th>
<th>0</th>
<th>+1</th>
<th>+2</th>
<th>+3</th>
<th>+4</th>
<th>+5</th>
<th>Mean</th>
<th>SD</th>
</tr>
<tr>
<th>Manliness</th>
<td>2</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>49</td>
<td>7</td>
<td>12</td>
<td>7</td>
<td>2</td>
<td>4</td>
<td>+0.37</td>
<td>1.97</td>
</tr>
<tr>
<th>Maturity</th>
<td>2</td>
<td>2</td>
<td>8</td>
<td>12</td>
<td>12</td>
<td>35</td>
<td>9</td>
<td>10</td>
<td>7</td>
<td>2</td>
<td>2</td>
<td> -0.13</td>
<td>1.97</td>
</tr>
<tr>
<th>Bling factor</th>
<td>6</td>
<td>5</td>
<td>10</td>
<td>12</td>
<td>11</td>
<td>39</td>
<td>6</td>
<td>6</td>
<td>4</td>
<td>1</td>
<td>1</td>
<td>-0.77</td>
<td>2.02</td>
</tr>
<tr>
<th>Ageness</th>
<td>9</td>
<td>8</td>
<td>18</td>
<td>19</td>
<td>9</td>
<td>26</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>-1.57</td>
<td>2.07</td>
</tr>
<tr>
<th>Fun</th>
<td>3</td>
<td>3</td>
<td>7</td>
<td>12</td>
<td>12</td>
<td>27</td>
<td>9</td>
<td>12</td>
<td>9</td>
<td>3</td>
<td>3</td>
<td>+0.04</td>
<td>2.25</td>
</tr>
<tr>
<th>Volume</th>
<td>2</td>
<td>2</td>
<td>6</td>
<td>12</td>
<td>12</td>
<td>50</td>
<td>6</td>
<td>7</td>
<td>4</td>
<td>1</td>
<td>1</td>
<td>-0.32</td>
<td>1.65</td>
</tr>
<tr>
<th>Complexity</th>
<td>5</td>
<td>6</td>
<td>17</td>
<td>23</td>
<td>11</td>
<td>29</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>-1.38</td>
<td>1.83</td>
</tr>
<tr>
<th>In-your-faceness</th>
<td>0</td>
<td>1</td>
<td>3</td>
<td>6</td>
<td>6</td>
<td>49</td>
<td>10</td>
<td>13</td>
<td>8</td>
<td>2</td>
<td>3</td>
<td>+0.50</td>
<td>1.69</td>
</tr>
</table>
<p>Far and away, 0 is the most popular choice for every value, reaching 50% for a few. None too surprising given that it’s both the neutral answer and the default. Still, there is a fair deal of variation.</p>
<p>Some of the values are heavily skewed (e.g., ageness, complexity). This could be a matter of terminology (“complex” might hold a more negative connotation than a term like “detailed”), or simply the prevailing trends.</p>
<h3>How do values relate to one another?</h3>
<p>To explore correlation between values, here’s a table of pairwise comparisons.</p>
<table>
<tr>
<th></th>
<th>Maturity</th>
<th>Bling</th>
<th>Ageness</th>
<th>Fun</th>
<th>Volume</th>
<th>Complexity</th>
<th>Faceness</th>
</tr>
<tr>
<th>Manliness</th>
<td>.201</td>
<td>.050</td>
<td>-.044</td>
<td>.312</td>
<td>-.076</td>
<td>.083</td>
<td>.091</td>
</tr>
<tr>
<th>Maturity</th>
<td></td>
<td>-.108</td>
<td>.278</td>
<td>.475</td>
<td>.165</td>
<td>.142</td>
<td>-.034</td>
</tr>
<tr>
<th>Bling factor</th>
<td></td>
<td></td>
<td>.027</td>
<td>-.136</td>
<td>-.092</td>
<td>-.087</td>
<td>.133</td>
</tr>
<tr>
<th>Ageness</th>
<td></td>
<td></td>
<td></td>
<td>.135</td>
<td>.239</td>
<td>.098</td>
<td>-.145</td>
</tr>
<tr>
<th>Fun</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td>.276</td>
<td>.123</td>
<td>-.065</td>
</tr>
<tr>
<th>Volume</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>-.107</td>
<td>-.407</td>
</tr>
<tr>
<th>Complexity</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>.110</td>
</tr>
</table>
<p>As you can see, fun tends to be associated with youth and masculinity. Volume & in-your-faceness also have substantial overlap.</p>
<p>If a value needed to be made redundant, a strong case could be made for either volume or in-your-faceness, given all of the data above.</p>
<h3>What else?</h3>
<p>Of course looking at how contest holders use the sliders is only half of the conversation. The other half is to ask as designers: Do you actually pay attention to these sliders? Is it only when a response is at an extreme? Which values contribute most to your practice? Would any other values would be useful to you?</p>
<div class='footnotes' id='footnotes-5717'>
<div class='footnotedivider'></div>
<ol>
<li id='fn-5717-1'> More could be done with this data, including breaking it down by industry (e.g., Food & Drink, Medical & Pharmaceutical, Sport). Maybe I will do that in a follow-up post. <a href='http://thomaspark.co/wp/wp-content/uploads/2011/12/999designs.csv'>Here’s</a> a CSV file if you want to explore. <span class='footnotereverse'><a href='#fnref-5717-1'>↩</a></span></li>
</ol>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2012/01/99designs-and-eight-values-of-identity/feed/</wfw:commentRss>
<slash:comments>3</slash:comments>
</item>
<item>
<title>Density Control</title>
<link>https://thomaspark.co/2011/12/density-control/</link>
<comments>https://thomaspark.co/2011/12/density-control/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 16 Dec 2011 17:43:06 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=5484</guid>
<description><![CDATA[Google has been making sweeping changes to the look of their products. One of these changes is the addition of density control. With a couple of clicks, users of Gmail and Reader can now switch … <a href="https://thomaspark.co/2011/12/density-control/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Google has been making <a href="http://googleblog.blogspot.com/2011/11/gmails-new-look.html" target="_blank">sweeping</a> <a href="http://googlereader.blogspot.com/2011/10/new-in-reader-fresh-design-and-google.html" target="_blank">changes</a> to the look of their products. One of these changes is the addition of <strong>density control</strong>. With a couple of clicks, users of Gmail and Reader can now switch between a <strong>comfortable</strong>, <strong>cozy</strong>, and <strong>compact</strong> display.</p>
<p><span id="more-5484"></span> It may seem like a totally unremarkable feature. But here’s why Google deserves credit for it.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/densitycontrol.gif" alt="" title="Comfortable, cozy, compact" width="600" height="340" class="aligncenter size-full wp-image-5589" /></p>
<h3>It’s Uncommon</h3>
<p>Density control is surprisingly rare. It’s not to be confused with <a href="http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html" target="_blank">zoom</a>, which is found in all sorts of applications from web browsers to Office. Zoom enlarges everything, whereas display density changes only the spacing between things. In Reader for instance, comfortable, cozy, and compact all use a 13-pixel font, but give items a height of 37, 31, and 27 pixels respectively</p>
<p>Only spatial file managers come to mind as another example. Though I’m sure there’s a laundry list of others I’ve forgotten.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/finder.png" alt="" title="Mac Finder" width="600" height="416" class="aligncenter size-full wp-image-5636" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/finder.png 600w, https://thomaspark.co/wp/wp-content/uploads/2011/12/finder-300x208.png 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<h3>It’s Useful</h3>
<p>The old Gmail and Reader were most like the compact setting, packing lots of information into the available space. Yet it’s apparent that Google’s designers now prefer comfortable as the default for desktop resolutions.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/oldreader.png" alt="" title="Old Reader" width="570" height="419" class="aligncenter size-full wp-image-5678" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/oldreader.png 570w, https://thomaspark.co/wp/wp-content/uploads/2011/12/oldreader-300x221.png 300w" sizes="auto, (max-width: 570px) 100vw, 570px" /></p>
<p>Many power users want <a href="http://www.codinghorror.com/blog/2006/07/information-density-and-dr-bronner.html" target="_blank">information density</a> at all costs, while others want the greater accessibility or readability or aesthetics that spacing brings. People can be extremely sensitive to these preferences, especially when dealing with changes to a familiar interface (the Twitter iPhone client is <a href="http://www.marco.org/2011/12/09/twitter-client-screenshots" target="_blank">a recent case of this</a>). And this is where density control comes in.</p>
<p>Instead of a temporary measure meant to appease a grumbling user base, I hope this is a sign of what’s to come in other Google products. Users of Search, Docs, and News could also benefit from density control. In fact, it’s something we should see more of in general, particularly for information-dense applications.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/12/density-control/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Touch on Kindle</title>
<link>https://thomaspark.co/2011/12/touch-on-kindle/</link>
<comments>https://thomaspark.co/2011/12/touch-on-kindle/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 07 Dec 2011 16:44:53 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=5224</guid>
<description><![CDATA[I was lucky enough to receive a Kindle Touch as an early Christmas present. To be clear, I love it as a long-form reading device, from its weight to its battery life to its integration … <a href="https://thomaspark.co/2011/12/touch-on-kindle/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I was lucky enough to receive a <a href="http://www.amazon.com/Kindle-Touch-Wi-Fi-Ink-Display/dp/B005890G8Y/" target="_blank">Kindle Touch</a> as an early Christmas present. To be clear, I love it as a long-form reading device, from its weight to its battery life to its integration with Amazon’s ecosystem. It’s already begun to replace my next shelf of books.</p>
<p>With that said, here’s my quick review of it so far, with a few ways Amazon could make it that much better.</p>
<p><span id="more-5224"></span> </p>
<h4>Touch</h4>
<p>Most smartphones and tablets rely on capacitive sensors embedded directly in the display, but the Kindle Touch has infrared sensors set in the bezel. Whereas capacitive touch can distinguish skin from other forms of contact, these infrared sensors detect nearly anything as a touch event. The upside is that you can use the Kindle Touch while wearing gloves or with any pointy thing as a stylus. The downside is that other materials like the fabric of your sleeve can accidentally trigger it. These are more side effects though, of Amazon using infrared sensors to preserve the quality of the E Ink display.</p>
<p>The Kindle Touch touts a range of multitouch gestures. Taps are used for page turning, item selection, and the soft keyboard. Swipes can also be used to turn pages, and to scroll elements that extend offscreen. Pinch allows you to adjust text size and zoom into a webpage. In terms of recognizing these gestures as input, it’s fairly reliable and precise. </p>
<p>One thing that has made iOS so successful is its use of direct manipulation — that is, fine-grained (essentially continuous) gesture input, mapped closely to the system’s feedback, which models some physical phenomenon. Apple was able to create the illusion of manipulating elements as if they were physical, and they accomplished it having iOS be extremely responsive to the user’s gestures.</p>
<p>However, the Kindle’s E Ink display, you may be aware, is slow. Refresh rates measure in the hundreds of milliseconds, compared to 17 milliseconds for devices like the iPhone and iPad. So with the Kindle Touch, Amazon has wisely used multitouch gestures more to invoke discrete commands than for continuous direct manipulation. What this means is that a swipe, no matter how fast or far, moves the carousel of books three places; each pinch enlarges text by one size. The exception is the web browser, and there’s a reason that’s still experimental.</p>
<h4>Form Factor</h4>
<p>My first thought upon opening the package was that the Kindle Touch is even smaller than I imagined. With each successive model, Amazon has shrunk the form factor down while keeping the 6-inch display intact. It’s gone from 8.0 × 5.3 inches in the first two generations, to 7.5 × 4.8 in the Kindle 3, to 6.8 × 4.7 in the Kindle Touch (Kindle 4 is smaller yet).</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/sidebyside.jpg" alt="" title="Kindle 2, Kindle Touch, paperback" width="600" height="300" class="aligncenter size-full wp-image-5449" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/sidebyside.jpg 600w, https://thomaspark.co/wp/wp-content/uploads/2011/12/sidebyside-300x150.jpg 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p>While greater portability is nice, it’s past the point of diminishing returns. I’d like to see the next version of the Kindle Touch return to the original form factor – with display enlarged – making it roughly the size of a large paperback. Reading books would be made more comfortable, navigating the library and store even more so. </p>
<h4>Home Button</h4>
<p>Setup is dead simple, but afterwards I got stuck for longer than I care to admit on how to access my library. I eventually realized that what I had assumed to be a speaker was no speaker at all.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/homebutton.jpg" alt="" title="Not a speaker" width="600" height="175" class="aligncenter size-full wp-image-5417" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/homebutton.jpg 600w, https://thomaspark.co/wp/wp-content/uploads/2011/12/homebutton-300x88.jpg 300w" sizes="auto, (max-width: 600px) 100vw, 600px" /></p>
<p>A silly oversight on my part to be sure. But as bad as it is to make buttons non-obvious in software, it’s that much worse in hardware. TV makers, are you listening?</p>
<h4>Book Covers</h4>
<p>I was disappointed to learn that the library can’t display book covers. I don’t know where I got that idea from.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/kindletouch.jpg" alt="" title="Kindle Touch with Ribbon" width="490" height="484" class="aligncenter size-full wp-image-5420" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/kindletouch.jpg 490w, https://thomaspark.co/wp/wp-content/uploads/2011/12/kindletouch-300x296.jpg 300w" sizes="auto, (max-width: 490px) 100vw, 490px" /></p>
<p>Oh, right. Amazon, please add this option for when we’re using your books, not just when you’re selling them to us.</p>
<h4>X-Ray</h4>
<p>One of the value-added features the Kindle Touch offers is <a href="http://blog.laptopmag.com/video-amazon-kindle-touchs-x-ray-reference-tool-makes-ereading-easier" target="_blank">X-Ray</a>. Amazon analyzes each book and presents key people, places, and things, background information on them, and where they show up in the book.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/12/xray.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/12/xray-1024x655.png" alt="" title="X-Ray" width="555" height="355" class="aligncenter size-large wp-image-5431" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/12/xray-1024x655.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2011/12/xray-300x192.png 300w, https://thomaspark.co/wp/wp-content/uploads/2011/12/xray.png 1250w" sizes="auto, (max-width: 555px) 100vw, 555px" /></a></p>
<p>Not all books support it yet, but Amazon doesn’t tell you which do and don’t. (As of this writing, <a href="http://www.amazon.com/Man-Who-Mistook-Wife-ebook/dp/B003MQNI6W/" target="_blank">The Man Who Mistook His Wife for a Hat</a> does, <a href="http://www.amazon.com/Consider-Lobster-Other-Essays-ebook/dp/B000S1LVHW/" target="_blank">Consider the Lobster</a> does not). Under the “Text-to-Speech” bullet point seems as good a spot as any.</p>
<h4>The Other Kindle</h4>
<p>Overall, I’m highly satisfied with the Kindle Touch. But if you’re in the market for an e-reader, the Kindle 4 is also <a href="http://www.marco.org/2011/12/02/kindle-touch-vs-nook-simple-touch-kobo-touch-kindle-4" target="_blank">worthy of consideration</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/12/touch-on-kindle/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>Every Apple Storefront Ever</title>
<link>https://thomaspark.co/2011/11/every-apple-storefront/</link>
<comments>https://thomaspark.co/2011/11/every-apple-storefront/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 09 Nov 2011 02:27:42 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=4930</guid>
<description><![CDATA[Way back in August of 2001, some good friends and I took a road trip down to Virginia to attend a concert. Unfortunately the rains came, the venue got flooded, and the concert was cancelled. … <a href="https://thomaspark.co/2011/11/every-apple-storefront/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Way back in August of 2001, some good friends and I took a road trip down to Virginia to attend a concert. Unfortunately the rains came, the venue got flooded, and <a href="http://voices.washingtonpost.com/postrock/2008/05/radiohead_visits_dc_mother_nat.html" target="_blank">the concert was cancelled</a>. Disappointing, but as something of a concession prize, I got to check out the very first brick & mortar Apple Store, which had opened in Tysons Corner just a few weeks earlier.</p>
<p><span id="more-4930"></span> At the time, most analysts considered Apple’s fledgling retail initiative to be <a href="http://www.businessweek.com/magazine/content/01_21/b3733059.htm" target="_blank">doomed</a>. But though Tysons Corner seemed like a modest start, it was a blueprint for big things to come. 357 stores and counting later, Apple is <a href="http://retailsails.com/2011/08/23/retailsails-exclusive-ranking-u-s-chains-by-retail-sales-per-square-foot/" target="_blank">tops in sales per square foot</a>, and they did it by applying many of the same principles as they do to their products: natural materials, understated aesthetics, and <a href="http://www.macrumors.com/2011/11/08/apple-store-app-for-ios-updated-to-support-new-self-checkout-system-for-retail-stores/" target="_blank">innovative processes</a>.</p>
<p>Anyway, one thing I wanted to do was go back and see how Apple storefronts have evolved over the past decade. I couldn’t find anywhere to do this easily, so I decided to create a gallery myself. Check it out here:</p>
<blockquote><p><a href="http://applestorefronts.appspot.com/" target="_blank" onclick="pageTracker._link(this.href); return false;">http://applestorefronts.appspot.com/</a></p></blockquote>
<p>Scanning the gallery, you can see that Apple follows certain conventions, but isn’t shy about breaking them. They’ve tweaked things here and there, and are quite audacious with their flagship locations. (By the way, is “flagship” a formal designation, and is there a list of them somewhere?)</p>
<p>What are your most or least favorites? What do you love or hate about them? Do you notice any trends? What do you think is Apple’s next step?</p>
<h4>Notes</h4>
<p>Images collected from Apple.com with <a href="http://www.crummy.com/software/BeautifulSoup/" target="_blank">Beautiful Soup</a>. Opening dates courtesy of <a href="http://www.ifoapplestore.com/db/" target="_blank">ifoAppleStore</a>. The gallery uses <a href="http://www.appelsiini.net/projects/lazyload" target="_blank">Lazy Load</a> by Mika Tuupola and is hosted on <a href="http://code.google.com/appengine/" target="_blank">Google App Engine</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/11/every-apple-storefront/feed/</wfw:commentRss>
<slash:comments>59</slash:comments>
</item>
<item>
<title>Share in Google Reader Again</title>
<link>https://thomaspark.co/2011/11/share-in-google-reader-again/</link>
<comments>https://thomaspark.co/2011/11/share-in-google-reader-again/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 01 Nov 2011 16:06:14 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=4799</guid>
<description><![CDATA[Despite its name, Google Reader had up until now three levels of use: Reader: read RSS items Linkroll: share RSS items with friends Social network: converse on these shared RSS items with these friends What … <a href="https://thomaspark.co/2011/11/share-in-google-reader-again/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Despite its name, Google Reader had up until now three levels of use:</p>
<ol>
<li>Reader: read RSS items</li>
<li>Linkroll: share RSS items with friends</li>
<li>Social network: converse on these shared RSS items with these friends</li>
</ol>
<p>What was nice about this is that you could exchange and comment on posts within the flow of reading them.</p>
<p><span id="more-4799"></span> Unfortunately, Google <a href="http://googlereader.blogspot.com/2011/10/new-in-reader-fresh-design-and-google.html" target="_blank">has cut the social features from Reader</a> in an attempt to funnel users to Google Plus. I’m only annoyed, but it’s left some people <a href="http://kirbybits.wordpress.com/2011/10/21/wherein-i-try-to-explain-why-google-reader-is-the-best-social-network-created-so-far/" target="_blank">really upset</a>. Here’s a way to restore some of this functionality, until a suitable replacement <a href="http://hivemined.org/" target="_blank">comes along</a>.</p>
<h4>A Workaround</h4>
<p>First, you’ll need an account with a bookmarking service. <a href="http://delicious.com/" target="_blank">Delicious</a> is free, but <a href="http://pinboard.in/" target="_blank">Pinboard</a> is well worth supporting. After you’ve signed up, go into “Reader settings” in the top-right corner, click “Send To”, and “Create a custom link” at the bottom. Add one of these as your URL:</p>
<pre><code>http://delicious.com/save?url=${url}&title=${title}&notes=${source}</code></pre>
<pre><code>https://pinboard.in/add?&url=${url}&title=${title}&description=${source}
&tags=reader</code></pre>
<p>If you want to go all in, name it “Share in Reader” and give it this icon URL: </p>
<pre><code>http://www.google.com/reader/ui/favicon.ico</code></pre>
<p>Get back to Reader and now you’ll have a familiar “Share in Reader” option at the bottom of each article. When you share something, there’s a field to enter comments, although two-way conversation isn’t possible.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/11/shareinreader.png" alt="" title="Share in Reader" width="555" height="243" class="aligncenter size-full wp-image-4893" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/11/shareinreader.png 555w, https://thomaspark.co/wp/wp-content/uploads/2011/11/shareinreader-300x131.png 300w" sizes="auto, (max-width: 555px) 100vw, 555px" /></p>
<p>You can also use bookmarklets to share any page you happen to visit, just like old times. Drag <a href="javascript:(function(){f='http://www.delicious.com/save?url='+encodeURIComponent(window.location.href)+'&title='+encodeURIComponent(document.title)+'&notes='+encodeURIComponent(''+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text))+'&v=6&';a=function(){if(!window.open(f+'noui=1&jump=doclose','deliciousuiv6','location=1,links=0,scrollbars=0,toolbar=0,width=550,height=585'))location.href=f+'jump=yes'};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})()"">Delicious</a> or <a href="javascript:q=location.href;if(document.getSelection)%7Bd=document.getSelection();%7Delse%7Bd='';%7D;p=document.title;void(open('https://pinboard.in/add?url='+encodeURIComponent(q)+'&description='+encodeURIComponent(d)+'&title='+encodeURIComponent(p)+'&tags=reader','Pinboard','toolbar=no,width=700,height=350'));">Pinboard</a> into your bookmark bar.</p>
<p>Give your friends your new feed, which will look like one of the following:</p>
<pre><code>http://delicious.com/v2/rss/username</code></pre>
<pre><code>http://feeds.pinboard.in/rss/u:username/t:reader</code></pre>
<p>If you want to keep your shared links from being discoverable, you can dig up a private feed link for these services as well.</p>
<p>Have your friends create their own, store them in a “People you follow” folder, and you’re back to good.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/11/peopleyoufollow.png" alt="" title="People You Follow" width="264" height="230" class="aligncenter size-full wp-image-4895" /></p>
<p>A downside of this is that it can take an hour or two for the feeds to refresh. But if you want to resist the will of a mighty company like Google, while continuing to use their service, it’s going to be an uphill battle.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/11/share-in-google-reader-again/feed/</wfw:commentRss>
<slash:comments>5</slash:comments>
</item>
<item>
<title>In Portrait or Landscape</title>
<link>https://thomaspark.co/2011/10/in-portrait-or-landscape/</link>
<comments>https://thomaspark.co/2011/10/in-portrait-or-landscape/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 21 Oct 2011 18:28:37 +0000</pubDate>
<category><![CDATA[Data]]></category>
<category><![CDATA[Gadgets]]></category>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=4593</guid>
<description><![CDATA[Yesterday, Microsoft’s Steven Sinofsky responded to chatter about how Windows 8, in its grand debut, was demoed almost exclusively in landscape mode. In the post, he affirms Windows 8’s agnosticism. Our point of view is … <a href="https://thomaspark.co/2011/10/in-portrait-or-landscape/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Yesterday, Microsoft’s Steven Sinofsky <a href="http://blogs.msdn.com/b/b8/archive/2011/10/20/optimizing-for-both-landscape-and-portrait.aspx" target="_blank">responded</a> to chatter about how Windows 8, in its grand debut, was demoed almost exclusively in landscape mode. In the post, he affirms Windows 8’s agnosticism.</p>
<p><span id="more-4593"></span> <img loading="lazy" decoding="async" src="http://thomaspark.me/wp/wp-content/uploads/2011/10/windows-8-tablet.jpg" alt="" title="Windows 8 Tablet" width="595" height="389" class="aligncenter size-full wp-image-4703" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/windows-8-tablet.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/windows-8-tablet-300x196.jpg 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<blockquote><p>Our point of view is that both portrait and landscape orientations are important, and experiences can be great in either orientation. Rather than picking a posture and orientation for optimization, we designed an experience that makes sense regardless of how the device is held, one that feels tailored for the app and its content.</p></blockquote>
<p>Ignoring that the <a href="http://thisismynext.com/2011/09/13/windows-8-samsung-tablet-leak/" target="_blank">first Windows 8 tablet from Samsung</a> has its hardware button positioned to make landscape the default, and the packaging to reflect that (<a href="http://www.apple.com/ipad/built-in-apps/" target="_blank">in contrast to the iPad</a>), Sinofsky’s response still rings true. <a href="http://brooksreview.net/2011/09/tablet-power/" target="_blank">This informal survey</a> from Ben Brooks further underscores his point.</p>
<p>This naturally leads to questions about when and why people might favor one orientation over the other. Most users probably hold their tablets in landscape to watch videos and in portrait to read long-form text. But what about for all of the other ways tablets can be used?</p>
<h3>Some Stats</h3>
<p>Since I’m not privy to data that might answer this, I thought an interesting proxy might be to look at how apps are presented in the App Store. Do apps tend to feature screenshots in one particular orientation? Are there patterns among certain classes of apps? This reveals a bit about how apps are designed to be used or how the developers idealize it.</p>
<p>I went through the top paid iPad apps, as well as the top 25 for each App Store category, and classified each into one of five categories: all of the screenshots are portrait, or landscape; most (all but one) are portrait, or landscape; and they’re about even (more than one of each).</p>
<p>Here’s how the 200 top paid apps look.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/10/topapps.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/topapps-1024x192.png" alt="" title="Top Paid iPad Apps" width="595" height="111" class="aligncenter size-large wp-image-4633" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/topapps-1024x192.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2011/10/topapps-300x56.png 300w, https://thomaspark.co/wp/wp-content/uploads/2011/10/topapps.png 1119w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>
<p>Surprisingly, only 21 percent show off their app in both orientations.</p>
<p>Despite the primacy of portrait in Apple’s iPad marketing, the majority of top paid apps use landscape in theirs, at least within the App Store. That’s no guarantee of course that this is how people spend most of their <em>time</em> on their iPads, using these and other apps.</p>
<p>Not all categories are represented equally in top paid apps, which happens to be extremely game heavy. By looking at each App Store category individually, a better picture emerges of the diverse ways that iPads are held and used.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/10/categories.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/categories-1024x658.png" alt="" title="Orientation by iPad App Categories" width="595" height="382" class="aligncenter size-large wp-image-4635" /></a></p>
<p>Platforms today are recognizing that great user experiences have the potential to be created in either portrait or landscape, and this is certainly an important first step. But this graph renews questions about when and why developers choose one orientation over the other, and what opportunities there are for both new and existing apps to make better use of the available space, however the tablet is held.</p>
<p>Given how only 21 percent of iPad apps show themselves off as fluid between landscape and orientation, one wonders if Windows 8 developers will be up to the task of building apps in both orientations, plus <a href="http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/1261.Windows_2D00_in_2D00_landscape_2D00_mode_5F00_636279EA.png" target="_blank">the snap and fill views</a>, for <a href="http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/5875.Chart_2D002D002D00_Windows_2D00_7_2D00_screen_2D00_resolutions_5F00_3E64B971.png" target="_blank">so many resolutions and aspect ratios</a> — and doing it well.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/10/in-portrait-or-landscape/feed/</wfw:commentRss>
<slash:comments>7</slash:comments>
</item>
<item>
<title>User Research Gone Astray</title>
<link>https://thomaspark.co/2011/10/user-research-gone-astray/</link>
<comments>https://thomaspark.co/2011/10/user-research-gone-astray/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sun, 16 Oct 2011 15:08:02 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=4413</guid>
<description><![CDATA[The Building Windows 8 blog offers some fascinating insight into Microsoft’s research and design processes. Take the recent post on improving Windows Explorer. It begins with a discussion on how Windows Explorer is used today. … <a href="https://thomaspark.co/2011/10/user-research-gone-astray/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>The <a href="http://blogs.msdn.com/b/b8/" target="_blank">Building Windows 8 blog</a> offers some fascinating insight into Microsoft’s research and design processes. Take the recent post on <a href="http://blogs.msdn.com/b/b8/archive/2011/08/29/improvements-in-windows-explorer.aspx" target="_blank">improving Windows Explorer</a>.</p>
<p><span id="more-4413"></span> It begins with a discussion on how Windows Explorer is used today. Through telemetry data — “based on hundreds of millions of individuals opting in to provide anonymous data about product usage” — Microsoft finds that the top 10 commands make up 81.8% of use, and that these commands (e.g., paste, properties, copy) are primarily accessed through the contextual menu.</p>
<p>The development team combines this with customer feedback on the top requested features, and uses this to justify the changes from Windows 7…</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/win7-window.png" alt="" title="Windows 7 window" width="595" height="519" class="aligncenter size-full wp-image-4438" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/win7-window.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/win7-window-300x262.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>…to the design below.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/win8-window.png" alt="" title="Windows 8 window" width="595" height="670" class="aligncenter size-full wp-image-4430" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/win8-window.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/win8-window-266x300.png 266w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>It seems that essentially, every single command that customers have used or requested has been moved into a <a href="http://en.wikipedia.org/wiki/Ribbon_(computing)" target="_blank">ribbon</a> or wedged into some corner of the chrome. And many are rightfully <a href="http://seldo.tumblr.com/post/9549775746/this-is-genuinely-microsofts-idea-of-a" target="_blank">lambasting it</a>.</p>
<p>But, you might protest, they did research! With users! And got a ton of data! So how did it go wrong?</p>
<h3>The IROP Keyboard</h3>
<p>By focusing user research on low-level operations with the old system, and using that as the starting point for the redesign, you end up merely resizing, rearranging, and removing parts of the interface. You don’t make the quantum leap, and you sometimes make things worse.</p>
<p>I’m reminded of a recent paper by Andreas Zeller, Thomas Zimmerman, and Christian Bird (the last two authors from Microsoft Research, ironically) titled <a href="http://thomas-zimmermann.com/publications/details/zeller-promise-2011/" target="_blank">Failure is a Four-Letter Word: A Satire in Empirical Research</a>.</p>
<p>In the paper, the authors collect keystroke-level data in Eclipse and correlate it with programmers’ errors. They find this data to be an excellent predictor, with the letters “i”, “r”, “o”, and “p” guilty of the strongest correlations. Based on these findings, they come up with a cheeky solution for reducing programmers’ errors:</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/irop-keyboard.jpg" alt="" title="IROP Keyboard" width="595" height="226" class="aligncenter size-full wp-image-4494" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/irop-keyboard.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/irop-keyboard-300x114.jpg 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>The IROP keyboard addresses the data, quite directly. But it obviously misses the deeper problems.</p>
<h3>From Actions to Activities</h3>
<p><a href="http://www.jnd.org/dn.mss/human-centered_design_considered_harmful.html" target="_blank">In the vocabulary of Donald Norman</a>, operations combine to make actions, which make tasks, which make activities. According to this scheme, Microsoft has with their data looked at actions. The key is to start higher up this hierarchy, considering the activities users are engaged in and the goals they’re trying to achieve.</p>
<p>Windows Explorer is <a href="http://www.computerworld.com/s/article/print/9220157/A_deep_dive_into_Windows_8_Developer_Preview" target="_blank">gradually being sunset</a>, so they get some slack here. But I sure hope they aren’t being steered wrong elsewhere by their user research.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/10/user-research-gone-astray/feed/</wfw:commentRss>
<slash:comments>8</slash:comments>
</item>
<item>
<title>Ghost Legs: Randomizing the Asian Way</title>
<link>https://thomaspark.co/2011/10/ghost-legs-randomizing-the-asian-way/</link>
<comments>https://thomaspark.co/2011/10/ghost-legs-randomizing-the-asian-way/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 12 Oct 2011 16:50:41 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Games]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=4273</guid>
<description><![CDATA[I had a bunch of relatives from Korea visit over the summer, and naturally an arm wrestling tournament broke out. What I found most interesting though was how they set up the initial match-ups. They … <a href="https://thomaspark.co/2011/10/ghost-legs-randomizing-the-asian-way/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I had a bunch of relatives from Korea visit over the summer, and naturally an arm wrestling tournament broke out. What I found most interesting though was how they set up the initial match-ups. They didn’t draw straws, pick names out of a hat, roll a die, or eeny meeny miny moe. Instead, they made a grid.</p>
<p><span id="more-4273"></span> I learned that this is a common way of randomizing things in Asia. In Korea it’s called 사다리, in China 畫鬼腳, and in Japan 阿弥陀籤. The Korean and Chinese translate to <a href="https://en.wikipedia.org/wiki/Ghost_Leg" target="_blank" rel="noopener noreferrer">ghost leg</a>, their poetic word for “ladder”.</p>
<p>How it works is this. You list the things you want to randomize at the top of your paper. You write the categories you want to randomly place them into at the bottom. Draw vertical lines connected each pair — these make up the “legs” of the ladder. Then randomly draw in “rungs”, or you can fold over the options to cover them up and have someone else do it. Once that’s done, follow each path down the ladder, taking every rung you reach. <a href="http://askakorean.blogspot.com/2010/12/how-do-you-climb-ladder.html" target="_blank" rel="noopener noreferrer">This post</a> gives a visual step-by-step of how it works, and <a href="http://www2.edc.org/makingmath/studentWork/amidaKuji/AmidaKujiByDavidSenft.pdf" target="_blank" rel="noopener noreferrer">this paper</a> offers a mathematical analysis.</p>
<p><img loading="lazy" decoding="async" src="https://thomaspark.co/wp/wp-content/uploads/2011/10/ghostlegs.png" alt="" title="Ghost Legs" width="500" height="450" class="aligncenter size-full wp-image-4590" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/ghostlegs.png 500w, https://thomaspark.co/wp/wp-content/uploads/2011/10/ghostlegs-300x270.png 300w" sizes="auto, (max-width: 500px) 100vw, 500px" /></p>
<p>What I decided to do was create an interactive web version of this. I started with an HTML table, which leads to a few benefits. Since a table is already a grid, it’s straightforward to style it using CSS. The image above shows the result.</p>
<p>Also, instead of dynamically creating the table, I made it so anyone can easily make their own table with labels and as many columns and rows as they like. Then by simply assigning it to the “ghostleg” class and copying over the JavaScript and CSS (which you’re welcome to do), they can have their own customized version. By using <code>thead</code> and <code>tfoot</code>, the section of the code to input all your labels is right at the top, not buried in the table markup.</p>
<p>I looped through each table row, counting the number of cells and picking a random place to draw a rung (or skip the row). Finally, a hover function was attached that highlights the path from each item to its random outcome.</p>
<p>Play around with <a href="https://thomaspark.co/projects/ghostlegs/" target="_blank" rel="noopener noreferrer">Ghost Legs</a>, or have a look at the <a href="https://jsbin.com/ofoban/1/edit#javascript,html,live" target="_blank" rel="noopener noreferrer">code</a>.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/10/ghost-legs-randomizing-the-asian-way/feed/</wfw:commentRss>
<slash:comments>4</slash:comments>
</item>
<item>
<title>Fuzzy Circles in Google Plus</title>
<link>https://thomaspark.co/2011/10/fuzzy-circles-in-google-plus/</link>
<comments>https://thomaspark.co/2011/10/fuzzy-circles-in-google-plus/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 10 Oct 2011 17:23:34 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=4083</guid>
<description><![CDATA[The hallmark of Google Plus so far has been Circles. In contrast to Facebook where you’re either a friend or you’re not (until you put people into lists), Circles has you categorize people as friends, … <a href="https://thomaspark.co/2011/10/fuzzy-circles-in-google-plus/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>The hallmark of Google Plus so far has been Circles. In contrast to Facebook where you’re either a friend or you’re not (until you put people into lists), Circles has you categorize people as friends, family, coworkers, etc. right from the start. This compartmentalization is meant to make targeting specific audiences and managing privacy easier.</p>
<p><span id="more-4083"></span> <img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/googleplus.png" alt="" title="Google Plus Circles" width="595" height="239" class="aligncenter size-full wp-image-4235" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/googleplus.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/googleplus-300x121.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>This sounds simple, and it is if your circles are static. But things start to get hazy when your circles have changing memberships.</p>
<p>Is posting to a circle like sending email? In this model, each message is sent off to everyone who’s in the group at that particular time. When you add someone to the group, they get access to messages sent only while they’re a member. When you remove them, they get to keep those messages but nothing more.</p>
<p>Or is it more like giving out keys to a locked diary? Facebook walls and protected Twitter feeds fall into this category. When you add someone to the group, they get access to all of the accumulated content up to that point, past and present. When you remove them, the system revokes their access to all content.</p>
<p>It turns out that when you add someone to a circle in Google Plus, they get access to all of the content that’s ever been posted to that circle, if not in their stream then by drilling into your activity. This kind of falls in line with the locked diary model. But unlike this model, removing someone from your circle does not revoke their access. Instead, a number of scenarios can play out.</p>
<p>Compare what you expect to happen in each of the following situations with what actually occurs.</p>
<ol>
<li>
<p><strong>You make a post to a circle, but realize you don’t want Alice, who’s in the circle, to see it. You quickly remove her from the circle.</strong></p>
<p>Google Plus indicates to you that Alice no longer has access to the post, but if it made it into her stream, she can continue viewing it! Alice can even see comments made by others after she was removed, though she cannot make comments herself or share it with others. What does and does not end up in a person’s stream is not entirely clear.</p>
</li>
<li>
<p><strong>You post to a circle, and Bob replies yet again with a drama-filled comment. You decide to remove him from the circle once and for all.</strong></p>
<p>Because Bob has commented, he now keeps full access to the post. In this case, Google Plus correctly indicates that he has access. He can continue adding comments to the post, and he can share it with others outside the circle by default. And on top of that, he can see subsequent comments made to the post.</p>
</li>
<li>
<p><strong>You posted some personal things to your circle, but that was awhile back. You add Carol, who you’ve just made friends with, to your circle. Unfortunately, she starts to act creepy and so you remove her.</strong></p>
<p>These old posts most likely did not make it into Carol’s stream. Even if she went into your profile’s activity and commented on them there, she will lose access to them. If the posts did make it into her stream though (which might be possible if they’re not that old and/or her stream is not that populated), she keeps access. You just have no way of knowing which case it is.</p>
</li>
</ol>
<p>Granted some of these are most certainly due to bugs, but this serves as a reminder that Circles are not as airtight as you might think.</p>
<p>And though not as farcical as <a href="http://upload.wikimedia.org/wikipedia/en/8/8b/Google_Wave.png" target="_blank">Wave</a>, the model Google has created here is still complex, confusing user expectations for how the system works and social norms for how it should be used.</p>
<p>This confusion will inevitably lead to gaffes. Even if these boil down to user error and not some technical failure, Google should not be entirely free from blame.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/10/fuzzy-circles-in-google-plus/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Making Menus Escapable</title>
<link>https://thomaspark.co/2011/10/making-menus-escapable/</link>
<comments>https://thomaspark.co/2011/10/making-menus-escapable/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 07 Oct 2011 13:59:57 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=3823</guid>
<description><![CDATA[A post on my impressions of Ubuntu 11 led to lots of thoughtful discussion here and over at Hacker News. The part that seemed to generate the most interest was my take on why certain … <a href="https://thomaspark.co/2011/10/making-menus-escapable/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>A post on <a href="http://thomaspark.co/2011/10/seven-minutes-in-ubuntu/">my impressions of Ubuntu 11</a> led to lots of thoughtful discussion here and <a target="_blank" href="http://news.ycombinator.com/item?id=3063156">over at Hacker News</a>. The part that seemed to generate the most interest was my take on why certain menus seemed so troublesome.</p>
<p><span id="more-3823"></span> And while I described the problem in some depth, I glazed over any solution. So here I am to expand a bit on how Unity’s menus, and menus in general, might be improved, once again applying the <strong>angle of escape</strong> concept and pulling examples from the Mac.</p>
<h3>Recap</h3>
<p>I observed that when trying to select a menu item in Ubuntu, it’s quite easy to accidentally trip another menu. Due to the aspect ratio of Ubuntu’s menus, which tend to be taller and thinner, their angles of escape are often smaller than their Mac counterparts. Highlighted yellow in the screenshot below, you get 65 degrees with the Apple menu, compared to 50 degrees with Ubuntu’s system menu. This difference seems to have a noticeable impact.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated.png" alt="" title="Mac OS X and Ubuntu system menus" width="595" height="310" class="aligncenter size-full wp-image-3726" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated-300x156.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Further, let’s assume that users have two tendencies: to target the text of a menu item more than the whitespace, and to move in a straight line to their target. I believe these are reasonable hypotheses, at least for novices who haven’t trained themselves out of this behavior yet. Then due to Ubuntu’s placement of the menu item text in the example above, the problem is only compounded.</p>
<h3>Resize the Menu</h3>
<p>So what can we do about this? A straightforward approach is to increase the width of the menu. This helps the menu both as a target (invoking <a href="http://particletree.com/features/visualizing-fittss-law/" target="_blank">Fitts’ Law</a> again) and as a point of escape, a double win.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/clocks.png" alt="" title="Analog and Digital Time Menus on Mac" width="399" height="350" class="aligncenter size-full wp-image-3877" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/clocks.png 399w, https://thomaspark.co/wp/wp-content/uploads/2011/10/clocks-300x263.png 300w" sizes="auto, (max-width: 399px) 100vw, 399px" /></p>
<p>But while it helps visibility and targeting to a lesser degree, <strong>increasing the height of a menu actually hurts escapability</strong>. This is something to consider when comparing OS X’s 21 pixel menu bar to Ubuntu’s 23 pixels.</p>
<h3>Buffer Time and Space</h3>
<p>Since the ’80s, both Apple and Microsoft have dealt with escapability in the context of hierarchical menus, each addressing it in their own way. If you were to treat hierarchical menus at face value, the user would have to steer carefully across the width of a menu item to avoid triggering a neighbor.</p>
<p>Microsoft’s solution was, and continues to be, to keep the submenu displayed for an extra split second, regardless of your actions. If you’re quick enough, you can get to the submenu taking any path you wish.</p>
<p>Apple’s solution in Mac OS was to <a href="http://www.quinn.echidna.id.au/Quinn/WWW/HISubtleties/HierarchicalMenus.html" target="_blank">widen the angle of escape to 90 degrees</a>, so that as long as your movement was more horizontal than vertical, the submenu would stay open. Bruce Tognazzini, the original drafter of Apple’s HIG, talks about both approaches <a href="http://www.asktog.com/columns/022DesignedToGiveFitts.html" target="_blank">here under question 6</a>.</p>
<p>This <a href="http://arstechnica.com/apple/reviews/1999/12/macos-x-dp2.ars/5" target="_blank">went away in the transition to OS X</a>, but has since returned in a smarter form. Now the angle of escape is based on the size of the submenu, as long as you maintain a certain speed. Ubuntu takes a similar approach, but none of the OSes apply it to the main menu bar.</p>
<p>In the image below, you can see how the naïve, classic Mac OS, and Mac OS X approaches compare in their angles of escape.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/submenu.gif" alt="" title="Submenus" width="577" height="900" class="aligncenter size-full wp-image-3930" /></p>
<h3>Make the Menu Sticky</h3>
<p>Another approach is to make the menu sticky. Once clicked, it stays activated until you click elsewhere, maximizing the angle of escape. The tradeoff here is that it prevents you from performing the “piano slide” to scan multiple menus quickly. This makes it best suited for specialized menus.</p>
<p>Likely for technical reasons, third-party menu extras on the Mac take on this property, though Apple’s own menu extras do not. Apple’s Spotlight menu (which, it should be noted, is in the same position as Ubuntu’s system menu that started this whole discussion) quite intentionally gets the sticky treatment.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/menuextra1.png" alt="" title="Menu Extra on Mac" width="595" height="184" class="aligncenter size-full wp-image-3971" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/menuextra1.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/menuextra1-300x93.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Ubuntu might find good use for this approach in the right half of their menu bar.</p>
<h3>Change the Target</h3>
<p>A final approach is to offer visual cues for staying within the angle of escape. This might be achieved by keeping the menu item area narrow, dropping wider items further down the list, or lengthening the text of shorter items to fill the space.</p>
<p>Strong highlighting, as found in OS X and Ubuntu, also encourages users to use the entire width of the menu item. While the highlighting in Windows 7 is more subtle, menu items are rendered as buttons on hover, similarly signaling that the whitespace can be clicked.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/startmenu.png" alt="" title="Windows 7 Start Menu" width="509" height="537" class="aligncenter size-full wp-image-3977" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/startmenu.png 509w, https://thomaspark.co/wp/wp-content/uploads/2011/10/startmenu-284x300.png 284w" sizes="auto, (max-width: 509px) 100vw, 509px" /></p>
<p>To wrap up, let’s take a look at the volume controls in Mac OS X, Windows 7, and Ubuntu below. On Mac and Windows, the control stays within the angle of escape (though it doesn’t matter on Windows because theirs is sticky). On Ubuntu though, it extends well beyond it. <a href="http://www.youtube.com/watch?v=lVUokjAlREs" target="_blank">This video</a> demonstrates the problem in motion.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/volumecontrols.png" alt="" title="Volume controls for Mac, Windows, and Ubuntu" width="526" height="362" class="aligncenter size-full wp-image-4066" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/volumecontrols.png 526w, https://thomaspark.co/wp/wp-content/uploads/2011/10/volumecontrols-300x206.png 300w" sizes="auto, (max-width: 526px) 100vw, 526px" /></p>
<p>The obvious solution is to make Ubuntu’s volume control vertical. But we don’t necessarily have to follow the convention of other OSes to make it usable. We could make the menu sticky. We could add a time or space buffer. We could reorder the menu items. We could resize the menu or slider control. Or we could do some combination of these.</p>
<p>Sure, this is all sweating the small stuff. But multiply that over a whole operating system, and that’s how you end up creating a great user experience.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/10/making-menus-escapable/feed/</wfw:commentRss>
<slash:comments>7</slash:comments>
</item>
<item>
<title>Seven Minutes in Ubuntu</title>
<link>https://thomaspark.co/2011/10/seven-minutes-in-ubuntu/</link>
<comments>https://thomaspark.co/2011/10/seven-minutes-in-ubuntu/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sun, 02 Oct 2011 14:10:47 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=3521</guid>
<description><![CDATA[For a while now, I’ve been using my home machine with MAMP to develop a research prototype. But last week, I got my hands on a PC to use as a web server. Before I … <a href="https://thomaspark.co/2011/10/seven-minutes-in-ubuntu/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>For a while now, I’ve been using my home machine with <a href="http://www.mamp.info/en/mamp/index.html" target="_blank">MAMP</a> to develop a research prototype. But last week, I got my hands on a PC to use as a web server. Before I could get started on it though, I needed an operating system to install — ideally one that would get the job done with minimal setup and training on my part. After a bit of reading online, I chose <a href="http://www.ubuntu.com/ubuntu" target="_blank">Ubuntu</a>.</p>
<p><span id="more-3521"></span> <a href="http://thomaspark.me/wordpress/wp-content/uploads/2011/10/ubuntu.png"><img loading="lazy" decoding="async" src="http://thomaspark.me/wordpress/wp-content/uploads/2011/10/ubuntu-thumbnail.png" alt="" title="Ubuntu" width="595" height="446" class="aligncenter size-full wp-image-4360" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/ubuntu-thumbnail.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/ubuntu-thumbnail-300x225.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>
<p>What follows are my first impressions of Ubuntu 11. And I mean my very first impressions, after using it for just a few minutes, taking on the persona of a lifetime Mac user.</p>
<p>And these impressions come from someone who’s used mostly Windows at work and Mac at home. Sure, there’s a sprinkling of Solaris, IRIX, and Linux mixed in there, but I haven’t used Ubuntu, and haven’t had to adjust to the changes that Unity brings (such as <a href="http://yokozar.org/blog/archives/194" target="_blank">moving the window controls</a>). So I’m just the user that Ubuntu is targetting.</p>
<p>I hope you find this perspective of interest, whether you’re curious about an alternative operating system, or are a seasoned Linux user, developer, or advocate who wants to see things through a fresh set of eyes.</p>
<h3>The Good</h3>
<p>My greatest concern was that I’d have to do a lot of installing and configuring before I could get anything meaningful done. All I wanted was a standard setup, and to not derail focus from my work.</p>
<p>Fortunately, Ubuntu presents a familiar interface and is ready to go right out of the box. It doesn’t take much nowadays given how many of our applications are web-based, and on Ubuntu, Firefox comes pre-installed (more on that later). Remote desktop is built-in, which made it a breeze to set up VNC with my Mac. Window management <a href="http://windows.microsoft.com/en-US/windows7/products/features/snap" target="_blank">a la Windows 7 Snap</a> was a nice surprise; this requires a third-party app on the Mac.</p>
<h3>The Bad</h3>
<p>Like Mac OS X, Ubuntu puts the active application’s name in the menu bar. In OS X, this contains a menu of application-level functions like About, Preferences, and Quit. In Ubuntu, this is a non-clickable region (highlighted red), despite being nestled among and pretty much indistinguishable from the clickable ones (highlighted green). There’s something jarring about clicking something expectantly and not having it respond.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/menubars-annotated.png" alt="" title="Ubuntu and Mac OS X menu bars" width="595" height="74" class="aligncenter size-full wp-image-3802" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/menubars-annotated.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/menubars-annotated-300x37.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>I can see that the designers are trying to establish a hierarchy here, from the Ubuntu menu (which aligns with the dock) to the active application to the application’s menus. Still, there should be a stronger visual indicator that the application name is not clickable. Or you could just turn it into a menu, <a href="http://cbtcafe.com/mactutorials/applicationswitcher/appswitcher.html" target="_blank">taking a page from Mac OS 9</a>.</p>
<p>You might have noticed that Ubuntu’s menu bar is more tightly packed than OS X’s. A problem here is that while trying to select an item from a drop-down menu, it’s easy to accidentally trip another menu. This is most problematic with the system menu in the top right corner.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated.png" alt="" title="Mac OS X and Ubuntu system menus" width="595" height="310" class="aligncenter size-full wp-image-3726" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated-300x156.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Mac OS X’s Apple menu gives you a target of 45 by 21 pixels, compared to Ubuntu’s 28 by 23 pixels. These areas are highlighted green above. But <a href="http://particletree.com/features/visualizing-fittss-law/" target="_blank">as Fitts’ Law reminds us</a>, these corner targets are both effectively infinite in size.</p>
<p>More important than size is the <strong>angle of escape</strong> — the number of degrees you can move the cursor out without activating an adjacent menu. You get 65 degrees in OS X versus 50 degrees in Ubuntu, as highlighted yellow.</p>
<p>In fact, Ubuntu should have an even bigger angle than OS X. Due to the placement of the icon on the right and the left-justification of the menu items, you can’t travel in a straight line to click the first few pieces of text — this will activate the next menu. Instead, you have to perform a loop-de-loop. Widening the clickable area would help somewhat.</p>
<p>Now onto my next set of gripes, which center around managing new software. As I mentioned earlier, Firefox comes preinstalled. When I checked to see which version was installed, I was presented with the window below.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/mozilla-about.png" alt="" title="Firefox about window" width="595" height="362" class="aligncenter size-full wp-image-3715" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/mozilla-about.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/mozilla-about-300x183.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Version 4.0 is several major bumps behind the other platforms, which are sitting at 7.0.1. Below that is the text “Mozilla Firefox for Ubuntu canonical – 1.0”. Is this the 1.0 canonical version of Mozilla Firefox for Ubuntu? Or Mozilla Firefox for Ubuntu canonical version 1.0? And how does that relate to version 4.0? Apparently, <a href="https://bugs.launchpad.net/ubuntu/+source/firefox-3.5/+bug/418203" target="_blank">I’m not the only one</a> who finds this confusing.</p>
<p>And worse yet, there is no obvious way to update. I’m still not clear on whether there’s a newer version available, and how to update if it’s the case.</p>
<p>Anyway, the main reason I opened Firefox was to install Google Chrome (sorry Mozilla!). Fortunately, the latest version of Chrome was available to download. Double-clicking the package doesn’t take you to a standalone installer, but to Ubuntu Software Center.</p>
<p>Here, software is listed at two level, technical items and what I presume to be applications. But what’s classified as each can be a surprise. In the application list are items like Input Method Switcher and Multimedia Systems Selector, things most would consider system extensions more so than apps. On the other hand, Google Chrome is listed in technical items with a nondescript icon and label, along with 1,303 other things. Can you spot it in the image below?</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/10/usc-chrome.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/10/usc-chrome.png" alt="" title="Ubuntu Software Center" width="595" height="361" class="aligncenter size-full wp-image-3762" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/10/usc-chrome.png 882w, https://thomaspark.co/wp/wp-content/uploads/2011/10/usc-chrome-300x182.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>
<p>After installing Chrome, the natural next step is to open it. Yet, there’s nowhere in Ubuntu Software Center to do this directly. Contrast this with Windows, where you’re asked if you want to start the program, or the new way in OS X, where an application installed from the Mac App store <a href="http://vimeo.com/18501598" target="_blank">jumps right into your dock</a>.</p>
<h3>The Beautiful</h3>
<p>Despite these issues, I give <a href="http://design.canonical.com/" target="_blank">the designers</a> major props. Open source software has a reputation for being ugly and catering only to the power user. But based on my initial experiences, they’ve created a polished user interface that’s beautiful and user friendly in Ubuntu.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/10/seven-minutes-in-ubuntu/feed/</wfw:commentRss>
<slash:comments>40</slash:comments>
</item>
<item>
<title>The Devour Effect</title>
<link>https://thomaspark.co/2011/09/the-devour-effect/</link>
<comments>https://thomaspark.co/2011/09/the-devour-effect/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Mon, 26 Sep 2011 16:12:52 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=3167</guid>
<description><![CDATA[The folks over at Devour maintain a nice collection of videos, wrapped in a clean interface. One of the touches is that each video is presented using what I call the Devour Effect: a text … <a href="https://thomaspark.co/2011/09/the-devour-effect/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>The folks over at <a href="http://devour.com" target="_blank">Devour</a> maintain a nice collection of videos, wrapped in a clean interface. One of the touches is that each video is presented using what I call the Devour Effect: a text description in the foreground and a still from the video blurred in the background.</p>
<p><span id="more-3167"></span> <img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/devour.png" alt="" title="Devour" width="595" height="345" class="aligncenter size-full wp-image-3176" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/09/devour.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/devour-300x174.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>I was curious how Devour produced the blurred effect and so I took a look at their code. It turns out they simply preprocess the images in something like Photoshop. Sure, that may be the most bulletproof approach, but where’s the fun in that?</p>
<p>What follows is a comparison between Devour’s approach and four other, more programmatic techniques, including a pure CSS solution. The ones that utilize canvas or SVG are based on <a href="http://www.flother.com/blog/2010/image-blur-html5-canvas/" target="_blank">Matt Riggott’s work</a>. And as a point of reference, you can see the actual rendering from Devour above and what an unblurred version looks like below.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/unblurred.png" alt="" title="Unblurred" width="300" height="170" class="aligncenter size-full wp-image-3282" /></p>
<h3>Preprocess with Photoshop</h3>
<p>As I mentioned, Devour creates blurred stills in advance. The text is then overlaid by assigning it a negative top margin. I’ve recreated this here. The only difference to the actual rendering above, you might notice, is that I use Futura since I don’t have access to <a href="http://www.ms-studio.com/FontSales/proximanovacond.html" target="_blank">Proxima Nova Condensed</a>.</p>
<p><a href="http://jsbin.com/enaral/1/edit#html,live" target="_blank">View the code and live render</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/photoshop.png" alt="" title="Photoshop" width="300" height="170" class="aligncenter size-full wp-image-3280" /></p>
<h3>Blur with Canvas and JavaScript</h3>
<p>An alternative approach is to create a canvas element and embed the image in it. JavaScript can be used within a canvas to manipulate images, from scaling or rotating all the way down to pixel-specific operations. This is precisely how the <a href="http://www.pixastic.com/lib/docs/actions/blur/" target="_blank">blur action</a> in Pixastic works. Here, the blurring function loops through the image several times and averages each pixel’s color value with that of its neighbors.</p>
<p><a href="http://jsbin.com/olebur/1/edit#javascript,html,live" target="_blank">View the code and live render</a>. You might notice that the image here is Base64 encoded. This is to overcome a cross-domain security issue with JS Bin. You should be able to reference the image in the normal way.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/canvas.png" alt="" title="Canvas" width="300" height="170" class="aligncenter size-full wp-image-3277" /></p>
<h3>Blur with SVG and XML</h3>
<p>SVG is an image format that has a number of filter effects built right into it. While SVG is normally reserved for vector graphics, you can also embed a bitmap image in it. Then all it takes is a few lines of XML to apply a Gaussian blur to it. One thing to note is the weird glow around the border.</p>
<p><a href="http://jsbin.com/isifoc/1/edit#html,live" target="_blank">View the code and live render</a>. If you were to open the SVG file in a text editor, you would discover <a href="http://jsbin.com/uhedeh/1/edit#html,live" target="_blank">markup like this</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/svg.png" alt="" title="SVG" width="300" height="170" class="aligncenter size-full wp-image-3281" /></p>
<h3>Layer with Canvas and JavaScript</h3>
<p>In contrast to the pixel-based algorithms used in the previous techniques, the final two use a simple trick to blur more efficiently. Copies of the image are stacked upon each another, offset by a few pixels and partially transparent.</p>
<p>Here, a canvas element is created and the image is embedded at full opacity. With each call of the blurring function, copies of the image are stacked on itself recursively, set at an opacity of 12.5 percent and offset in each direction by a pixel. Each iteration results in an increasingly blurred image.</p>
<p><a href="http://jsbin.com/ixamep/1/edit#javascript,html,live" target="_blank">View the code and live render</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/layers.png" alt="" title="Layers" width="300" height="170" class="aligncenter size-full wp-image-3279" /></p>
<h3>Layer with CSS</h3>
<p>Finally, I wanted to see if I could achieve a similar effect using pure CSS — that is, without the aid of JavaScript, canvas, or SVG. Here, copies of the original image are set to an opacity of 12.5 percent and offset from the original by two pixels in each of eight directions.</p>
<p>A couple of remarks about the code. The copies are all given absolute positioning, meaning they are positioned relative to their common parent. CSS classes are used to set the offset of an image in a cardinal direction; a combination of these classes is used to offset an image diagonally. Finally, in order to use z-index to keep text at the top of the stack, all of the elements using z-index are given a position other than default static.</p>
<p><a href="http://jsbin.com/enucef/1/edit#html,live" target="_blank">View the code and live render</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/css.png" alt="" title="CSS" width="300" height="170" class="aligncenter size-full wp-image-3278" /></p>
<h3>Conclusion</h3>
<p>So how do these approaches measure up? As you can see from the side-by-side comparison, they all do an adequate job. Click to enlarge.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/09/comparo.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/comparo.png" alt="" title="Comparison of outputs" width="595" height="337" class="aligncenter size-full wp-image-3379" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/09/comparo.png 900w, https://thomaspark.co/wp/wp-content/uploads/2011/09/comparo-300x170.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>
<p>If you don’t want to bust out Photoshop and wrangle with a bunch of images, or you want to create a dynamic effect, try one of the alternative approaches. If, on top of that, you’re not comfortable programming, you can get by with just CSS.</p>
<p>But if you want what’s speediest and most robust on the client, do as Devour does.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/09/the-devour-effect/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Trebek: Building an Offline Web App</title>
<link>https://thomaspark.co/2011/09/trebek-building-an-offline-web-app/</link>
<comments>https://thomaspark.co/2011/09/trebek-building-an-offline-web-app/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 20 Sep 2011 15:40:03 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Games]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=2668</guid>
<description><![CDATA[In my experimentation with HTML5, I ended up making Trebek, a web app that allows you to play along at home with Jeopardy! The idea is that by trying to answer questions before the contestants … <a href="https://thomaspark.co/2011/09/trebek-building-an-offline-web-app/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>In my experimentation with HTML5, I ended up making Trebek, a web app that allows you to play along at home with <a href="http://en.wikipedia.org/wiki/Jeopardy" target="_blank" rel="noopener noreferrer">Jeopardy!</a> The idea is that by trying to answer questions before the contestants do and keeping score, you can gauge your chances of making it onto the show. <a href="http://www.pisspoor.com/jep.html" target="_blank" rel="noopener noreferrer">According to two-time winner Karl Coryat</a>, you have an excellent shot if you can score $28,000 or higher on a consistent basis, and Trebek helps keep track of your performance.</p>
<p><span id="more-2668"></span> <a href="https://thomaspark.co/projects/trebek/" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/iphone.png" alt="" title="Trebek on iPhone" width="595" height="316" class="aligncenter size-full wp-image-3007" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/09/iphone.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/iphone-300x159.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>
<p>You can try Trebek out below. For best results, load it in Safari on your iPhone or iPad, then <a href="http://www.lifehacker.com.au/2011/06/add-website-bookmarks-to-your-iphones-homescreen/" target="_blank" rel="noopener noreferrer">add it to your home screen</a>.</p>
<blockquote><p><a href="https://thomaspark.co/projects/trebek/" target="_blank" rel="noopener noreferrer">https://thomaspark.co/projects/trebek/</a></p></blockquote>
<p>What I want to do in this post is share some simple things I did to give Trebek a more app-like experience, despite it being a mere HTML/CSS/JavaScript bundle. If you’re interested in web development, read on.</p>
<h3>Tailoring the interface by scaling elements</h3>
<p>Trebek’s primary use case is leaning back on a sofa and pulling out your smartphone just as the show’s about to start. But it’s meant to be usable for – and therefore scales to – a full range of devices. You can test this out by loading it in a browser window and resizing to various shapes and sizes.</p>
<p>There are several ways to achieve this, but what I recommend is setting the font-size of the body to 100% and then using em as a unit of measure throughout the rest of the code.</p>
<pre>
<code class="language-css" lang="css">
body {
font-size: 100%;
}
#score {
padding: 0.2em 0 0.2em 0;
font-size: 6em;
text-shadow: #000000 0.05em 0.05em 0.02em;
}
</code>
</pre>
<p>The size of em depends on the font-size of the element. By default, 1 em equals 16 pixels. But by changing the base font-size, you can scale all properties that are using em simultaneously. With the following jQuery, you can update body’s font-size, and therefore all of these properties, whenever the window is resized.</p>
<pre>
<code class="language-javascript" lang="javascript" nowrap="0">
$(window).resize(function(){
$('body').css('font-size', Math.floor($(window).height() * 100 / 768) + '%');
});
</code>
</pre>
<p>You can see why using pixels instead might be a bad idea. As an absolute unit, you have to recalculate and update the pixel size of each property individually, each time the window is resized.</p>
<p>On the other hand, using percent to size things is appealing since it’s relative by its very nature. Using percent also means you no longer require an update function for when the window is resized. If you set an image’s width to be 25%, it’s always going to be 25% of whatever, you might assume. However, keep in mind that percentages are local, meaning they’re based on the element’s parent and not a global value. While they’re useful for site layout, they’re less effective for fine-tuned properties like padding and text-shadow. Just try using percents to set the same padding for multiple elements, when their parent elements are different sizes.</p>
<p>While I simply scaled the interface, you might consider <a href="http://www.alistapart.com/articles/responsive-web-design/" target="_blank" rel="noopener noreferrer">media queries</a> for more custom interfaces conditional on resolution, aspect ratio, and orientation. For example, you could provide a one-column interface for smartphones versus a two-column interface for tablets.</p>
<h3>Cutting the cord with local storage & application cache</h3>
<p>Local storage allows you to store data on the client in much the same way as a browser cookie. It allows you to avoid databases — nice for a lightweight app, particularly one you intend to work offline. One word of warning though: clearing the browser’s cache results in the data being lost. Trebek uses local storage to save scores and keep a history of a user’s performance.</p>
<p>To use local storage, bundle up your data into a JavaScript object and use the following code. First, it checks that local storage is supported. Next, it checks if a data object has been saved under the key ‘trebek’ before and if so, assigns it to a variable. In the second part of the code, a function is bound to the save button. This function adds a new entry to the data object using the current date/time as key and current score as value, and then puts the whole object in local storage under the key ‘trebek’.</p>
<pre>
<code class="language-javascript" lang="javascript">
if(localStorage){
if(localStorage.getItem('trebek')){
stats = JSON.parse(localStorage.getItem('trebek'));
}
$('#save').bind('mouseup', function(){
var now = new Date();
stats[now.toString()] = parseInt($('#score').text());
localStorage.setItem('trebek', JSON.stringify(stats));
});
</code>
</pre>
<p>Application cache stores your essential files so your web app can work offline, useful when your smartphone is in airplane mode or you have an iPod touch sans wifi. For Trebek, the greatest benefit regardless of whether the device is offline or not is that application cache improves startup speed.</p>
<p>The main thing you need is a cache manifest, which is a text file that specifies the resources to be cached for future use. Name this file “cache.manifest”, with the following content, and place it in the root of your web app. Under the CACHE section, you want to list all of the assets you wish to be cached except for the manifest file itself.</p>
<pre>
<code class="language-bash" lang="bash">
CACHE MANIFEST
# Trebek version 1.0
CACHE:
index.html
css/style.css
js/jquery-1.6.3.min.js
js/script.js
img/icon-web.png
NETWORK:
FALLBACK:
</code>
</pre>
<p>Each time the web app is opened while online, the cache manifest is checked to see if it’s been changed (such as by updating the version number comment). If a change has been made, this triggers the browser to re-cache the rest of the files. If not, the cache continues to be used.</p>
<p>With the cache manifest in place, you want to declare it in one of your pages by adding the following attribute to the HTML tag.</p>
<pre>
<code class="language-markup" lang="html4strict">
<html manifest="cache.manifest">
</code>
</pre>
<p>Finally, make sure that your web server is serving files with the manifest extension as type “text/cache-manifest”. It won’t work otherwise. You can check this using your favorite browser’s developer tool. If the file type is not correct, add the following line to the .htaccess file in the root of your web server.</p>
<pre>
<code class="language-bash" lang="bash">
AddType text/cache-manifest manifest
</code>
</pre>
<p>That covers the very basics of using local storage and application cache to enable offline functionality in your web app. Obviously much has been glossed over, so if you want to learn more, check out Mark Pilgrim’s chapters on <a href="http://diveintohtml5.org/storage.html" target="_blank" rel="noopener noreferrer">local storage</a> and <a href="http://diveintohtml5.org/offline.html" target="_blank" rel="noopener noreferrer">application cache</a>.</p>
<h3>Putting on the finishing touches for iOS</h3>
<p>Here are a few more steps you can take to put some polish on your newly offline-capable web app. First, save your favicon for multiple resolutions: 48, 57, 72, and 114 pixels. Not only are browsers making greater use of large favicons, but they can be used as icons when your web app is saved to your home screen, giving it a bit more of that native feel.</p>
<p>In the header of your page, add the following elements. The first specifies a favicon for web browsers, and the next three are for the iPhone, iPad, and iPhone retina display respectively. You can skip the <code>-precomposed</code> tag to have iOS automatically add its customary gloss to your icon.</p>
<pre>
<code class="language-markup" lang="html4strict" nowrap="0">
<link rel="icon" type="image/png" href="img/icon-web.png"/>
<link rel="apple-touch-icon-precomposed" href="img/icon-iphone.png" sizes="57x57"/>
<link rel="apple-touch-icon-precomposed" href="img/icon-ipad.png" sizes="72x72"/>
<link rel="apple-touch-icon-precomposed" href="img/icon-retina.png" sizes="114x114"/>
</code>
</pre>
<p>If you want to give your web app a custom splash screen, add the following tags as well. The images you reference must be exactly 1004×768, 768×1004, and 320×460 pixels respectively. As far as I can tell, iPhone 4’s retina resolution is not supported yet.</p>
<pre>
<code class="language-markup" lang="html4strict" nowrap="0">
<link rel="apple-touch-startup-image" href="img/startup-ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)"/>
<link rel="apple-touch-startup-image" href="img/startup-ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"/>
<link rel="apple-touch-startup-image" href="img/startup-iphone-portrait.png" media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)"/>
</code>
</pre>
<p>Add the following code to tell Safari that your site is intended as a web app, change the menu bar to black, hide the chrome to display the app full-screen, and prevent pinch-to-zoom.</p>
<pre>
<code class="language-markup" lang="html4strict" nowrap="0">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
</code>
</pre>
<p>So there you have it. It’s great to see the progress that’s being made with the web in recent years. Although it hasn’t quite reached parity with native apps, for many of the simpler apps you find in the App Store, it’s now possible to create an equivalent experience using HTML5.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/09/trebek-building-an-offline-web-app/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>Sizing Up Programmatically</title>
<link>https://thomaspark.co/2011/09/sizing-up-programmatically/</link>
<comments>https://thomaspark.co/2011/09/sizing-up-programmatically/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Fri, 09 Sep 2011 15:39:30 +0000</pubDate>
<category><![CDATA[Code]]></category>
<category><![CDATA[Demo]]></category>
<category><![CDATA[Gadgets]]></category>
<category><![CDATA[Visualization]]></category>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=2617</guid>
<description><![CDATA[Yesterday, I showed a graphic that lays out popular devices by display size. In this post, I want to show a version created using HTML, CSS, and JavaScript. The upside of doing this programmatically rather … <a href="https://thomaspark.co/2011/09/sizing-up-programmatically/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Yesterday, I showed a <a href="http://thomaspark.co/2011/09/sizing-up-samsung/">graphic that lays out popular devices by display size</a>. In this post, I want to show a version created using HTML, CSS, and JavaScript. The upside of doing this programmatically rather than manually in a drawing program is that it’s easier to update, adjusts to each user’s viewport, and can be made interactive. The downside is that sometimes web technology isn’t up to the task of rendering something nicely yet.</p>
<p><span id="more-2617"></span> With the programmatic approach, the main function takes in a set of objects, each of which represents a device with corresponding specs: display size (diagonal in inches), display resolution (height and width in pixels), and physical dimensions (height and width in inches).</p>
<p>Each device is then rendered as a div. The aforementioned specs are used to determine its size and shape, with the content area of the div acting as the display and its border serving as the bezel. The display size is also used to determine the horizontal position of each device.</p>
<p>There are also three optional parameters. Scale factor defaults 1 millimeter to 1 pixel, but can be varied per device. Vertical shift centers the display in the bezel by default, but can be tweaked for certain devices such as the Kindle. Finally, curve factor can customize the roundedness of a device using the border-radius property, useful for devices like the Veer, although there are some kinks with that.</p>
<p>Below is a screenshot of the results, and you can <a href="https://thomaspark.co/projects/sizingup/" target="_blank" rel="noopener noreferrer">view the live version here</a>. You can also <a href="http://jsbin.com/oripup/edit#javascript,html" target="_blank" rel="noopener noreferrer">have a look at the code</a>, but pardon the cruft as this is just a proof of concept.</p>
<p><a href="https://thomaspark.co/projects/sizingup/" target="_blank" rel="noopener noreferrer"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/sizingup-small.png" alt="" title="Sizing Up Programmatically" width="595" height="986" class="aligncenter size-full wp-image-2623" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/09/sizingup-small.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/sizingup-small-181x300.png 181w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/09/sizing-up-programmatically/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Sizing Up Samsung</title>
<link>https://thomaspark.co/2011/09/sizing-up-samsung/</link>
<comments>https://thomaspark.co/2011/09/sizing-up-samsung/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 08 Sep 2011 17:14:55 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<category><![CDATA[Visualization]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=2525</guid>
<description><![CDATA[With new devices being released at such a rapid pace, it’s hard to keep up. Perhaps the most frenzied of the bunch has been Samsung, who’s adopted a mentality of “let’s release everything and see … <a href="https://thomaspark.co/2011/09/sizing-up-samsung/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>With new devices being released at such a rapid pace, it’s hard to keep up. Perhaps the most frenzied of the bunch has been Samsung, who’s adopted a mentality of “let’s release everything and see what sticks”. This really comes out when graphing some of the most popular devices by display size.</p>
<p><span id="more-2525"></span> As you can see, while most companies have two distinct classes — a smartphone at 3-4″ and a tablet at 10″ — <a href="http://reviews.cnet.com/8301-19736_7-20102320-251/samsung-galaxy-tablet-sizes-compared/" target="_blank">Samsung is offering several ‘tweeners</a> that bridge them. Note though that they still have a gap, which I expect to be filled shortly with a Samsung Galaxy NoteTab 6.5. In all seriousness, it’s surprising that they haven’t targeted that particular size given Amazon’s already found a market there. </p>
<p>One thing’s for sure. It’s going to be interesting to see if any ‘tweener devices eventually gain a foothold, and it looks like Samsung’s <em>in vivo</em> experimentation will be showing us the way.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/09/sizingupsamsung-medium.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/sizingupsamsung-small.png" alt="" width="595" height="554" class="aligncenter size-full wp-image-2608" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/09/sizingupsamsung-small.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/sizingupsamsung-small-300x279.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/09/sizing-up-samsung/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Fantasy Slopegraphs</title>
<link>https://thomaspark.co/2011/09/fantasy-slopegraphs/</link>
<comments>https://thomaspark.co/2011/09/fantasy-slopegraphs/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sat, 03 Sep 2011 14:40:47 +0000</pubDate>
<category><![CDATA[Games]]></category>
<category><![CDATA[Visualization]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=2380</guid>
<description><![CDATA[I love me some fantasy baseball. Mainly when I’m near the top. With the regular season winding down and the playoffs set to start, my team sits comfortably in second place (in a league of … <a href="https://thomaspark.co/2011/09/fantasy-slopegraphs/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I love me some <a href="http://en.wikipedia.org/wiki/Fantasy_baseball" target="_blank">fantasy baseball</a>. Mainly when I’m near the top. With the regular season winding down and the playoffs set to start, my team sits comfortably in second place (in a league of 12). But this post is only partly to brag about the Mythical Man-Moths.</p>
<p><span id="more-2380"></span> It’s also to reflect on them. How did my draft selections ultimately turn out? Which players ended up being disappointments, and which were bargains or outright steals? Who ended up contributing most to this season’s success? </p>
<p>A <a href="http://charliepark.org/slopegraphs/" target="_blank">slopegraph</a> is an interesting way of capturing the answers. Below is one I made of my players: their rankings (against all other players) at the end of last season on the left, the draft picks I used to select them at the start of this season in the middle, and their ranks as of this week on the right<sup class='footnote'><a href='#fn-2380-1' id='fnref-2380-1' onclick='return fdfootnote_show(2380)'>1</a></sup>. Players released at some point in the season are gray, while those picked up as free agents are green. Click for full size.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/09/baseballslopegraph-full.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/09/baseballslopegraph-thumb.png" alt="" title="Fantasy baseball slopegraph" width="595" height="609" class="aligncenter size-full wp-image-2415" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/09/baseballslopegraph-thumb.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/baseballslopegraph-thumb-293x300.png 293w" sizes="auto, (max-width: 595px) 100vw, 595px" /></a></p>
<div class='footnotes' id='footnotes-2380'>
<div class='footnotedivider'></div>
<ol>
<li id='fn-2380-1'> Ranks are taken from <a href="http://baseball.fantasysports.yahoo.com/" target="_blank">Yahoo! Sports</a>. <span class='footnotereverse'><a href='#fnref-2380-1'>↩</a></span></li>
</ol>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/09/fantasy-slopegraphs/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Puck Remotes and Magic Remotes</title>
<link>https://thomaspark.co/2011/08/puck-remotes-and-magic-remotes/</link>
<comments>https://thomaspark.co/2011/08/puck-remotes-and-magic-remotes/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 31 Aug 2011 12:27:39 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=2032</guid>
<description><![CDATA[I previously talked about why the current Apple TV is a stopgap for the true Apple TV. With that in mind, I want to discuss my experience with the current model and what it means … <a href="https://thomaspark.co/2011/08/puck-remotes-and-magic-remotes/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I previously talked about why the current Apple TV is a stopgap for <a href="http://thomaspark.co/2011/08/the-true-apple-tv/">the true Apple TV</a>. With that in mind, I want to discuss my experience with the current model and what it means for an eventual Apple-branded TV. Through the lens of the remote control.</p>
<p><span id="more-2032"></span> <img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/appletvremote.jpg" alt="" title="Apple TV remote" width="595" height="195" class="size-full wp-image-2233" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/08/appletvremote.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/08/appletvremote-300x98.jpg 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Apple is renowned for its excellent design. But with the Apple TV remote, they’ve made a number of missteps.</p>
<ul>
<li><strong>It’s too small.</strong> Forget losing it between your couch cushions, how about between the pages of a magazine? At 6 millimeters, it’s so thin that it never fits comfortably in one’s hand, and is awkward if not painful to use for a significant length of time. There’s a limit to how small handheld devices should be, and it’s been exceeded.</li>
<li><strong>It’s short range.</strong> The remote is infrared, meaning it requires a direct line of sight. The Apple TV can’t be tucked away, and at certain angles, the remote is unresponsive.</li>
<li><strong>It lacks buttons.</strong> While other companies continue to make remotes <a href="http://www.engadget.com/2010/10/12/sonys-internet-tv-powered-by-google-tv-first-hands-on/" target="_blank">overly complex</a>, Apple goes the opposite extreme. Six buttons do the job most of the time, but not always. One of the things I miss most is a dedicated power button. If you’re in the Netflix app for instance, you have to exit out of it to the home screen with multiple “menu” clicks before you hold the select button for two seconds to power down the Apple TV. Not exactly intuitive or convenient.</li>
</ul>
<p>Small and unergonomic. Tethered to a short range. Not enough buttons. Sound familiar? <strong>The Apple TV remote is the new puck mouse.</strong></p>
<p>The so-called <a href="http://en.wikipedia.org/wiki/Apple_USB_Mouse" target="_blank">“hockey puck” mouse</a> was included with the original iMac in 1998 and stubbornly thereafter for more two years. With its release came a chorus of complaints. It was too small for comfort, they said as they bought <a href="http://www.drbottkg.com/prod/iCatch.html" target="_blank">third-party plastic shells</a>. The round shape meant that it was constantly getting turned around and losing orientation. The two-foot cable was too short for most setups. And of course there was that old chestnut about the single button.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/imacpuckmouse.jpg" alt="" title="iMac puck mouse" width="540" height="330" class="aligncenter size-full wp-image-2231" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/08/imacpuckmouse.jpg 540w, https://thomaspark.co/wp/wp-content/uploads/2011/08/imacpuckmouse-300x183.jpg 300w" sizes="auto, (max-width: 540px) 100vw, 540px" /></p>
<p>Eventually Apple gave up on the puck mouse, though they still were never able to get the mouse quite right. Last year, they ditched the “faster horses” approach, going in a completely different direction with <a href="http://en.wikipedia.org/wiki/Magic_Trackpad" target="_blank">Magic Trackpad</a>.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/magictrackpad.png" alt="" title="Magic Trackpad" width="595" height="239" class="alignnone size-full wp-image-2274" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/08/magictrackpad.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/08/magictrackpad-300x121.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>If, then, the current Apple TV remote is the puck remote, what would it take for it to become the magic remote?</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/08/puck-remotes-and-magic-remotes/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>The True Apple TV</title>
<link>https://thomaspark.co/2011/08/the-true-apple-tv/</link>
<comments>https://thomaspark.co/2011/08/the-true-apple-tv/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Sun, 28 Aug 2011 17:19:42 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=2180</guid>
<description><![CDATA[In the face of rumors that Apple is working on a TV, many remain skeptical that they would get into such a commoditized business. Let me offer some counterpoints. The boundary between computers and TVs … <a href="https://thomaspark.co/2011/08/the-true-apple-tv/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>In the face of rumors that <a href="http://www.macrumors.com/2011/08/28/multiple-sources-suggest-apple-working-on-television-for-as-early-as-2012/" target="_blank">Apple is working on a TV</a>, many remain skeptical that they would get into such a commoditized business. Let me offer some counterpoints.</p>
<p><span id="more-2180"></span> <img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/appletv2.jpg" alt="" title="Apple TV 2" width="595" height="476" class="aligncenter size-full wp-image-2204" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/08/appletv2.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/08/appletv2-300x240.jpg 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>The boundary between computers and TVs is blurring. TVs are becoming increasingly connected and “smart”, while personal computers are becoming a platform for obtaining, viewing, and serving video content. This follows the convergence of mobile phones and computing, and <a href="http://www.asymco.com/2011/08/22/nokia-vs-android/" target="_blank">a shakeup of the mobile phone industry</a> since 2008.</p>
<p>While the hardware specs of current TVs are decent, the user interface leaves something to be desired, both in terms of software and hardware. Think of how poor the remote control, built-in Internet “apps”, channel guide, and configuration settings are on most TVs. There is room for improvement in the user experience, and no doubt Apple believes it can do much better.</p>
<p>In markets that Apple does enter, they favor streamlined integration, from the original Macintosh to the current iMac. Not only does this integration lead to simplicity and elegance, but it opens doors to new possibilities, some of which I’ll talk about in a later post. This also includes the aforementioned TV remote, channel guide, and settings. Having a standalone device like the current Apple TV doesn’t fit with this philosophy.</p>
<p>There are still compelling reasons to offer a standalone device: to reach those who’ve already bought an HDTV, and to allow people to upgrade their Apple TVs without tossing out their perfectly good TV sets. As to the second, upgrade concerns will soon become irrelevant. Once cloud-based storage and 1080p resolution are rolled out fully, only software updates will be needed to stay relatively up to date. They are nearly there. As to the first, Apple might offer a standalone device alongside the integrated model.</p>
<p>But only as a reluctant, and perhaps temporary, measure. To Apple, the standalone model is only a step toward their vision of an integrated one, the true Apple TV.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/08/the-true-apple-tv/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Toward the Man-Purse</title>
<link>https://thomaspark.co/2011/08/toward-the-man-purse/</link>
<comments>https://thomaspark.co/2011/08/toward-the-man-purse/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 24 Aug 2011 12:51:04 +0000</pubDate>
<category><![CDATA[Gadgets]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=1949</guid>
<description><![CDATA[After nearly a decade of service, my messenger bag is finally giving up the ghost. I’ve been looking for a replacement that’s smaller and lighter: just enough to hold a 13-inch Macbook Air, some pen … <a href="https://thomaspark.co/2011/08/toward-the-man-purse/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>After nearly a decade of service, my messenger bag is finally giving up the ghost. I’ve been looking for a replacement that’s smaller and lighter: just enough to hold a 13-inch Macbook Air, some pen and paper, and maybe a book. And I’m realizing that the man-purse is an inevitability.</p>
<p><span id="more-1949"></span> <img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/manpurse.png" alt="" title="Toward the man-purse" width="595" height="400" class="alignnone size-full wp-image-1961" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/08/manpurse.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/08/manpurse-300x202.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Once upon a time, men used briefcases to carry around their contracts, bundles of cash, and nuclear launch codes. Over the years, these morphed into laptop bags and messenger bags. In the meantime, many have gotten quite used to the convenience, if not essentiality, of having things beyond their keys and wallet on them.</p>
<p>Until the state of the art reaches a point where <a href="http://tvtropes.org/pmwiki/pmwiki.php/Main/WeWillNotHavePocketsInTheFuture" target="_blank">pockets are pointless</a>, the need for such a bag remains. But the requirements are changing. Convergence means fewer devices to carry around; instead of a PDA, MP3 player, and camera, you have a smartphone. Miniaturization means the devices you do carry around are getting thinner and lighter; 15-inch behemoths make room for subnotebooks and iPads. Digitization means fewer documents printed on paper; paperbacks are replaced with a Kindle.</p>
<p>What’s needed is a smaller bag. And whether you can <a href="http://www.nytimes.com/2010/12/16/fashion/16ipad.html" target="_blank">come to grips with it or not</a>, let’s accept that we’re entering man-purse territory.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/08/toward-the-man-purse/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
<item>
<title>Version Inflation</title>
<link>https://thomaspark.co/2011/08/version-inflation/</link>
<comments>https://thomaspark.co/2011/08/version-inflation/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 17 Aug 2011 19:49:45 +0000</pubDate>
<category><![CDATA[Web]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=1900</guid>
<description><![CDATA[Major versions sure don’t go as far as they used to. Both Google and Mozilla have adopted rapid release schedules for their web browsers, aiming for four or more major releases per year. As a … <a href="https://thomaspark.co/2011/08/version-inflation/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Major versions sure don’t go as far as they used to. Both Google and Mozilla have adopted rapid release schedules for their web browsers, aiming for four or more major releases per year. As a point of reference, it took Microsoft five long years to bump Internet Explorer from version 6 to 7! One per year seems about the norm.</p>
<p><span id="more-1900"></span> As with economic inflation, more versions means that each version holds less significance. It seems that this is precisely what Google and Mozilla hope to achieve, deemphasizing “What version are you on?” in favor of “Are you up to date?” <a href="http://www.techzoom.net/publications/silent-updates/">Silent, automatic updates</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=678775">hidden version numbers</a> certainly support this notion. Perhaps more people will stay up-to-date, benefiting both security and standards, but we’ll have to wait and see the impact it has on web development.</p>
<p>Mozilla hasn’t always had this approach, but when Firefox and Thunderbird asked me to update to 6.0 today, I had to take pause. “Am I going nuts, or did I just update to 5.0 last month?” It turns out I hadn’t lost it yet.</p>
<p>I went back to compare the release schedules of the major browsers. You can see them plotted by year…</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/08/browserversionsbyyear.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/browserversionsbyyear-1024x695.png" alt="" title="Browser Versions by Year" width="595" height="403" class="alignnone wp-image-1908" /></a></p>
<p>…and by months since initial release.</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/08/browserversionsbyrelease.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/08/browserversionsbyrelease-1024x694.png" alt="" title="Browser Versions by Release" width="595" height="403" class="alignnone size-large wp-image-1932" /></a></p>
<p>There are clearly two schools of thought, the traditional versus the rapid releases of Chrome and Firefox as of late. Projecting with a simple linear regression (I know), here’s what’s in store for the year 2020.</p>
<ul>
<li>Internet Explorer 13</li>
<li>Firefox 10.4</li>
<li>Safari X</li>
<li>Chrome 55.1.531.866</li>
<li>Opera 17 Series</li>
</ul>
<p>But with the latest change in policy from Mozilla, and perhaps other organizations following suit, version inflation may be much greater, if they even matter at all.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/08/version-inflation/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
<item>
<title>Starcraft Collective</title>
<link>https://thomaspark.co/2011/05/starcraft-collective/</link>
<comments>https://thomaspark.co/2011/05/starcraft-collective/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 18 May 2011 14:14:32 +0000</pubDate>
<category><![CDATA[Data]]></category>
<category><![CDATA[Games]]></category>
<guid isPermaLink="false">http://thomaspark.me/?p=1525</guid>
<description><![CDATA[Groups of animals get special collective nouns1, some of which are familiar (e.g., a pride of lions, a gaggle of geese) and others that are less known but equally evocative: a crash of rhinos, a … <a href="https://thomaspark.co/2011/05/starcraft-collective/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Groups of animals get special collective nouns<sup class='footnote'><a href='#fn-1525-1' id='fnref-1525-1' onclick='return fdfootnote_show(1525)'>1</a></sup>, some of which are familiar (e.g., a pride of lions, a gaggle of geese) and others that are less known but equally evocative: a crash of rhinos, a charm of hummingbirds, a prickle of porcupines, a loveliness of ladybugs, a cackle of hyenas, a glint of goldfish, a parliament of owls.</p>
<p>Starcraft units aren’t too far off from animals — Zerglings are reminiscent of dogs, ultralisks elephants, and archons big, white fluffy bunnies — so what collective nouns would capture the spirit of each? Searching the web, I found that the question had been posed before, with lots of ideas but no consensus.</p>
<p><span id="more-1525"></span><img decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/05/scbanner.jpg" alt="" title="Immortals versus siege tanks" width="100%" height="275" class="aligncenter size-full wp-image-1643" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/05/scbanner.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/05/scbanner-300x139.jpg 300w" sizes="(max-width: 595px) 100vw, 595px" /></p>
<p>I conducted a survey to settle the matter<sup class='footnote'><a href='#fn-1525-2' id='fnref-1525-2' onclick='return fdfootnote_show(1525)'>2</a></sup>. Each SC2 unit was given five options (plus “other”) that were culled from various sources. In all, 764 people (40% Zerg, 27% Protoss, 19% Terran, and 14% Random) took the survey over the span of three days.</p>
<h4>Results</h4>
<p>The top vote-getters for each unit are summarized below.</p>
<table>
<tr>
<td><strong>Terran</strong></td>
<td><strong>Zerg</strong></td>
<td><strong>Protoss</strong></td>
</tr>
<tr>
<td>crew of SCVs</td>
<td>swarm of drones</td>
<td>cluster of probes</td>
</tr>
<tr>
<td>pack of MULEs</td>
<td>batch of larvae</td>
<td>legion of zealots</td>
</tr>
<tr>
<td>squad of marines</td>
<td>brood of broodlings</td>
<td>league of stalkers</td>
</tr>
<tr>
<td>band of marauders</td>
<td>cluster of overlords</td>
<td>force of sentries</td>
</tr>
<tr>
<td>pack of reapers</td>
<td>swarm of zerglings</td>
<td>watch of observers</td>
</tr>
<tr>
<td>company of ghosts</td>
<td>harem of queens</td>
<td>assembly of immortals</td>
</tr>
<tr>
<td>gang of hellions</td>
<td>horde of hydralisks</td>
<td>spectrum of warp prisms</td>
</tr>
<tr>
<td>battery of siege tanks</td>
<td>brood of banelings</td>
<td>sweep of colossi</td>
</tr>
<tr>
<td>battalion of thors</td>
<td>congress of overseers</td>
<td>plume of phoenix</td>
</tr>
<tr>
<td>squadron of vikings</td>
<td>infestation of roaches</td>
<td>cloud of void rays</td>
</tr>
<tr>
<td>convoy of medivacs</td>
<td>host of infestors</td>
<td>conclave of high templar</td>
</tr>
<tr>
<td>congress of ravens</td>
<td>outbreak of infested terrans</td>
<td>brotherhood of dark templar</td>
</tr>
<tr>
<td>brigade of banshees</td>
<td>flock of mutalisks</td>
<td>ball of archons</td>
</tr>
<tr>
<td>fleet of battlecruisers</td>
<td>cluster of corruptors</td>
<td>armada of carriers</td>
</tr>
<tr>
<td></td>
<td>network of nydus worms</td>
<td>cloud of interceptors</td>
</tr>
<tr>
<td></td>
<td>stampede of ultralisks</td>
<td>fleet of motherships</td>
</tr>
<tr>
<td></td>
<td>eclipse of brood lords</td>
<td></td>
</tr>
</table>
<h4>Some Notes</h4>
<p>The most consensus was for “pack” of MULEs. Ravens were the other unit named for an animal; its official collective (unkindness) actually came in last place, while it received the most write-ins with “murder” and “flock.”</p>
<p>The most contentious units were banelings (#1 and #4 separated by 6%), immortals (#1 and #2 by 2.4%), phoenix (#1 and #3 by 2.0%), and colossi (#1 and #3 by 1.4%). Protoss units in particular seem far from settled.</p>
<p>For Zerg units, “swarm” fared well both as an option and as a write-in. Should all Zerg units simply be considered “the swarm”?</p>
<p>Generally one can’t have more than one mothership in-game, which led to some interesting write-ins: paradox, singularity, singleton, FOREVER ALONE.</p>
<p>“Other” honorable mentions: a flower of vikings, a nevermore of ravens, a clutch of larva, a grack of zerglings, a useless of hydralisks, a gaggle of mutalisks, a bronze league of observers, a gathering of immortals, an imbalance of colossi, a wing of phoenix.</p>
<p>Finally, a creative exercise for the reader: given the units of your domain, can you come up with collectives that capture their spirit?</p>
<h4>Appendix</h4>
<p>Here are the full results for <a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/terran.png">Terran</a>, <a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/zerg.png">Zerg</a>, and <a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/protoss.png">Protoss</a>.</p>
<div class='footnotes' id='footnotes-1525'>
<div class='footnotedivider'></div>
<ol>
<li id='fn-1525-1'> A longer list of animal collective nouns can be found <a href="http://www.thealmightyguru.com/Pointless/AnimalGroups.html">here</a>. <span class='footnotereverse'><a href='#fnref-1525-1'>↩</a></span></li>
<li id='fn-1525-2'> The solicitation can be viewed <a href="http://www.reddit.com/r/starcraft/comments/h9riu/take_the_starcraft2_collective_nouns_survey/">here</a>. <span class='footnotereverse'><a href='#fnref-1525-2'>↩</a></span></li>
</ol>
</div>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/05/starcraft-collective/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
</item>
<item>
<title>Icon Blues</title>
<link>https://thomaspark.co/2011/05/icon-blues/</link>
<comments>https://thomaspark.co/2011/05/icon-blues/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Wed, 04 May 2011 10:32:40 +0000</pubDate>
<category><![CDATA[Data]]></category>
<guid isPermaLink="false">http://pilcro.ws/?p=266</guid>
<description><![CDATA[I’m not the only one who’s noticed that blue icons seem to be totally overrepresented. But is it really this bad, or is the confirmation bias just acting up again? I decided to find out. … <a href="https://thomaspark.co/2011/05/icon-blues/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>I’m not the only one who’s noticed that <a href="http://www.subtraction.com/2008/02/25/blue-in-the-">blue icons seem to be totally overrepresented</a>. But is it really this bad, or is the confirmation bias just acting up again? I decided to find out.</p>
<p><span id="more-266"></span> <a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/blueicons.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/05/blueicons.png" alt="" title="Blue Icons" width="582" height="118" class="aligncenter size-full wp-image-1488" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/05/blueicons.png 582w, https://thomaspark.co/wp/wp-content/uploads/2011/05/blueicons-300x61.png 300w" sizes="auto, (max-width: 582px) 100vw, 582px" /></a></p>
<h4>The Method</h4>
<p>From each of the twenty iTunes categories (e.g., books, business, education), I collected the icons of the top 30 paid iPhone apps. I used the <a href="http://www.pythonware.com/products/pil/">Python Imaging Library</a> to run through these images pixel by pixel, classifying them into 11 main colors and tallying them up.</p>
<p>Here are a couple of examples shown by percentage. <a href="http://itunes.apple.com/us/app/chat-for-google-talk/id407644858?mt=8">Chat for Google Talk</a>:</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/googletalk.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/05/googletalk.png" alt="" width="608" height="496" class="aligncenter size-full wp-image-1427" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/05/googletalk.png 608w, https://thomaspark.co/wp/wp-content/uploads/2011/05/googletalk-300x245.png 300w" sizes="auto, (max-width: 608px) 100vw, 608px" /></a></p>
<p>And <a href="http://itunes.apple.com/us/app/angry-birds/id343200656?mt=8">Angry Bird</a>s:</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/angrybirds.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/05/angrybirds.png" alt="" width="608" height="496" class="aligncenter size-full wp-image-1486" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/05/angrybirds.png 608w, https://thomaspark.co/wp/wp-content/uploads/2011/05/angrybirds-300x245.png 300w" sizes="auto, (max-width: 608px) 100vw, 608px" /></a></p>
<p>At this point, I could have aggregated all of the pixels across all icons and counted their colors, but that didn’t seem very informative. Instead, I focused on the major colors of each icon, which I defined as making up at least 30 percent of the pixels. With this criteria, the Google Talk icon is white and gray, and the Angry Birds icon is blue.</p>
<h4>The Results</h4>
<p>Here’s how the colors broke down for each category (click to enlarge):</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/categories.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/05/categories-1024x120.png" alt="" width="595" height="69" class="aligncenter size-large wp-image-1438" /></a></p>
<p>And the aggregate:</p>
<p><a href="http://thomaspark.co/wp/wp-content/uploads/2011/05/overall.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/05/overall.png" alt="" width="407" height="496" class="aligncenter size-full wp-image-1439" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/05/overall.png 407w, https://thomaspark.co/wp/wp-content/uploads/2011/05/overall-246x300.png 246w" sizes="auto, (max-width: 407px) 100vw, 407px" /></a></p>
<p>Blue icons were indeed the most common. But while I expected half or more of the icons to be blue, it came closer to one-third. Even at that level though, blue far exceeded the other colors. This is a shame, given that some of my favorite iPhone icons (e.g., <a href="http://itunes.apple.com/us/app/delivery-status-touch-package/id290986013?mt=8">Delivery Status</a>, <a href="http://itunes.apple.com/us/app/instagram/id389801252?mt=8">Instagram</a>, <a href="http://itunes.apple.com/us/app/paprika-recipe-manager-for/id406732590?mt=8">Paprika</a>) use little to no blue. The worst offenders in this regard were travel and navigation apps, half of which were blue. </p>
<p>Black was the least common color for an icon. There were also very few yellow, purple, pink, or white icons, so if you want your app to stand out, there you go.</p>
<p>Pink was most popular with health & fitness apps. Make of that what you will.</p>
<p>A couple of things I took away from the process. First, I couldn’t find much help in the way of information or software for reducing a million colors down to the ones you’d, say, find in a Crayola 12-pack. You can accomplish this by carving out the color space, but as <a href="http://imgs.xkcd.com/blag/satfaces_map_1024.png">this chart from the xkcd color survey</a> shows, the colors we define are quite idiosyncratic, both as a product of human perception and as an artifact of human culture. I ended up converting from RGBA to <a href="http://en.wikipedia.org/wiki/HSL_and_HSV">HSL</a>, which made it a bit easier to come up with clunky heuristics to classify the colors.</p>
<p>Second, the illusory nature of color. Juxtaposing different colors skewed them, the sizes of the backgrounds were overestimated, and shadows threw perceptions off. A case of the human mind outsmarting itself. This makes it tough to give an accurate account, when a pixel is technically one color, but people all perceive it to be another. Most of the time, it’s the perception that matters.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/05/icon-blues/feed/</wfw:commentRss>
<slash:comments>3</slash:comments>
</item>
<item>
<title>Pyramid Schemes</title>
<link>https://thomaspark.co/2011/04/pyramid-schemes/</link>
<comments>https://thomaspark.co/2011/04/pyramid-schemes/#respond</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Tue, 12 Apr 2011 20:32:19 +0000</pubDate>
<category><![CDATA[Visualization]]></category>
<guid isPermaLink="false">http://blindp.wordpress.com/?p=8</guid>
<description><![CDATA[The other day, I was having breakfast and scouring the cereal box for reading material when I came across the new food pyramid. What had they done! This version apparently replaced the old one back … <a href="https://thomaspark.co/2011/04/pyramid-schemes/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>The other day, I was having breakfast and scouring the cereal box for reading material when I came across <a href="https://en.wikipedia.org/wiki/Food_pyramid_(nutrition)#/media/File:MyPyramidFood.svg">the new food pyramid</a>. What had they done!</p>
<p><span id="more-8"></span> <img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidnew.png" alt="" title="New Food Pyramid" width="595" height="464" class="aligncenter size-full wp-image-4585" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidnew.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidnew-300x234.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /> </p>
<p>This version apparently replaced the old one back in 2005. No doubt the actual content of the original <em>was</em> highly dubious, but it’s hard to argue against its memorability. I can still picture the carb foundation and fatty capstone like it was yesterday.</p>
<p><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidold.png" alt="" title="Old Food Pyramid" width="595" height="462" class="aligncenter size-full wp-image-4586" srcset="https://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidold.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidold-300x233.png 300w" sizes="auto, (max-width: 595px) 100vw, 595px" /></p>
<p>Unfortunately, with the new version, a lot of what made the original effective was lost. Let’s run through the issues from an information design perspective.</p>
<h3>Mixed Signals</h3>
<p>Is the new pyramid just a logo, or is it conveying more specific information? It’s not clear at first glance. The old pyramid communicated its purpose as an information graphic and primed the mind for interpreting it this way.</p>
<h3>Missing the Point</h3>
<p>The value of a pyramid diagram is in using its shape to represent hierarchical or proportional information — large bottom to small top. In the new pyramid, the sections are proportional but drawn as vertical bands! The USDA give two reasons for this change. First, to emphasize variety, that you should have something from each food group every day. Fair enough. Second, to emphasize moderation, the wider base of each band representing that you should have more foods with low fat and sugar from that group, and the narrow top meaning less foods with high fat and sugar. I kid you not.</p>
<h3>Not Enough Info</h3>
<p>Sometimes a picture is worth a thousand words, but a bit of text can have a multiplicative effect. The widths of the colored bands vary and are meant to be general guidelines. But precisely what is anyone’s guess. Should we strive to balance the food groups equally, or cut down on meats and beans? Should we have more grains than anything else, as clearly suggested in the original? And what is the yellow band?</p>
<h3>Hidden Messages</h3>
<p>Did you realize that the white tip of the pyramid represents discretionary calories, such as from candy and alcohol? Me neither.</p>
<h3>Jack of all Trades, Master of None</h3>
<p>The food pyramid is supposedly a “food guidance system,” yet crammed in is Clippy McClipartson scaling it to symbolize the importance of physical activity. Let’s work on the “food guidance” part.</p>
<h3>Chartjunk</h3>
<p>Giving examples of each food group is a great idea, but the execution needs improvement. The cluttered layout and horrible quality of the clip art make it more distracting than informative.</p>
<p>The bottom line is, does the new food pyramid help people make informed decisions about the nutritional value of their meals? I would argue not. Effective information design hinges on a message that is consistent and focused. The new food pyramid, which reeks of design-by-committee, fails on both accounts.</p>
<p>What can be done then? I suggest stamping the pyramid in big, bold text with “MyPyramid.gov” and moving the <a href="http://www.mypyramid.gov/mypyramid/index.aspx">Daily Food Plan</a> to the front page of the website.</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/04/pyramid-schemes/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Save Icon</title>
<link>https://thomaspark.co/2011/04/save-icon/</link>
<comments>https://thomaspark.co/2011/04/save-icon/#comments</comments>
<dc:creator><![CDATA[Thomas]]></dc:creator>
<pubDate>Thu, 07 Apr 2011 03:37:16 +0000</pubDate>
<category><![CDATA[User Interface]]></category>
<guid isPermaLink="false">http://pilcro.ws/?p=187</guid>
<description><![CDATA[Earlier this week, David Friedman proposed a new save icon to replace the antiquated floppy disk. In the ensuing discussion, many noted that with automatic revision control à la Google Docs and Mac OS X … <a href="https://thomaspark.co/2011/04/save-icon/">Read more</a>]]></description>
<content:encoded><![CDATA[<p>Earlier this week, David Friedman proposed <a href="http://www.ironicsans.com/2011/04/idea_a_new_save_icon.html">a new save icon</a> to replace the antiquated floppy disk. In the ensuing discussion, many noted that with automatic revision control à la Google Docs and Mac OS X Lion becoming the norm, the whole notion of saving would become history and render the issue moot.</p>
<p><span id="more-187"></span> <a href="http://thomaspark.co/wp/wp-content/uploads/2011/04/saveicon.png"><img loading="lazy" decoding="async" src="http://thomaspark.co/wp/wp-content/uploads/2011/04/saveicon.png" alt="" title="Save Icon" width="149" height="173" class="alignleft size-full wp-image-1393" /></a></p>
<p>Whether that turns out to be the case or not, it raises several interesting questions. With so many computer icons based on specific technology, what happens when that technology fades from public consciousness? Does a lack of familiarity with that technology create usability problems with the icons? Should new icons be devised? And are they?</p>
<p>All English speakers understand the word <em>window</em> to mean an opening designed to let in air or light. But only the geeks among us know the rich history of this word. It originates from an Old Norse phrase describing an opening in a building’s roof as a <em>wind eye</em>. This poeticism was important early on for understandability and communicability of a new idea. But as the word took hold, it established a meaning of its own that transcended its legacy. Today, a window is no longer thought of as the metaphorical wind eye — a window is a window.</p>
<p>Icons are also a language, of the visual sort. In the early days of the graphical user interface, the <a href="http://en.wikipedia.org/wiki/Desktop_metaphor">desktop metaphor</a> was heavily relied upon to communicate new ideas about computing. This was essential to its success, as the nascent GUI made a newbie out of everyone.</p>
<p>However, GUI conventions have since become engrained in our culture, and the meaning of terms like desktop, file, and trash in a computing context now transcend the original metaphors. We are in an age where people interact with digital folders much more than manila ones, where they know how to search without having ever handled a magnifying glass, and where they adjust their volume control without realizing it depicts a speaker cone.</p>
<p>And just as these icons live on beyond their origins, I say long live the floppy disk!</p>]]></content:encoded>
<wfw:commentRss>https://thomaspark.co/2011/04/save-icon/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
</item>
</channel>
</rss>
Raw headers
{
"cf-cache-status": "DYNAMIC",
"cf-ray": "929b5e1ef727e1e3-ORD",
"connection": "keep-alive",
"content-type": "application/rss+xml; charset=UTF-8",
"date": "Tue, 01 Apr 2025 22:01:54 GMT",
"etag": "W/\"7451ebf86d1d43d78084c0b235b16c4a\"",
"last-modified": "Tue, 01 Apr 2025 03:36:00 GMT",
"link": "<https://thomaspark.co/wp-json/>; rel=\"https://api.w.org/\"",
"server": "cloudflare",
"transfer-encoding": "chunked",
"vary": "Accept-Encoding",
"x-litespeed-cache": "miss",
"x-litespeed-cache-control": "public,max-age=604800",
"x-litespeed-tag": "e89_default,e89_URL.750978a6610fa2b4f8e13fb3a731f1b6,e89_FD,e89_",
"x-powered-by": "PHP/7.4.33",
"x-robots-tag": "noindex, follow",
"x-turbo-charged-by": "LiteSpeed"
}
Parsed with @rowanmanning/feed-parser
{
"meta": {
"type": "rss",
"version": "2.0"
},
"language": "en-US",
"title": "Thomas Park",
"description": "On web development, interface design, user research, and all the rest",
"copyright": null,
"url": "https://thomaspark.co",
"self": "https://thomaspark.co/feed/",
"published": null,
"updated": "2025-03-01T17:29:51.000Z",
"generator": {
"label": "https://wordpress.org/?v=6.7.2",
"version": null,
"url": null
},
"image": null,
"authors": [],
"categories": [],
"items": [
{
"id": "https://thomaspark.co/?p=14005",
"title": "Redesigning Hanafuda & Hwatu Cards for Beginners",
"description": "I’ve been working on a redesign of hanafuda and hwatu cards to make them more approachable for beginners. Here’s what a recent iteration looks like. There’s two main goals with the redesign. First is to … <a href=\"https://thomaspark.co/2025/02/redesigning-hanafuda-hwatu-cards-for-beginners/\">Read more</a>",
"url": "https://thomaspark.co/2025/02/redesigning-hanafuda-hwatu-cards-for-beginners/",
"published": "2025-02-24T15:08:55.000Z",
"updated": "2025-02-24T15:08:55.000Z",
"content": "<p>I’ve been working on a redesign of hanafuda and hwatu cards to make them more approachable for beginners. Here’s what a recent iteration looks like.</p>\n<p><img fetchpriority=\"high\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-1600x1064.webp\" alt=\"Hanafuda Neo\" width=\"800\" height=\"532\" class=\"aligncenter size-large wp-image-14055\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-1600x1064.webp 1600w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-800x532.webp 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-768x511.webp 768w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-1536x1022.webp 1536w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hanafuda-Neo-2048x1362.webp 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" /></p>\n<p>There’s two main goals with the redesign. First is to make the cards more vibrant and interpretable than the traditional black-heavy artwork. Second is to give some guidance on how the cards should be used by adding a caption with the plant species, month, and value each card represents.</p>\n<p>This is a work-in-progress. I’ve improved on the captions since this version. As always, I welcome your feedback.</p>\n<h2>Motivation</h2>\n<p>Hanafuda and hwatu cards are gorgeous pieces of tiny art. These playing cards from Japan and Korea respectively entice adults and children alike, prompting them to ask, “how do you play?” That’s when you take a deep breath.</p>\n<div id=\"attachment_14017\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-14017\" src=\"https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda.webp\" alt=\"Traditional Hanafuda\" width=\"1600\" height=\"1317\" class=\"size-full wp-image-14017\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda.webp 1600w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda-800x659.webp 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda-1458x1200.webp 1458w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda-768x632.webp 768w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Traditional-Hanafuda-1536x1264.webp 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" /><p id=\"caption-attachment-14017\" class=\"wp-caption-text\">Credit: Roy Levien</p></div>\n<p>In broad strokes, hanafuda and hwatu cards have a scheme similar to poker cards. Poker has 4 suits — hearts, diamonds, clubs, spades — and each suit has 13 face values: Ace, 2, 3,… Jack, Queen, King.</p>\n<p>Hanafuda and hwatu cards are transposed. They have 12 months of the year, and each month has 4 cards of different value, ranging from bright (20 points), animal (10), ribbon (5), to chaff (1).</p>\n<p>The months are represented as plants: March is cherry blossom, October is maple, November is willow, and so on. Much of the symbolism of the plants, as well as the animals and other objects found on these cards can be lost to Westerners, myself included. It doesn’t help that leaves and grass are traditionally painted as black, making the art all the more inscrutable. And that all 48 cards have unique artwork. But part of the fun is learning about them.</p>\n<p>The trouble comes with the inconsistency in their values. You’d think easy peasy: each month gets 1 bright, 1 animal, 1 ribbon, and 1 chaff card. But not so fast. Each month is made up differently to spice up gameplay. For example, January has 1 bright, 1 ribbon, and 2 chaffs. February has 1 animal, 1 ribbon, and 2 chaffs. December has 1 bright and 3 chaffs.</p>\n<p>Simply refer to the drawings on the cards, you say. But then you learn an animal is not an animal — sometimes it’s a bright, as in the case of the crane. And objects like the wooden bridge and drinking cup are animals.</p>\n<p>And don’t get me started on the convoluted scoring system for <a href=\"https://en.wikipedia.org/wiki/Go-Stop\" rel=\"noopener\" target=\"_blank\">Go-Stop</a>, the predominate way that Hwatu is played in Korea.</p>\n<div id=\"attachment_14075\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-14075\" src=\"https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-800x483.webp\" alt=\"\" width=\"800\" height=\"483\" class=\"size-medium wp-image-14075\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-800x483.webp 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-1600x965.webp 1600w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-768x463.webp 768w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-1536x927.webp 1536w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Hwatu-Neo-2048x1236.webp 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" /><p id=\"caption-attachment-14075\" class=\"wp-caption-text\">In Go-Stop, the cup and bridge cards can be played as either animal or double junk.</p></div>\n<p>Needless to say, keeping straight the months, and more importantly for gameplay, point values poses a barrier. This redesign is my attempt to address that.</p>\n<p>There have been plenty of alternative designs, like this <a href=\"https://www.nintendo.com/us/store/products/hanafuda-cards-mario-red-119579/\" rel=\"noopener\" target=\"_blank\">Nintendo deck</a> with Mario characters. While fun, they don’t clarify the meaning or value of the cards for newcomers.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2025/02/Nintendo-Hwatu.png\" alt=\"Nintendo Hwatu\" width=\"1050\" height=\"591\" class=\"aligncenter size-full wp-image-14026\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2025/02/Nintendo-Hwatu.png 1050w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Nintendo-Hwatu-800x450.png 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Nintendo-Hwatu-768x432.png 768w\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" /></p>\n<h2>Credits</h2>\n<p>The artwork is designed by <a href=\"https://lmnt.me/\" rel=\"noopener\" target=\"_blank\">Louie Mantia</a>, who’s also the talented designer behind the gorgeous <a href=\"https://www.junior.cards/\" rel=\"noopener\" target=\"_blank\">Junior Hanafuda decks</a>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda.png\" alt=\"Junior Hanafuda\" width=\"2474\" height=\"1174\" class=\"aligncenter size-full wp-image-14012\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda.png 2474w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-800x380.png 800w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-1600x759.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-768x364.png 768w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-1536x729.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2025/02/Junior-Hanafuda-2048x972.png 2048w\" sizes=\"auto, (max-width: 2474px) 100vw, 2474px\" /></p>\n<p>The printed the initial runs through <a href=\"https://makeplayingcards.com/\" rel=\"noopener\" target=\"_blank\">Make Playing Cards</a>. Traditional hwatu cards measure about 35mm x 54mm and are made of thick rigid plastic that makes a satisfying sound when slapped down on each other. Mine are made of thinner flexible plastic and are slightly larger at 44mm x 89mm.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Games",
"term": "Games",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=13748",
"title": "575: A Daily Haiku Game for Reddit",
"description": "For the 2024 Reddit Games and Puzzles Hackathon, I submitted 575, a daily word game where you compose a haiku using the words of the day. How to Play 575 Each day, a new set … <a href=\"https://thomaspark.co/2025/01/575-a-daily-haiku-game-for-reddit/\">Read more</a>",
"url": "https://thomaspark.co/2025/01/575-a-daily-haiku-game-for-reddit/",
"published": "2025-01-14T20:51:58.000Z",
"updated": "2025-01-14T20:51:58.000Z",
"content": "<p>For the <a href=\"https://redditgamesandpuzzles.devpost.com/\" rel=\"noopener\" target=\"_blank\">2024 Reddit Games and Puzzles Hackathon</a>, I submitted 575, a daily word game where you compose a haiku using the words of the day. </p>\n<h2>How to Play 575</h2>\n<p>Each day, a new set of words is posted. Players can add any words from this bank to their poem. Your poem is limited, however, to three lines with 5, 7, and 7 syllables in the traditional haiku format. The challenge is to pen something beautiful or witty within these constraints.</p>\n<p>After you’ve finalized your poem, you can give it a title and post it as a comment in the thread. Other Redditors can view and upvote your creation.</p>\n<p>Try 575 out for yourself on the <a href=\"https://www.reddit.com/r/575game/\">r/575game</a> subreddit.</p>\n<div class=\"center\">\n<a class=\"standard-btn xlarge-btn blue-btn\" href=\"https://www.reddit.com/r/575game/\" target=\"_blank\" rel=\"noopener\">Play 575</a>\n</div>\n<p>Or watch the <a href=\"https://www.youtube.com/watch?v=jJTqXl5tJZ4\" rel=\"noopener\" target=\"_blank\">video trailer</a>:</p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/jJTqXl5tJZ4?si=h1cpt7YGt69S-uWE\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe></p>\n<h2>Inspirations</h2>\n<p>The unique design challenges of a Reddit game are that it needs to be social, short and sweet, but replayable.</p>\n<p>One of my inspirations were <a href=\"https://www.amazon.com/Magnetic-Poetry-Original-Essential-Refrigerator/dp/1890560014/\" rel=\"noopener\" target=\"_blank\">magnetic poetry tiles</a> you combine to create unique messages. Using these, you can express yourself and be creative by simply selecting and arranging individual words on your fridge.</p>\n<p>I settled on the 5-7-5 format of Japanese haikus to provide additional constraints, which makes it a more game-like experience. It also puts a ceiling on the playtime required.</p>\n<p>The idea of having the word bank that changes daily came from popular word games like <a href=\"https://www.nytimes.com/games/wordle/\" rel=\"noopener\" target=\"_blank\">Wordle</a> and <a href=\"https://www.nytimes.com/puzzles/spelling-bee\" rel=\"noopener\" target=\"_blank\">Spelling Bee</a> which give players a reason to keep coming back.</p>\n<h2>Implementing on Devvit</h2>\n<p>Until this hackathon, I didn’t realize the rich support for interactive posts that <a href=\"https://developers.reddit.com/docs/\" rel=\"noopener\" target=\"_blank\">Reddit’s Developer Platform</a> (playfully called Devvit) provides.</p>\n<p>The Devvit boilerplate gets you up and running with a basic app, and supports block posts and a newer webview option. I opted for the latter.</p>\n<p>There were a few technical issues I ran into that were unique to developing for Reddit.</p>\n<p>First is that the space you have to work with is limited. Not only can the viewport be small, as in the case of mobile, but you have to account for the additional “chrome” of Reddit’s own interface. Not easy to squeeze 100 words in the remaining space.</p>\n<p>For now, interactions on Devvit are limited to clicks — more advanced gestures like dragging aren’t well-supported. Fortunately, the click-only approach turned out to mesh with 575 just fine.</p>\n<p>In webview, I found no way to detect whether the user was in light and dark mode. This meant a single set of styles had to look decent in both. Something for the API to support down the line.</p>\n<h2>Future Plans</h2>\n<p>575 could be improved by refining the pool of words the daily word bank draws from to strike a balance in terms of fun and usable words.</p>\n<p>The word bank could run with themes, for example holiday words this time of year, or silly or provocative or timely themes for other occasions.</p>\n<p>Lastly, there’s potential to add 575 to an established subreddit like <a href=\"https://www.reddit.com/r/Poetry/\" rel=\"noopener\" target=\"_blank\">r/Poetry</a> as a weekly challenge.</p>\n<h2>Hackathon Results</h2>\n<p>Back to the hackathon, I’m pleased to say 575 was recognized with the UGC Award for best use of user-generated content (i.e. Reddit posts or comments) in a game.</p>\n<p>The hackathon attracted nearly 2000 entrants, with many, many impressive entries. My favorites were <a href=\"https://devpost.com/software/emoji-charades\" rel=\"noopener\" target=\"_blank\">Emoji Charades</a>, <a href=\"https://devpost.com/software/pixel-together\" rel=\"noopener\" target=\"_blank\">Pixel Together</a>, and <a href=\"https://devpost.com/software/laddergram\" rel=\"noopener\" target=\"_blank\">Laddergram</a>.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Games",
"term": "Games",
"url": null
},
{
"label": "Language",
"term": "Language",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=13575",
"title": "Learning CSS Anchor Positioning with Anchoreum",
"description": "Way back when, vertically centering an element was a tall task. Setting consistent gaps between elements took some thinking and several lines of code. Then came flexbox and grid. Both were new and, at the … <a href=\"https://thomaspark.co/2024/11/learning-css-anchor-positioning-with-anchoreum/\">Read more</a>",
"url": "https://thomaspark.co/2024/11/learning-css-anchor-positioning-with-anchoreum/",
"published": "2024-11-18T13:46:30.000Z",
"updated": "2024-11-18T13:46:30.000Z",
"content": "<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-1600x1066.png\" alt=\"anchoreum.com\" width=\"800\" height=\"533\" class=\"aligncenter size-large wp-image-13618\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-1600x1066.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-800x533.png 800w, https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-768x512.png 768w, https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-1536x1024.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2024/11/anchoreum.com_-2048x1365.png 2048w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>Way back when, <a href=\"https://build-your-own.org/blog/20240813_css_vertical_center/\" rel=\"noopener\" target=\"_blank\">vertically centering an element was a tall task</a>. Setting consistent gaps between elements took some thinking and several lines of code. Then came flexbox and grid. Both were new and, at the time, magical features of CSS. Those were the times in which I <a href=\"https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/\">released Flexbox Froggy</a> and <a href=\"https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/\">Grid Garden</a>.</p>\n<p>Well now we have a new CSS layout module on the horizon: anchor positioning.</p>\n<p>And with it comes the release of my new coding game, <a href=\"https://anchoreum.com\" rel=\"noopener\" target=\"_blank\">Anchoreum</a>! Play it for free today.</p>\n<div class=\"center\">\n<a class=\"standard-btn xlarge-btn blue-btn\" href=\"https://anchoreum.com\" target=\"_blank\" rel=\"noopener\">Anchoreum</a>\n</div>\n<p>Like its predecessors, Anchoreum is free to play with no registration required at <a href=\"https://anchoreum.com\" rel=\"noopener\" target=\"_blank\">anchoreum.com</a>. Take a quick dive or refresher whenever you feel motivated.</p>\n<p>You can also play Anchoreum for free on <a href=\"https://codepip.com\">Codepip</a>. This is my platform of 19 coding games that touch on topics like <a href=\"https://codepip.com/games/css-scoops/\" rel=\"noopener\" target=\"_blank\">CSS selectors</a>, <a href=\"https://codepip.com/games/disarray/\" rel=\"noopener\" target=\"_blank\">JavaScript array methods</a>, <a href=\"https://codepip.com/games/regex-machina/\">regular expressions</a>, and <a href=\"https://codepip.com/games/querymon/\" rel=\"noopener\" target=\"_blank\">SQL</a>. Register a free account there to save your progress and get access to 10 bonus levels.</p>\n<p>In Anchoreum, you use CSS anchor positioning to help a museum set up its new exhibit by affixing labels to each anchor display. It’s inspired in part by <a href=\"https://chrome.dev/anchor-tool/\">this nifty anchor tool from Una Kravets</a>.</p>\n<p>To get a taste of the game, here’s the video trailer.</p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/_Ub5Aejoi7Q?si=UkXXw3CI53KOz98S\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe></p>\n<h2>What Exactly is Anchor Positioning?</h2>\n<p>The best way to answer to this is to play Anchoreum. But in a nutshell, CSS anchor positioning is a new layout module that let’s you position and size one element relative to another. There are also options to set fallback behaviors when the element is scrolled off the page. You can tether one element to another, useful for building components like tooltips, dialogs, and dropdown menus.</p>\n<p>It introduces new CSS properties like <code>position-area</code>, <code>position-anchor</code>, <code>anchor-name</code>, <code>position-visibility</code>, and <code>position-try</code>, functions like <code>anchor()</code> and <code>anchor-size()</code>, and the <code>anchor-center</code> value. Take a deep dive on <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning\" rel=\"noopener\" target=\"_blank\">MDN</a>.</p>\n<h2>How’s Support?</h2>\n<p>Anchoreum can be played on Google Chrome or Microsoft edge as of today, and on other browsers as they implement CSS anchor thanks to feature detection.</p>\n<p>CSS anchor is a bleeding-edge feature. Support is far from 100% — <a href=\"https://caniuse.com/?search=position-area\" rel=\"noopener\" target=\"_blank\">at the time of this writing, it sits at 49%</a>. And as far as I can tell, no suitable polyfill exists. Here’s hoping Firefox and Safari get on board soon.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Games",
"term": "Games",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=13514",
"title": "3D Printing a Whiteboard Template for NYT Spelling Bee",
"description": "My son’s current obsession is the New York Times word game Spelling Bee. Every day, he looks up the letters (he says it’s gonna be a good one if the puzzle has e & d, … <a href=\"https://thomaspark.co/2024/09/3d-printing-a-whiteboard-template-for-nyt-spelling-bee/\">Read more</a>",
"url": "https://thomaspark.co/2024/09/3d-printing-a-whiteboard-template-for-nyt-spelling-bee/",
"published": "2024-09-09T12:10:29.000Z",
"updated": "2024-09-09T12:10:29.000Z",
"content": "<p>My son’s current obsession is the New York Times word game <a href=\"https://www.nytimes.com/puzzles/spelling-bee\" rel=\"noopener\" target=\"_blank\">Spelling Bee</a>. Every day, he looks up the letters (he says it’s gonna be a good one if the puzzle has e & d, or i & n & g). Then it’s time to work our way up the ranks to “genius”.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-1600x1018.png\" alt=\"NYT Spelling Bee\" width=\"800\" height=\"509\" class=\"border aligncenter size-large wp-image-13519\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-1600x1018.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-800x509.png 800w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-768x488.png 768w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-1536x977.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-2048x1303.png 2048w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>Our routine is to put the daily puzzle on our whiteboard. We keep the honeycomb grid drawn on, and fill in the letters every morning. The problem with this is the hexagons frequently get smudged, and become crookeder and crookeder each time they’re redrawn. </p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-1412x1200.jpg\" alt=\"Whiteboard\" width=\"800\" height=\"680\" class=\"aligncenter size-large wp-image-13547\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-1412x1200.jpg 1412w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-800x680.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-768x653.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2-1536x1306.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Whiteboard-2.jpg 1600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>To address this, I 3D printed the honeycomb grid. The model is a simple one I made in <a href=\"https://www.tinkercad.com/\" rel=\"noopener\" target=\"_blank\">Tinkercad</a>. An arrangement of hexagons, the Spelling Bee mascot on top, and insets on the back for neodymium magnets that can be attached to our magnetic whiteboard.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2024/09/Tinkercad.png\" alt=\"Tinkercad\" width=\"1400\" height=\"914\" class=\"aligncenter size-full wp-image-13528\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2024/09/Tinkercad.png 1400w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Tinkercad-800x522.png 800w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Tinkercad-768x501.png 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" /></p>\n<p>I uploaded this model to <a href=\"https://craftcloud3d.com/\">Craftcloud</a> and ordered it in yellow PLA.</p>\n<p>When the print arrived, I inserted in the magnets. Unfortunately, the magnetic force of <a href=\"https://www.amazon.com/dp/B0BRZSRPMP/\" rel=\"noopener\" target=\"_blank\">my whiteboard</a> is weak due to its glass surface layer, and the 4mm magnets I used weren’t quite strong enough. That’ll have to be worked out in v2. I ended up reinforcing the bond with <a href=\"https://www.amazon.com/gp/product/B07VNSXY31/\" rel=\"noopener\" target=\"_blank\">reusable double-sided tape</a>. Here’s the result.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-Whiteboard.jpg\" alt=\"Spelling Bee Whiteboard\" width=\"1400\" height=\"1050\" class=\"aligncenter size-full wp-image-13557\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-Whiteboard.jpg 1400w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-Whiteboard-800x600.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2024/09/Spelling-Bee-Whiteboard-768x576.jpg 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" /></p>\n<p>On a side note, if you’re a developer, check out <a href=\"https://codepip.com/codections/\">my code-themed homage</a> to another NYT word game, Connections. Be warned, it’s a challenge.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Hardware",
"term": "Hardware",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=13448",
"title": "Buttonhole: A Button You Can Unbutton",
"description": "Skeuomorphism taken to the extreme rarely works. But it can be fun. Like a turntable interface for playing YouTube music or a rotary telephone dial for number inputs. For buttons, skeuomorphic design usually takes form … <a href=\"https://thomaspark.co/2023/09/buttonhole-a-button-you-can-unbutton/\">Read more</a>",
"url": "https://thomaspark.co/2023/09/buttonhole-a-button-you-can-unbutton/",
"published": "2023-09-26T12:49:10.000Z",
"updated": "2023-09-26T12:49:10.000Z",
"content": "<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2023/09/buttonhole.gif\" alt=\"Buttonhole Demo\" width=\"791\" height=\"392\" class=\"aligncenter size-full wp-image-13483\" /></p>\n<p>Skeuomorphism taken to the extreme rarely works. But it can be fun. Like a <a href=\"https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/\">turntable interface for playing YouTube music</a> or a <a href=\"https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/\">rotary telephone dial for number inputs</a>.</p>\n<p>For buttons, skeuomorphic design usually takes form of a physical switch or push button. But what about one that takes the form, and even the behavior, of that <em>other</em> button — the sartorial kind?</p>\n<p>Enter <a href=\"https://thomaspark.co/projects/buttonhole/\" rel=\"noopener\" target=\"_blank\">Buttonhole</a>, the UI button you can unbutton.</p>\n<h2>Demo</h2>\n<p>Drag the button below and observe the change in value:</p>\n<p><iframe style=\"width: 100%; height: 420px; border: none;\" src=\"https://thomaspark.co/projects/buttonhole/\"></iframe></p>\n<h2>Details</h2>\n<p>Buttonhole is implemented as a custom element. Include <a href=\"https://thomaspark.co/projects/buttonhole/buttonhole.js\"><code>buttonhole.js</code></a> on your page and start using the HTML element <code><button-hole></code>:</p>\n<pre>\n<code class=\"language-markup\"><button-hole buttoned=\"false\"></button-hole></code>\n</pre>\n<p>Besides dragging the button, you can set the <code>buttoned</code> attribute to <code>true</code> to button the button, and <code>false</code> to unbutton it and return to its initial position.</p>\n<p>The element can be customized by setting the following CSS variables:</p>\n<pre class=\"language-css\">\n<code class=\"language-css\">\n--buttonhole-bg-color-left: rgba(0, 0, 0, 1);\n--buttonhole-bg-color-right: rgba(0, 0, 0, 0.7);\n--buttonhole-button-color: yellow;\n--buttonhole-button-size: 2.5rem;\n--buttonhole-hole-size: 3rem;\n</code>\n</pre>\n<p>Go on and ditch that dull checkbox!</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "Humor",
"term": "Humor",
"url": null
},
{
"label": "User Interface",
"term": "User Interface",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=13321",
"title": "CarPlay Karaoke: Playing Music Videos and Lyrics Through Cover Art",
"description": "Can you play videos natively through CarPlay? That is, without jailbreaking your phone or buying expensive hardware. The short answer is, no. The longer answer is, poorly. Poorly as in, slice up a video’s audio … <a href=\"https://thomaspark.co/2023/05/carplay-karaoke-playing-music-videos-and-lyrics-through-cover-art/\">Read more</a>",
"url": "https://thomaspark.co/2023/05/carplay-karaoke-playing-music-videos-and-lyrics-through-cover-art/",
"published": "2023-05-19T14:10:47.000Z",
"updated": "2023-05-19T14:10:47.000Z",
"content": "<p>Can you play videos natively through CarPlay? That is, without <a href=\"https://carbridge.app/\" rel=\"noopener nofollow\" target=\"_blank\">jailbreaking your phone</a> or <a href=\"https://www.amazon.com/s?k=carplay+ai+box&linkCode=ll2&tag=thomasparkco-20&linkId=b5f9131fd059d8df3f30ddc967853f57&language=en_US&ref_=as_li_ss_tl\" rel=\"noopener nofollow\" target=\"_blank\">buying expensive hardware</a>. The short answer is, no.</p>\n<p>The longer answer is, poorly.</p>\n<p>Poorly as in, slice up a video’s audio track, treat each slice’s album art as a video frame, and play it back as a gapless album. How well can this simulate video? What follows is my experimentation with this hack.</p>\n<p>Note: Apple restricts video from CarPlay for a reason. Keep your eyes on the road while driving.</p>\n<h2>From Music Videos to Slideshows</h2>\n<p>For my first test subject, I used the music video for A-Ha’s 1985 classic <em>Take On Me</em>. For my scalpel, I grabbed <a href=\"https://ffmpeg.org/\" rel=\"noopener\" target=\"_blank\">FFmpeg</a>, the ultimate open source tool for manipulating audio and video.</p>\n<p>I started ambitious, splitting the song’s audio track into 100-millisecond segments. This netted 2,271 MP3s and a theoretical frame rate of 10fps. Each MP3’s cover art was a still generated from its video segment. The MP3s were then loaded onto an Apple Music playlist and synced to CarPlay.</p>\n<p>Predictably, this playlist stalled. The Music app had trouble playing a single MP3.</p>\n<p>I bumped up the segments to 1 second. Lo and behold, Apple Music was able to start this playlist. Both the song and music video were recognizable now.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-1600x829.png\" alt=\"Take On Me on CarPlay\" width=\"800\" height=\"415\" class=\"aligncenter size-large wp-image-13431\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-1600x829.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-800x415.png 800w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-768x398.png 768w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay-1536x796.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-carplay.png 1920w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>Yet, it struggled. The biggest hiccups were in the transition from one MP3 to the next. Tracks would start too soon, leaving a tiny but perceptible gap of silence, or too late, skipping a beat. Sometimes the player would freeze.</p>\n<p>Next I tried 10 seconds. Much improved, but by now the experience was less a video and more a slideshow. And the transitions between tracks still wasn’t perfectly smooth. Some tracks also suffered from pops and squelches at their start. This was the case on CarPlay, on iPhone, and on Mac.</p>\n<p>Switching from a lossy format like MP3 to a lossless one — ALAC (Apple Lossless Audio Codec), fixed most of this. But it introduced even worse staticky noise at the end of a few tracks.</p>\n<p>Trying to diagnose all this — was it the encoder or the player? — I played the same MP3 and ALAC files through <a href=\"https://mpv.io/\" rel=\"noopener\" target=\"_blank\">mpv</a>. The MP3s were better, and the ALACs were flawless!</p>\n<p>Apple Music, not the encoding process, appears to be the root of the problem. The part I have no control over. </p>\n<p>My fears were confirmed when I tested Abbey Road, a gapless album purchased and downloaded from the iTunes Store. During the side 2 medley, I heard those same gaps.</p>\n<p>This was about as a good as I was gonna get.</p>\n<h2>Generating Lyrics from Subtitles</h2>\n<p>With full-motion video out of reach, I pivoted from music videos to lyrics. This is actually a feature I’ve wanted in CarPlay. Who doesn’t want to host their own carpool karaoke?</p>\n<p>As a quick test, I sliced up one of those lyric videos with a cheesy Hawaiian sunset background from YouTube. The text was a tad small, but the results were promising.</p>\n<p>I took it a step further and generated my own images, keeping the stills from the music videos, overlaid with lyrics plucked from the associated SRT (SubRip subtitle file). SRTs contain timestamps for each line of the lyrics, which I used to mark the segments.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-1600x829.png\" alt=\"Take On Me Lyrics on CarPlay\" width=\"800\" height=\"415\" class=\"aligncenter size-large wp-image-13406\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-1600x829.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-800x415.png 800w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-768x398.png 768w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay-1536x796.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2023/05/take-on-me-lyrics-carplay.png 1920w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>Success. But judge for yourself. Here are videos of it in action.</p>\n<p>Judy Garland’s <em>Somewhere Over the Rainbow</em>:</p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/CMPIw6EQrsI\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe></p>\n<p>And Encanto’s <em>We Don’t Talk About Bruno</em>:</p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/XjqrSSwgzbk\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe></p>\n<h2>Flexing FFmpeg</h2>\n<p>None of this would have been possible without FFmpeg. Using only FFmpeg, I was able to:</p>\n<ul>\n<li>Burn lyrics to the music video using subtitles from an SRT file</li>\n<li>Re-encode the video with new keyframes to force segments at precise frames</li>\n<li>Segment the video at timestamps to produce audio segments</li>\n<li>Attach metadata to each audio segment including a screenshot from the video as cover art</li>\n</ul>\n<p>Here’s the full shell script if you want to try it out. To all the FFmpeg pros out there, please suggest any improvements to the code.</p>\n<pre>\n<code class=\"language-bash\">\n# settings\nmp4=\"take-on-me.mp4\"\nsrt=\"take-on-me.srt\"\ntitle=\"Take On Me\"\nartist=\"A-Ha\"\nalbum=\"Hunting High and Low\"\ndate=\"1985\"\n\n# get timestamps from srt\ntimestamps=$(grep -oE \"^\\d+:\\d+:\\d+,\" $srt | sed -e \"s/,/.999/\" | paste -sd \",\" -)\n\n# hardcode subtitles\nmkdir temp\nffmpeg -i $mp4 \\\n -vf \"subtitles=$srt:force_style='Fontsize=48,Alignment=10,PrimaryColour=&Hffffff&'\" \\\n -c:a copy \\\n temp/subtitles.mp4\n\n# add keyframes for exact segments\nffmpeg -i temp/subtitles.mp4 \\\n -force_key_frames $timestamps \\\n temp/keyframes.mp4\n\n# segment mp4s\nmkdir -p temp/mp4\nffmpeg -i temp/keyframes.mp4 \\\n -c copy \\\n -f segment \\\n -segment_times $timestamps \\\n -segment_start_number 1 \\\n -reset_timestamps 1 \\\n temp/mp4/%d.mp4\n\n# add metadata to mp3s\nmkdir output\nfiles=(temp/mp4/*.mp4)\nfor ((i=1; i<=${#files[@]}; i++)); do\n ffmpeg -y -i temp/mp4/$i.mp4 \\\n -map 0:a:0 \\\n -map 0:v:0 \\\n -c:a libmp3lame \\\n -metadata title=\"$title\" \\\n -metadata artist=\"$artist\" \\\n -metadata album=\"$album\" \\\n -metadata date=\"$date\" \\\n -metadata track=\"$i/${#files[@]}\" \\\n output/\"$title $(printf '%04d' $i)\".mp3\ndone\n\n# delete temp files\nrm -r temp\n</code>\n</pre>\n<h2>Next Chapter</h2>\n<p>Two other avenues worth exploring are audiobooks and podcasts with chapter artwork. Wonder how far they could be pushed.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=13148",
"title": "Needledrop: A Turntable Interface for Music Playback",
"description": "My latest experiment is Needledrop, a turntable interface for playing music from YouTube. Enjoy chill vibes as you spin a virtual vinyl of your favorite album from YouTube. You can try it for yourself here: … <a href=\"https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/\">Read more</a>",
"url": "https://thomaspark.co/2021/03/needledrop-a-turntable-interface-for-music-playback/",
"published": "2021-03-03T14:17:37.000Z",
"updated": "2021-03-03T14:17:37.000Z",
"content": "<div style=\"margin-bottom: 4rem;\"><div style=\"width: 800px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-13148-1\" width=\"800\" height=\"567\" preload=\"metadata\" controls=\"controls\"><source type=\"video/mp4\" src=\"https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop.mp4?_=1\" /><a href=\"https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop.mp4\">https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop.mp4</a></video></div></div>\n<p>My latest experiment is <a href=\"https://thomaspark.co/projects/needledrop/\" rel=\"noopener\" target=\"_blank\">Needledrop</a>, a turntable interface for playing music from YouTube. Enjoy chill vibes as you spin a virtual vinyl of your favorite album from YouTube. You can try it for yourself here:</p>\n<div class=\"center\"><a class=\"standard-btn black-btn xlarge-btn\" href=\"https://thomaspark.co/projects/needledrop/\" target=\"_blank\" rel=\"noopener\">Needledrop</a></div>\n<p>With Needledrop, I went for the Dieter Rams school of design. It’s inspired by unapologetically skeuomorphic interfaces like Apple’s original Podcasts app, which featured a reel-to-reel tape machine. While I preferred the digitally native approach of <a href=\"https://apps.apple.com/us/app/overcast/id888422857\" rel=\"noopener\" target=\"_blank\">Overcast</a> for day-to-day use, Apple’s approach was visually striking.</p>\n<div id=\"attachment_13195\" style=\"width: 460px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13195\" src=\"https://thomaspark.co/wp/wp-content/uploads/2021/03/apple-podcasts-600x800.jpg\" alt=\"Apple Podcasts\" width=\"450\" height=\"600\" class=\"size-medium wp-image-13195\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2021/03/apple-podcasts-600x800.jpg 600w, https://thomaspark.co/wp/wp-content/uploads/2021/03/apple-podcasts.jpg 768w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" /><p id=\"caption-attachment-13195\" class=\"wp-caption-text\">Photo by <a href=\"https://www.flickr.com/photos/atmasphere/8320805931/\" rel=\"noopener\" target=\"_blank\">Jonathan Greene</a></p></div>\n<p>Podcast’s interface wasn’t just veneer; the reels would progress as the podcast did, providing a subtle visual cue alongside the progress bar. Likewise in Needledrop, the tone arm travels across the record.</p>\n<p>But Needledrop takes the interactivity one step further. Drop the needle and find your favorite track, more or less. It’s fuzzy and inexact, and emphasizes the continuous listening experience an album can be.</p>\n<h2>Pick Your Track</h2>\n<p>Click the “Track” button, paste the link to your favorite album from YouTube, and it’ll load on the platter. You can bookmark the URL for easy access and share it with friends.</p>\n<p>A few quick picks:</p>\n<ul>\n<li><a href=\"https://thomaspark.co/projects/needledrop/?-3frA_rj918\" rel=\"noopener\" target=\"_blank\">Beach House – Bloom</a></li>\n<li><a href=\"https://thomaspark.co/projects/needledrop/?7OaKSeEX3ow\" rel=\"noopener\" target=\"_blank\">Clairo – Best Of</a></li>\n<li><a href=\"https://thomaspark.co/projects/needledrop/?X4YlPELZKdQ\" rel=\"noopener\" target=\"_blank\">Joji – Nectar</a></li>\n<li><a href=\"https://thomaspark.co/projects/needledrop/?sLKMmEpcogQ\" rel=\"noopener\" target=\"_blank\">Radiohead – A Moon Shaped Pool</a></li>\n<li><a href=\"https://thomaspark.co/projects/needledrop/?OB12BslMI3Q\" rel=\"noopener\" target=\"_blank\">Tyler the Creator – Flower Boy</a></li>\n</ul>\n<p>Singles and podcasts work, and streams like <a href=\"https://thomaspark.co/projects/needledrop/?5qap5aO4i9A\" rel=\"noopener\" target=\"_blank\">lofi hip hop radio</a> sorta work. And of course <a href=\"https://thomaspark.co/projects/needledrop/?VN562bgJRZ4\" rel=\"noopener\" target=\"_blank\"><em>the</em> needle drop</a>.</p>\n<p>Fun fact: <a href=\"https://www.bradyharanblog.com/vinyl/mount-doom\" rel=\"noopener\" target=\"_blank\">podcasts have actually been pressed on vinyl</a>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-1600x1133.jpg\" alt=\"Hello Internet\" width=\"800\" height=\"567\" class=\"aligncenter size-large wp-image-13254\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-1600x1133.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-800x567.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-768x544.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-1536x1088.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/03/hello-internet-2048x1451.jpg 2048w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<h2>Skeuomorphic Effects in CSS</h2>\n<p>Of course this post wouldn’t be complete if I didn’t geek out on implementation details.</p>\n<p>First, to achieve spinning record, the following CSS animation was used. The 1.8 second duration corresponds with 33 1/3 rpm.</p>\n<pre class=\"language-css\">\n<code class=\"language-css\">\n#record {\n animation: spin 1.8s infinite linear;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(359deg);\n }\n}\n</code>\n</pre>\n<p>To pause the animation when the “Stop” button is tapped, I first tried <code class=\"language-css\">animation: none;</code>. I quickly noticed that when you resume play, the animation will reset and the record jumps back to its initial position. To smooth out the animation, use this instead:</p>\n<pre class=\"language-css\">\n<code class=\"language-css\">\n.pause #record {\n animation-play-state: paused;\n}\n</code>\n</pre>\n<p>Needledrop can switch between 33 and 45 rpm. When changing the animation duration to account for this, I ran into a similar problem with the spinning animation being jerky. This happened even if I used a CSS variable like <code class=\"language-css\">animation-duration: var(--duration);</code>.</p>\n<p>To work around this, I nested two elements. When the mode is changed to 45 rpm, the second element activates a spin animation as well. After some quick maths, I set the duration of the second spin to 5.1428 seconds.</p>\n<p>I also offset the rotation slightly with <code class=\"language-css\">transform-origin</code>, creating a slight wobble effect.</p>\n<p>To finish the record’s styles, I added grooves with:</p>\n<pre class=\"language-css\">\n<code class=\"language-css\">\nbackground: repeating-radial-gradient(var(--record-color),\n var(--record-groove-color) 3px,\n var(--record-groove-color) 3px);\n</code>\n</pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-1600x962.jpg\" alt=\"Needledrop Record\" width=\"800\" height=\"481\" class=\"aligncenter size-large wp-image-13249\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-1600x962.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-800x481.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-768x462.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record-1536x924.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop-record.jpg 1776w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>I also gave it a shine by positioning an element over the record with a conic background. A separate element was used so the shine wouldn’t rotate with the record.</p>\n<pre class=\"language-css\">\n<code class=\"language-css\">\nbackground: conic-gradient(transparent 20deg,\n rgba(255, 255, 255, .1) 40deg,\n rgba(255, 255, 255, .1) 50deg,\n transparent 60deg,\n transparent 200deg,\n rgba(255, 255, 255, .08) 220deg,\n rgba(255, 255, 255, .08) 240deg,\n transparent 250deg,\n transparent 340deg);\n</code>\n</pre>\n<p>To move the arm of the record player, I used <code class=\"language-css\">transform: rotate(45deg);</code> and set a transition delay, calculating how long it should take for the arm to reach its final position in JavaScript. </p>\n<h2>YouTube API</h2>\n<p>Needledrop is built using the <a target=\"_blank\" href=\"https://developers.google.com/youtube/iframe_api_reference\" rel=\"noopener\">YouTube Player API</a>.</p>\n<p>The API makes it easy to speed up the video when set to 45 rpm, among other things:</p>\n<pre class=\"language-javascript\">\n<code class=\"language-javascript\">\nplayer.setPlaybackRate(1.35);\n</code>\n</pre>\n<p>Of course when you’re using a third-party API, you’re beholden to their terms of service. In this case, the key sections of <a href=\"https://developers.google.com/youtube/terms/developer-policies#i.-additional-prohibitions\">Google’s TOS</a> are:</p>\n<blockquote><p>\nYou and your API Clients must not, and must not encourage, enable, or require others to:</p>\n<p>6. modify, build upon, or block any portion or functionality of a YouTube player;</p>\n<p>7. separate, isolate, or modify the audio or video components of any YouTube audiovisual content made available as part of, or in connection with, YouTube API Services. For example, you must not apply alternate audio tracks to videos;</p>\n<p>8. promote separately the audio or video components of any YouTube audiovisual content made available as part of, or in connection with, the YouTube API Services;</p>\n<p>9. create, include, or promote features that play content, including audio or video components, from a background player, meaning a player that is not displayed in the page, tab, or screen that the user is viewing;\n</p></blockquote>\n<p>So yeah. Hiding the video so only the audio track is used was definitely out. To the label it goes. As for the rest, we’re probably pushing it.</p>\n<p>Anyway, much of digital design is influenced by its analog analogue. It was fun to bring that to the foreground with Needledrop.</p>\n<p>As far as next steps, stay tuned for YouTube playlist and Spotify support.</p>",
"image": null,
"media": [
{
"url": "https://thomaspark.co/wp/wp-content/uploads/2021/03/needledrop.mp4",
"image": null,
"title": null,
"length": 8852706,
"type": "video",
"mimeType": "video/mp4"
}
],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=13065",
"title": "Custom Dutch Blitz Cards",
"description": "The Obsession My family gets competitive with card games. Our latest obsession is Dutch Blitz, a fast-paced game that seems somewhat regional due to the Pennsylvania Dutch influence. To give you an idea of just … <a href=\"https://thomaspark.co/2021/02/custom-dutch-blitz-cards/\">Read more</a>",
"url": "https://thomaspark.co/2021/02/custom-dutch-blitz-cards/",
"published": "2021-02-17T14:26:07.000Z",
"updated": "2021-02-17T14:26:07.000Z",
"content": "<h2>The Obsession</h2>\n<p>My family gets competitive with card games. Our latest obsession is <a href=\"https://www.amazon.com/Dutch-Blitz-201/dp/B000BBU0KS/?tag=thomasparkco-20\" rel=\"noopener\" target=\"_blank\">Dutch Blitz</a>, a fast-paced game that seems somewhat regional due to the Pennsylvania Dutch influence. </p>\n<p>To give you an idea of just how seriously we take it, we have a <a href=\"https://docs.google.com/spreadsheets/d/1v0TMuj690-1lNP0l-GEXHF-hD3uy70pEnL5LCLYhWAY/edit?usp=sharing\" rel=\"noopener\" target=\"_blank\">spreadsheet</a> to keep score and maintain lifetime stats. Feel free to fork it for your own use.</p>\n<p>We’ve also purpose-built a Dutch Blitz table with green felt.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-1600x1200.jpg\" alt=\"Dutch Blitz Table\" width=\"800\" height=\"600\" class=\"aligncenter size-large wp-image-13084\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-1600x1200.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-800x600.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-1536x1152.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-table-2048x1536.jpg 2048w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>The latest endeavor? To create custom cards in the style of Dutch Blitz / Ligretto / Nerts.</p>\n<h2>The Design</h2>\n<p>The Dutch Blitz cards definitely have a charm, but they’ve also got some usability issues. The color combinations have poor contrast, black on blue in particular. Differentiating the boy and girl takes an extra second, which matters in the heat of the moment. The numbers are small and can be tough to read from across the table.</p>\n<p>Flip the cards over, and the vintage etchings — the pump, carriage, plow, and pail — are endearing but have no personal significance to us. One is assigned to each player, but keeping straight which is whose takes a few rounds.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/expansion-pack.jpg\" alt=\"Expansion Pack\" width=\"600\" height=\"322\" class=\"aligncenter size-full wp-image-13107\" /></p>\n<p>For more than 4 players, <a href=\"https://www.amazon.com/Dutch-Blitz-DB-202-Expansion/dp/B00JJ4PNHI/?tag=thomasparkco-20\" rel=\"noopener\" target=\"_blank\">the expansion pack</a> is just a palette swap of the same four objects.</p>\n<p>If <a href=\"https://www.jamesrobertwatson.com/deck6.html\" rel=\"noopener\" target=\"_blank\">a 5th and 6th suit</a> can be devised to fit with classic poker cards, it shouldn’t be tough to spot more things around the farm for Dutch Blitz.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/deck6.jpg\" alt=\"Deck6\" width=\"800\" height=\"522\" class=\"aligncenter size-full wp-image-13078\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/deck6.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/deck6-768x501.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<h2>The Redesign</h2>\n<p>And so I took the opportunity to design custom cards and have some fun with personalized illustrations.</p>\n<p>For the redesigned faces, I took a modern, minimalist style inspired by <a href=\"https://www.areaware.com/products/minim-playing-cards?variant=472356541\">Minim playing cards</a> and <a href=\"https://www.amazon.com/Mattel-Games-GYH69-UNO-Minimalista/dp/B089DR3N7S/?tag=thomasparkco-20\">UNO Minimalista</a>.</p>\n<p>For the backs, I went with branded objects we already associate with different members of the family. Here are the results.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-1600x1065.jpg\" alt=\"Custom Blitz Cards\" width=\"800\" height=\"533\" class=\"aligncenter size-large wp-image-13112\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-1600x1065.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-800x532.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-768x511.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-1536x1022.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/02/custom-dutch-blitz-2048x1363.jpg 2048w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>You might be able to guess which object is mine.</p>\n<p>Here are some alternative backs I had printed up for a gift.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-1600x900.jpg\" alt=\"Custom Dutch Blitz Illustrations\" width=\"800\" height=\"450\" class=\"aligncenter size-large wp-image-13072\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-1600x900.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-800x450.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-768x432.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom-1536x864.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-custom.jpg 2048w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>Now to playtest this deck and no doubt iterate on it, getting ever closer to the ultimate Dutch Blitz experience.</p>\n<h2>Update</h2>\n<p>Leeanne has graciously shared her own spin — silly animals in silly hats! They capture the art style of the original game perfectly. My personal favorite is the raccoon in a Croc. What’s yours?</p>\n<p>Download her designs <a href=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/v2PNGSVG.zip\">in PNG and SVG format</a>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-1600x892.png\" alt=\"AnimalsinHats\" width=\"800\" height=\"446\" class=\"aligncenter size-large wp-image-13310\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-1600x892.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-800x446.png 800w, https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-768x428.png 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-1536x856.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2021/02/AnimalsinHats-2048x1142.png 2048w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>Lance Smith also shared his take, representing his family’s ties to DC, VA, OK, and FL.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2-1159x1200.png\" alt=\"Dutch Blitz Lance\" width=\"800\" height=\"828\" class=\"aligncenter size-large wp-image-13444\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2-1159x1200.png 1159w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2-773x800.png 773w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2-768x795.png 768w, https://thomaspark.co/wp/wp-content/uploads/2021/02/dutch-blitz-lance-2.png 1200w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Games",
"term": "Games",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=12928",
"title": "Chess Patch Notes",
"description": "Chess is a continuously evolving game. Technically. There have been many rule changes, but each one has taken centuries to be introduced and widely adopted. That might all change though with the latest work from … <a href=\"https://thomaspark.co/2020/09/chess-patch-notes/\">Read more</a>",
"url": "https://thomaspark.co/2020/09/chess-patch-notes/",
"published": "2020-09-23T12:39:38.000Z",
"updated": "2020-09-23T12:39:38.000Z",
"content": "<p>Chess is a continuously evolving game. Technically. There have been many rule changes, but each one has taken centuries to be introduced and widely adopted.</p>\n<p>That might all change though with <a href=\"https://www.chess.com/news/view/new-alphazero-paper-explores-chess-variants\" rel=\"noopener noreferrer\" target=\"_blank\">the latest work from AlphaZero</a>, where the self-learning engine was used to evaluate 9 proposed variants of chess. These variants range from reverting the castling rule, to buffing pawns to move 2 square anywhere on the board (called torpedo), to allowing self-capture, all trying to enable more dynamic and creative gameplay.</p>\n<p>Coupled with this, the chess and gaming worlds have collided. Led by collaborations like chess grandmaster Hikaru Nakamura mentoring Overwatch grandmaster xQc (or <a href=\"https://livestreamfails.com/post/81335\" rel=\"noopener noreferrer\" target=\"_blank\">vice versa</a>), this has created an online chess boom, especially among younger generations.</p>\n<p>Given these developments, it’s hard not to see chess through the lens of modern video games on multiple levels. <a href=\"https://www.mcsweeneys.net/articles/official-patch-notes-for-chesss-first-major-update-in-1500-years\" rel=\"noopener noreferrer\" target=\"_blank\">Could microtransactions be right around the corner?</a></p>\n<p>Probably not, but I wanted to show what the history of chess rules looks like presented as patch notes from Blizzard. Check it out:</p>\n<div class=\"center\"><a class=\"standard-btn blue-btn xlarge-btn\" href=\"https://thomaspark.co/projects/chess-patch-notes/\">Chess Patch Notes</a></div>\n<p>The notes are best read bottom to top. Version numbers roughly correspond with the century in which each change was introduced. Credit to ToastyKen who first shared the patch notes <a href=\"https://www.reddit.com/r/AnarchyChess/comments/aapg9h/chess_patch_notes_in_the_style_of_video_game/\" rel=\"noopener noreferrer\" target=\"_blank\">on Reddit</a> and gave me permission to style them up — PTR is in the works… Chess piece icons provided by <a href=\"https://www.vecteezy.com/vector-art/297860-four-set-of-chess-pieces\" rel=\"noopener noreferrer\" target=\"_blank\">Vecteezy</a>.</p>\n<p>Can’t wait to see what v2.1 holds.</p>\n<p><a href=\"https://thomaspark.co/projects/chess-patch-notes/\"><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-1600x1102.png\" alt=\"Chess Patch Notes\" width=\"800\" height=\"551\" class=\"aligncenter size-large wp-image-12954\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-1600x1102.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-800x551.png 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-768x529.png 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes-1536x1058.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/chess-patch-notes.png 1806w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></a></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Games",
"term": "Games",
"url": null
},
{
"label": "Humor",
"term": "Humor",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=12815",
"title": "The IKEA Packout",
"description": "If you’re into tools — think hammers and drills — you’re probably familiar with the extremes people go to protect their prized possessions. The most popular system right now, based on my hours watching carpenter and electrician … <a href=\"https://thomaspark.co/2020/09/the-ikea-packout/\">Read more</a>",
"url": "https://thomaspark.co/2020/09/the-ikea-packout/",
"published": "2020-09-16T12:29:11.000Z",
"updated": "2020-09-16T12:29:11.000Z",
"content": "<p>If you’re into tools — think hammers and drills — you’re probably familiar with the extremes people go to protect their prized possessions. The most popular system right now, based on my hours watching carpenter and electrician setups on YouTube, is <a href=\"https://www.milwaukeetool.com/Products/Storage-Solutions/PACKOUT\">Milwaukee Packout</a>, an expansive line of interlocking boxes in all shapes and sizes (check out the drag-and-drop builder halfway down the page). These packouts are often fitted with <a href=\"https://www.fastcap.com/product/kaizen-foam\">Kaizen foam</a> to further organize the Milwaukee, Makita, and Knipex therein.</p>\n<p>If these brands get this kind of treatment, I figure there’s one more company that deserves the same: IKEA. So I made the IKEA Packout, an ode to the most widely used tools in the world.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-1600x1200.jpg\" alt=\"The IKEA Packout closed\" width=\"800\" height=\"600\" class=\"aligncenter size-large wp-image-12893\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-1600x1200.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-800x600.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-1536x1152.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-closed-2048x1536.jpg 2048w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<h2>The Parts List</h2>\n<p>The IKEA Packout holds one of every single tool I could my hands on, mostly picked from the old IKEA hardware I had laying around. Grab this kit and you’re ready to assemble or disassemble any Swedish furniture thrown your way.</p>\n<p>This is a complete collection of IKEA tools available as far as I can tell. But the part numbers do tell a different story. So let me know what I’m missing. Here’s the full list.</p>\n<table class=\"table\">\n<thead>\n<tr>\n<th>Part No.</th>\n<th>Description</th>\n<th>Qty.</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>100001</td>\n<td>S-shaped hex key (4mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>100002</td>\n<td>S-shaped hex key (5mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>110084</td>\n<td>L-shaped hex key (2mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>100006</td>\n<td>L-shaped hex key (3mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>100092</td>\n<td>L-shaped hex key (4mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>108490</td>\n<td>L-shaped hex key (5mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>100049</td>\n<td>L-shaped hex key (6mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>130445</td>\n<td>Long ball-end L-shaped hex key (4mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>100003</td>\n<td>Short ball-end L-shaped hex key (5mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>121030</td>\n<td>Tool handle for hex keys (4mm and 5mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>100089</td>\n<td>Open spanner (8mm and 10mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>108184</td>\n<td>Ring spanner (11mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>113453</td>\n<td>Ring/open Z-shaped spanner (6mm and 13mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>120202</td>\n<td>Hollow wrench (13mm)</td>\n<td>1</td>\n</tr>\n<tr>\n<td>106699</td>\n<td>Phillips #2 and slot S-shaped screwdriver</td>\n<td>1</td>\n</tr>\n</tbody>\n</table>\n<p>For the container, I took a <a href=\"https://www.ikea.com/us/en/p/fixa-200-piece-wood-screw-set-70224228/\">FIXA screw set</a>, retailing for $4.99, and removed the orange insert. I cut some 30mm Kaizen foam to size and arranged the tools to fit.</p>\n<p>With that, the kit was complete. But who knows, mounting feet to make it compatible with Milwaukee’s stack might be in its future.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-1600x810.jpg\" alt=\"The IKEA Packout open\" width=\"800\" height=\"405\" class=\"aligncenter size-large wp-image-12895\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-1600x810.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-800x405.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-768x389.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-1536x777.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-packout-open-2048x1036.jpg 2048w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<h2>The Golden Rule of Assembling IKEA Furniture</h2>\n<p>Of course putting together your own IKEA Packout isn’t at all practical. There are far better ways to equip yourself than scrounging around for stamped tools. In fact, this leads to the golden rule: using the right tool for the job.</p>\n<p>The IKEA experience has a reputation for being frustrating, with screws stripping and absolutely nothing level, square, plumb, or true. But this is actually the one case you can safely blame your tools.</p>\n<h3>Put Down the Phillips</h3>\n<p>When you open the instructions booklet, you might see something like this.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-1600x542.png\" alt=\"IKEA screwdriver\" width=\"800\" height=\"271\" class=\"aligncenter size-large wp-image-12903\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-1600x542.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-800x271.png 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-768x260.png 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver-1536x521.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/ikea-screwdriver.png 1682w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>No text of course, but you see the cross symbol so naturally reach for your Phillips screwdriver. Put it down.</p>\n<p>Being a European company and all, IKEA hardly uses Phillips screws, but rather the superior Pozidriv. Size #2. You can tell the difference by the screw head. If it’s a simple cross, it’s a Phillips. If it’s a cross with small hash lines on the diagonals, it’s a Pozi.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-1600x945.jpg\" alt=\"Phillips vs Pozidriv\" width=\"800\" height=\"473\" class=\"aligncenter size-large wp-image-12912\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-1600x945.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-800x472.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-768x454.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-1536x907.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2020/09/phillips-pozidriv-2048x1209.jpg 2048w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>While nearly everyone gets by with a Phillips, it’s what strips all the screws. You don’t get the perfect fit.</p>\n<p><a href=\"https://www.ikea.com/us/en/p/fixa-17-piece-tool-kit-00169254/\">This Fixa 17-piece tool kit</a> comes with a PZ2 bit along with a bunch of other tools for cheap. Or pick up a high quality one like <a href=\"https://amzn.to/35IF4qK\">this Wera</a> and be set for life.</p>\n<h3>Make it Metric</h3>\n<p>If you’ve misplaced the hex key that came with your flat pack, fear not. There’s nothing special about them. Hex keys, aka Allen wrenches, can be found at any hardware store.</p>\n<p>If you’re reaching for the hex keys in your toolbox, they’re most likely in imperial units. Being a European company, IKEA goes with the superior metric. You need millimeters instead of inches. As long as it covers from 2mm to 8mm (4mm being the classic IKEA size), like <a href=\"https://amzn.to/2FHvE3K\">this Wera set</a>, you’re good to go.</p>\n<p>Armed with a Pozidriv #2 screwdriver and metric hex keys, you’ll have the right tools to take on IKEA and beyond.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Hardware",
"term": "Hardware",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=12754",
"title": "The Mad Magazine Fold-In Effect in CSS",
"description": "After 65 years at Mad Magazine, comic artist Al Jaffee announced his retirement. Jaffee was best known for his Mad Fold-Ins, where folding the page would reveal a hidden message in the artwork. Plenty of … <a href=\"https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/\">Read more</a>",
"url": "https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/",
"published": "2020-06-08T13:27:40.000Z",
"updated": "2020-06-08T13:27:40.000Z",
"content": "<p>After 65 years at Mad Magazine, comic artist Al Jaffee <a href=\"https://www.washingtonpost.com/arts-entertainment/2020/06/06/al-jaffee-mad-magazine-retires/\">announced his retirement</a>. Jaffee was best known for his Mad Fold-Ins, where folding the page would reveal a hidden message in the artwork. Plenty of examples can be found on the web. The problem is, they all show the before and after statically, side by side, which diminishes the magic (see <a href=\"https://en.wikipedia.org/wiki/Mad_Fold-in\">here</a> and <a href=\"https://13thdimension.com/13-mad-fold-ins-an-al-jaffee-celebration/\">here</a>). There’s a whole generation who may have only seen the fold-ins in this format.</p>\n<p>Of course I had to create the paper folding effect for the web. There’s many different ways to achieve this, but this approach is nice because:</p>\n<ul>\n<li>It’s CSS only, relying on no JavaScript.</li>\n<li>Uses a single image instead of requiring the image to be sliced up in Photoshop.</li>\n<li>Can be configured with just HTML by setting CSS variables in a style attribute.</li>\n</ul>\n<p>Here’s a demo of it in action, using artwork by Johnny Sampson <a href=\"https://www.madmagazine.com/blog/2019/03/13/a-special-98th-birthday-fold-in-for-al-jaffee\">in an issue that celebrated Jaffee’s 98th birthday</a>. Hover or tap to fold.</p>\n<div class=\"jaffee-wrapper\"><span class=\"jaffee\" style=\"--bg: url('https://thomaspark.co/wp/wp-content/uploads/2020/06/jaffee.png');\"><span class=\"a\"></span><span class=\"bc\"><span class=\"b\"></span><span class=\"c\"></span></span><img decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2020/06/jaffee.png\"></span></div>\n<p>And another by Jaffee himself.</p>\n<div class=\"jaffee-wrapper\"><span class=\"jaffee\" style=\"--bg: url('https://thomaspark.co/wp/wp-content/uploads/2020/06/MAD-Magazine-520-Fold-in.jpg');\"><span class=\"a\"></span><span class=\"bc\"><span class=\"b\"></span><span class=\"c\"></span></span><img decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2020/06/MAD-Magazine-520-Fold-in.jpg\"></span></div>\n<h3>The Code</h3>\n<p>The HTML for the effect is fairly straightforward. You might be wondering about the standalone image element — it’s hidden but used to set the size and aspect ratio of the component. The image path is specified there and once again as a CSS variable to set the background image of the other elements.</p>\n<pre class=\"language-markup\">\n<code class=\"language-markup\">\n<span class=\"jaffee\" style=\"--bg: url('path/to/image.png');\">\n <span class=\"a\"></span>\n <span class=\"bc\">\n <span class=\"b\"></span>\n <span class=\"c\"></span>\n </span>\n <img src=\"path/to/image.png\">\n</span>\n</code>\n</pre>\n<p>And here is the CSS used to set the positioning, 3D transforms, and transitions.</p>\n<pre class=\"language-css\">\n<code class=\"language-css\">\n.jaffee {\n position: relative;\n display: inline-flex;\n transform: rotateX(10deg); \n transform-style: preserve-3d;\n cursor: grab;\n}\n\n.jaffee img {\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 56vh;\n opacity: 0;\n}\n\n.jaffee .a,\n.jaffee .b,\n.jaffee .c {\n top: 0;\n display: inline-block;\n height: 100%;\n background-image: var(--bg);\n background-size: cover;\n background-repeat: no-repeat;\n}\n\n.jaffee .a {\n position: absolute;\n left: 0;\n width: 50%;\n background-position: 0 0;\n}\n\n.jaffee .bc {\n position: absolute;\n display: inline-flex;\n width: 50%;\n height: 100%;\n left: 50%;\n transform-origin: left;\n transition: transform 3s;\n transform-style: preserve-3d;\n}\n\n.jaffee .b,\n.jaffee .c {\n position: relative;\n width: 50%;\n backface-visibility: hidden;\n}\n\n.jaffee .b {\n background-position: 66.666667% 0;\n transform-style: preserve-3d;\n}\n\n.jaffee .b:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #000;\n transform: rotateY(180deg) translateZ(1px);\n transform-style: preserve-3d;\n backface-visibility: hidden;\n}\n\n.jaffee .c {\n background-position: 100% 0;\n transform-origin: left;\n transition: transform 2s;\n}\n\n.jaffee:hover .bc,\n.jaffee:active .bc {\n transform: rotateY(-180deg) translateZ(-1px);\n transition: transform 2s;\n}\n\n.jaffee:hover .c,\n.jaffee:active .c {\n transform: rotateY(180deg) translateZ(2px);\n transition: transform 3s;\n}\n</code>\n</pre>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "Humor",
"term": "Humor",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=12660",
"title": "No Scary Parts: A Browser Extension for Skipping Scary Scenes in Disney+ Movies",
"description": "I’ve made a Chrome browser extension called No Scary Parts. It automatically skips the scary scenes in family movies on Disney+, for the sake of your sensitive kids from age 1 to 100. Install it … <a href=\"https://thomaspark.co/2020/05/no-scary-parts-a-browser-extension-for-skipping-scary-scenes-in-disney-movies/\">Read more</a>",
"url": "https://thomaspark.co/2020/05/no-scary-parts-a-browser-extension-for-skipping-scary-scenes-in-disney-movies/",
"published": "2020-05-07T12:11:37.000Z",
"updated": "2020-05-07T12:11:37.000Z",
"content": "<p><a href=\"https://thomaspark.co/projects/no-scary-parts/\"></p>\n<div class=\"player\">\n<div class=\"toolbar\">\n<div class=\"button\"></div>\n<div class=\"button\"></div>\n<div class=\"button\"></div>\n<div class=\"field\"></div>\n</p></div>\n<div class=\"controls\">\n<div class=\"progress-bar\">\n<div class=\"scene scene-1\"></div>\n<div class=\"scene scene-2\"></div>\n<div class=\"bar\"></div>\n</p></div>\n<div class=\"dot\"></div>\n</p></div>\n<div class=\"video\">\n <img decoding=\"async\" class=\"img-fluid\" src=\"https://thomaspark.co/wp/wp-content/uploads/2020/05/scene-a.jpg\"><img decoding=\"async\" class=\"img-fluid\" src=\"https://thomaspark.co/wp/wp-content/uploads/2020/05/scene-b.jpg\">\n </div>\n</div>\n<p></a></p>\n<p>I’ve made a Chrome browser extension called No Scary Parts. It automatically skips the scary scenes in family movies on Disney+, for the sake of your sensitive kids from age 1 to 100. Install it or learn more by clicking the button below.</p>\n<div class=\"center\"><a class=\"standard-btn purple-btn xlarge-btn\" href=\"https://thomaspark.co/projects/no-scary-parts/\">No Scary Parts</a></div>\n<h2>Background</h2>\n<p>With the COVID-19 quarantine in effect and two little ones at home, Disney+ has provided some much-needed entertainment. But despite being aimed at kids, most Disney movies inevitably include <a href=\"https://www.buzzfeed.com/eleanorbate/scary-as-shit-disney-moments\" rel=\"noopener noreferrer\" target=\"_blank\">a scene or two that ramp up the creepiness</a>. I mean, who wasn’t scarred by the pink elephants in Dumbo or “Night on Bald Mountain” in Fantasia as a youngin? Storytelling and character-building aside, at their age, my kids just want to enjoy the familiar characters and fun music. Other parents have relayed these sentiments to me too.</p>\n<p>I could sit by, remote at the ready, fast forwarding scary scenes long burned into my memory. Maybe you already do that. But fortunately, having already written an extension with similar functionality, it didn’t take much code to do that work for me.</p>\n<h2>Implementation</h2>\n<p>Controlling video in Disney+ isn’t too different from Netflix, so much of the code outlined in <a href=\"https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/\">the post about Slow Down x Terrace House</a> could be reused.</p>\n<p>A new facet of this project however was highlighting upcoming scary scenes in the progress bar. As a React app, Disney+’s progress bar is added and removed from the DOM as the user hovers and unhovers the video. To detect each time the progress bar is added and then add our own highlights, <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver\" rel=\"noopener noreferrer\" target=\"_blank\">MutationObserver</a> could be used.</p>\n<p>Instead, I opted for CSS. A style rule is created that applies a linear gradient to the progress bar, with hard stops alternating between the highlight color and transparent to indicate skipped scenes.</p>\n<p>As a side note, I quickly ran into <a href=\"https://bugs.chromium.org/p/chromium/issues/detail?id=892711\" rel=\"noopener noreferrer\" target=\"_blank\">Chrome bug 892711</a>, where if you have more than eight intervals (or basically three highlights) in your linear gradient, hard stops are rendered with blurry boundaries. It wasn’t a dealbreaker, but hopefully will get fixed.</p>\n<h2>Future Work</h2>\n<p>No Scary Parts currently supports Frozen, Moana, Beauty and the Beast, The Little Mermaid, and Fantasia. If there’s interest, more can be added. Leave your requests in the comments below.</p>\n<p>Other streaming services like Netflix and Amazon Prime could be supported in the future, but I suspect my hands will be plenty full with creepy Disney scenes.</p>\n<p>Everyone differs in their sensitivity, so setting your own level of filters, or time-stamping your own scenes, would be nice to add.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=12587",
"title": "Korean Keycaps for Your MacBook Pro",
"description": "So you want a different language keyboard for your MacBook Pro. And it’s too late to pick that option at checkout. Apple Support won’t be much help here. They won’t change your keyboard language after … <a href=\"https://thomaspark.co/2019/11/korean-keycaps-for-the-macbook-pro/\">Read more</a>",
"url": "https://thomaspark.co/2019/11/korean-keycaps-for-the-macbook-pro/",
"published": "2019-11-19T13:33:20.000Z",
"updated": "2019-11-19T13:33:20.000Z",
"content": "<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-scaled.jpg\" alt=\"Korean Keycaps for MacBook Pro\" width=\"2560\" height=\"1199\" class=\"aligncenter size-full wp-image-12588\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-scaled.jpg 2560w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-800x375.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-1600x749.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-768x360.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-1536x719.jpg 1536w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-2048x959.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" /></p>\n<p>So you want a different language keyboard for your MacBook Pro. And it’s too late to <a href=\"http://thomaspark.co/wp/wp-content/uploads/2019/11/apple-keyboard-language-option.png\">pick that option at checkout</a>.</p>\n<p>Apple Support won’t be much help here. They won’t change your keyboard language after it’s been delivered. Even if they wanted to, they don’t carry the right parts for your “vintage model”, so they say.</p>\n<p>You still have options.</p>\n<h2>Keyboard Stickers</h2>\n<p>The cheapest route are <a href=\"https://www.amazon.com/FORITO-Keyboard-Stickers-Background-Lettering/dp/B01N7R4EWC/?tag=thomasparkco-20\">decals</a> you apply to your existing keys. But for someone as OCD as me, centering all of those stickers perfectly is a frustrating proposition. And before long, the stickers fade and peel.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-stickers.jpg\" alt=\"Silicone Keyboard Cover\" width=\"1024\" height=\"498\" class=\"aligncenter size-full wp-image-12622\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-stickers.jpg 1024w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-stickers-800x389.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-stickers-768x374.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" /></p>\n<h2>Silicon Cover</h2>\n<p>You can also go with a <a href=\"https://www.amazon.com/Kuzy-Language-Keyboard-MacBook-Silicone/dp/B00FX0KPN4/?tag=thomasparkco-20\">silicone skin</a> that you lay over your keyboard. It looks nicer, and as a bonus, keeps Cheeto crumbs out of your keyboard. But as thin as it is, it still affects the feel of your keyboard, giving keys a spongier travel as you type. Also having the cover shift or flop around from time to time is an annoyance.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2019/11/silicone-keyboard-cover.jpg\" alt=\"Silicone Keyboard Cover\" width=\"1200\" height=\"1006\" class=\"aligncenter size-full wp-image-12619\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/11/silicone-keyboard-cover.jpg 1200w, https://thomaspark.co/wp/wp-content/uploads/2019/11/silicone-keyboard-cover-800x671.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/11/silicone-keyboard-cover-768x644.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" /></p>\n<h2>Replacement Keycaps</h2>\n<p>There are vendors offering replacement keycaps, <a href=\"https://www.thebookyard.com/apple-keycaps.php\">TheBookyard</a> carrying the most inventory. But at $6 per key, you’ll be dropping serious cash to switch 26 keys. They only carry EU languages too, so I was out of luck in my quest for Korean keys. Chinese and Japanese are also missing. I was surprised to find no sources for these languages anywhere.</p>\n<h2>Salvage Keyboard Parts</h2>\n<p>The best option I found was to salvage a third-party replacement keyboard part for keycaps. I got mine from <a href=\"https://www.ebay.com/itm/New-AC07-Korean-Keyboard-For-Macbook-Pro-Retina-15-A1398-2012-2013-2014-2015/392509473524\">eBay here</a> and can vouch that the keys fit my late-2013 MacBook Pro 15 perfectly.</p>\n<p><a href=\"https://www.ebay.com/itm/New-AC07-Korean-Keyboard-For-Macbook-Pro-Retina-15-A1398-2012-2013-2014-2015/392509473524\"><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-part.jpg\" alt=\"Korean Keyboard Part\" width=\"900\" height=\"553\" class=\"aligncenter size-full wp-image-12614\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-part.jpg 900w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-part-800x492.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/11/korean-keyboard-part-768x472.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" /></a></p>\n<p>You’ll want to make absolutely sure you get the right key type based on the different hinge mechanisms. For instance, the late-2013 model came in two different types — Type AC06 also referred to as Type J, and AC07 or K. You can determine yours by removing your keys and comparing the hinge with the reference photos <a href=\"https://thomaspark.co/wp/wp-content/uploads/2019/11/type-ac06-ac07-keys.png\">here</a> and <a href=\"https://thomaspark.co/wp/wp-content/uploads/2019/11/type-j-k-keys.jpg\">here</a>.</p>\n<p>Be sure to also avoid damage when <a href=\"https://www.youtube.com/watch?v=kh88cn_rtLo\">prying off the old and new keycaps</a>.</p>\n<p>With care, you’ll get new language keys for relatively cheap, pretty much indistinguishable from Apple’s official keyboard.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Hardware",
"term": "Hardware",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=12538",
"title": "A Simple Hack to get Impact Mode on your PixMob Band",
"description": "At the Overwatch League Grand Finals in Philadelphia, attendees received white wristbands that blink different colors in sync with each other during the event. When the San Francisco Shock won a round, they flashed orange … <a href=\"https://thomaspark.co/2019/10/a-simple-hack-to-get-impact-mode-on-your-pixmob-band/\">Read more</a>",
"url": "https://thomaspark.co/2019/10/a-simple-hack-to-get-impact-mode-on-your-pixmob-band/",
"published": "2019-10-02T23:49:03.000Z",
"updated": "2019-10-02T23:49:03.000Z",
"content": "<p>At the <a href=\"https://carboncostume.com/cosplay-at-the-overwatch-league-grand-finals-2019-in-philadelphia/\">Overwatch League Grand Finals in Philadelphia</a>, attendees received white wristbands that <a href=\"https://streamable.com/jnm6q\">blink</a> different colors in sync with each other during the event. When the San Francisco Shock won a round, they flashed orange and white in unison. When the Vancouver Titans — well, nevermind…</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/10/sfshock-win.gif\" alt=\"SF Shock Win\" width=\"500\" height=\"300\" class=\"aligncenter size-full wp-image-12554\" /></p>\n<p>These bands, made by <a href=\"https://www.pixmob.com/\">PixMob</a>, have been used at various sporting events and concerts, most famously on <a href=\"https://www.pixmob.com/projects/detail/taylor-swift-reputation-stadium-tour\">Taylor Swift’s tours</a>. They’re synchronized using an array of infrared transmitters set up in the arena, each sending signals to a different seating section.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band.jpg\" alt=\"PixMob Band from Overwatch League Grand Finals\" width=\"1800\" height=\"1149\" class=\"aligncenter size-full wp-image-12548\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band.jpg 1800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-800x511.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-768x490.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-1600x1021.jpg 1600w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" /></p>\n<p>Now you’re home from the event, and you don’t have an IR installation in your living room. But that doesn’t mean you have to throw your PixMob band away.</p>\n<p>Instead, you can activate something called Impact Mode. Once it’s set, the band will blink different colors as you tap or shake it. Older PixMob models required <a href=\"https://www.youtube.com/watch?v=UQHpJ0dJJXQ\">some disassembly</a> to achieve this. Fortunately, with the latest model, PixMob have made it easier than ever.</p>\n<p>First open up the battery compartment on the back of the band and remove the two coin batteries.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open.jpg\" alt=\"Open PixMob Band\" width=\"1800\" height=\"1200\" class=\"aligncenter size-full wp-image-12549\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open.jpg 1800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open-800x533.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open-768x512.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-open-1600x1067.jpg 1600w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" /></p>\n<p>Underneath, you’ll find a circuit board. Locate the contact labeled “OPEN MODE”. Break this contact along the yellow line I drew in the photo below. I scratched mine off using the smallest screwdriver I could find.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-zoom.jpg\" alt=\"PixMob Band Zoomed\" width=\"1279\" height=\"636\" class=\"aligncenter size-full wp-image-12551\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-zoom.jpg 1279w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-zoom-800x398.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-overwatch-band-zoom-768x382.jpg 768w\" sizes=\"auto, (max-width: 1279px) 100vw, 1279px\" /></p>\n<p>Replace your batteries and enjoy your PixMob band back from the dead. Now you have proof that the band can also flash blue and green.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/10/pixmob-band-hack.gif\" alt=\"PixMob Band Hack\" width=\"480\" height=\"240\" class=\"aligncenter size-full wp-image-12568\" /></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Games",
"term": "Games",
"url": null
},
{
"label": "Hardware",
"term": "Hardware",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=12502",
"title": "Querying Nearby Locations in WordPress using Geo Coordinates",
"description": "In the course of developing Campus Arrival, a WordPress site that provides school-specific packing lists, we added a feature to suggest nearby universities. When viewing a school’s checklist, this feature displays other, nearby colleges. When … <a href=\"https://thomaspark.co/2019/09/querying-nearby-locations-in-wordpress-using-geo-coordinates/\">Read more</a>",
"url": "https://thomaspark.co/2019/09/querying-nearby-locations-in-wordpress-using-geo-coordinates/",
"published": "2019-09-16T12:31:17.000Z",
"updated": "2019-09-16T12:31:17.000Z",
"content": "<p>In the course of developing <a href=\"https://campusarrival.com\" rel=\"noopener noreferrer\" target=\"_blank\">Campus Arrival</a>, a WordPress site that provides school-specific packing lists, we added a feature to suggest nearby universities. When viewing a school’s checklist, this feature displays other, nearby colleges. When viewing the front page, it suggests colleges near the visitor’s own location. For example, check out the suggestions for <a href=\"https://campusarrival.com/schools/massachusetts-institute-of-technology/#local\">MIT</a>, <a href=\"https://campusarrival.com/schools/university-of-california-los-angeles/#local\">UCLA</a>, or <a href=\"https://campusarrival.com/\">your own location</a>.</p>\n<p><a href=\"https://campusarrival.com\" rel=\"noopener noreferrer\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_.png\" alt=\"Campus Arrival nearby schools\" width=\"2422\" height=\"1366\" class=\"aligncenter size-full wp-image-12511\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_.png 2422w, https://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_-800x451.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_-768x433.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/campusarrival.com_-1600x902.png 1600w\" sizes=\"auto, (max-width: 2422px) 100vw, 2422px\" /></a></p>\n<p>This was implemented in WordPress by querying nearby schools based on geo coordinates, i.e., latitude and longitude. (Our first pass used a custom taxonomy with in-state schools, but we knew the results could be improved.)</p>\n<p>If you’d like to do something similar, follow the steps in this guide.</p>\n<h1>Post Meta</h1>\n<p>Start by adding custom post meta fields for <code>latitude</code> and <code>longitude</code>. The WP plugin <a href=\"https://www.advancedcustomfields.com\" rel=\"noopener noreferrer\" target=\"_blank\">Advanced Custom Fields</a> is a godsend for creating nice admin-facing interfaces to manage custom post meta.</p>\n<h1>The Hooks</h1>\n<p>First we start with the PHP code. The meat of the implementation is this function, cobbled together from <a href=\"https://wordpress.stackexchange.com/a/183503/154090\" rel=\"noopener noreferrer\" target=\"_blank\">this comment</a> on the WordPress StackExchange, that accepts a set of coordinates, along with a few other parameters like the max search distance and number of posts to return, and returns the posts with the nearest latitude and longitude.</p>\n<pre>\n<code class=\"lang-php\">\nfunction query_neighbors( $latitude, $longitude, $post_id = -1, $distance = 400, $limit = 6 ) {\n global $wpdb;\n $earth_radius = 3959; // miles\n\n $sql = $wpdb->prepare( \"\n SELECT DISTINCT\n p.ID,\n p.post_title,\n map_lat.meta_value,\n map_lng.meta_value,\n ( %d * acos(\n cos( radians( %s ) )\n * cos( radians( map_lat.meta_value ) )\n * cos( radians( map_lng.meta_value ) - radians( %s ) )\n + sin( radians( %s ) )\n * sin( radians( map_lat.meta_value ) )\n ) )\n AS distance\n FROM $wpdb->posts p\n INNER JOIN $wpdb->postmeta map_lat ON p.ID = map_lat.post_id\n INNER JOIN $wpdb->postmeta map_lng ON p.ID = map_lng.post_id\n WHERE p.post_type = 'school'\n AND p.post_status = 'publish'\n AND p.ID != %d\n AND map_lat.meta_key = 'latitude'\n AND map_lng.meta_key = 'longitude'\n HAVING distance < %s\n ORDER BY distance ASC\n LIMIT %d\",\n $earth_radius,\n $latitude,\n $longitude,\n $latitude,\n $post_id,\n $distance,\n $limit\n );\n\n $neighbors = $wpdb->get_results( $sql );\n\n return $neighbors;\n}\n</code>\n</pre>\n<p>This function, along with the AJAX hook below, should be added to your custom plugin or <code>functions.php</code>. In the “do your thing” section, construct your markup, perhaps using a template.</p>\n<pre>\n<code class=\"lang-php\">\nfunction process_neighbors() {\n check_ajax_referer( 'neighbors_validation', 'security');\n $location = $_POST['location'];\n $url = wp_get_referer();\n $post_id = url_to_postid( $url );\n\n if ( isset( $location ) ) {\n $neighbors = query_neighbors( $location['latitude'], $location['longitude'], $post_id, 400, 6 );\n $response = '';\n\n if ( $neighbors ) {\n foreach( $neighbors as $neighbor ) {\n setup_postdata( $neighbor );\n\n // do your thing\n\n wp_reset_postdata();\n }\n }\n\n if ( strlen( trim( $response ) ) > 0 ) {\n wp_send_json_success( $response );\n } else {\n wp_send_json_error();\n }\n }\n\n die();\n}\nadd_action( 'wp_ajax_nopriv_post_neighbors', 'process_neighbors' );\nadd_action( 'wp_ajax_post_neighbors', 'process_neighbors' );\n</code>\n</pre>\n<p>Next, enqueue the JS script that you’ll be creating in the next section.</p>\n<pre>\n<code class=\"lang-php\">\nfunction load_custom_js() {\n $post_id = get_the_ID();\n $location = array(\n 'latitude' => get_post_meta( $post_id, 'latitude', true ),\n 'longitude' => get_post_meta( $post_id, 'longitude', true ),\n 'post_id' => $post_id\n );\n\n $url = plugins_url( 'scripts/neighbors.js', __FILE__ );\n\n wp_enqueue_script( 'neighbors_js', $url, array( 'jquery' ), '', true );\n wp_localize_script( 'neighbors_js', 'ajax_neighbors_object', array(\n 'ajax_url' => admin_url( 'admin-ajax.php' ),\n 'nonce' => wp_create_nonce( 'neighbors_validation' ),\n 'location' => $location\n ));\n}\nadd_action( 'wp_enqueue_scripts', 'load_custom_js' );\n</code>\n</pre>\n<h1>The Script</h1>\n<p>Now we write the JavaScript code that makes the AJAX call to the PHP code to find nearby neighbors, then formats the results and appends them to the current page.</p>\n<p>Start with a function that takes a location and sends a <code>POST</code> request to the hook above.</p>\n<pre>\n<code class=\"lang-javascript\">\nasync function postNeighbors(location) {\n let response;\n\n try {\n response = await $.ajax({\n type: 'POST',\n dataType: 'json',\n url: ajax_neighbors_object.ajax_url,\n data: {action: 'post_neighbors', security: ajax_neighbors_object.nonce, location: location}\n });\n\n return response;\n } catch (error) {\n console.error(error);\n }\n}\n</code>\n</pre>\n<p>To compare with another school, call <code>postNeighbors</code> like so. In the <code>doYourThing</code> function, you’ll handle the markup you got in your response, perhaps injecting it into the page and sliding it into view.</p>\n<pre>\n<code class=\"lang-javascript\">\npostNeighbors(ajax_neighbors_object.location)\n .then(({data})=>doYourThing(data));\n</code>\n</pre>\n<p>To compare with the user’s own location, you just need to add one more step, making use of the handy WordPress geo API.</p>\n<pre>\n<code class=\"lang-javascript\">\ngetUserLocation()\n .then(postNeighbors)\n .then(({data})=>doYourThing(data));\n\nasync function getUserLocation() {\n const response = await fetch('https://public-api.wordpress.com/geo/');\n const json = await response.json();\n\n return json;\n}\n</code>\n</pre>\n<p>Check out <a href=\"https://campusarrival.com\" rel=\"noopener noreferrer\" target=\"_blank\">Campus Arrival</a> to see all this in action.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=12385",
"title": "Integrating Video and Web Content: Lessons in User Interface Design",
"description": "Recently I’ve been working on The Beautube, a site that integrates video tutorials with details about the products being mentioned in the videos, specifically in the realm of cosmetics. This project has presented numerous challenges … <a href=\"https://thomaspark.co/2019/09/integrating-video-and-web-content-lessons-in-user-interface-design/\">Read more</a>",
"url": "https://thomaspark.co/2019/09/integrating-video-and-web-content-lessons-in-user-interface-design/",
"published": "2019-09-11T12:21:05.000Z",
"updated": "2019-09-11T12:21:05.000Z",
"content": "<p>Recently I’ve been working on <a href=\"https://thebeautube.com\">The Beautube</a>, a site that integrates video tutorials with details about the products being mentioned in the videos, specifically in the realm of cosmetics.</p>\n<p>This project has presented numerous challenges for how to design a tight, intuitive UI that makes efficient use of the available screen space when both video and web content are begging for more room.</p>\n<p>Here I’d like to share a few lessons based on my experiences so far.</p>\n<h1>Vertical scrolling trumps horizontal scrolling</h1>\n<p>The basic requirements of the site are to display an embedded YouTube video, and alongside this, a list of elements containing product details. This list can be rather lengthy, so scrolling somehow has be involved. The question is how.</p>\n<p>In our initial prototypes, I played with both vertical scrolling of the products adjacent to the video, and horizontal scrolling below the video. For horizontal scrolling, both a standard browser overflow scroll and a carousel were explored, even though <a href=\"http://shouldiuseacarousel.com/\">carousels have been found to be ineffective</a>.</p>\n<p>At first blush, horizontal scrolling is appealing. For desktops, the horizontal axis gives room for more products to be displayed at once. Horizontal scrolling also harmonizes well with the playback bar of the video itself.</p>\n<p>In action, it’s a different story. Vertical scrolling is the standard behavior on webpages, and so familiar to users at this point that they instinctively know when to scroll down even when <a href=\"https://www.nytimes.com/2017/02/02/technology/personaltech/solving-the-case-of-the-disappearing-scroll-bars.html\" >scrollbars have been removed</a>. Horizontal scrolling not so much. Additionally, scrolling down with a swipe of your finger is an engrained and comfortable motion compared to horizontal flicking, especially for long periods of time. And most computer mouses have a scroll wheel in just one direction — you guessed it, vertical.</p>\n<p>In the end, one of our early design decisions was to go with vertical scrolling and have the rest of UI accommodate it, even if it added some tradeoffs to deal with.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling.png\" alt=\"Vertical vs horizontal scrolling\" width=\"2102\" height=\"720\" class=\"aligncenter size-full wp-image-12465\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/scrolling-1600x548.png 1600w\" sizes=\"auto, (max-width: 2102px) 100vw, 2102px\" /></p>\n<p>That’s not to say horizontal scrolling should be verboten. I imagine a strong case could be made for horizontal scrolling when there’s close integration with video playback with minimal user interaction. Or for <a href=\"https://uxplanet.org/bidirectional-scrolling-is-here-to-save-responsive-design-be1afe53206d\">bidirectional scrolling</a>, as a secondary navigation.</p>\n<p>Netflix is a good example of this, where users vertically scroll through categories, and then horizontally scroll through videos within a category.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu.png\" alt=\"Netflix\" width=\"2882\" height=\"1550\" class=\"aligncenter size-full wp-image-12425\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu.png 2882w, https://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu-800x430.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu-768x413.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/netflix-menu-1600x861.png 1600w\" sizes=\"auto, (max-width: 2882px) 100vw, 2882px\" /></p>\n<h1>Limit lists to a single dimension when possible</h1>\n<p>Having settled on a vertical list, I experimented with multiple columns, with the idea of increasing the information density. While I was able to squeeze a few more items into the visible part of the list, it came at the cost of readability. With a single column, users can quickly scan down the list to view all of the product images, all of the product titles, etc. When multiple columns are added, the user’s eyes have to dance back-and-forth as they make their way down the list, tiring faster and losing their place.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/09/columns.png\" alt=\"Multiple vs single column\" width=\"2102\" height=\"720\" class=\"aligncenter size-full wp-image-12467\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/09/columns.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/columns-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/columns-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/columns-1600x548.png 1600w\" sizes=\"auto, (max-width: 2102px) 100vw, 2102px\" /></p>\n<p>A single column works out in this case because the space available to the list is rather narrow to begin with. If the space were much wider, staying with a single column could lead to text that pushes beyond the <a href=\"https://baymard.com/blog/line-length-readability\">optimal line length</a>, causing readability to suffer in a new way.</p>\n<h1>Keep video in view with sticky positioning</h1>\n<p>By default, when scrolling through the list of products, the video will also scroll off the page. This forces the user to jump back and forth, when the ideal behavior is to be able to reference both at the same time. Fortunately, the CSS property <code>position: sticky</code> comes to the rescue. Setting this on the video will keep it in the viewport, sticking to the top or bottom edge of the widow, so long as the list is on screen as well.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1.png\" alt=\"Sticky positioning\" width=\"2102\" height=\"720\" class=\"aligncenter size-full wp-image-12481\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/sticky-positioning-1-1600x548.png 1600w\" sizes=\"auto, (max-width: 2102px) 100vw, 2102px\" /></p>\n<h1>For media queries, make use of orientation and aspect-ratio</h1>\n<p>When using media queries, both developers and frameworks often rely solely on breakpoints set at different widths. For basic cases, such as turning two columns of text into one for mobile, this approach suffices. But for more complex situations, adding the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation\">orientation</a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio\">aspect-ratio</a> features to media queries can make all the difference.</p>\n<p>Consider our project, which needs to squeeze in both the video player, which is always present at its 16:9 aspect ratio, and the product list, whose design we have more room to play with. The naive approach of moving to a single column for smaller devices only works if the device is being held in portrait mode. If rotated to landscape however, the two-column layout will make better use of the space.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/09/orientation.png\" alt=\"Orientation\" width=\"2102\" height=\"720\" class=\"aligncenter size-full wp-image-12471\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/09/orientation.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/orientation-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/orientation-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/orientation-1600x548.png 1600w\" sizes=\"auto, (max-width: 2102px) 100vw, 2102px\" /></p>\n<p>As a side-note, remember to make your videos responsive. If you’re delivering your video in an iframe, as is the case with YouTube embeds, you’ll need <a href=\"https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php\">some CSS trickery</a> to get this done.</p>\n<h1>Disable the default fullscreen behavior on mobile</h1>\n<p>One gotcha to watch out for is that on iOS by default, YouTube will automatically play embedded videos in full-screen, rendering all of the above design improvements moot. To allow mobile users to view all of our content simultaneously, <a href=\"https://developers.google.com/youtube/player_parameters#playsinline\">enable inline playback</a> with the <code>playsinline</code> parameter.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen.png\" alt=\"Fullscreen\" width=\"2102\" height=\"1200\" class=\"aligncenter size-full wp-image-12472\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen-800x457.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen-768x438.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/fullscreen-1600x913.png 1600w\" sizes=\"auto, (max-width: 2102px) 100vw, 2102px\" /></p>\n<h1>Two-way coupling between video and web content</h1>\n<p>Everything up to this point has been about layout and positioning. But integrating video content with the web also affords integrated behaviors. For this project, two-way coupling was implemented, meaning that the state of the video content affects the web content, and vice versa. Communicating between the two is made possible by the <a href=\"https://developers.google.com/youtube/iframe_api_reference\">YouTube Player API</a>, which exposes video player events like <code>onReady</code> and methods like <code>seekTo()</code> and <code>getCurrentTime()</code>.</p>\n<p>In the list, each item has a clickable timestamp that seeks the player to that time in the video. On the video side, a listener checks when the current time elapses past a new timestamp, highlighting the respective item and scrolling it into view with <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\">the native method</a> <code>scrollIntoView()</code>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/09/coupling.png\" alt=\"Two-way coupling\" width=\"2102\" height=\"720\" class=\"aligncenter size-full wp-image-12474\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/09/coupling.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/coupling-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/coupling-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/coupling-1600x548.png 1600w\" sizes=\"auto, (max-width: 2102px) 100vw, 2102px\" /></p>\n<h1>The lazy auto-scroll</h1>\n<p>Lastly, I adopted what I call the lazy auto-scroll. By this principle, the current active list item is:</p>\n<ol>\n<li>always kept in the viewport</li>\n<li>but by scrolling with the least amount of movement possible</li>\n</ol>\n<p>Let’s take a few concrete examples. When the newly active item is already within the viewport, no auto-scrolling happens, regardless of the item’s position. When the active item is above the fold, which can happen when the user has browsed around the list, the list auto-scrolls to put the item on the top edge of the viewport. When the active item is below the fold, the list auto-scrolls the item to the bottom edge of the viewport. And the auto-scrolling check happens only when the video reaches a new timestamp.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll.png\" alt=\"Lazy autoscroll\" width=\"2102\" height=\"720\" class=\"aligncenter size-full wp-image-12476\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll.png 2102w, https://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll-800x274.png 800w, https://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll-768x263.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/autoscroll-1600x548.png 1600w\" sizes=\"auto, (max-width: 2102px) 100vw, 2102px\" /></p>\n<p>The effect of this lazy auto-scrolling is that there’s less unnecessary movement creating distraction and a chance for the user to lose their place. If the active item is a few pixels off from the top or center of the list, does it really need to scroll those measly pixels?</p>\n<p>Lazy auto-scrolling also gives users freedom to browse around a bit without auto-scroll hijacking their actions. Only when the video reaches a new timestamp, the list re-orients itself, benefiting users who do want to navigate back to the current active item eventually.</p>\n<h1>Putting it all into practice</h1>\n<p>Applying all of the lessons above, here’s the current, though likely not the final, state of <a href=\"https://thebeautube.com\">The Beautube</a>.</p>\n<p><a href=\"https://thebeautube.com\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube.png\" alt=\"The Beautube\" width=\"2420\" height=\"1460\" class=\"aligncenter size-full wp-image-12413 shadow\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube.png 2420w, https://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube-500x302.png 500w, https://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube-768x463.png 768w, https://thomaspark.co/wp/wp-content/uploads/2019/09/thebeautube-800x483.png 800w\" sizes=\"auto, (max-width: 2420px) 100vw, 2420px\" /></a></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "User Interface",
"term": "User Interface",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=12287",
"title": "Verifying Money Inputs on the Web à la Personal Checks",
"description": "With the era of the humble unstyled and unscripted input field behind us, there’s increasing variety in how monetary inputs work on the web. And this inconsistency can lead to big mistakes. Take two cases … <a href=\"https://thomaspark.co/2018/12/verifying-money-inputs-on-the-web-a-la-personal-checks/\">Read more</a>",
"url": "https://thomaspark.co/2018/12/verifying-money-inputs-on-the-web-a-la-personal-checks/",
"published": "2018-12-13T14:35:35.000Z",
"updated": "2018-12-13T14:35:35.000Z",
"content": "<p>With the era of the humble unstyled and unscripted input field behind us, there’s increasing variety in how monetary inputs work on the web. And this inconsistency can lead to big mistakes.</p>\n<p>Take two cases from the same company. PayPal has you input money amounts by the cent. To input fifty dollars, you type <code>5</code> <code>0</code> <code>0</code> <code>0</code>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/12/paypal-500x342.png\" alt=\"PayPal\" width=\"500\" height=\"342\" class=\"aligncenter size-medium wp-image-12297\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/12/paypal-500x342.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/12/paypal-768x525.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/12/paypal-800x547.png 800w, https://thomaspark.co/wp/wp-content/uploads/2018/12/paypal.png 1250w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" /></p>\n<p>Paypal-owned Venmo on the other hand, has you input money by the dollar, typing <code>5</code> <code>0</code>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/12/venmo-231x500.png\" alt=\"Venmo\" width=\"231\" height=\"500\" class=\"aligncenter size-medium wp-image-12298 border\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/12/venmo-231x500.png 231w, https://thomaspark.co/wp/wp-content/uploads/2018/12/venmo-768x1663.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/12/venmo-277x600.png 277w, https://thomaspark.co/wp/wp-content/uploads/2018/12/venmo.png 1125w\" sizes=\"auto, (max-width: 231px) 100vw, 231px\" /></p>\n<p>Other sites have <a href=\"http://thomaspark.co/wp/wp-content/uploads/2018/12/capitalone.png\">yet other variations</a>.</p>\n<p>Carelessly mixing them up leads to overpaying or underpaying by two orders of magnitude. You end up paying $0.20 for your share of dinner, or worse yet, $2,000 for a pizza. Thankfully, most websites mitigate this by showing a confirmation screen or prompting a warning. But where’s the fun in that?</p>\n<p>Instead, I propose we take inspiration from personal checks, the ones Grandma uses to pay for her groceries. Personal checks don’t have the tight feedback loop websites do, so how do they verify the amount you wrote is actually the intended value? That the decimal space isn’t a comma or an ink smudge? They have you spell out the dollar amount as text.</p>\n<p><a href=\"https://en.wikipedia.org/wiki/Cheque\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/12/CanadianChequeSample.png\" alt=\"\" width=\"708\" height=\"310\" class=\"aligncenter size-full wp-image-12314\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/12/CanadianChequeSample.png 708w, https://thomaspark.co/wp/wp-content/uploads/2018/12/CanadianChequeSample-500x219.png 500w\" sizes=\"auto, (max-width: 708px) 100vw, 708px\" /></a></p>\n<p>This design pattern isn’t unheard of on the web. On GitHub, high-stakes operations like deleting a repo require typing out the full name of the repository. The act of figuring out what to type and then typing it out is often enough to snap the user out of mindless, routine clicking when a catastrophic error could be made.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/12/github-500x423.png\" alt=\"GitHub\" width=\"500\" height=\"423\" class=\"aligncenter size-medium wp-image-12308\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/12/github-500x423.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/12/github-768x650.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/12/github-709x600.png 709w, https://thomaspark.co/wp/wp-content/uploads/2018/12/github.png 1032w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" /></p>\n<p>So why not for big dollar amounts as well? Here’s a quick <a href=\"https://thomaspark.co/projects/moneycheck/\">demo</a> made using <a href=\"https://github.com/finnfiddle/words-to-numbers\">words-to-numbers</a>. Give it a spin.</p>\n\n<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->\n<iframe loading=\"lazy\" style=\"width: 100%; height: 300px; border: none;\" src=\"https://thomaspark.co/projects/moneycheck/\" width=\"100%\" height=\"500\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"></iframe>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Humor",
"term": "Humor",
"url": null
},
{
"label": "User Interface",
"term": "User Interface",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=12042",
"title": "Slow Down × Terrace House: Writing a Browser Extension to Change a Theme Song on Netflix",
"description": "I just finished binging the latest release of Terrace House, a reality TV show from Japan. If you’re not familiar, Terrace House is hands down the slowest and quietest reality television you’ll find, although not … <a href=\"https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/\">Read more</a>",
"url": "https://thomaspark.co/2018/07/slow-down-x-terrace-house-writing-a-browser-extension-to-change-a-theme-song-on-netflix/",
"published": "2018-07-31T13:24:43.000Z",
"updated": "2018-07-31T13:24:43.000Z",
"content": "<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/06/slowdown-500x313.png\" alt=\"Slow Down × Terrace House\" width=\"500\" height=\"313\" class=\"aligncenter size-medium wp-image-12068\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/06/slowdown-500x313.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/06/slowdown-768x480.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/06/slowdown.png 800w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" /></p>\n<p>I just finished binging <a href=\"https://www.theverge.com/2018/3/13/17114364/netflix-terrace-house-opening-new-doors\">the latest release of Terrace House</a>, a reality TV show from Japan. If you’re not familiar, Terrace House is hands down <a href=\"https://www.polygon.com/tv/2016/12/8/13882986/terrace-house-netflix\">the slowest and quietest reality television you’ll find</a>, although not without its own kind of drama. And while the fourth installment, Opening New Doors, kept a lot of what made the show an international hit, there’s one big problem: they changed the opening theme song.</p>\n<p>The new song is fine. The problem is the song used in earlier series, “Slow Down” by Lights Follow, was a perfect fit. It set the mood for each episode with its theme of figuring yourself out and its relaxed, bittersweet vibe. <a href=\"https://www.reddit.com/r/terracehouse/comments/8nu0lf/do_you_guys_miss_slow_down/\">I’m not the only one to feel this way</a>. One fan went so far as to <a href=\"https://www.youtube.com/watch?v=0LAVQA-DBpU\">re-cut the new intro with the old theme song</a>.</p>\n<p>Well, I decided to go a step further by writing a browser extension for Chrome, <a href=\"https://chrome.google.com/webstore/detail/slow-down-terrace-house/ohccpkjiolefjbdgakkaihamdcdfgdnm?hl=en-US\">Slow Down × Terrace House</a>, that switches the theme song back for new episodes of Terrace House on Netflix. You can try it out on the Chrome Web Store:</p>\n<div class=\"center\"><a class=\"standard-btn green-btn xlarge-btn\" href=\"https://chrome.google.com/webstore/detail/slow-down-terrace-house/ohccpkjiolefjbdgakkaihamdcdfgdnm?hl=en-US\"><span>Slow Down × Terrace House on Chrome Web Store</span></a></div>\n<p>Here I wanted to share my general approach and some specifics for anyone interested in making a similar browser extension. Maybe this will put you on the path to giving every season of The Wire your favorite rendition of “Way Down in the Hole”. Or blasting “Immigrant Song” over every battle scene involving Thor. The possibilities are endless.</p>\n<h2>The Plan</h2>\n<p>The general plan for the extension is simple:</p>\n<ol>\n<li>Check if an episode of Terrace House: Opening New Doors is playing on Netflix.\n<li>Detect when the opening credits are about to start.\n<li>Mute the Netflix player and play “Slow Down” instead.\n<li>Unmute the Netflix player when the credits end.\n</ol>\n<p>As for knowing when the opening credits start, it unfortunately varies quite a bit by episode, starting as late as 17 minutes in. With only 16 episodes so far (and finding no better solution), I took the brute-force approach of hard-coding timestamps for all of the episodes. This added a step 1b for detecting the episode number and looking up the timestamp.</p>\n<h2>Inside the Extension</h2>\n<p>With this plan in hand, I created the skeleton of the Chrome extension by diving <a href=\"https://developer.chrome.com/extensions\">into the docs</a>. I recommend you do the same.</p>\n<p>But in a nutshell, there are two contexts: content scripts are injected into the active web page, in this case Netflix; and background scripts, which you can think of as your extension’s own context, which can detect browser actions like adding a bookmark and switching tabs, as well as communicate with your content scripts.</p>\n<p>The content and background scripts, along with the extension’s metadata, are defined in a <code>manifest.json</code> file. Here’s what it looks like:</p>\n<pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\n{\n \"name\": \"Slow Down x Terrace House\",\n \"short_name\": \"SD x TH\",\n \"version\": \"1.0.0\",\n \"manifest_version\": 2,\n \"description\": \"Replace the Terrace House theme song on Netflix with \\\\\"Slow Down\\\\\" by Lights Follow.\",\n \"homepage_url\": \"https://thomaspark.co\",\n \"icons\": {\n \"48\": \"icons/icon48.png\",\n \"128\": \"icons/icon128.png\"\n },\n \"content_scripts\": [\n {\n \"matches\": [\"https://www.netflix.com/*\"],\n \"js\": [\"content.js\"]\n }\n ],\n \"background\": {\n \"scripts\": [\"background.js\"],\n \"persistent\": false\n },\n \"permissions\": [\"webNavigation\"],\n \"web_accessible_resources\": [\"audio/slowdown.mp3\"]\n}\n</code>\n</pre>\n<h2>Detecting Series, Season, Episode</h2>\n<p>Detecting when Terrace House is being watched and grabbing the episode number happens in, you guessed it, the content script. Here, the script returns early if it’s on something other than an active video page (for example, the main menu or episode list), and keeps checking the page until the video is loaded. Then it grabs the series, season, and episode from the DOM.</p>\n<pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\nfunction init() {\n if (!window.location.href.startsWith(\"https://www.netflix.com/watch/\")) {\n return;\n }\n\n const videoCheckInterval = setInterval(function() {\n const video = document.querySelector(\".VideoContainer video\");\n const titleElem = document.querySelector(\".video-title h4\");\n\n if (video !== null && titleElem !== null) {\n clearInterval(videoCheckInterval);\n\n const title = document.querySelector(\".video-title h4\").innerText;\n\n if (title.startsWith(\"Terrace House\")) {\n const id = video.parentElement.id;\n const series = title.split(\":\")[1].trim();\n const [season, episode] = document.querySelector(\".video-title h4\").nextSibling.innerText.split(\":\");\n // The fun starts here.\n }\n }\n }, 10);\n}\n</code>\n</pre>\n<h2>Messaging Between Contexts</h2>\n<p>Once a Terrace House: Opening New Doors episode is detected, the content script needs to tell the background script to set up the “Slow Dive” audio. This starts by opening a connection and then passing a message.</p>\n<p>In <code>content.js</code>, you can add the following:</p>\n<pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\nconst port = chrome.runtime.connect({name: \"slowdown\"});\n</code>\n</pre>\n<p>And wherever you need it in the meat of your function:</p>\n<pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\nport.postMessage({action: \"play\"});\n</code>\n</pre>\n<p>In <code>background.js</code>, you’re listening for the connection and the play message:</p>\n<pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\nchrome.runtime.onConnect.addListener(function(port) {\n const audio = new Audio(\"audio/slowdown.mp3\");\n\n port.onMessage.addListener(function(msg) {\n if (msg.action == \"play\") {\n audio.play();\n }\n }\n}\n</code>\n</pre>\n<p>Keep in mind that you can also send messages in the other direction, from <code>background.js</code> to <code>content.js</code>.</p>\n<h2>Controlling Video & Audio</h2>\n<p>If you’ve been paying close attention to the code snippets above, you’ll notice that we already have our references to the video element on Netflix’s site in <code>content.js</code> and the audio element for “Slow Down” in <code>background.js</code>. We can control these elements using JavaScript with some handy methods.</p>\n<p>To mute and unmute:</p>\n<pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\nvideo.muted = true;\nvideo.muted = false;\n</code>\n</pre>\n<p>To play and pause:</p>\n<pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\naudio.play();\naudio.pause();\n</code>\n</pre>\n<p>To get and set the current time:</p>\n<pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\nconst time = video.currentTime;\naudio.currentTime = 500;\n</code>\n</pre>\n<p>The video and audio elements also fire events. For example, in <code>inject.js</code>, this code will listen for when the video is paused, then send a message to <code>background.js</code> to also pause the song.</p>\n<pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\nvideo.addEventListener(\"pause\", function() {\n port.postMessage({action: \"pause\"});\n});\n</code>\n</pre>\n<p>And then in <code>background.js</code>:</p>\n<pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\nif (msg.action == \"pause\") {\n audio.pause();\n}\n</code>\n</pre>\n<p>Another valuable event is <code>timeupdate</code>, which fires every time the play position of a video or audio file has changed. Use this to continuously check whether the opening credits start. Here’s a simplified version:</p>\n<pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\nvideo.addEventListener(\"timeupdate\", function() {\n if (video.currentTime === START_TIME) {\n video.muted = true;\n port.postMessage({action: \"play\"});\n }\n}\n</code>\n</pre>\n<p>This is pretty much everything you need. Put it all together and you have the basic functionality of the extension.</p>\n<p>With that said, there are a lot of edge cases and other details to account for that’ll considerably complicate your code. For example, in past series, the “Slow Down” theme song would begin fading in over the dialogue. To replicate this, you need to start playing the song first, then muting the video after a ten second delay, instead of simply having both events coincide.</p>\n<p>Another hurdle I encountered is that Netflix behaves as a single-page app. When you navigate from one episode to another on Netflix’s site, a new page isn’t loaded, meaning whatever initialization your extension needs to make on the new video won’t run again. To work around this, <code>background.js</code> needs to listen for when <code>history.pushState()</code> is used by Netflix to display a new URL, and then send a message to <code>content.js</code> to re-initialize.</p>\n<pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\nchrome.webNavigation.onHistoryStateUpdated.addListener(function() {\n audio.pause();\n port.postMessage({action: \"init\"});\n});\n</code>\n</pre>\n<h2>Publishing to the Chrome Web Store</h2>\n<p>Once you’ve finished your extension, you’ll want to distribute the fruits of your labor through the <a href=\"https://chrome.google.com/webstore/category/extensions\">Chrome Web Store</a>. Pay the one-time developer fee of $5 and you can submit your extension. The process is short and sweet. Zip and upload your extension, then fill out some fields. Your listing will go live in a few minutes.</p>\n<p>If you’re a fan of Terrace House, I hope you enjoy the <a href=\"https://chrome.google.com/webstore/detail/slow-down-terrace-house/ohccpkjiolefjbdgakkaihamdcdfgdnm?hl=en-US\">Slow Down × Terrace House extension</a>.</p>\n<p>Cue closing door sound.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/06/closing-1024x524.png\" alt=\"Terrace House: Opening New Doors\" width=\"780\" height=\"399\" class=\"aligncenter size-large wp-image-12116\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/06/closing-1024x524.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2018/06/closing-500x256.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/06/closing-768x393.png 768w, https://thomaspark.co/wp/wp-content/uploads/2018/06/closing.png 1600w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=12159",
"title": "Overwatch Collective",
"description": "Welcome to another installment of the collective nouns survey. This time we focus on Overwatch, following surveys for Team Fortress 2 and Starcraft. In Overwatch, there are 27 playable heroes so far, each with unique … <a href=\"https://thomaspark.co/2018/06/overwatch-collective/\">Read more</a>",
"url": "https://thomaspark.co/2018/06/overwatch-collective/",
"published": "2018-06-19T12:17:16.000Z",
"updated": "2018-06-19T12:17:16.000Z",
"content": "<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis-800x486.jpg\" alt=\"A Flurry of Meis\" width=\"800\" height=\"486\" class=\"aligncenter size-large wp-image-12205\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis-800x486.jpg 800w, https://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis-500x304.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis-768x467.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/06/amobofmeis.jpg 1480w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>Welcome to another installment of the collective nouns survey. This time we focus on Overwatch, following surveys for <a href=\"https://thomaspark.co/2014/02/tf2-collective/\">Team Fortress 2</a> and <a href=\"https://thomaspark.co/2011/05/starcraft-collective/\">Starcraft</a>. </p>\n<p>In Overwatch, there are <a href=\"https://playoverwatch.com/en-us/heroes/\">27 playable heroes</a> so far, each with unique personalities and complementary abilities. When talking about a six-stack of McCrees or Meis (which isn’t seen outside of arcade mode anymore), it’s adequate but boring to refer to them as a “group” or “bunch”.</p>\n<p>Better to invent language like the <a href=\"http://www.thealmightyguru.com/Pointless/AnimalGroups.html\">terms of venery used for animals</a>. You’ve got familiar terms like a pride of lions and a swarm of bees. And even more evocative ones likes a murder of crows, a parliament of owls, a prickle of porcupines, and a flamboyance of flamingos.</p>\n<p>To choose the terms that best evoke each hero, I polled the Overwatch community. I presented four randomized choices and the option to write in your own. A final question asked respondents to give their main hero. Check out the <a href=\"https://goo.gl/forms/B5ZxKETX6jUUVVXs1\">survey</a> and the <a href=\"https://www.reddit.com/r/Overwatch/comments/8qlafc/\">solicitation on r/Overwatch</a>.</p>\n<p>The survey received 1,745 responses. I was surprised to find that many respondents placed little importance on alliteration. As far as the write-ins, some were so good that I kicked myself for not thinking of them. The best of these were given honorable mentions.</p>\n<p>Here are the results. The full tally is given below.</p>\n<h2>Update (May 14, 2020)</h2>\n<p>I re-ran the survey for all heroes introduced since this post, including Ashe, Baptiste, Echo, Sigma, and Wrecking Ball, since there are no more heroes until Overwatch 2’s release. Those have been added to the results.</p>\n<p class=\"hero-list\">\n<span class=\"column\"><br />\n<a href=\"#ana\">An Assembly of Anas</a><br />\n<a href=\"#ashe\">An Ambush of Ashes</a><br />\n<a href=\"#baptiste\">A Band of Baptistes</a><br />\n<a href=\"#bastion\">A Battalion of Bastions</a><br />\n<a href=\"#brigitte\">A Brigade of Brigittes</a><br />\n<a href=\"#dva\">A Division of D.Vas</a><br />\n<a href=\"#doomfist\">A Drove of Doomfists</a><br />\n<a href=\"#echo\">An Array of Echoes</a><br />\n<a href=\"#genji\">A Gaggle of Genjis</a><br />\n<a href=\"#hanzo\">A Horde of Hanzos</a><br />\n<a href=\"#junkrat\">A Bombardment of Junkrats</a><br />\n</span><br />\n<span class=\"column\"><br />\n<a href=\"#lucio\">A Rave of Lúcios</a><br />\n<a href=\"#mccree\">A Posse of McCrees</a><br />\n<a href=\"#mei\">A Flurry of Meis</a><br />\n<a href=\"#mercy\">A Mirage of Mercys</a><br />\n<a href=\"#moira\">A Mob of Moiras</a><br />\n<a href=\"#orisa\">A Stampede of Orisas</a><br />\n<a href=\"#pharah\">A Flock of Pharahs</a><br />\n<a href=\"#reaper\">A Wrath of Reapers</a><br />\n<a href=\"#reinhardt\">A Regiment of Reinhardts</a><br />\n<a href=\"#roadhog\">A Rodeo of Roadhogs</a><br />\n<a href=\"#sigma\">A Surge of Sigmas</a><br />\n</span><br />\n<span class=\"column\"><br />\n<a href=\"#soldier76\">A Squad of Soldier: 76s</a><br />\n<a href=\"#sombra\">A Syndicate of Sombras</a><br />\n<a href=\"#symmetra\">A Spectrum of Symmetras</a><br />\n<a href=\"#torbjorn\">A Troupe of Torbjörns</a><br />\n<a href=\"#tracer\">A Trail of Tracers</a><br />\n<a href=\"#widowmaker\">A Web of Widowmakers</a><br />\n<a href=\"#winston\">A Troop of Winstons</a><br />\n<a href=\"#wreckingball\">A Rumble of Wrecking Balls</a><br />\n<a href=\"#zarya\">A Zeal of Zaryas</a><br />\n<a href=\"#zenyatta\">A Harmony of Zenyattas</a><br />\n</span>\n</p>\n<h2 id=\"ana\">An Assembly of Anas</h2>\n<p class=\"ana\">\n<span class=\"option\">Assembly</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 37%;\">37%</span></span><br />\n<span class=\"option\">Army</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 35%;\">35%</span></span><br />\n<span class=\"option\">Admonishment</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 13%;\">13%</span></span><br />\n<span class=\"option\">Association</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 11%;\">11%</span></span>\n</p>\n<p><strong>Ana Mains Call Themselves:</strong> Tie between Assembly and Army, which shows how close this one was.</p>\n<p><strong>Honorable Mention:</strong> Annoyance, both in that Ana can annoy you with anti-heal and sleep, and that she seems perpetually disappointed in you.</p>\n<p><strong>Other Write-Ins:</strong> Armada, Apocalypse, Tea Party, Retirement, Peek, Array, Eyeful, Arena, Parliament, Hobble, Administration, Arrangement, Abundance, Aviary</p>\n<h2 id=\"ashe\">An Ambush of Ashes</h2>\n<p class=\"ashe\">\n<span class=\"option\">Ambush</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 55%;\">55%</span></span><br />\n<span class=\"option\">Anger</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 18%;\">18%</span></span><br />\n<span class=\"option\">Association</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 17%;\">17%</span></span><br />\n<span class=\"option\">Admonishment</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 6%;\">6%</span></span>\n</p>\n<p><strong>Ashe Mains Call Themselves:</strong> Tie between Ambush and Anger.</p>\n<p><strong>Honorable Mention:</strong> Atonement, suggesting Ashe has turned the page on her criminal life.</p>\n<p><strong>Other Write-Ins:</strong> Assembly, Urn, Arsenal, Phoenix, Posse, Gang</p>\n<h2 id=\"baptiste\">A Band of Baptistes</h2>\n<p class=\"baptiste\">\n<span class=\"option\">Band</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 32%;\">32%</span></span><br />\n<span class=\"option\">Battery</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 29%;\">29%</span></span><br />\n<span class=\"option\">Bundle</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 21%;\">21%</span></span><br />\n<span class=\"option\">Batch</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 17%;\">17%</span></span>\n</p>\n<p><strong>Baptiste Mains Call Themselves:</strong> Band</p>\n<p><strong>Honorable Mention:</strong> Bunch, not as evocative as some of the other terms but rolls off the tongue.</p>\n<p><strong>Other Write-Ins:</strong> Bounce, Bevy, Brood, Battalion, Bond, Congregation</p>\n<h2 id=\"bastion\">A Battalion of Bastions</h2>\n<p class=\"bastion\">\n<span class=\"option\">Battalion</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 53%;\">53%</span></span><br />\n<span class=\"option\">Battery</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 23%;\">23%</span></span><br />\n<span class=\"option\">Band</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 13%;\">13%</span></span><br />\n<span class=\"option\">Bulwark</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 9%;\">9%</span></span>\n</p>\n<p><strong>Bastion Mains Call Themselves:</strong> Battalion</p>\n<p><strong>Honorable Mention:</strong> Bunch, which fits the subtlety and grace of Bastion. </p>\n<p><strong>Other Write-Ins:</strong> Bevy, Balustrade, Boom, Brothel</p>\n<h2 id=\"brigitte\">A Brigade of Brigittes</h2>\n<p class=\"brigitte\">\n<span class=\"option\">Brigade</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 69%;\">69%</span></span><br />\n<span class=\"option\">Bunch</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 11%;\">11%</span></span><br />\n<span class=\"option\">Bash</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 9%;\">9%</span></span><br />\n<span class=\"option\">Bombardment</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 7%;\">7%</span></span>\n</p>\n<p><strong>Brigitte Mains Call Themselves:</strong> Brigade</p>\n<p><strong>Honorable Mention:</strong> Crusade, it works nicely with Brigitte’s backstory, but can’t overcome the winner.</p>\n<p><strong>Other Write-Ins:</strong> Barricade, Baguette, Bruschetta, Phalanx, Bonanza, Terror, Bestiary, Battalion</p>\n<h2 id=\"dva\">A Division of D.Vas</h2>\n<p class=\"dva\">\n<span class=\"option\">Division</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 51%;\">51%</span></span><br />\n<span class=\"option\">Dazzle</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 28%;\">28%</span></span><br />\n<span class=\"option\">Detachment</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 12%;\">12%</span></span><br />\n<span class=\"option\">Destruction</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 5%;\">5%</span></span>\n</p>\n<p><strong>D.Va Mains Call Themselves:</strong> Division</p>\n<p><strong>Honorable Mention:</strong> Dervish, nothing better to call six D.Va mechs boosting around you than a whirling dervish.</p>\n<p><strong>Other Write-Ins:</strong> Defense, LAN Party, Deletion, Drove, Demolition, Dominion, Devotion, Detonation, Diversion, Dorito</p>\n<h2 id=\"doomfist\">A Drove of Doomfists</h2>\n<p class=\"doomfist\">\n<span class=\"option\">Drove</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 36%;\">36%</span></span><br />\n<span class=\"option\">Flurry</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 30%;\">30%</span></span><br />\n<span class=\"option\">Danger</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 16%;\">16%</span></span><br />\n<span class=\"option\">Flog</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 11%;\">11%</span></span>\n</p>\n<p><strong>Doomfist Mains Call Themselves:</strong> Flurry, they might have to fight Mei mains for it though.</p>\n<p><strong>Honorable Mention:</strong> Defenestration, because you have to use that word whenever possible.</p>\n<p><strong>Other Write-Ins:</strong> Disorder, Fistful, Crater, Handful, Domination, Dojo, Damnation, Dominion, Dragoon</p>\n<h2 id=\"echo\">An Array of Echoes</h2>\n<p class=\"echo\">\n<span class=\"option\">Array</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 47%;\">47%</span></span><br />\n<span class=\"option\">Echelon</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 33%;\">33%</span></span><br />\n<span class=\"option\">Exaltation</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 9%;\">9%</span></span><br />\n<span class=\"option\">Reverberation</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 8%;\">8%</span></span>\n</p>\n<p><strong>Echo Mains Call Themselves:</strong> Array.</p>\n<p><strong>Honorable Mention:</strong> Echo, as in an Echo of Echoes… is there an echo in here?</p>\n<p><strong>Other Write-Ins:</strong> Ring, Choir, Flight, Sound, Squadron</p>\n<h2 id=\"genji\">A Gaggle of Genjis</h2>\n<p class=\"genji\">\n<span class=\"option\">Gaggle</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 50%;\">50%</span></span><br />\n<span class=\"option\">Gang</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 37%;\">37%</span></span><br />\n<span class=\"option\">Group</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 6%;\">6%</span></span><br />\n<span class=\"option\">Gulp</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 3%;\">3%</span></span>\n</p>\n<p><strong>Genji Mains Call Themselves:</strong> Gang, because apparently Genji mains seem to take themselves much more seriously than other Overwatch players do.</p>\n<p><strong>Honorable Mention:</strong> Clan</p>\n<p><strong>Other Write-Ins:</strong> Dash, Gale, Gathering, Gimmick, Brotherhood, Gradient</p>\n<h2 id=\"hanzo\">A Horde of Hanzos</h2>\n<p class=\"hanzo\">\n<span class=\"option\">Horde</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 33%;\">33%</span></span><br />\n<span class=\"option\">Quiver</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 28%;\">28%</span></span><br />\n<span class=\"option\">Herd</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 28%;\">28%</span></span><br />\n<span class=\"option\">Host</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 7%;\">7%</span></span>\n</p>\n<p><strong>Hanzo Mains Call Themselves:</strong> Horde</p>\n<p><strong>Honorable Mention:</strong> Scatter, because now that the ability has been patched out of the game, we have to honor its memory somehow.</p>\n<p><strong>Other Write-Ins:</strong> Hierarchy, Geometry Class, Clan, Hazard, Harem</p>\n<h2 id=\"junkrat\">A Bombardment of Junkrats</h2>\n<p class=\"junkrat\">\n<span class=\"option\">Bombardment</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 34%;\">34%</span></span><br />\n<span class=\"option\">Jalopy</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 29%;\">29%</span></span><br />\n<span class=\"option\">Jury</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 20%;\">20%</span></span><br />\n<span class=\"option\">Drove</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 11%;\">11%</span></span>\n</p>\n<p><strong>Junkrat Mains Call Themselves:</strong> Bombardment</p>\n<p><strong>Honorable Mention:</strong> Heap, another common write-in was Spam which was the winner for Junkrat’s TF2 counterpart, Demoman.</p>\n<p><strong>Other Write-Ins:</strong> Juggle, Jank, Dumpster, Jamboree, Jive, Spam, Cackle, Cluster, Jumble</p>\n<h2 id=\"lucio\">A Rave of Lúcios</h2>\n<p class=\"lucio\">\n<span class=\"option\">Rave</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 39%;\">39%</span></span><br />\n<span class=\"option\">Legion</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 26%;\">26%</span></span><br />\n<span class=\"option\">League</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 22%;\">22%</span></span><br />\n<span class=\"option\">Leap</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 10%;\">10%</span></span>\n</p>\n<p><strong>Lúcio Mains Call Themselves:</strong> Legion</p>\n<p><strong>Honorable Mention:</strong> Wave, let’s be honest… pickings were slim here, but at least this plays off the idea of a sound wave.</p>\n<p><strong>Other Write-Ins:</strong> Loop, Line, Favela, Wall</p>\n<h2 id=\"mccree\">A Posse of McCrees</h2>\n<p class=\"mccree\">\n<span class=\"option\">Posse</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 48%;\">48%</span></span><br />\n<span class=\"option\">Murder</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 21%;\">21%</span></span><br />\n<span class=\"option\">Maraud</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 14%;\">14%</span></span><br />\n<span class=\"option\">Maelstrom</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 13%;\">13%</span></span>\n</p>\n<p><strong>McCree Mains Call Themselves:</strong> Posse</p>\n<p><strong>Honorable Mention:</strong> Mishap, because McCree’s ultimate “High Noon” goes sideways more often than not.</p>\n<p><strong>Other Write-Ins:</strong> Misery, Meddling, Gang, Mass, Saloon, Mob, Hoedown, Passel, Mischief, Mid-Day, Magazine</p>\n<h2 id=\"mei\">A Flurry of Meis</h2>\n<p class=\"mei\">\n<span class=\"option\">Flurry</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 38%;\">38%</span></span><br />\n<span class=\"option\">Mob</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 35%;\">35%</span></span><br />\n<span class=\"option\">Monsoon</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 16%;\">16%</span></span><br />\n<span class=\"option\">Squall</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 7%;\">7%</span></span>\n</p>\n<p><strong>Mei Mains Call Themselves:</strong> Flurry</p>\n<p><strong>Honorable Mention:</strong> Malefaction, because a lineup of Meis is about as evil and terrifying as you can get. See image at top of post.</p>\n<p><strong>Other Write-Ins:</strong> Malady, Medley, Murder, Mash, Storm, Manifold, Maze, Maelstrom</p>\n<h2 id=\"mercy\">A Mirage of Mercys</h2>\n<p class=\"mercy\">\n<span class=\"option\">Mirage</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 34%;\">34%</span></span><br />\n<span class=\"option\">Vale</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 27%;\">27%</span></span><br />\n<span class=\"option\">Mend</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 17%;\">17%</span></span><br />\n<span class=\"option\">Remedy</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 13%;\">13%</span></span>\n</p>\n<p><strong>Mercy Mains Call Themselves:</strong> Mirage</p>\n<p><strong>Honorable Mention:</strong> Martyrdom, for the suffering Mercy players endure just to have a shot at winning the match.</p>\n<p><strong>Other Write-Ins:</strong> Chorus, Menagerie, Murmur, Cloud, Miracle, Mob, Choir, Staff, Marvel, Mound, Flutter, Mangle, Myriad, Wainscot, Mothball, Coterie, Menage, Mottle, Marquee</p>\n<h2 id=\"moira\">A Mob of Moiras</h2>\n<p class=\"moira\">\n<span class=\"option\">Mob</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 41%;\">41%</span></span><br />\n<span class=\"option\">Marvel</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 25%;\">25%</span></span><br />\n<span class=\"option\">Mania</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 22%;\">22%</span></span><br />\n<span class=\"option\">Midnight</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 8%;\">8%</span></span>\n</p>\n<p><strong>Moira Mains Call Themselves:</strong> Mob</p>\n<p><strong>Honorable Mention:</strong> Miasma, which reflects the visual vomit on your screen whenever a Moira ults, although masquerade and malevolence were also inspired.</p>\n<p><strong>Other Write-Ins:</strong> Masquerade, Malevolence, Aura, Massacre, Mosh, Coven</p>\n<h2 id=\"orisa\">A Stampede of Orisas</h2>\n<p class=\"orisa\">\n<span class=\"option\">Stampede</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 50%;\">50%</span></span><br />\n<span class=\"option\">Onslaught</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 23%;\">23%</span></span><br />\n<span class=\"option\">Orchestra</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 20%;\">20%</span></span><br />\n<span class=\"option\">Observance</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 5%;\">5%</span></span>\n</p>\n<p><strong>Orisa Mains Call Themselves:</strong> Stampede</p>\n<p><strong>Honorable Mention:</strong> Orgy, it’s fun to say, although not to imagine.</p>\n<p><strong>Other Write-Ins:</strong> Obstruction, Optimization, Fortitude, Orchard, March, Omnibus, Enforcement, Oasis, Innocence</p>\n<h2 id=\"pharah\">A Flock of Pharahs</h2>\n<p class=\"pharah\">\n<span class=\"option\">Flock</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 43%;\">43%</span></span><br />\n<span class=\"option\">Fleet</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 26%;\">26%</span></span><br />\n<span class=\"option\">Phalanx</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 17%;\">17%</span></span><br />\n<span class=\"option\">Flight</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 12%;\">12%</span></span>\n</p>\n<p><strong>Pharah Mains Call Themselves:</strong> Flock</p>\n<p><strong>Honorable Mention:</strong> Formation, who wouldn’t want to watch a team of Pharahs try to do precision air acrobatics like the Blue Angels.</p>\n<p><strong>Other Write-Ins:</strong> Flank, Parade, Plunge, Flimflam, Pandemonium, Barrage, Justice, Phoenix, Flotilla, Squadron</p>\n<h2 id=\"reaper\">A Wrath of Reapers</h2>\n<p class=\"reaper\">\n<span class=\"option\">Wrath</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 35%;\">35%</span></span><br />\n<span class=\"option\">Revenant</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 26%;\">26%</span></span><br />\n<span class=\"option\">Ravage</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 23%;\">23%</span></span><br />\n<span class=\"option\">Revenge</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 8%;\">8%</span></span>\n</p>\n<p><strong>Reaper Mains Call Themselves:</strong> Wrath</p>\n<p><strong>Honorable Mention:</strong> Ring, which is the arrangement a bunch of edgy Reapers would make to practice the occult.</p>\n<p><strong>Other Write-Ins:</strong> Murder, Edge, Wrangle, Wraith, Rout, Haunt, Blossom, Heap, Host, Blight, Rampage, Coven, Ruse, Resurgence, Renegade, Rally, Spook, Hot Topic</p>\n<h2 id=\"reinhardt\">A Regiment of Reinhardts</h2>\n<p class=\"reinhardt\">\n<span class=\"option\">Regiment</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 48%;\">48%</span></span><br />\n<span class=\"option\">Rampage</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 18%;\">18%</span></span><br />\n<span class=\"option\">Charge</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 16%;\">16%</span></span><br />\n<span class=\"option\">Rampart</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 15%;\">15%</span></span>\n</p>\n<p><strong>Reinhardt Mains Call Themselves:</strong> Regiment</p>\n<p><strong>Honorable Mention:</strong> Triumph, just sounds so knightly alongside a crusade of Brigittes.</p>\n<p><strong>Other Write-Ins:</strong> Bombast, Army, Wall, Crusade, Radiance, Romp, Rutting, Glory, Crash</p>\n<h2 id=\"roadhog\">A Rodeo of Roadhogs</h2>\n<p class=\"roadhog\">\n<span class=\"option\">Rodeo</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 51%;\">51%</span></span><br />\n<span class=\"option\">Ragtag</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 16%;\">16%</span></span><br />\n<span class=\"option\">Rash</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 15%;\">15%</span></span><br />\n<span class=\"option\">Rout</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 11%;\">11%</span></span>\n</p>\n<p><strong>Roadhog Mains Call Themselves:</strong> Rodeo</p>\n<p><strong>Honorable Mention:</strong> Rasher, imagine all the bacon you could get out of a Roadhog. Mmmm.</p>\n<p><strong>Other Write-Ins:</strong> Rumble, Rebuff, Rebellion, Chain Gang, Wall, Absolute Unit, Drove, Rotund, Onslaught, Ravage, Glut, Riot, Rack</p>\n<h2 id=\"sigma\">A Surge of Sigmas</h2>\n<p class=\"sigma\">\n<span class=\"option\">Surge</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 34%;\">34%</span></span><br />\n<span class=\"option\">School</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 32%;\">32%</span></span><br />\n<span class=\"option\">Study</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 21%;\">21%</span></span><br />\n<span class=\"option\">Set</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 8%;\">8%</span></span>\n</p>\n<p><strong>Sigma Mains Call Themselves:</strong> School</p>\n<p><strong>Honorable Mention:</strong> Symposium, a nod to Sigma’s background in space and science, not to mention his obsession with music.</p>\n<p><strong>Other Write-Ins:</strong> Symphony, Asylum, System, Whisper, Schism</p>\n<h2 id=\"soldier76\">A Squad of Soldier: 76s</h2>\n<p class=\"soldier76\">\n<span class=\"option\">Squad</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 81%;\">81%</span></span><br />\n<span class=\"option\">Service</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 8%;\">8%</span></span><br />\n<span class=\"option\">Sprint</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 5%;\">5%</span></span><br />\n<span class=\"option\">Slaughter</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 4%;\">4%</span></span>\n</p>\n<p><strong>Soldier: 76 Mains Call Themselves:</strong> Squad</p>\n<p><strong>Honorable Mention:</strong> Salvo, as in a stream of Soldiers who fire their helix rockets and then immediately sprint away from the danger.</p>\n<p><strong>Other Write-Ins:</strong> Salute, Platoon, Army, Slew, Barracks, Retirement Home</p>\n<h2 id=\"sombra\">A Syndicate of Sombras</h2>\n<p class=\"sombra\">\n<span class=\"option\">Syndicate</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 67%;\">67%</span></span><br />\n<span class=\"option\">Shade</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 17%;\">17%</span></span><br />\n<span class=\"option\">Stealth</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 7%;\">7%</span></span><br />\n<span class=\"option\">Sovereign</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 7%;\">7%</span></span>\n</p>\n<p><strong>Sombra Mains Call Themselves:</strong> Syndicate</p>\n<p><strong>Honorable Mention:</strong> Conspiracy, nearly as good as the winning choice.</p>\n<p><strong>Other Write-Ins:</strong> Breach, Collective, Sneak, Sample, Shimmer, Swarm, Scurry, Murder, Suite, Cell, Sheen, Score</p>\n<h2 id=\"symmetra\">A Spectrum of Symmetras</h2>\n<p class=\"symmetra\">\n<span class=\"option\">Spectrum</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 42%;\">42%</span></span><br />\n<span class=\"option\">System</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 27%;\">27%</span></span><br />\n<span class=\"option\">Surplus</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 19%;\">19%</span></span><br />\n<span class=\"option\">Sentinel</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 10%;\">10%</span></span>\n</p>\n<p><strong>Symmetra Mains Call Themselves:</strong> Spectrum, as in the electromagnetic spectrum of course.</p>\n<p><strong>Honorable Mention:</strong> Circuit</p>\n<p><strong>Other Write-Ins:</strong> Council, Symmetry, Sandbox, Sovereign, Suffering, Projection, Assembly</p>\n<h2 id=\"torbjorn\">A Troupe of Torbjörns</h2>\n<p class=\"torbjorn\">\n<span class=\"option\">Troupe</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 47%;\">47%</span></span><br />\n<span class=\"option\">Team</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 22%;\">22%</span></span><br />\n<span class=\"option\">Temper</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 14%;\">14%</span></span><br />\n<span class=\"option\">Tempest</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 12%;\">12%</span></span>\n</p>\n<p><strong>Torbjörn Mains Call Themselves:</strong> Troupe, because a bunch of Torbs seem like they’d be boisterous and merry.</p>\n<p><strong>Honorable Mention:</strong> Tango, Tumescence</p>\n<p><strong>Other Write-Ins:</strong> Torrent, Trebuchet, Temblor, Workshop, Turret, Tragedy, Travesty, Tinker, Tumor, Thunder, Trove, Cast, Torment, Testament, Tsunami, Trollful, Letterbox, Gäng, Blight</p>\n<h2 id=\"tracer\">A Trail of Tracers</h2>\n<p class=\"tracer\">\n<span class=\"option\">Trail</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 36%;\">36%</span></span><br />\n<span class=\"option\">Torment</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 22%;\">22%</span></span><br />\n<span class=\"option\">Twitch</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 20%;\">20%</span></span><br />\n<span class=\"option\">Trace</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 16%;\">16%</span></span>\n</p>\n<p><strong>Tracer Mains Call Themselves:</strong> Torment</p>\n<p><strong>Honorable Mention:</strong> Cavalcade, a callback to Tracer’s voiceline, “The cavalry’s here!”</p>\n<p><strong>Other Write-Ins:</strong> Zip, Blink, Troupe, Team, Swarm, Trounce, Flash, Flit, Cavalry, Gaggle, Fleet, Tribe, Marathon, Stream, Rush, Slipstream, Track, Trope</p>\n<h2 id=\"widowmaker\">A Web of Widowmakers</h2>\n<p class=\"widowmaker\">\n<span class=\"option\">Web</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 52%;\">52%</span></span><br />\n<span class=\"option\">Nest</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 33%;\">33%</span></span><br />\n<span class=\"option\">Wave</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 7%;\">7%</span></span><br />\n<span class=\"option\">Ward</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 6%;\">6%</span></span>\n</p>\n<p><strong>Widowmaker Mains Call Themselves:</strong> Web</p>\n<p><strong>Honorable Mention:</strong> Whisper, even though after Widowmaker’s nerf she’s practically screaming her infra-sight voiceline.</p>\n<p><strong>Other Write-Ins:</strong> Weave, Murder, Sight, Wake, Baguette, Waste, Ballet, Wedding, Window, Wrath, Range</p>\n<h2 id=\"winston\">A Troop of Winstons</h2>\n<p class=\"winston\">\n<span class=\"option\">Troop</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 35%;\">35%</span></span><br />\n<span class=\"option\">Wrangle</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 30%;\">30%</span></span><br />\n<span class=\"option\">Warren</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 18%;\">18%</span></span><br />\n<span class=\"option\">Wisdom</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 12%;\">12%</span></span>\n</p>\n<p><strong>Winston Mains Call Themselves:</strong> Troop</p>\n<p><strong>Honorable Mention:</strong> Barrel, either a group of raging apes barreling through you, or the chaos of a barrel full of monkeys.</p>\n<p><strong>Other Write-Ins:</strong> Family, Band, Jungle, Coalition, Shrewdness, Wince, Rampage, Faculty, Whoop, Waddle, Warmth, Wallop</p>\n<h2 id=\"wreckingball\">A Rumble of Wrecking Balls</h2>\n<p class=\"wreckingball\">\n<span class=\"option\">Rumble</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 39%;\">39%</span></span><br />\n<span class=\"option\">Cluster</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 33%;\">33%</span></span><br />\n<span class=\"option\">Bobble</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 15%;\">15%</span></span><br />\n<span class=\"option\">Hail</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 9%;\">9%</span></span>\n</p>\n<p><strong>Wrecking Ball Mains Call Themselves:</strong> Cluster</p>\n<p><strong>Honorable Mention:</strong> Hail, as in a Hail of Hammonds.</p>\n<p><strong>Other Write-Ins:</strong> Bobble, Crash, Crew, Hail, Roll, Buttload, Orbit, Round, Rabble, Rout, Bombardment, Bunch</p>\n<h2 id=\"zarya\">A Zeal of Zaryas</h2>\n<p class=\"zarya\">\n<span class=\"option\">Zeal</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 34%;\">34%</span></span><br />\n<span class=\"option\">Ray</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 23%;\">23%</span></span><br />\n<span class=\"option\">Buzz</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 22%;\">22%</span></span><br />\n<span class=\"option\">Glow</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 14%;\">14%</span></span>\n</p>\n<p><strong>Zarya Mains Call Themselves:</strong> Zeal</p>\n<p><strong>Honorable Mention:</strong> Surge, it was right there in the ultimate name all along.</p>\n<p><strong>Other Write-Ins:</strong> Mass, Motherland, Bubble, Gulag, Zest, Zamboni, Commune, Pack, Girth, Regime, Flex, Army, Attraction, Zap, Accretion, Burst, Zephyr, Zenith, команда</p>\n<h2 id=\"zenyatta\">A Harmony of Zenyattas</h2>\n<p class=\"zenyatta\">\n<span class=\"option\">Harmony</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 38%;\">38%</span></span><br />\n<span class=\"option\">Nirvana</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 27%;\">27%</span></span><br />\n<span class=\"option\">Om</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 17%;\">17%</span></span><br />\n<span class=\"option\">Tranquility</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 11%;\">11%</span></span>\n</p>\n<p><strong>Zenyatta Mains Call Themselves:</strong> Harmony</p>\n<p><strong>Honorable Mention:</strong> Zenith, far and away the best write-in. There just aren’t that many words that start with Z.</p>\n<p><strong>Other Write-Ins:</strong> Zoom, Zoo, Order, Zephyr, Monastery, Collective, Meditation, Mandala, Float, Unity, Ziggurat, A Lotta, Embrace, Trance, Zeppelin, Cult, Zeitgeist, Zealot, Singularity</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Games",
"term": "Games",
"url": null
},
{
"label": "Language",
"term": "Language",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=11983",
"title": "3D Printing a Wireless Charging Case for the Apple TV Remote",
"description": "I recently got a new phone that supports wireless charging, allowing me to switch out my rather hefty clock radio dock for a teeny wireless charging pad, continuing the minimalist march in my living room. … <a href=\"https://thomaspark.co/2018/03/3d-printing-a-wireless-charging-case-for-the-apple-tv-remote/\">Read more</a>",
"url": "https://thomaspark.co/2018/03/3d-printing-a-wireless-charging-case-for-the-apple-tv-remote/",
"published": "2018-03-08T13:29:25.000Z",
"updated": "2018-03-08T13:29:25.000Z",
"content": "<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup.jpg\" alt=\"Wireless Charging Setup\" width=\"3803\" height=\"2751\" class=\"aligncenter size-full wp-image-11997\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup.jpg 3803w, https://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup-500x362.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup-768x556.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/wirelesschargersetup-1024x741.jpg 1024w\" sizes=\"auto, (max-width: 3803px) 100vw, 3803px\" /></p>\n<p>I recently got a new phone that supports wireless charging, allowing me to switch out <a href=\"https://www.amazon.com/gp/product/B001U086NC?ie=UTF8&tag=bigicecube-20&camp=1789&linkCode=xm2&creativeASIN=B001U086NC\">my rather hefty clock radio dock</a> for <a href=\"https://www.amazon.com/gp/product/B0756Z8X82?ie=UTF8&tag=bigicecube-20&camp=1789&linkCode=xm2&creativeASIN=B0756Z8X82\">a teeny wireless charging pad</a>, continuing the <a href=\"https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/\">minimalist march in my living room</a>. Things were good until my Apple TV remote needed a recharge, and I had to dig out my old lightning cable anyway.</p>\n<p>Apple will likely add wireless charging to the ATV remote eventually, bolstering support for AirPower, but I decided to come up with my own solution in the meantime.</p>\n<p>I started with a <a href=\"https://www.amazon.com/gp/product/B077QJQXMJ?ie=UTF8&tag=bigicecube-20&camp=1789&linkCode=xm2&creativeASIN=B077QJQXMJ\">Lightning to QI wireless charging receiver module</a>, which worked well but didn’t look so great dangling from the remote.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver.jpg\" alt=\"Wireless Charging Receiver\" width=\"3024\" height=\"2068\" class=\"aligncenter size-full wp-image-12015\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver.jpg 3024w, https://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver-500x342.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver-768x525.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/chargerreceiver-1024x700.jpg 1024w\" sizes=\"auto, (max-width: 3024px) 100vw, 3024px\" /></p>\n<p>What I needed next was a case to tuck the receiver into. I decided to go the 3D printing route.</p>\n<p>After taking some measurements with a caliper borrowed from a friend, I built a 3D model using <a href=\"https://www.tinkercad.com/\">Tinkercad</a>. I strongly recommend Tinkercad if you’re a beginner, as I was able to get up to speed with it very quickly and accomplish everything I needed.</p>\n<p>I started with a basic case shape that had a hollowed out area to tuck the charging receiver into. After a few iterations, I arrived at a case with a separate cover piece that hid away the receiver and allowed the Lightning plug to be snapped into it, exposing only the plug end when the two pieces cases were assembled.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/03/tinkercad-model.png\" alt=\"TinkerCAD model\" width=\"909\" height=\"522\" class=\"aligncenter size-full wp-image-12009\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/03/tinkercad-model.png 909w, https://thomaspark.co/wp/wp-content/uploads/2018/03/tinkercad-model-500x287.png 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/tinkercad-model-768x441.png 768w\" sizes=\"auto, (max-width: 909px) 100vw, 909px\" /></p>\n<p>I exported the model and submitted it to <a href=\"https://www.shapeways.com/\">Shapeways</a>, a popular 3D printing service. I also got the more basic model printed to compare. About a week later, the pieces arrived.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces.jpg\" alt=\"3D Printed Case Pieces\" width=\"3916\" height=\"2939\" class=\"aligncenter size-full wp-image-12022\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces.jpg 3916w, https://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces-500x375.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/casepieces-1024x769.jpg 1024w\" sizes=\"auto, (max-width: 3916px) 100vw, 3916px\" /></p>\n<p>Here’s the assembly. You can see how the charging receiver gets plugged into the cover piece, which then slides into the main piece. The fit between the pieces was snug and the seam barely noticeable.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/03/assembly.jpg\" alt=\"3D Printed Apple TV 4 Wireless Charging Case Assembly\" width=\"6000\" height=\"3613\" class=\"aligncenter size-full wp-image-12014\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/03/assembly.jpg 6000w, https://thomaspark.co/wp/wp-content/uploads/2018/03/assembly-500x301.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/assembly-768x462.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/assembly-1024x617.jpg 1024w\" sizes=\"auto, (max-width: 6000px) 100vw, 6000px\" /></p>\n<p>Here’s the final product. Now the lightning cable can be packed away for good.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase.jpg\" alt=\"Apple TV 4 Remote Wireless Charging Case\" width=\"3890\" height=\"2954\" class=\"aligncenter size-full wp-image-12016\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase.jpg 3890w, https://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase-500x380.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase-768x583.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2018/03/finalcase-1024x778.jpg 1024w\" sizes=\"auto, (max-width: 3890px) 100vw, 3890px\" /></p>\n<h2>Notes</h2>\n<h3>Fit</h3>\n<p>I modeled the case to have tight tolerances between the pieces and the remote. Since this was the first time I used 3D printing, I didn’t know what I was gonna get. The 3D print job was as precise as hoped for, but the tolerances ended up being a bit too tight. Even after sanding down the pieces, the remote was a tight squeeze and required some muscle to remove. For the next version, I’d leave bigger gaps and add little nubs (not sure the right term) inside the case to hold the remote in place instead.</p>\n<h3>Finish</h3>\n<p>The texture of the Shapeways pieces wasn’t as rough as other 3D printed works I’ve seen in the past. Still, they were far from the smooth or even matte surfaces you get in commercial products. Finishing them using the methods described <a href=\"https://www.fictiv.com/hwg/fabricate/ultimate-guide-to-finishing-3d-printed-parts\">in this guide</a> would go a long way.</p>\n<h3>Financials</h3>\n<p>Getting the pieces printed by Shapeways was quite pricey. The model could definitely be optimized to reduce the amount of materials used, or if these were to be made in bulk, an entirely different, cheaper process could be taken. But given that this was a one-off project and as much a learning experience as anything else, cost wasn’t a big consideration.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Hardware",
"term": "Hardware",
"url": null
}
]
},
{
"id": "https://thomaspark.co/?p=11919",
"title": "Putting TV Clutter Out of Sight",
"description": "The Problem The clutter. While I admit this setup is cleaner than most, there’s still the white power strip peeking out and the Nintendo Switch obscuring a corner of the TV. Then there’s the random … <a href=\"https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/\">Read more</a>",
"url": "https://thomaspark.co/2017/10/putting-tv-clutter-out-of-sight/",
"published": "2017-10-13T13:18:44.000Z",
"updated": "2017-10-13T13:18:44.000Z",
"content": "<h2>The Problem</h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before.jpg\" alt=\"\" width=\"1600\" height=\"1200\" class=\"aligncenter size-full wp-image-11939\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before-500x375.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-before-1024x768.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" /></p>\n<p>The clutter. While I admit this setup is cleaner than most, there’s still the white power strip peeking out and the Nintendo Switch obscuring a corner of the TV. Then there’s the random cables drooping here and there. You might say I’m obsessive about cable management, decluttering, and minimalism in general.</p>\n<p>But while I’ve endured this setup to this point, clearing it became an urgent matter once Baby Clara entered the picture. To her, it’s all strings to be pulled and toys to be tossed.</p>\n<h2>The Solution</h2>\n<p>To hide the clutter, I decided to mount everything onto the back of the TV.</p>\n<p>I picked up black MDF board, cut it to size, and drilled holes that lined up with the VESA mounting holes. Long bolts that fit the VESA holes (M8 x 55mm in my case) are paired with nuts to secure the board several centimeters away from the TV. By not being flush, there’s still room to ventilate both the TV and devices.</p>\n<p>Throw in a couple of custom mounts for the <a href=\"https://www.amazon.com/TotalMount-Nintendo-Switch-Mounts-wall/dp/B071HLJL4Q/?tag=bigicecube-20\">Nintendo Switch</a> and <a href=\"https://www.amazon.com/TotalMount-Apple-Mount-Compatible-including/dp/B017K17PQ8/?tag=bigicecube-20\">Apple TV</a>, a dash of velcro and Command strips, and this is what I got.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount.jpg\" alt=\"\" width=\"1600\" height=\"1200\" class=\"aligncenter size-full wp-image-11941\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount-500x375.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-back-mount-1024x768.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" /></p>\n<h2>The Result</h2>\n<p>And here’s the view from the couch. This will work… At least till Baby Clara discovers the other side of the TV.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after.jpg\" alt=\"\" width=\"1600\" height=\"1200\" class=\"aligncenter size-full wp-image-11940\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after-500x375.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after-768x576.jpg 768w, https://thomaspark.co/wp/wp-content/uploads/2017/10/tv-clutter-after-1024x768.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" /></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
},
{
"label": "Hardware",
"term": "Hardware",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=11836",
"title": "Learning CSS Grid with Grid Garden",
"description": "I’m pleased to announce Grid Garden, a sequel to Flexbox Froggy. This time, you’ll learn about CSS grid, the hot new layout module, and cultivate a carrot or two in the process. Grid is cutting … <a href=\"https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/\">Read more</a>",
"url": "https://thomaspark.co/2017/04/learning-css-grid-with-grid-garden/",
"published": "2017-04-03T14:37:40.000Z",
"updated": "2017-04-03T14:37:40.000Z",
"content": "<p><a href=\"http://cssgridgarden.com\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot.png\" alt=\"Grid Garden Screenshot\" width=\"2264\" height=\"1372\" class=\"aligncenter size-full wp-image-11843\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot.png 2264w, https://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot-500x303.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot-768x465.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/03/gridgarden-screenshot-1024x621.png 1024w\" sizes=\"auto, (max-width: 2264px) 100vw, 2264px\" /></a></p>\n<p>I’m pleased to announce <a href=\"http://cssgridgarden.com\">Grid Garden</a>, a sequel to <a href=\"http://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/\">Flexbox Froggy</a>. This time, you’ll learn about CSS grid, the hot new layout module, and cultivate a carrot or two in the process.</p>\n<p>Grid is cutting edge, with <a href=\"http://caniuse.com/#feat=css-grid\">browser support landing just last month</a>. What this means is that you’ll need to update to the latest Firefox, Chrome, or Safari in order to play Grid Garden. So hop to it!</p>\n<div class=\"center\">\n<a class=\"standard-btn xlarge-btn orange-btn\" href=\"http://cssgridgarden.com\">Grid Garden</a>\n</div>\n<h2>Grid versus Flexbox</h2>\n<p>If you’re anything like me, you’re thinking to yourself, “We just figured out flexbox, now we have another layout technique?!” But just as <code class=\"language-css\">position</code> and <code class=\"language-css\">float</code> will continue to find use, grid and flexbox will coexist and fulfill different purposes based on their strengths.</p>\n<p>So what exactly is the difference between grid and flexbox? In a nutshell, flexbox works along one primary dimension, with niceties like wrapping, alignment, and justification thrown in. Grid, on the other hand, works in two dimensions by defining rows and columns. Think table-based positioning, but with a separation of content and presentation.</p>\n<p>More concretely, grid is good for laying out macro elements like headers, footers, and sidebars, while flexbox is well-suited to multiples of similar items, like lists of features, testimonials, and navigation links.</p>\n<h2>Learn More about Grid</h2>\n<p>My objective with Grid Garden is not to cover every last aspect of CSS grid, but to help players develop an intuition and recognize its potential. Things get left out, like the <code class=\"language-css\">grid-gap</code> property, <code class=\"language-css\">grid-auto-columns</code>, and custom naming of grid lines and areas.</p>\n<p>Fortunately, there are some excellent resources to fill in the gaps, including <a href=\"http://gridbyexample.com/\">Grid by Example</a>, Jen Simmons’s <a href=\"http://labs.jensimmons.com/\">experimentation</a>, and <a href=\"https://css-tricks.com/snippets/css/complete-guide-grid/\">CSS-Trick’s guide</a>. And of course <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout\">MDN’s comprehensive docs</a>.</p>\n<p>CSS grid is powerful and elegant (more so than flexbox), and should quickly become an essential tool in your web development toolkit. But don’t just take my word for it — play <a href=\"http://cssgridgarden.com\">Grid Garden</a> and see for yourself.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Learning",
"term": "Learning",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=11697",
"title": "Where I End and You Begin: Finding the Most Depressing Radiohead Songs using Crowd Data from SongMeanings",
"description": "Last week, a fun article titled fitteR happieR crowned the most depressing Radiohead song as True Love Waits. This was determined by a “gloom index” calculated with Spotify’s valence metric — which measures the musical … <a href=\"https://thomaspark.co/2017/02/where-i-end-and-you-begin-finding-the-most-depressing-radiohead-songs-using-crowd-data-from-songmeanings/\">Read more</a>",
"url": "https://thomaspark.co/2017/02/where-i-end-and-you-begin-finding-the-most-depressing-radiohead-songs-using-crowd-data-from-songmeanings/",
"published": "2017-02-28T13:51:58.000Z",
"updated": "2017-02-28T13:51:58.000Z",
"content": "<p>Last week, a fun article titled <a href=\"http://rcharlie.com/2017-02-16-fitteR-happieR/\">fitteR happieR</a> crowned the most depressing Radiohead song as <em>True Love Waits</em>. This was determined by a “gloom index” calculated with Spotify’s valence metric — which measures the musical positiveness of a track — and sentiment analysis of lyrics.</p>\n<p>The results were pretty spot on in this Radiohead fan’s opinion, particularly how the tracks of each album stacked up to one another <a href=\"http://rcharlie.com/htmlwidgets/fitterhappier/album_chart.html\">in this visualization</a>. But the approach failed in a few cases, most notably the eponymous <em>Fitter Happier</em>. According to the gloom index, it’s one of the happiest songs, but trust me when I say that quite the opposite is true.</p>\n<p>Why this approach falls short with a song like <em>Fitter Happier</em> is two-fold. First, this particular track overlays a collage of audio samples with a spoken-word synthesizer, breaking away from conventional song structures that, as far as I can guess, Spotify’s machine learning techniques train with to calculate valence. Second, this sentiment analysis takes the lyrics at face value, assuming “happier” means “happier”, blind to the nuances of irony.</p>\n<p>Here I’d like to share an alternate approach that tries to deal with these outliers. One that might fare better at contextualizing experimental music and understanding sarcasm. To do this, I’m bringing the wisdom of the crowds into the loop, ranking the most depressing Radiohead songs by applying sentiment analysis to data from the SongMeanings community.</p>\n<h2>Scraping SongMeanings</h2>\n<p>As the name suggests, <a href=\"http://songmeanings.com/artist/view/songs/200/\">SongMeanings</a> is one of the oldest, most popular online communities for people to share their impressions or interpretations of songs. Unfortunately, it doesn’t offer a public API as Spotify and Genius do, so I had to scrape the comments for each Radiohead song.</p>\n<p><a href=\"http://www.nightmarejs.org/\">Nightmare</a>, which you can see in action below, turned out to be a fantastic tool for this job, especially as someone comfortable with JavaScript.</p>\n<p><video class=\"share-video\" id=\"share-video\" poster=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.jpg\" autoplay=\"\" muted=\"\" loop=\"\" style=\"width: 100%;\"><source id=\"webmSource\" src=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.webm\" type=\"video/webm\"><source id=\"mp4Source\" src=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.mp4\" type=\"video/mp4\"><img decoding=\"async\" title=\"Sorry, your browser doesn't support HTML5 video.\" src=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.jpg\"></video></p>\n<p>And here is the code for scraping the comments.</p>\n<p><pre>\n<code lang=\"javascript\" class=\"language-javascript\">\nvar Nightmare = require('nightmare');\nvar vo = require('vo');\nvar fs = require('fs');\n\nfunction* run() {\n var nightmare = Nightmare({show: true});\n var url = 'http://songmeanings.com/artist/view/songs/200/'; // Artist page\n\n // Grab list of song links from artist page\n var songs = yield nightmare\n .goto(url)\n .evaluate(function() {\n var songs = {};\n var songsList = document.querySelectorAll('#songslist tr');\n\n songsList.forEach(function(tr) {\n var id = tr.id.slice(6);\n var title = tr.querySelector('td:first-child a').title.slice(0, -7);\n var href = tr.querySelector('td:first-child a').href;\n var commentCount = tr.querySelector('.comments a').innerText;\n\n songs[title] = {'id': id, 'title': title, 'href': href, 'commentCount': commentCount};\n });\n\n return songs;\n });\n\n // Visit each song page and save comments\n for (var key in songs) {\n var song = songs[key];\n var page_max = Math.ceil(song.commentCount / 10);\n var comments = [];\n\n yield nightmare\n .goto(song.href)\n .wait('body');\n\n for (i = 1; i <= page_max; i++) {\n yield nightmare\n .evaluate(function() {\n var page_comments = [...document.querySelectorAll('#comments-list .com-normal')].map(function(elem) {\n var text = elem.querySelector('.text').innerHTML.split('</strong>')[1].split('\\t\\t\\t\\t\\n\\t\\t\\t\\t<div class=')[0].split('<p>')[0].replace(/<br>\\n|\"/g, ' ');\n var rating = elem.querySelector('.numb').innerText;\n\n return {'text': text, 'rating': rating};\n });\n\n return page_comments;\n })\n .then(function (result) {\n comments.push(...result);\n console.log('Success: ', result);\n })\n .catch(function (error) {\n console.error('Error: ', error);\n });\n\n yield nightmare\n .exists('a#page-' + (i+1))\n .then(function(nextExists) {\n if (nextExists) {\n return nightmare\n .click('#pagination a:last-child')\n .wait(500);\n }\n });\n }\n\n song.comments = comments;\n }\n \n yield nightmare.end();\n\n return songs;\n}\n\nvo(run)(function(err, result) {\n if (err) throw err;\n\n fs.writeFileSync('whereiend.json', JSON.stringify(result));\n});\n</code>\n</pre>\n</p>\n<p>The text and score of each comment were collected, the latter of which is based on the upvotes and downvotes assigned to a comment by other members of the community.</p>\n<p>It turned out that the number of comments for a given song was quite uneven, with some songs having very few comments or none at all. A recent decline in activity on SongMeanings probably contributed to this, bad news for last year’s superb “A Moon Shaped Pool”. For the analysis, I filtered out songs with less than 40 comments.</p>\n<h2>Sentiment Analysis</h2>\n<p>The sentiment analysis followed the previous one, calculating the percentage of words in each Radiohead song’s comments that expressed sadness using the word list provided by <a href=\"http://saifmohammad.com/WebPages/NRC-Emotion-Lexicon.htm\">NRC EmoLex</a>. The node package <a href=\"https://www.npmjs.com/package/text-miner\">text-miner</a> was used to clean up, stem, and remove stop words first.</p>\n<p>A second score was calculated by weighting comments based on their scores. Comments with negative scores not factored in here, while comments with a score of zero were given a weight of 1 (owing to the author’s implicit self-vote), those with a score of one given a weight of 2, etc. This broadens the crowd from just commenters to lurkers who have cast votes, and gets at the idea of a community reaching consensus about what each song means.</p>\n<p>Here is the code that was used for the analysis.</p>\n<p><pre>\n<code lang=\"javascript\" class=\"lang-javascript\">\nvar tm = require('text-miner');\nvar fs = require('fs');\n\nvar songs = JSON.parse(fs.readFileSync('whereiend.json'));\nvar sadWords = loadSadWords('NRC-Emotion-Lexicon-Wordlevel-v0.92.txt');\n\nfunction loadSadWords(file) {\n var sadWords = [];\n var lines = fs.readFileSync(file, 'ascii').split('\\r\\n');\n\n lines.forEach(function(line) {\n var [term, category, flag] = line.split('\\t');\n\n if ((category == 'sadness') && (flag == 1)) {\n sadWords.push(term);\n }\n });\n\n return sadWords;\n}\n\n// Calculate sad score for a song's comments\nfunction analyzeComments(song) {\n var sadWordTotal = 0;\n var wordTotal = 0;\n var sadWordWeighted = 0;\n var wordWeighted = 0;\n\n song.comments.forEach(function(comment) {\n var rating = comment.rating[0] == '+' ? parseInt(comment.rating.slice(1)) : parseInt(comment.rating);\n var score = scoreComment(comment);\n\n sadWordTotal = sadWordTotal + score.sadWordCount;\n wordTotal = wordTotal + score.wordCount;\n\n if (rating >= 0) {\n sadWordWeighted = sadWordWeighted + ((rating+1) * score.sadWordCount);\n wordWeighted = wordWeighted + ((rating+1) * score.wordCount);\n }\n });\n\n var percentage = 100*sadWordTotal/wordTotal;\n var weighted = 100*sadWordWeighted/wordWeighted;\n\n return {'percentage': percentage, 'weighted': weighted, 'wordTotal': wordTotal};\n}\n\n// Count number of words and sad words in comment\nfunction scoreComment(comment) {\n var text = comment.text.replace(/\\(|\\)|:|\\'/g, '');\n var corpus = new tm.Corpus([]);\n\n corpus.addDoc(text);\n corpus\n .clean()\n .removeNewlines()\n .removeInterpunctuation()\n .removeInvalidCharacters()\n .removeWords(tm.STOPWORDS.EN)\n .toLower()\n .stem('Lancaster');\n\n var terms = new tm.Terms(corpus);\n var vocabulary = terms.vocabulary;\n var counts = terms.dtm[0];\n var wordCount = counts.reduce((a, b) => a + b, 0);\n var sadWordCount = 0;\n\n vocabulary.forEach(function(word) {\n if (sadWords.indexOf(word) > -1) {\n sadWordCount = sadWordCount + 1;\n }\n });\n\n return {'sadWordCount': sadWordCount, 'wordCount': wordCount};\n}\n\nfunction run() {\n var output = 'song\\tpercentage\\tweighted\\twordTotal\\tcommentCount\\n';\n\n for (var key in songs) {\n var score = analyzeComments(songs[key]);\n var commentCount = songs[key].commentCount;\n output = output + key + '\\t' + score.percentage + '\\t' + score.weighted + '\\t' + score.wordTotal + '\\t' + commentCount + '\\n';\n }\n\n fs.writeFileSync('output.txt', output);\n}\n\nrun();\n</code>\n</pre>\n</p>\n<h2>The Saddest Radiohead Songs According to SongMeanings</h2>\n<p>So how did the songs stack up? Using this approach, the most depressing Radiohead song of all time is <em>Black Star</em>, an early song about interpersonal troubles rather than the more grandiose themes of later songs. The winner in the previous analysis, <em>True Love Waits</em>, also ranks highly here at #4.</p>\n<p>Also deserving of spots on the list are <em>No Surprises</em>, <em>Motion Picture Soundtrack</em>, and <em>Big Ideas (Don’t Get Any)</em>, though <em>There There</em> and <em>Weird Fishes/Arpeggi</em> are kind of a surprise.</p>\n<table>\n<tr>\n<th>Rank</th>\n<th>Song</th>\n<th>Percentage</th>\n</tr>\n<tr>\n<td>1</td>\n<td>Black Star</td>\n<td>7.63</td>\n</tr>\n<tr>\n<td>2</td>\n<td>No Surprises</td>\n<td>6.30</td>\n</tr>\n<tr>\n<td>3</td>\n<td>High and Dry</td>\n<td>6.04</td>\n</tr>\n<tr>\n<td>4</td>\n<td>True Love Waits</td>\n<td>6.02</td>\n</tr>\n<tr>\n<td>5</td>\n<td>Fog</td>\n<td>6.02</td>\n</tr>\n<tr>\n<td>6</td>\n<td>Motion Picture Soundtrack</td>\n<td>5.97</td>\n</tr>\n<tr>\n<td>7</td>\n<td>Street Spirit</td>\n<td>5.68</td>\n</tr>\n<tr>\n<td>8</td>\n<td>There There</td>\n<td>5.57</td>\n</tr>\n<tr>\n<td>9</td>\n<td>Weird Fishes/Arpeggi</td>\n<td>5.47</td>\n</tr>\n<tr>\n<td>10</td>\n<td>Big Ideas (Don’t Get Any)</td>\n<td>5.43</td>\n</tr>\n</table>\n<p>At the bottom of the list are placid songs like <em>Sail to the Moon</em> and <em>The Tourist</em>, plus instrumental interludes like <em>Pulk/Pull Revolving Doors</em> and <em>Treefingers</em>. Not that people didn’t have plenty of comments to make about them too.</p>\n<table>\n<tr>\n<th>Rank</th>\n<th>Song</th>\n<th>Percentage</th>\n</tr>\n<tr>\n<td>75</td>\n<td>Life in a Glasshouse</td>\n<td>3.00</td>\n</tr>\n<tr>\n<td>76</td>\n<td>Anyone Can Play Guitar</td>\n<td>2.95</td>\n</tr>\n<tr>\n<td>77</td>\n<td>Sail to the Moon</td>\n<td>2.90</td>\n</tr>\n<tr>\n<td>78</td>\n<td>Reckoner</td>\n<td>2.87</td>\n</tr>\n<tr>\n<td>79</td>\n<td>The Tourist</td>\n<td>2.86</td>\n</tr>\n<tr>\n<td>80</td>\n<td>Pulk/Pull Revolving Doors</td>\n<td>2.73</td>\n</tr>\n<tr>\n<td>81</td>\n<td>Treefingers</td>\n<td>2.72</td>\n</tr>\n<tr>\n<td>82</td>\n<td>Go to Sleep</td>\n<td>2.71</td>\n</tr>\n<tr>\n<td>83</td>\n<td>(Nice Dream)</td>\n<td>2.65</td>\n</tr>\n<tr>\n<td>84</td>\n<td>Electioneering</td>\n<td>2.42</td>\n</tr>\n</table>\n<p>What happens to the rankings when you factor in comment scores? The list generally looks the same, with <em>Black Star</em> still topping the list. But there are a few movers and shakers: <em>Bullet Proof…I Wish I Was</em> and <em>Where I End and You Begin</em> shoot up 10 and 14 spots respectively to land at #2 and #6.</p>\n<table>\n<tr>\n<th>Rank</th>\n<th>Song</th>\n<th>Weighted</th>\n</tr>\n<tr>\n<td>1</td>\n<td>Black Star</td>\n<td>6.72</td>\n</tr>\n<tr>\n<td>2</td>\n<td>Bullet Proof…I Wish I Was</td>\n<td>6.41</td>\n</tr>\n<tr>\n<td>3</td>\n<td>There There</td>\n<td>6.25</td>\n</tr>\n<tr>\n<td>4</td>\n<td>High and Dry</td>\n<td>6.24</td>\n</tr>\n<tr>\n<td>5</td>\n<td>Backdrifts</td>\n<td>6.08</td>\n</tr>\n<tr>\n<td>6</td>\n<td>Where I End and You Begin</td>\n<td>6.01</td>\n</tr>\n<tr>\n<td>7</td>\n<td>No Surprises</td>\n<td>6.01</td>\n</tr>\n<tr>\n<td>8</td>\n<td>True Love Waits</td>\n<td>5.78</td>\n</tr>\n<tr>\n<td>9</td>\n<td>Motion Picture Soundtrack</td>\n<td>5.78</td>\n</tr>\n<tr>\n<td>10</td>\n<td>Fog</td>\n<td>5.77</td>\n</tr>\n</table>\n<p>The bottom also looks similar, though some more defiant or triumphant songs like <em>Karma Police</em> and <em>Airbag</em> appear, dropping down 33 and 18 spots respectively.</p>\n<table>\n<tr>\n<th>Rank</th>\n<th>Song</th>\n<th>Weighted</th>\n</tr>\n<tr>\n<td>75</td>\n<td>Thinking About You</td>\n<td>2.94</td>\n</tr>\n<tr>\n<td>76</td>\n<td>Go to Sleep</td>\n<td>2.91</td>\n</tr>\n<tr>\n<td>77</td>\n<td>Airbag</td>\n<td>2.91</td>\n</tr>\n<tr>\n<td>78</td>\n<td>Idioteque</td>\n<td>2.89</td>\n</tr>\n<tr>\n<td>79</td>\n<td>Karma Police</td>\n<td>2.86</td>\n</tr>\n<tr>\n<td>80</td>\n<td>Treefingers</td>\n<td>2.73</td>\n</tr>\n<tr>\n<td>81</td>\n<td>Reckoner</td>\n<td>2.67</td>\n</tr>\n<tr>\n<td>82</td>\n<td>(Nice Dream)</td>\n<td>2.22</td>\n</tr>\n<tr>\n<td>83</td>\n<td>Pulk/Pull Revolving Doors</td>\n<td>2.19</td>\n</tr>\n<tr>\n<td>84</td>\n<td>Electioneering</td>\n<td>2.06</td>\n</tr>\n</table>\n<p>When looking at the most frequent sad words found in the comments, many are taken directly from the lyrics. For instance, “black” and “falling” from <em>Black Star</em>, “death” and “unhappy” from <em>No Surprises</em>, “haunted” and “killing” from <em>True Love Waits</em>. So is this nothing more than a proxy for a lyrical analysis? Not entirely.</p>\n<p>If you recall, by gloom index <em>Fitter Happier</em> was one of the least depressing Radiohead songs. But here, by percentage <em>Fitter Happier</em> lands in the middle of the pack at #55 of 84, and by the weighted score turns out to be one of the most depressing Radiohead songs of all time at #15.</p>",
"image": null,
"media": [
{
"url": "https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.webm",
"image": null,
"title": null,
"length": 1020419,
"type": "video",
"mimeType": "video/webm"
},
{
"url": "https://thomaspark.co/wp/wp-content/uploads/2017/02/whereiend.mp4",
"image": null,
"title": null,
"length": 2139633,
"type": "video",
"mimeType": "video/mp4"
}
],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Language",
"term": "Language",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=11608",
"title": "QuickLine: A Mac Utility for Saving and Launching Terminal Commands",
"description": "From deep in the vaults, here’s an app called QuickLine that I made and then promptly forgot about in 2014. It’s a Mac utility for quickly saving and launching terminal commands. QuickLine is made with … <a href=\"https://thomaspark.co/2017/02/quickline-a-mac-utility-for-saving-and-launching-terminal-commands/\">Read more</a>",
"url": "https://thomaspark.co/2017/02/quickline-a-mac-utility-for-saving-and-launching-terminal-commands/",
"published": "2017-02-21T13:08:06.000Z",
"updated": "2017-02-21T13:08:06.000Z",
"content": "<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo-150x150.png\" alt=\"QuickLine Logo\" width=\"150\" height=\"150\" class=\"aligncenter size-thumbnail wp-image-11628\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo-150x150.png 150w, https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo-500x500.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo-768x768.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/02/quickline-logo.png 1000w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" /></p>\n<p>From deep in the vaults, here’s an app called QuickLine that I made and then promptly forgot about in 2014. It’s a Mac utility for quickly saving and launching terminal commands. QuickLine is made with <a href=\"https://nwjs.io/\">NW.js</a> (called node-webkit back then), an incredible tool for writing cross platform desktop apps using JavaScript. I’m making the project available here for posterity.</p>\n<p><a href=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/commands.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/commands-500x381.png\" alt=\"QuickLine Commands\" width=\"500\" height=\"381\" class=\"aligncenter size-medium wp-image-11624\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/commands-500x381.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/02/commands-768x584.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/02/commands-1024x779.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2017/02/commands.png 1766w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" /></a></p>\n<p>Using QuickLine, you can save and label your most commonly used and easily forgotten terminal commands, and execute them with a single click. For instance, if you want to disable shadows in screen captures, you no longer need to commit to memory or — more likely — google every time for this command:</p>\n<p><pre><code class=\"lang-bash\">defaults write com.apple.screencapture disable-shadow -bool TRUE; killall SystemUIServer</code></pre>\n</p>\n<p>You can also view the status and output of your commands using the built-in console.</p>\n<p><a href=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/console.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/console-500x381.png\" alt=\"QuickLine Console\" width=\"500\" height=\"381\" class=\"aligncenter size-medium wp-image-11613\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/console-500x381.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/02/console-768x584.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/02/console-1024x779.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2017/02/console.png 1766w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" /></a></p>\n<p>Finally, you can discover and import commands from the included library, and modify them to suit your needs. I’ve collected a bunch of commands to access hidden features, configure your system, and speed up repetitive tasks. For the mother of all lists, check out <a href=\"https://github.com/herrbischoff/awesome-osx-command-line\">Awesome OS X Command Line</a>.</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2017/02/library.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2017/02/library-500x381.png\" alt=\"QuickLine Library\" width=\"500\" height=\"381\" class=\"aligncenter size-medium wp-image-11614\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2017/02/library-500x381.png 500w, https://thomaspark.co/wp/wp-content/uploads/2017/02/library-768x584.png 768w, https://thomaspark.co/wp/wp-content/uploads/2017/02/library-1024x779.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2017/02/library.png 1766w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" /></a></p>\n<p>Without further ado, download and play around with QuickLine here:</p>\n<div class=\"center\"><a class=\"standard-btn black-btn xlarge-btn\" href=\"https://thomaspark.co/projects/quickline/QuickLine-1.0.0.zip\"><span>Download QuickLine</span></a></div>\n<h3>The Motivation Behind It</h3>\n<p>Part of the motivation for this app was the simple utility of being able to “bookmark” commonly used, but verbose, terminal commands.</p>\n<p>At the same time, I wanted to put within reach the power of the command line to people who aren’t necessarily power users. At least give them a toehold so they aren’t put off and might eventually discover the joys of grepping and vimming and piping. As with my other projects like <a href=\"https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/\">Snowball</a> and <a href=\"https://thomaspark.co/2012/02/introducing-bootswatch/\">Bootswatch</a>, the goal was <a href=\"https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/\">to find the sweet spot between beginner and expert</a>. QuickLine bridges apps like <a href=\"https://www.bresink.com/osx/TinkerTool.html\">TinkerTool</a> that are easy to use but limited by what their developers design for, and Terminal, a magical cauldron that requires mysterious incantations. QuickLine achieves this by making terminal commands discoverable, transparent, and tweakable.</p>\n<h3>Why It Was Never Released Until Now</h3>\n<p>At the time I was developing QuickLine, I felt enthusiastic that it could resonate with Mac users. But that was tempered on the one hand by OS’x GateKeeper feature, which disables unsigned apps by default, and on the other hand the Mac App Store’s sandboxing requirement, which would render the app useless. I felt these were pretty significant hurdles to the very users I wanted to reach.</p>\n<p>And then I got busy with other stuff.</p>\n<p>I’m releasing QuickLine now to have a record of what was a fun personal project, and to make it freely available to the few willing to seek it out.</p>\n<h3>Caveats</h3>\n<p>Since QuickLine isn’t signed, you’ll need to <a href=\"https://support.apple.com/en-us/HT202491\">exempt it from Gatekeeper</a>.</p>\n<p>Only trust copies downloaded from this page. Any other source is suspect.</p>\n<p>I’m making it available on an as-is basis. Consider it abandonware, with no support or updates planned.</p>\n<p>Finally, all the usual caveats of the command line apply. While the commands included in QuickLine have been vetted, copy and paste random commands from the internet at your own risk. Malicious commands can do serious damage to your system, so user discretion is advised.</p>\n<h3>Acknowledgements</h3>\n<p>My thanks to Amy, Anthony, James, and Bernie for helping out with testing way back when.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Demo",
"term": "Demo",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=11540",
"title": "Closed as Not Constructive: The Top-Voted Discussions on Stack Overflow",
"description": "It goes without saying that Stack Overflow is an invaluable resource for any coder seeking help. This is in large part because they enforce stringent guidelines such as sticking to factual questions and answers. As … <a href=\"https://thomaspark.co/2017/02/closed-as-not-constructive-the-top-voted-discussions-on-stack-overflow/\">Read more</a>",
"url": "https://thomaspark.co/2017/02/closed-as-not-constructive-the-top-voted-discussions-on-stack-overflow/",
"published": "2017-02-06T14:07:57.000Z",
"updated": "2017-02-06T14:07:57.000Z",
"content": "<p>It goes without saying that <a href=\"http://stackoverflow.com/\">Stack Overflow</a> is an invaluable resource for any coder seeking help. This is in large part because they enforce stringent guidelines such as sticking to factual questions and answers. As a result, many posts that don’t meet these guidelines get locked down.</p>\n<p>Many are duplicates or desperate students doing homework in the eleventh hour, but every once in awhile a fascinating and insightful discussion will emerge from the community. These too will get closed by moderators eventually of course, with reasons like being off-topic, too broad, opinion-based, or not constructive, and with notices like:</p>\n<blockquote><p>As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion…</p></blockquote>\n<p>Thankfully they remain online for posterity because they also make for some of the best reading fodder you can find on Stack Overflow. Judge for yourself: diving into the archives, I’ve collected an anthology of the top-voted “extended discussions” year by year for your reading pleasure. Enjoy!</p>\n<p>(I’ll note that earlier years of Stack Overflow seem to have more of these rich discussions. I guess the moderation policies have been effective. <a href=\"https://news.ycombinator.com/news\">Hacker News</a> and <a href=\"https://www.reddit.com/r/programming/\">Proggit</a> are the places to turn for these sort of discussions now.)</p>\n<h3>2016</h3>\n<ul>\n<li><a href=\"http://stackoverflow.com/questions/38700923/how-can-i-make-sure-that-my-javascript-files-delivered-over-a-cdn-are-not-altere\">How can I make sure that my JavaScript files delivered over a CDN are not altered?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/38042624/can-two-groups-of-n-people-find-each-other-around-a-circle\">Can two groups of N people find each other around a circle?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/35917734/how-do-i-traverse-an-array-diagonally-in-javascript\">How do I traverse an array diagonally in javascript</a></li>\n<li><a href=\"http://stackoverflow.com/questions/39455123/is-force-unwrapping-a-variable-bad\">Is force unwrapping a variable bad?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/40036165/equal-to-versus-not-equal-to-operators-in-an-if-else-statement\">“equal to” versus “not equal to” operators in an if-else statement</a></li>\n</ul>\n<h3>2015</h3>\n<ul>\n<li><a href=\"http://stackoverflow.com/questions/29363321/picasso-v-s-imageloader-v-s-fresco-vs-glide\">Picasso v/s Imageloader v/s Fresco vs Glide</a></li>\n<li><a href=\"http://stackoverflow.com/questions/28082581/what-is-the-difference-between-apache-spark-and-apache-flink\">What is the difference between Apache Spark and Apache Flink?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/31634476/which-css-framework-to-use-with-angular2\">Which CSS framework to use with Angular2?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/34114593/angular-vs-angular-2\">Angular vs Angular 2</a></li>\n<li><a href=\"http://stackoverflow.com/questions/29479814/spring-mvc-or-spring-boot\">Spring MVC or Spring Boot</a></li>\n</ul>\n<h3>2014</h3>\n<ul>\n<li><a href=\"http://stackoverflow.com/questions/22126078/what-is-the-difference-between-sublime-text-and-githubs-atom\">What is the difference between Sublime text and Github’s Atom</a></li>\n<li><a href=\"http://stackoverflow.com/questions/21375073/best-way-to-represent-a-grid-or-table-in-angularjs-with-bootstrap-3\">Best way to represent a Grid or Table in AngularJS with Bootstrap 3?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/24993282/how-does-a-language-expand-itself\">How does a language expand itself?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/25501098/difference-between-microservices-architecture-and-soa\">Difference between Microservices Architecture and SOA</a></li>\n<li><a href=\"http://stackoverflow.com/questions/22648829/fastest-exit-strategy-for-a-panic-button-in-crisis-abuse-websites\">Fastest exit strategy for a Panic Button in Crisis/Abuse Websites?</a></li>\n</ul>\n<h3>2013</h3>\n<ul>\n<li><a href=\"http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background\">“Thinking in AngularJS” if I have a jQuery background?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/14301389/why-does-one-use-dependency-injection\">Why does one use dependency injection?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/14333857/how-to-master-angularjs\">How to master AngularJS?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/16573668/best-practices-when-running-node-js-with-port-80-ubuntu-linode\">Best practices when running Node.js with port 80 (Ubuntu / Linode)</a></li>\n<li><a href=\"http://stackoverflow.com/questions/18542353/angularjs-folder-structure\">AngularJS Folder Structure</a></li>\n</ul>\n<h3>2012</h3>\n<ul>\n<li><a href=\"http://stackoverflow.com/questions/12694530/what-is-typescript-and-why-would-i-use-it-in-place-of-javascript\">What is TypeScript and why would I use it in place of JavaScript?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/12529083/does-it-make-sense-to-use-require-js-with-angular-js\">Does it make sense to use Require.js with Angular.js?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span\">Should I use <i> tag for icons instead of <span>?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/9554636/the-use-of-multiple-jframes-good-or-bad-practice\">The Use of Multiple JFrames: Good or Bad Practice?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/10941249/separate-rest-json-api-server-and-client\">Separate REST JSON API server and client?</a></li>\n</ul>\n<h3>2011</h3>\n<ul>\n<li><a href=\"http://stackoverflow.com/questions/7888880/what-is-redis-and-what-do-i-use-it-for\">What is Redis and what do I use it for?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/5928061/using-a-piano-keyboard-as-a-computer-keyboard\">Using a piano keyboard as a computer keyboard</a></li>\n<li><a href=\"http://stackoverflow.com/questions/4904096/whats-the-difference-between-unit-functional-acceptance-and-integration-test\">What’s the difference between unit, functional, acceptance, and integration tests?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/4797534/how-do-i-manually-fire-http-post-requests-with-firefox-or-chrome\">How do I manually fire HTTP POST requests with Firefox or Chrome?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/5446316/code-first-vs-model-database-first\">Code-first vs Model/Database-first</a></li>\n</ul>\n<h3>2010</h3>\n<ul>\n<li><a href=\"http://stackoverflow.com/questions/3220404/why-use-pip-over-easy-install\">Why use pip over easy_install?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/3077866/large-scale-design-in-haskell\">Large-scale design in Haskell?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/4493001/good-use-case-for-akka\">Good use case for Akka</a></li>\n<li><a href=\"http://stackoverflow.com/questions/2794016/what-should-every-programmer-know-about-security\">What should every programmer know about security?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/2039904/what-statistics-should-a-programmer-or-computer-scientist-know\">What statistics should a programmer (or computer scientist) know?</a></li>\n</ul>\n<h3>2009</h3>\n<ul>\n<li><a href=\"http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format\">JavaScript equivalent to printf/string.format</a></li>\n<li><a href=\"http://stackoverflow.com/questions/507343/using-git-with-visual-studio\">Using Git with Visual Studio</a></li>\n<li><a href=\"http://stackoverflow.com/questions/448673/how-do-emulators-work-and-how-are-they-written\">How do emulators work and how are they written?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/731832/designing-function-ffn-n\">Designing function f(f(n)) == -n</a></li>\n<li><a href=\"http://stackoverflow.com/questions/1722726/is-the-scala-2-8-collections-library-a-case-of-the-longest-suicide-note-in-hist\">Is the Scala 2.8 collections library a case of “the longest suicide note in history”?</a></li>\n</ul>\n<h3>2008</h3>\n<ul>\n<li><a href=\"http://stackoverflow.com/questions/549/the-definitive-guide-to-form-based-website-authentication\">The definitive guide to form-based website authentication</a></li>\n<li><a href=\"http://stackoverflow.com/questions/9033/hidden-features-of-c\">Hidden Features of C#?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/1711/what-is-the-single-most-influential-book-every-programmer-should-read\">What is the single most influential book every programmer should read?</a></li>\n<li><a href=\"http://stackoverflow.com/questions/101268/hidden-features-of-python\">Hidden features of Python</a></li>\n<li><a href=\"http://stackoverflow.com/questions/137975/what-is-so-bad-about-singletons\">What is so bad about singletons?</a></li>\n</ul>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Learning",
"term": "Learning",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=11426",
"title": "Mimicking Pokemon Go’s Battery Saver Mode on the Web",
"description": "So here’s a fun but useless trick: mimicking Pokemon Go’s battery saver mode on the web. For the few who missed the craze, Pokemon Go dims your phone’s screen when you turn it upside-down. With … <a href=\"https://thomaspark.co/2017/01/mimicking-pokemon-gos-battery-saver-mode-on-the-web/\">Read more</a>",
"url": "https://thomaspark.co/2017/01/mimicking-pokemon-gos-battery-saver-mode-on-the-web/",
"published": "2017-01-30T19:11:08.000Z",
"updated": "2017-01-30T19:11:08.000Z",
"content": "<p>So here’s a fun but useless trick: mimicking Pokemon Go’s battery saver mode on the web. For the few who missed the craze, Pokemon Go dims your phone’s screen when you turn it upside-down. With the game being something of a battery hog, this can save you precious charge as you walk from one PokeStop to the next, phone in hand. I do appreciate how frictionless and natural this feature is.</p>\n<div id=\"pogo\">\n<div class=\"back\">\n<img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2017/01/pokemonbatterysaver.png\" alt=\"\" width=\"450\" height=\"800\" class=\"aligncenter size-full wp-image-11429\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2017/01/pokemonbatterysaver.png 450w, https://thomaspark.co/wp/wp-content/uploads/2017/01/pokemonbatterysaver-281x500.png 281w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" />\n</div>\n<div class=\"front\">\n<img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2017/01/pokemongo.png\" alt=\"\" width=\"450\" height=\"800\" class=\"aligncenter size-full wp-image-11430\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2017/01/pokemongo.png 450w, https://thomaspark.co/wp/wp-content/uploads/2017/01/pokemongo-281x500.png 281w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" />\n</div>\n</div>\n<p>So how might we mimic this on the web? Start by creating your overlay, and adding your favicon to the overlay if one is available. </p>\n<p><code class=\"lang-javascript\" lang=\"javascript\"><br />\ndocument.addEventListener('DOMContentLoaded', function () {<br />\n var favicon = getFavicon();<br />\n var node = document.createElement('div');<br />\n var child = document.createElement('div');</p>\n<p> node.id = 'overlay';</p>\n<p> if (favicon) {<br />\n child.style.backgroundImage = 'url(' + favicon + ')';<br />\n node.appendChild(child);<br />\n }</p>\n<p> document.body.appendChild(node);<br />\n});</p>\n<p>var getFavicon = function() {<br />\n var nodes = document.getElementsByTagName('link');</p>\n<p> for (var i = 0; i < nodes.length; i++) {<br />\n var rel = nodes[i].getAttribute('rel');</p>\n<p> if (rel == 'apple-touch-icon-precomposed' || rel == 'apple-touch-icon' || rel == 'icon' || rel == 'shortcut icon') {<br />\n return nodes[i].getAttribute('href');<br />\n }<br />\n }<br />\n};<br />\n</code></p>\n<p>Next, listen for the orientationchange event and toggle the overlay on if orientation has a value of portrait-secondary, meaning upside-down.</p>\n<p><code class=\"lang-javascript\" lang=\"javascript\"><br />\nwindow.addEventListener(\"orientationchange\", function() {<br />\n var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;<br />\n var node = document.getElementById('overlay');</p>\n<p> if (orientation && orientation.type === 'portrait-secondary') {<br />\n node.classList = 'on';<br />\n } else {<br />\n node.classList = '';<br />\n }<br />\n});<br />\n</code></p>\n<p>Lastly, style your overlay.</p>\n<p><code class=\"lang-css\" lang=\"css\"><br />\n#overlay {<br />\n position: absolute;<br />\n left: 0;<br />\n right: 0;<br />\n top: 0;<br />\n bottom: 0;<br />\n background-color: #000;<br />\n opacity: 0;<br />\n pointer-events: none;<br />\n transition: opacity 0.5s;<br />\n}</p>\n<p>#overlay > div {<br />\n width: 100%;<br />\n height: 100%;<br />\n background-position: center;<br />\n background-repeat: no-repeat;<br />\n background-size: 200px 200px;<br />\n filter: grayscale(100%);<br />\n opacity: 0.15;<br />\n}</p>\n<p>#overlay.on {<br />\n pointer-events: auto;<br />\n opacity: 1;<br />\n}<br />\n</code></p>\n<p>And there you have it.</p>\n<p>So why is this so useless? First, support for <code class=\"lang-css\">orientation</code> is <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation\">spotty</a>. Safari, for example, doesn’t support it. Second, while native apps like Pokemon Go actually decrease the display’s brightness, web apps can only mimic this with a black screen, saving no power at all on iPhone and other LCD displays.</p>\n<p>But with the growing adoption of AMOLED displays, <a href=\"http://www.greenbot.com/article/2834583/how-much-power-does-a-black-interface-really-save-on-amoled-displays.html\">which do save battery with black pixels</a>, maybe this will go from totally useless to mostly useless.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "User Interface",
"term": "User Interface",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=11396",
"title": "Relevant XKCD",
"description": "Footnotes An xkcd tribute inspired by what has become a meme. Also inspired by all things recursive like We Become What We Behold and xkcd itself. Made with the official xkcd font. Can you guess … <a href=\"https://thomaspark.co/2017/01/relevant-xkcd/\">Read more</a>",
"url": "https://thomaspark.co/2017/01/relevant-xkcd/",
"published": "2017-01-23T18:18:17.000Z",
"updated": "2017-01-23T18:18:17.000Z",
"content": "<div class=\"iframe-wrapper\">\n\n<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->\n<iframe loading=\"lazy\" src=\"https://thomaspark.co/projects/relevantxkcd/\" width=\"100%\" height=\"500\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"></iframe>\n\n</div>\n<div id=\"footnotes\">\n<h3>Footnotes</h3>\n<ol>\n<li>An xkcd tribute inspired by what has become a <a href=\"https://relevantxkcd.appspot.com/\">meme</a>.\n<li>Also inspired by all things recursive like <a href=\"https://ncase.itch.io/wbwwb\">We Become What We Behold</a> and <a href=\"https://xkcd.com/1416/\">xkcd</a> itself.\n<li>Made with the <a href=\"https://github.com/ipython/xkcd-font\">official xkcd font</a>.\n<li>Can you guess which xkcd this was traced from? Winner gets seven Vienna Fingers cookies.\n<li>If you click enough times, this is actually a relevant xkcd to relevant xkcds to relevant xkcds ad infinitum.\n<li>On second thought, this would only truly be a relevant xkcd to relevant xkcds if it were embedded as an iframe on xkcd.com. As it stands, it’s merely relevant to relevant xkcds.\n</ol>\n</div>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Humor",
"term": "Humor",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=11311",
"title": "Fidgeting in the Digital Realm",
"description": "Fidgeting is a natural impulse that seems to relieve our anxiety and aid us in contemplation. It often involves mindlessly interacting with everyday objects like stones, pen and paper, bubble wrap, and more. Of course … <a href=\"https://thomaspark.co/2017/01/fidgeting-in-the-digital-realm/\">Read more</a>",
"url": "https://thomaspark.co/2017/01/fidgeting-in-the-digital-realm/",
"published": "2017-01-16T13:20:55.000Z",
"updated": "2017-01-16T13:20:55.000Z",
"content": "<p><a href=\"https://www.kickstarter.com/projects/antsylabs/fidget-cube-a-vinyl-desk-toy\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetcubes.jpg\" alt=\"Fidget Cubes\" width=\"833\" height=\"196\" class=\"aligncenter size-full wp-image-11373\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetcubes.jpg 833w, https://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetcubes-500x118.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetcubes-768x181.jpg 768w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" /></a></p>\n<p>Fidgeting is a natural impulse that seems to relieve our anxiety and aid us in contemplation. It often involves mindlessly interacting with everyday objects like stones, pen and paper, bubble wrap, <a href=\"http://fidgetwidgets.tumblr.com/\">and more</a>. Of course there are also products purpose-built for this, from stress balls to the Swiss Army knife of fidget contraptions, <a href=\"https://www.kickstarter.com/projects/antsylabs/fidget-cube-a-vinyl-desk-toy\">Fidget Cube</a>, which raised a whopping $6.5 million on Kickstarter.</p>\n<p>With how much we do on our computers, fidgeting is sure to follow. But what does fidgeting look like in the digital realm? And how can we intentionally design for it?</p>\n<p>More specifically, what would the analogue of Fidget Cube look like?</p>\n<p>There’s been some work in this area. <a href=\"https://christophernoessel.medium.com/one-free-interaction-14155a85d93a\">One Free Interaction</a> is a design pattern that describes quick and repeatable actions that satisfy users as much on an emotional level as a utilitarian level. A few cases of it — though not all — count as fidgeting, like repeatedly selecting and deselecting text as you read. There’s also <a href=\"http://gil.poly.edu/fidget-widgets/\">Fidget Widgets</a>, which bridge the physical and the virtual.</p>\n<p><a href=\"http://thomaspark.co/projects/fidgetgrid/\">Fidget Grid</a> is my take. It includes some of my own fidgets, like doodling pixels (Microsoft Paint), pulling to refresh (Twitter), button toggling (iOS), and dock magnifying (Mac OS X). Did I miss any big ones? What are your favorites?</p>\n<p><a href=\"http://thomaspark.co/projects/fidgetgrid/\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2017/01/fidgetgrid.png\" alt=\"Fidget Grid\" width=\"2770\" height=\"776\" class=\"aligncenter size-full wp-image-11391\" /></a></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "User Interface",
"term": "User Interface",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=11222",
"title": "Wrangling the Tangle of Apple Cables and Dongles",
"description": "Since Steve Job’s return in 1997, Apple has been bold about dropping legacy I/O standards, on a knife edge between marching the state-of-the-art forward and convincing the world to follow suit. It’s been the same … <a href=\"https://thomaspark.co/2017/01/wrangling-the-tangle-of-apple-cables-and-dongles/\">Read more</a>",
"url": "https://thomaspark.co/2017/01/wrangling-the-tangle-of-apple-cables-and-dongles/",
"published": "2017-01-09T13:35:15.000Z",
"updated": "2017-01-09T13:35:15.000Z",
"content": "<p>Since Steve Job’s return in 1997, Apple <a href=\"http://www.theverge.com/2016/6/29/12054410/apple-tech-death-chart-headphone-jack-ports-usb-c\">has been bold about dropping legacy I/O standards</a>, on a knife edge between marching the state-of-the-art forward and convincing the world to follow suit. It’s been the same story for the floppy, SCSI, optical, VGA, and most recently, USB and the headphone jack. </p>\n<p>There’s always pain when making this kind of transition, manifest as confusion, costs, and cables. Lots of cables.</p>\n<p>But it’s a bitter pill swallowed for the sake of progress. Make a clean break and rethink computing without the baggage. Unfortunately, Apple’s most recent announcements show a distinct lack of vision. Not only are the current generation devices making a break with the previous gen, as has often been the case, but their flagship products are incompatible with one another. Dongles aren’t a stop-gap but the new status quo. Want to connect your shiny new iPhone 7 to your shiny new MacBook Pro with touch bar? Need a dongle. The EarPods that come with the iPhone 7 to the MacBook Pro? Can’t be done.</p>\n<p>Ignoring the burden on your wallet and the inconvenience of lugging around a bunch of adapters, it’s just complicated keeping track of how things must connect in the Apple ecosystem. So much so that I felt compelled to create the following guide:</p>\n<div id=\"idongle\">\n<div class=\"row connection bad\">\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/buy-mac/macbook-pro\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>MacBook Pro – Late 2016</h3>\n</p></div>\n</p></div>\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/iphone-7.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/buy-iphone/iphone-7\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-iPhone-Unlocked-32-GB/dp/B01LYT95XR/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>iPhone 7</h3>\n</p></div>\n</p></div>\n<div class=\"dongles col-sm-6\">\n<div class=\"status\"></div>\n<p class=\"comments\">Apple’s flagship products — the MacBook Pro with Touch Bar and iPhone 7 / 7 Plus — are not compatible out of the box. The iPhone 7 has a cable with the old, familiar USB plug, while the MacBook Pro sports a port that accepts ThunderBolt 3 and USB-C. Purchase a USB-C to USB adapter to use the included cable, as well as any other legacy USB devices. Or you can drop a bit more cash and replace the cable altogether with a USB-C to Lightning cable.</p>\n<div class=\"dongle\">\n<div class=\"photo\"><img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/usb-c-usb-a.jpg\"></div>\n<div class=\"caption\">\n<h3>USB-C to USB Adapter</h3>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MJ1M2AM/A/usb-c-to-usb-adapter\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-USB-C-to-USB-Adapter/dp/B00VU2OID2/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n</p></div>\n<div class=\"dongle\">\n<div class=\"photo\"><img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/usb-c-lightning.jpg\"></div>\n<div class=\"caption\">\n<h3>USB-C to Lightning Cable</h3>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MK0X2AM/A/usb-c-to-lightning-cable-1-m\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-MK0X2AM-USB-C-Lightning-Cable/dp/B01DGYJBQA/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n</p></div>\n</p></div>\n</p></div>\n<div class=\"row connection bad\">\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/buy-mac/macbook-pro\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>MacBook Pro – Late 2016</h3>\n</p></div>\n</p></div>\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/earpods-lightning.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MMTN2AM/A/earpods-with-lightning-connector\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-EarPods-Lightning-Connector-MMTN2AM/dp/B01M0GB8CC/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>EarPods with Lightning Connector</h3>\n</p></div>\n</p></div>\n<div class=\"dongles col-sm-6\">\n<div class=\"status\"></div>\n<p class=\"comments\">The EarPods included with the iPhone 7 sport a Lightning plug, which the MacBook Pro with Touch Bar doesn’t support. There is no official way to connect them, even with a dongle. Though untested, you might try to chain this USB-C to USB adapter with a USB to Lightning cable.</p>\n<div class=\"dongle\">\n<div class=\"photo\"><img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/usb-c-usb-a.jpg\"></div>\n<div class=\"caption\">\n<h3>USB-C to USB Adapter</h3>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MJ1M2AM/A/usb-c-to-usb-adapter\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-USB-C-to-USB-Adapter/dp/B00VU2OID2/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n</p></div>\n<div class=\"dongle\">\n<div class=\"photo\"><img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/usb-lightning.jpg\"></div>\n<div class=\"caption\">\n<h3>Female Lightning to Male USB Cable</h3>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"#\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Charging-Adapter-Cocoxin-Extension-Charger/dp/B01FK6MW1I/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n</p></div>\n</p></div>\n</p></div>\n<div class=\"row connection soso\">\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/buy-mac/macbook-pro\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>MacBook Pro – Late 2016</h3>\n</p></div>\n</p></div>\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/airpods.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MMEF2AM/A/airpods\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"#?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>AirPods</h3>\n</p></div>\n</p></div>\n<div class=\"dongles col-sm-6\">\n<div class=\"status\"></div>\n<p class=\"comments\">The wireless AirPods work flawlessly with the MacBook Pro with Touch Bar. If you want to recharge the AirPods through the MacBook Pro, that’s a different story. The charging cable for the new AirPods comes with the familiar USB port, which means there’s no place to plug it into the current gen MacBook Pro. You’ll need to buy this USB-C to USB adapter to hook them up.</p>\n<div class=\"dongle\">\n<div class=\"photo\"><img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/usb-c-usb-a.jpg\"></div>\n<div class=\"caption\">\n<h3>USB-C to USB Adapter</h3>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MJ1M2AM/A/usb-c-to-usb-adapter\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-USB-C-to-USB-Adapter/dp/B00VU2OID2/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n</p></div>\n</p></div>\n</p></div>\n<div class=\"row connection good\">\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/buy-mac/macbook-pro\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>MacBook Pro – Late 2016</h3>\n</p></div>\n</p></div>\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/earpods-3.5mm.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MD827LL/A/earpods-with-35-mm-headphone-plug\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-EarPods-Remote-Certified-Refurbished/dp/B012OVRS1Q/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>EarPods with 3.5mm Headphone Plug</h3>\n</p></div>\n</p></div>\n<div class=\"dongles col-sm-6\">\n<div class=\"status\"></div>\n<p class=\"comments\">The MacBook Pro with Touch Bar still sports a standard 3.5mm headphone jack, so you can use your old EarPods and most other headphones without packing additional gear.</p>\n</p></div>\n</p></div>\n<div class=\"row connection bad\">\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/buy-mac/macbook-pro\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>MacBook Pro – Late 2016</h3>\n</p></div>\n</p></div>\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/magsafe-2.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MD506LL/A/apple-85w-magsafe-2-power-adapter-for-macbook-pro-with-retina-display\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-MagSafe-Adapter-MacBook-MD506LL/dp/B008ALAAV0/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>MagSafe 2 Power Adapter</h3>\n</p></div>\n</p></div>\n<div class=\"dongles col-sm-6\">\n<div class=\"status\"></div>\n<p class=\"comments\">If you’ve got some old MagSafe power cords lying around, you won’t be able to use them with the MacBook Pro with Touch Bar, which charges through its versatile USB-C ports.</p>\n</p></div>\n</p></div>\n<div class=\"row connection soso\">\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/buy-mac/macbook-pro\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>MacBook Pro – Late 2016</h3>\n</p></div>\n</p></div>\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/thunderbolt-display.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/FC914LL/B/refurbished-thunderbolt-display-27-inch\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-MC914LL-27-inch-Thunderbolt-Display/dp/B004YLCKYA/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>Thunderbolt Display</h3>\n</p></div>\n</p></div>\n<div class=\"dongles col-sm-6\">\n<div class=\"status\"></div>\n<p class=\"comments\">If you’ve got a Thunderbolt Display (with the two-headed MagSafe and Thunderbolt cable), you’ll need this adapter to use it with the new MacBook Pro with Touch Bar.</p>\n<div class=\"dongle\">\n<div class=\"photo\"><img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/thunderbolt-3-thunderbolt-2.jpg\"></div>\n<div class=\"caption\">\n<h3>Thunderbolt 3 (USB-C) to Thunderbolt 2 Adapter</h3>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MMEL2AM/A/thunderbolt-3-usb-c-to-thunderbolt-2-adapter\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-MMEL2AM-Thunderbolt-Usb-C-Adapter/dp/B01MQ26QIY/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n</p></div>\n</p></div>\n</p></div>\n<div class=\"row connection soso\">\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/macbook-pro-late-2016.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/buy-mac/macbook-pro\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-MacBook-MLW72LL-15-4-inch-quad-core/dp/B01LTHXAO0/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>MacBook Pro – Late 2016</h3>\n</p></div>\n</p></div>\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/led-cinema-display.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/FC007LL/A/refurbished-non-thunderbolt-apple-led-cinema-display-27-flat-panel\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-MC007LL-27-Inch-Cinema-Display/dp/B0043GCBU4/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>LED Cinema Display</h3>\n</p></div>\n</p></div>\n<div class=\"dongles col-sm-6\">\n<div class=\"status\"></div>\n<p class=\"comments\">If you’ve got an older Apple Cinema LED Display (with the three-headed USB, MagSafe, and Mini DisplayPort cable), you’ll need this adapter to use it with the new MacBook Pro with Touch Bar.</p>\n<div class=\"dongle\">\n<div class=\"photo\"><img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/usb-c-mini-displayport.jpg\"></div>\n<div class=\"caption\">\n<h3>AllSmartLife USB-C to Mini DisplayPort Adapter</h3>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"#\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/AllSmartLife-DisplayPort-Aluminium-resolution-ChromeBook/dp/B017TZTMBG/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n</p></div>\n</p></div>\n</p></div>\n<div class=\"row connection good\">\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/iphone-7.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/buy-iphone/iphone-7\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-iPhone-Unlocked-32-GB/dp/B01LYT95XR/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>iPhone 7</h3>\n</p></div>\n</p></div>\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/earpods-lightning.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MMTN2AM/A/earpods-with-lightning-connector\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-EarPods-Lightning-Connector-MMTN2AM/dp/B01M0GB8CC/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>EarPods with Lightning Connector</h3>\n</p></div>\n</p></div>\n<div class=\"dongles col-sm-6\">\n<div class=\"status\"></div>\n<p class=\"comments\">The iPhone 7 and accompanying EarPods work great together, but in order to listen and charge your iPhone 7 at the same time, you’ll need this officially licensed dongle from Belkin.</p>\n<div class=\"dongle\">\n<div class=\"photo\"><img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/belkin-lightning-audio-charge.jpg\"></div>\n<div class=\"caption\">\n<h3>Belkin Lightning Audio + Charge Rockstar</h3>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/HKKP2ZM/A/belkin-lightning-audio-charge-rockstar\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Belkin-Lightning-Charge-RockStar-iPhone/dp/B01LXFKSNA/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n</p></div>\n</p></div>\n</p></div>\n<div class=\"row connection soso\">\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/iphone-7.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/buy-iphone/iphone-7\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-iPhone-Unlocked-32-GB/dp/B01LYT95XR/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>iPhone 7</h3>\n</p></div>\n</p></div>\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/earpods-3.5mm.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MD827LL/A/earpods-with-35-mm-headphone-plug\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-EarPods-Remote-Certified-Refurbished/dp/B012OVRS1Q/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>EarPods with 3.5mm Headphone Plug</h3>\n</p></div>\n</p></div>\n<div class=\"dongles col-sm-6\">\n<div class=\"status\"></div>\n<p class=\"comments\">If you want to use an older pair of EarPods, Beats, or any other 3.5mm headphones with your iPhone 7, you can use this Lightning to 3.5mm adapter that comes included with the iPhone 7. If you want to charge while you listen, the iPhone Lightning Dock from Apple will do the trick.</p>\n<div class=\"dongle\">\n<div class=\"photo\"><img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/lightning-3.5mm.jpg\"></div>\n<div class=\"caption\">\n<h3>Lightning to 3.5 mm Headphone Jack Adapter</h3>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MMX62AM/A/lightning-to-35-mm-headphone-jack-adapter\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-Lightning-3-5mm-Headphone-Adapter/dp/B01LXJFMGF/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n</p></div>\n<div class=\"dongle\">\n<div class=\"photo\"><img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/iphone-lightning-dock.jpg\"></div>\n<div class=\"caption\">\n<h3>iPhone Lightning Dock</h3>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MNN62/iphone-lightning-dock-black\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-iPhone-Lightning-Dock-Space/dp/B015KSARTU/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n</p></div>\n</p></div>\n</p></div>\n<div class=\"row connection good\">\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/macbook-pro-mid-2015.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/G0QP3LL/A/refurbished-133-inch-macbook-pro-27ghz-dual-core-intel-i7-with-retina-display\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-Macbook-MJLQ2LL-15-inch-Processor/dp/B00XZGMBVC/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>MacBook Pro – Mid 2015</h3>\n</p></div>\n</p></div>\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/airpods.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MMEF2AM/A/airpods\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"#?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>AirPods</h3>\n</p></div>\n</p></div>\n<div class=\"dongles col-sm-6\">\n<div class=\"status\"></div>\n<p class=\"comments\">The AirPods work wirelessly with the mid-2015 MacBook Pro, and you can even recharge them via USB without a dongle.</p>\n</p></div>\n</p></div>\n<div class=\"row connection soso\">\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/macbook-pro-mid-2015.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/G0QP3LL/A/refurbished-133-inch-macbook-pro-27ghz-dual-core-intel-i7-with-retina-display\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-Macbook-MJLQ2LL-15-inch-Processor/dp/B00XZGMBVC/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>MacBook Pro – Mid 2015</h3>\n</p></div>\n</p></div>\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/earpods-lightning.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MMTN2AM/A/earpods-with-lightning-connector\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-EarPods-Lightning-Connector-MMTN2AM/dp/B01M0GB8CC/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>EarPods with Lightning Connector</h3>\n</p></div>\n</p></div>\n<div class=\"dongles col-sm-6\">\n<div class=\"status\"></div>\n<p class=\"comments\">Using your new EarPods with the mid-2015 MacBook Pro or older isn’t so straightforward. Apple doesn’t provide a dongle for this situation, but this third-party cable may do the trick.</p>\n<div class=\"dongle\">\n<div class=\"photo\"><img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/usb-lightning.jpg\"></div>\n<div class=\"caption\">\n<h3>Female Lightning to Male USB Cable</h3>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"#\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Charging-Adapter-Cocoxin-Extension-Charger/dp/B01FK6MW1I/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n</p></div>\n</p></div>\n</p></div>\n<div class=\"row connection good\">\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/macbook-pro-mid-2015.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/G0QP3LL/A/refurbished-133-inch-macbook-pro-27ghz-dual-core-intel-i7-with-retina-display\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-Macbook-MJLQ2LL-15-inch-Processor/dp/B00XZGMBVC/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>MacBook Pro – Mid 2015</h3>\n</p></div>\n</p></div>\n<div class=\"device col-sm-3\">\n<div class=\"photo\">\n <img decoding=\"async\" src=\"/wp/wp-content/uploads/2017/01/earpods-3.5mm.jpg\"></p>\n<div class=\"buttons\">\n <a class=\"btn btn-sm btn-primary\" href=\"http://www.apple.com/shop/product/MD827LL/A/earpods-with-35-mm-headphone-plug\" target=\"_blank\">Apple</a><a class=\"btn btn-sm btn-primary\" href=\"https://www.amazon.com/Apple-EarPods-Remote-Certified-Refurbished/dp/B012OVRS1Q/?tag=bigicecube-20\" target=\"_blank\">Amazon</a>\n </div>\n</p></div>\n<div class=\"caption\">\n<h3>EarPods with 3.5mm Headphone Plug</h3>\n</p></div>\n</p></div>\n<div class=\"dongles col-sm-6\">\n<div class=\"status\"></div>\n<p class=\"comments\">It just works.</p>\n</p></div>\n</p></div>\n</p></div>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
},
{
"label": "Hardware",
"term": "Hardware",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=11145",
"title": "Rotary: A Retro Web Input for Phone Numbers",
"description": "A bad web form sparked a series of increasingly absurd designs for inputting phone numbers, including an incrementer, slider, random number generator, and very large table. Here’s a good rundown of the solutions developers came … <a href=\"https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/\">Read more</a>",
"url": "https://thomaspark.co/2016/04/rotary-a-retro-web-input-for-phone-numbers/",
"published": "2016-04-25T14:05:46.000Z",
"updated": "2016-04-25T14:05:46.000Z",
"content": "<p><a href=\"https://twitter.com/stelian/status/720913927639560194\">A bad web form</a> sparked a series of increasingly absurd designs for inputting phone numbers, including an incrementer, slider, random number generator, and very large table. <a href=\"http://kottke.org/16/04/hilariously-bad-phone-number-web-forms\">Here’s a good rundown</a> of the solutions developers came up with.</p>\n<p>This is my take. It’s a retro, skeuomorphic input based on the rotary telephone. Inefficient, but kinda fun. Try it out below, <i>especially</i> those of you <a href=\"https://www.youtube.com/watch?v=XkuirEweZvM\">too young to have ever handled a rotary</a>.</p>\n<p>You can also view the <a href=\"https://thomaspark.co/projects/rotary/\">standalone demo</a> and <a href=\"https://github.com/thomaspark/rotary/\">source on GitHub</a>. </p>\n\n<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->\n<iframe loading=\"lazy\" style=\"width: 100%; height: 500px; border: none;\" src=\"https://thomaspark.co/projects/rotary/\" width=\"100%\" height=\"500\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"></iframe>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "User Interface",
"term": "User Interface",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=11108",
"title": "Learning CSS Layout with Flexbox Froggy",
"description": "I’ve created a game for learning CSS flexbox called Flexbox Froggy. The goal of the game is to help the frogs get to their lilypads by writing CSS code. See if you can beat all … <a href=\"https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/\">Read more</a>",
"url": "https://thomaspark.co/2015/11/learning-css-layout-with-flexbox-froggy/",
"published": "2015-11-25T13:26:04.000Z",
"updated": "2015-11-25T13:26:04.000Z",
"content": "<p><a href=\"http://flexboxfroggy.com\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/11/flexboxfroggy.png\" alt=\"Flexbox Froggy\" width=\"2506\" height=\"1474\" class=\"aligncenter size-full wp-image-11113\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/11/flexboxfroggy.png 2506w, https://thomaspark.co/wp/wp-content/uploads/2015/11/flexboxfroggy-500x294.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/11/flexboxfroggy-1024x602.png 1024w\" sizes=\"auto, (max-width: 2506px) 100vw, 2506px\" /></a></p>\n<p>I’ve created a game for learning CSS flexbox called Flexbox Froggy. The goal of the game is to help the frogs get to their lilypads by writing CSS code. See if you can beat all the levels!</p>\n<div class=\"center\">\n<a class=\"standard-btn xlarge-btn green-btn\" href=\"http://flexboxfroggy.com\">Flexbox Froggy</a>\n</div>\n<p>Flexbox Froggy takes inspiration from the classic arcade game <a href=\"https://en.wikipedia.org/wiki/Frogger\">Frogger</a>, and web literacy games like the brilliant <a href=\"http://flukeout.github.io/\">CSS Diner</a> and <a href=\"https://eraseallkittens.com/\">Erase All Kittens</a>, where you learn about CSS selectors and HTML markup respectively.</p>\n<p>I chose CSS flexbox in part because its layout properties make for good gameplay mechanics. The game levels are similar to the “positioning zombies” activity that featured <a href=\"http://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/\">in my work with Mozilla Thimble tutorials</a>, but using the powerful new flexbox model instead of absolute positioning.</p>\n<p>Flexbox is also a good topic because beginners can learn this improved way of positioning right out of the gate, while many experienced web developers who aren’t familiar with it yet can finally get on with it. It’s something I myself have been meaning to learn for awhile now. There are topnotch tutorials out there for this purpose like those by <a href=\"https://css-tricks.com/snippets/css/a-guide-to-flexbox/\">CSS Tricks</a>, <a href=\"http://tympanus.net/codrops/css_reference/flexbox/\">Codrops</a>, and <a href=\"https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties\">Scotch.io</a>, but few interactive learning experiences.</p>\n<p>If you spot any bugs or have ideas for new levels, please open an issue on <a href=\"http://github.com/thomaspark/flexboxfroggy\">GitHub</a>.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Games",
"term": "Games",
"url": null
},
{
"label": "Learning",
"term": "Learning",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=11021",
"title": "Bob Ross’ Color Palette in CSS",
"description": "Even if you’ve never watched an episode of The Joy of Painting, there’s a good chance you’re familiar with artist Bob Ross, with his trademark afro and “happy little trees”. But if you’ve seen his … <a href=\"https://thomaspark.co/2015/11/bob-ross-color-palette-in-css/\">Read more</a>",
"url": "https://thomaspark.co/2015/11/bob-ross-color-palette-in-css/",
"published": "2015-11-19T13:05:16.000Z",
"updated": "2015-11-19T13:05:16.000Z",
"content": "<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/11/bobross.jpg\" alt=\"Bob Ross\" width=\"1600\" height=\"870\" class=\"aligncenter size-full wp-image-11053\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/11/bobross.jpg 1600w, https://thomaspark.co/wp/wp-content/uploads/2015/11/bobross-500x272.jpg 500w, https://thomaspark.co/wp/wp-content/uploads/2015/11/bobross-1024x557.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" /></p>\n<p>Even if you’ve never watched an episode of <a href=\"https://www.youtube.com/user/BobRossInc/videos\">The Joy of Painting</a>, there’s a good chance you’re familiar with artist Bob Ross, with his trademark afro and “happy little trees”.</p>\n<p>But if you’ve seen his show, then you’ll know that another trademark was his choice of paints. Bob Ross always used the same 13 paints, with decidedly un-Crayolan names like Alizarin Crimson and Pthalo Blue, loading his palette <a href=\"http://grignonsart.com/art-supplies/bob-ross/ross-easels.html\">in the same arrangement</a> each time, as you see in the photo above.</p>\n<p>By <a href=\"http://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/\">limiting his tools and simplifying his techniques</a>, Bob Ross introduced the joy of painting to countless non-artists, and for that he was beloved.</p>\n<div class=\"swatch dark sap-green\">\n<p>Sap Green</p>\n<p>#0a3410</p>\n<p>rgb(10, 52, 16)</p>\n<p>hsl(128.6, 67.7%, 12.2%)</p>\n</div>\n<div class=\"swatch dark alizarin-crimson\">\n<p>Alizarin Crimson</p>\n<p>#4e1500</p>\n<p>rgb(78, 21, 0)</p>\n<p>hsl(16.2, 100%, 15.3%)</p>\n</div>\n<div class=\"swatch dark van-dyke-brown\">\n<p>Van Dyke Brown</p>\n<p>#221b15</p>\n<p>rgb(34, 27, 21)</p>\n<p>hsl(27.7, 23.6%, 10.8%)</p>\n</div>\n<div class=\"swatch dark dark-sienna\">\n<p>Dark Sienna</p>\n<p>#5f2e1f</p>\n<p>rgb(95, 46, 31)</p>\n<p>hsl(14.1, 50.8%, 24.7%)</p>\n</div>\n<div class=\"swatch dark midnight-black\">\n<p>Midnight Black</p>\n<p>#000000</p>\n<p>rgb(0, 0, 0)</p>\n<p>hsl(0, 0%, 0%)</p>\n</div>\n<div class=\"swatch dark prussian-blue\">\n<p>Prussian Blue</p>\n<p>#021e44</p>\n<p>rgb(2, 30, 68)</p>\n<p>hsl(214.5, 94.3%, 13.7%)</p>\n</div>\n<div class=\"swatch dark phthalo-blue\">\n<p>Phthalo Blue</p>\n<p>#0c0040</p>\n<p>rgb(12, 0, 64)</p>\n<p>hsl(251.3, 100%, 12.5%)</p>\n</div>\n<div class=\"swatch dark phthalo-green\">\n<p>Phthalo Green</p>\n<p>#102e3c</p>\n<p>rgb(16, 46, 60)</p>\n<p>hsl(199.1, 57.9%, 14.9%)</p>\n</div>\n<div class=\"swatch light cadmium-yellow\">\n<p>Cadmium Yellow</p>\n<p>#ffec00</p>\n<p>rgb(255, 236, 0)</p>\n<p>hsl(55.5, 100%, 50%)</p>\n</div>\n<div class=\"swatch light yellow-ochre\">\n<p>Yellow Ochre</p>\n<p>#c79b00</p>\n<p>rgb(199, 155, 0)</p>\n<p>hsl(46.7, 100%, 39%)</p>\n</div>\n<div class=\"swatch light indian-yellow\">\n<p>Indian Yellow</p>\n<p>#ffb800</p>\n<p>rgb(255, 184, 0)</p>\n<p>hsl(43.3, 100%, 50%)</p>\n</div>\n<div class=\"swatch dark bright-red\">\n<p>Bright Red</p>\n<p>#db0000</p>\n<p>rgb(219, 0, 0)</p>\n<p>hsl(0, 100%, 42.9%)</p>\n</div>\n<div class=\"swatch light titanium-white\">\n<p>Titanium White</p>\n<p>#ffffff</p>\n<p>rgb(255, 255, 255)</p>\n<p>hsl(0, 0%, 100%)</p>\n</div>\n<p>As a fan of Bob Ross, I wanted the colors he popularized to live on through the web. I’ve collected their hex values above and created a stylesheet so you can use class names like <code class=\"lang-css\">.phthalo-blue</code>, <code class=\"lang-css\">.phthalo-blue-text</code>, and <code class=\"lang-css\">.phthalo-blue-border</code> to get a Phthalo Blue background, text, and border color respectively. You can grab the CSS, and the SASS used to generate it, below.</p>\n<div class=\"center\">\n<a class=\"standard-btn xlarge-btn phthalo-blue dark\" href=\"https://gist.github.com/thomaspark/41f381048adcceb6d261#file-bobross-css\">CSS</a> <a class=\"standard-btn xlarge-btn phthalo-blue dark\" href=\"https://gist.github.com/thomaspark/41f381048adcceb6d261#file-bobross-scss\">SASS</a>\n</div>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=10956",
"title": "Survey of CMS Usage on Newspaper Websites",
"description": "As of this month, 25 percent of all websites are using WordPress, according to W3Techs survey. This ubiquity was one of the leading factors in choosing WordPress as the platform for Snowball. Of course Snowball’s … <a href=\"https://thomaspark.co/2015/11/survey-of-cms-usage-on-newspaper-websites/\">Read more</a>",
"url": "https://thomaspark.co/2015/11/survey-of-cms-usage-on-newspaper-websites/",
"published": "2015-11-16T13:07:22.000Z",
"updated": "2015-11-16T13:07:22.000Z",
"content": "<p>As of this month, 25 percent of all websites are using WordPress, <a href=\"http://ma.tt/2015/11/seventy-five-to-go/\">according to W3Techs survey</a>. This ubiquity was one of the leading factors in <a href=\"http://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/\">choosing WordPress as the platform for Snowball</a>. Of course Snowball’s main target are news organizations and journalism students, which raises the question of how closely this general 25 percent figure tracks with newspaper websites.</p>\n<p>It turns out, not much at all.</p>\n<h2>Collecting the Data</h2>\n<p>To survey CMS usage among newspaper websites, I analyzed the websites of the top 100 newspapers in North America <a href=\"http://www.4imn.com/topNorth-America/\">according to 4IMN</a>, which ranges from the New York Times to the Knoxville News-Sentinel. I also took a look at websites for 100 exemplary college newspapers, based on a list from <a href=\"http://journalismdegree.org/exemplary-college-newspapers/\">the Journalism Degrees blog</a> with the substitution of Drexel University’s The Triangle (gotta represent!). The analysis was done in November 2015.</p>\n<p>To determine the CMS run by each website, I used several online tools including <a href=\"http://builtwith.com/\">BuiltWith</a>, <a href=\"http://whatcms.org/\">WhatCMS</a>, and <a href=\"http://guess.scritch.org/\">CMS Detector</a>.</p>\n<p>When these tools didn’t suffice, I fell back to manual inspection and online research. In a number of cases, this was still not enough.</p>\n<h2>The Results</h2>\n<p>Among the top newspaper websites, WordPress is the most identified CMS, though at 11% it’s less than half the general rate. The rest of the numbers reveal a balkanized landscape. Drupal is the next most common, followed by 20 other different CMSes. For the remaining 62 websites, the CMS could not be identified. These “others” might be using yet another CMS platform or a custom solution, but we can be reasonably confident that they’re not using WordPress.</p>\n\n<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->\n<iframe loading=\"lazy\" width=\"770\" height=\"371\" 0=\"seamless\" frameborder=\"0\" scrolling=\"no\" src=\"https://docs.google.com/spreadsheets/d/1bVYBrdbDb8OR1ju3MiL74oM5jWwv5Rj3Hbs0pbnP00s/pubchart?oid=38969996&format=interactive\" class=\"iframe-class\"></iframe>\n\n<p>I’m somewhat surprised at the low figure for WordPress. Perhaps this is due to news orgs being entrenched with legacy systems, having very particular business needs, or fear of open source. WordPress is best known for its ease of use, but it has also proven its mettle with a number of world-class news websites.</p>\n<p>The numbers for college newspapers show a very different picture. WordPress makes up a full 68%! This is followed by Blox, Gryphon, Drupal, etc. WordPress dominates a much more homogeneous scene.</p>\n\n<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->\n<iframe loading=\"lazy\" width=\"770\" height=\"371\" 0=\"seamless\" frameborder=\"0\" scrolling=\"no\" src=\"https://docs.google.com/spreadsheets/d/1bVYBrdbDb8OR1ju3MiL74oM5jWwv5Rj3Hbs0pbnP00s/pubchart?oid=1589217120&format=interactive\" class=\"iframe-class\"></iframe>\n\n<p>This supports our argument that building <a href=\"http://snowball.openhtml.org/\">Snowball</a> as a WordPress plugin is the most effective way to reach a large audience of active journalism students.</p>\n<p>As a next step, it would be interesting compare small newspapers to these two groups, but I haven’t found a good way of identifying these yet.</p>\n<h2>Appendix</h2>\n<p>Here’s the raw data used to calculate these numbers. If you can provide any information on the missing data points, please reach out.</p>\n<h3>Top Newspapers</h3>\n<table style=\"max-width: 500px;\">\n<tr>\n<th>Newspaper</th>\n<th>CMS</th>\n</tr>\n<tr>\n<td>The New York Times</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Washington Post </td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>USA Today </td>\n<td>Gannett CMS</td>\n</tr>\n<tr>\n<td>The Wall Street Journal </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Los Angeles Times </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Examiner</td>\n<td>Drupal</td>\n</tr>\n<tr>\n<td>Daily News</td>\n<td>Atex PoloPoly</td>\n</tr>\n<tr>\n<td>Chicago Tribune </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Globe and Mail</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>New York Post</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Houston Chronicle</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Hollywood Reporter </td>\n<td>Drupal</td>\n</tr>\n<tr>\n<td>The Christian Science Monitor</td>\n<td>eZ Systems</td>\n</tr>\n<tr>\n<td>The Toronto Star </td>\n<td>Adobe CQ</td>\n</tr>\n<tr>\n<td>The Boston Globe </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Chicago Sun-Times</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Washington Times </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Philadelphia Inquirer</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Onion</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>San Jose Mercury News</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Denver Post</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Star Tribune </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Dallas Morning News</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Seattle Times</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Oregonian</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>National Post</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Newsday</td>\n<td>Atex PoloPoly</td>\n</tr>\n<tr>\n<td>The Miami Herald </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Baltimore Sun</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Plain Dealer </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Sacramento Bee </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Pittsburgh Post-Gazette</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Hill </td>\n<td>Drupal</td>\n</tr>\n<tr>\n<td>The Atlanta Journal-Constitution </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Detroit Free Press </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Orlando Sentinel </td>\n<td>Covide</td>\n</tr>\n<tr>\n<td>Boston Herald</td>\n<td>Drupal</td>\n</tr>\n<tr>\n<td>Milwaukee Journal Sentinel </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The New York Observer</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>South Florida Sun-Sentinel </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Kansas City Star </td>\n<td>Drupal</td>\n</tr>\n<tr>\n<td>Seattle Post-Intelligencer </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Vancouver Sun</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>St. Louis Post-Dispatch</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Orange County Register </td>\n<td>OpenCMS</td>\n</tr>\n<tr>\n<td>Deseret News </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The News & Observer</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Salt Lake Tribune</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Hartford Courant </td>\n<td>Mezzanine</td>\n</tr>\n<tr>\n<td>Express-News </td>\n<td>PencilBlue</td>\n</tr>\n<tr>\n<td>Toronto Sun</td>\n<td>Angel LMS</td>\n</tr>\n<tr>\n<td>The Montréal Gazette </td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Buffalo News </td>\n<td>Eduwave</td>\n</tr>\n<tr>\n<td>The San Diego Union-Tribune</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Times Union</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Indianapolis Star</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Investor’s Business Daily</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Tennessean </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Ottawa Citizen </td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Charlotte Observer </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Record </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Las Vegas Sun</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Tampa Tribune</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>St. Paul Pioneer Press </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Des Moines Register</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Oklahoman</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Calgary Herald </td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Contra Costa Times </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Austin American-Statesman</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Las Vegas Review-Journal </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Daily Princetonian </td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Fort Worth Star-Telegram </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Morning Call </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Patriot-News </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Palm Beach Post</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Daily Herald </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Republican </td>\n<td>sNews</td>\n</tr>\n<tr>\n<td>Anchorage Daily News </td>\n<td>OneTool</td>\n</tr>\n<tr>\n<td>The Province </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Courier-Journal</td>\n<td>Stiqr</td>\n</tr>\n<tr>\n<td>Edmonton Journal </td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Spokesman-Review </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Detroit News </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Florida Times-Union</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Los Angeles Daily News </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Winnipeg Free Press</td>\n<td>SchoolWires Centricity</td>\n</tr>\n<tr>\n<td>Metro</td>\n<td>IronPoint</td>\n</tr>\n<tr>\n<td>Star Advertiser</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Press-Enterprise </td>\n<td>Drupal</td>\n</tr>\n<tr>\n<td>Daily Press</td>\n<td>JoomD</td>\n</tr>\n<tr>\n<td>The State</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Omaha World-Herald </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The News Tribune </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Democrat and Chronicle </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Chicago Reader </td>\n<td>CiviCRM</td>\n</tr>\n<tr>\n<td>Miami New Times</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Blade</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Sarasota Herald-Tribune</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Wichita Eagle</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>News-Sentinel </td>\n<td>Liferay</td>\n</tr>\n</table>\n<h3>College Newspapers</h3>\n<table>\n<tr>\n<th>Newspaper</th>\n<th>School</th>\n<th>CMS</th>\n</tr>\n<tr>\n<td>The Lantern</td>\n<td>The Ohio State University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Daily Aztec</td>\n<td>San Diego State University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Daily Gamecock</td>\n<td>University of South Carolina</td>\n<td>Gryphon</td>\n</tr>\n<tr>\n<td>The Anchor</td>\n<td>Rhode Island College</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Oxford Student Online</td>\n<td>University of Oxford</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Cardinal Points</td>\n<td>Plattsburgh State University College</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Guardian</td>\n<td>University of California, San Diego</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Daily Titan</td>\n<td>California State University, Fullerton</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Heights</td>\n<td>Boston College</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Post</td>\n<td>Ohio University</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>The Vermilion</td>\n<td>University of Louisiana at Lafayette</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>NYULocal</td>\n<td>New York University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Clarion</td>\n<td>University of Denver</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The State Press</td>\n<td>Arizona State University</td>\n<td>Gryphon</td>\n</tr>\n<tr>\n<td>The Houstonian</td>\n<td>Sam Houston State University </td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Daily Iowan</td>\n<td>University of Iowa</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Minaret</td>\n<td>University of Tampa</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>CU Independent</td>\n<td>University of Colorado</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Minnesota Daily</td>\n<td>University of Minnesota</td>\n<td>Drupal</td>\n</tr>\n<tr>\n<td>The Hawks’ Herald</td>\n<td>Roger Williams University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Old Gold & Black</td>\n<td>Wake Forest University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Johns Hopkins News-Letter</td>\n<td>John Hopkins University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Famuan</td>\n<td>Florida A&M University </td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Campbell Times</td>\n<td>Campbell University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Vermont Cynic</td>\n<td>The University of Vermont</td>\n<td>College Publisher</td>\n</tr>\n<tr>\n<td>Student Life</td>\n<td>Washington University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Spectrum</td>\n<td>North Dakota State University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Sentinel</td>\n<td>Kennesaw State University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Daily 49er</td>\n<td>California State University, Long Beach</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Telescope</td>\n<td>Palomar College</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Herald</td>\n<td>Arkansas State University</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>University of Wisconsin-La Crosse Racquet</td>\n<td>University of Wisconsin-La Crosse</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The State Press</td>\n<td>Arizona State University </td>\n<td>Gryphon</td>\n</tr>\n<tr>\n<td>The Kenyon Collegian</td>\n<td>Kenyon College</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Central Florida Future</td>\n<td>University of Central Florida</td>\n<td>Gannett CMS</td>\n</tr>\n<tr>\n<td>The Daily Reveille</td>\n<td>Louisiana State University</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>The GW Hatchet</td>\n<td>George Washington University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Los Angeles Loyolan</td>\n<td>Loyola Marymount University</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>The Advance-Titan </td>\n<td>UW-Oshkosh</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>The Berkeley Beacon</td>\n<td>Emerson College</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>Flyer News</td>\n<td>University of Dayton</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Triangle</td>\n<td>Drexel University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Chronicle </td>\n<td>Duke University</td>\n<td>Gryphon</td>\n</tr>\n<tr>\n<td>The Georgetown Voice</td>\n<td>Georgetown University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Emory Wheel </td>\n<td>Emory University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Ball State Daily News</td>\n<td>Ball State University</td>\n<td>Gryphon</td>\n</tr>\n<tr>\n<td>Iowa State Daily</td>\n<td>Iowa State</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>Royal Purple News</td>\n<td>University of Wisconsin-Whitewater</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Bona Venture</td>\n<td>St. Bonaventure</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Chaparral</td>\n<td>College of the Desert</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Shorthorn</td>\n<td>UT-Arlington</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>The Chicago Maroon</td>\n<td>University of Chicago</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Central Michigan Life</td>\n<td>Central Michigan University</td>\n<td>Gryphon</td>\n</tr>\n<tr>\n<td>The Commonwealth Times</td>\n<td>Virginia Commonwealth University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Daily Barometer</td>\n<td>Oregon State University</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>The Daily Californian</td>\n<td>UC Berkeley</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Daily Orange</td>\n<td>Syracuse University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Daily Tarheel</td>\n<td>University of North Carolina</td>\n<td>Gryphon</td>\n</tr>\n<tr>\n<td>The Daily Texan</td>\n<td>University of Texas at Austin</td>\n<td>Drupal</td>\n</tr>\n<tr>\n<td>Daily Trojan </td>\n<td>University of Southern California</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Daily</td>\n<td>University of Washington</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>The Daily Eastern News</td>\n<td>Eastern Illinois UniversitySchool:</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Daily Mississippian</td>\n<td>University of Mississippi</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Campus Times</td>\n<td>University of Rochester</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Battalion</td>\n<td>Texas A&M </td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>The Daily Cougar</td>\n<td> University of Houston</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Stanford Daily</td>\n<td>Stanford University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Cornellian</td>\n<td>Cornell College</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Tech Online Edition</td>\n<td>Massachusetts Institute of Technology</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Pendulum</td>\n<td>Elon University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The New Perspective</td>\n<td>Carroll University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Rensselaer Polytechnic</td>\n<td>Rensselaer Polytechnic Institute </td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Louisville Cardinal</td>\n<td>University of Louisville</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Spartan Daily</td>\n<td>San Jose State</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Fine Print</td>\n<td>Gainesville Florida</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>The Pitt News</td>\n<td>University of Pittsburgh </td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Daily Cardinal</td>\n<td>University of Wisconsin-Madison</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>The DePaulia</td>\n<td>DePaul University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Exponent </td>\n<td>Purdue University</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>The Dartmouth</td>\n<td>Dartmouth College</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Yale Daily News</td>\n<td>Yale University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Brown Daily Herald</td>\n<td>Brown University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Daily Pennsylvanian</td>\n<td>University of Pennsylvania</td>\n<td>Gryphon</td>\n</tr>\n<tr>\n<td>Columbia Spectator</td>\n<td>Columbia University</td>\n<td>Drupal</td>\n</tr>\n<tr>\n<td>The Harvard Crimson</td>\n<td>Harvard University</td>\n<td>Other</td>\n</tr>\n<tr>\n<td>The Cornell Daily Sun</td>\n<td>Cornell University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Fourth Estate</td>\n<td>University of Wisconsin – Green Bay</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Diamondback</td>\n<td>University of Maryland</td>\n<td>Blox</td>\n</tr>\n<tr>\n<td>The Tech Talk</td>\n<td>Louisiana Tech University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Temple News</td>\n<td>Temple University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Sentry</td>\n<td>Robert Morris University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Michigan Daily</td>\n<td>University of Michigan</td>\n<td>Drupal</td>\n</tr>\n<tr>\n<td>The News</td>\n<td>Murray State University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Argonaut</td>\n<td>University of Idaho</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Arka Tech</td>\n<td>Arkansas State University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Bucknellian</td>\n<td>Bucknell University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Rebel Yell</td>\n<td>University of Nevada Las Vegas</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>Luther College Chips</td>\n<td>Luther College</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Colonnade</td>\n<td>Georgia College & State University</td>\n<td>WordPress</td>\n</tr>\n<tr>\n<td>The Concordian</td>\n<td>Concordia College</td>\n<td>WordPress</td>\n</tr>\n</table>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Data",
"term": "Data",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=10856",
"title": "Repositioning Tutorials in Mozilla Thimble",
"description": "I just returned from another great Mozilla Festival. For most of the attendees, Mozfest seems to be a chance to kick back and celebrate the daily work they do with their teams. For me, it … <a href=\"https://thomaspark.co/2015/11/repositioning-tutorials-in-mozilla-thimble/\">Read more</a>",
"url": "https://thomaspark.co/2015/11/repositioning-tutorials-in-mozilla-thimble/",
"published": "2015-11-13T00:59:04.000Z",
"updated": "2015-11-13T00:59:04.000Z",
"content": "<p>I just returned from another great <a href=\"https://2015.mozillafestival.org/\">Mozilla Festival</a>. For most of the attendees, Mozfest seems to be a chance to kick back and celebrate the daily work they do with their teams. For me, it was a rare opportunity to get face-time with some really talented people working on the same kind of problems I do. Trying to make the most of that, I felt a bit intense.</p>\n<p>One of the sessions I attended was on the new version of the web editor <a href=\"https://thimble.mozilla.org/\">Thimble</a>, with overhauled architecture and new look. I was heartened to find that embedded tutorials had made the cut. Not only because this was a feature I had worked on (although admittedly there’s some of that), but because I believe Thimble’s greatest potential is in supporting learning both formal and informal.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/11/newthimble-tutorials-1024x525.png\" alt=\"New Thimble Tutorials\" width=\"780\" height=\"400\" class=\"alignnone size-large wp-image-10877\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/11/newthimble-tutorials-1024x525.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/newthimble-tutorials-500x256.png 500w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></p>\n<p>The tutorial feature was not entirely unchanged however. Before, tutorials were presented in a third column. Now, due to the new filesystem panel, there is less space available and so tutorials are relegated to a toggle in the preview panel. While adding new tutorials is easier than ever (just add a <code>tutorial.html</code> to your project), they can no longer be viewed simultaneously with the output. Several of the session attendees raised concerns about how much switching back and forth this can cause, sparking discussion about the placement of tutorials. Ideas were tossed around, including a bottom panel and inline comments inspired by <a href=\"http://flukeout.github.io/fancy-comments/\">Fancy Comments</a>.</p>\n<p>When we originally implemented tutorials, <a href=\"http://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/\">we experimented with 6 variations</a>, including the side panel (dubbed Sidebar at the time), bottom panel (Drawer), and inline (Expander) versions. Unfortunately, a toggled view was not one of the designs tested in this study. Based on user ratings, Sidebar, Drawer, and Expander ranked as first, second, and third most popular respectively, matching our own intuitions.</p>\n<p>But beyond the question of “which?”, there is the “why?”. To answer this, I decided to revisit the old data, doing a quick qualitative analysis of what the participants found positive and negative about each design. For the frontrunner designs, I’ll briefly summarize these point below, and then propose a couple of alternatives.</p>\n<h2>Sidebar</h2>\n<p><a href=\"http://polar-tor-6216.herokuapp.com/examples/sidebar.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/11/sidebar-1024x525.png\" alt=\"Sidebar\" width=\"780\" height=\"400\" class=\"alignnone size-large wp-image-10921\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/11/sidebar-1024x525.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/sidebar-500x256.png 500w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></a></p>\n<p>For the sidebar design, most of the complaints related to the cramped view. Using up some space is unavoidable, but the sidebar can be especially problematic since it spans the whole window vertically. Significant space could be wasted on larger displays, but the lack of space was particularly a problem for smaller windows.</p>\n<blockquote><p>This one works best when I use it on a large-screen monitor. When I adjust my browser to a smaller size, some corresponding code parts are not automatically visible.</p></blockquote>\n<p>A few commented that they found it uncomfortable to scan their eyes from the sidebar to the code to the preview and back again. The ideal order of panes is an interesting open question.</p>\n<blockquote><p>Don’t care for this design. Harder for me to read far left block of directions, switch quickly to code, and follow what i’m doing to the right. Feels more difficult to concentrate.</p></blockquote>\n<p>As far as positives go, most boiled down to a clean and simple design that was consistent with the rest of the interface.</p>\n<blockquote><p>Fit in well visually with the columns interface of the thimble. Obviously the tutorial “section” of the page. Very distinct.</p></blockquote>\n<p>Respondents noted that the sidebar was good at getting out of the way, which was a theme that came up frequently when discussing the other designs as well.</p>\n<blockquote><p>Very similar to Drawer, but better, as it doesn’t pop over the code nor does it effect the editor space nearly as much (losing vertical space from the sides less frustrating then losing horizontal space from the bottom). Also how it takes space from both the input and output sides equally, rather then just squeeze the input.</p></blockquote>\n<p>A couple of the respondents commented that when it came to longer tutorials, sidebar was best-suited design.</p>\n<blockquote><p>This looks like a better interface. It is easier to read long instructions.</p></blockquote>\n<h2>Drawer</h2>\n<p><a href=\"http://polar-tor-6216.herokuapp.com/examples/drawer.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/11/drawer-1024x525.png\" alt=\"Drawer\" width=\"780\" height=\"400\" class=\"alignnone size-large wp-image-10920\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/11/drawer-1024x525.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/drawer-500x256.png 500w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></a></p>\n<p>For the drawer design, most of the complaints related to reduced space for the code editor. Some respondents felt that it was annoying and got in the way.</p>\n<blockquote><p>From the start it feels like it’s blocking your access to the code (which it is, of course, but I’m talking about the sensation you get).</p></blockquote>\n<p>Like the sidebar, there were several comments that it felt unnatural to scan your eyes from the code editor down to the tutorial. Again, this is an interesting question with no obvious answer.</p>\n<blockquote><p>it was hard for my eyes to look at the bottom of the screen for instructions and then go edit the code. It was even harder when I had to scroll the code to see where I am.</p></blockquote>\n<p>Respondents liked that the horizontal space of the existing panels was not compromised.</p>\n<blockquote><p>Makes the most of use of the space available therefore there is no need to scroll from left to right as much on the preview screen.</p></blockquote>\n<p>But perhaps the biggest win was that it was really easy and obvious to toggle into and out of view.</p>\n<blockquote><p>Can easily move the tutorial out of the way. Tab is within coding area as well so I didn’t have to move the mouse as far.</p></blockquote>\n<h2>Expander</h2>\n<p><a href=\"http://polar-tor-6216.herokuapp.com/examples/expander.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/11/expander-1024x525.png\" alt=\"Expander\" width=\"780\" height=\"400\" class=\"alignnone size-large wp-image-10919\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/11/expander-1024x525.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/expander-500x256.png 500w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></a></p>\n<p>For the expander design, several respondents found it unintuitive. In particular, they reported trouble accessing the tutorial again after they had closed it, feeling that it was “gone forever”.</p>\n<blockquote><p>Visually I found it hard to find the tutorial again after I “close”d it. Also, the animations right on top of hte code I was editing was distracting and felt like it was slowing me down considerably. Though it pointed me to the right part of the code it wasn’t obvious in the beginning.</p></blockquote>\n<p>The majority of negative comments related to breaking the flow while coding and obscuring the overall picture of the code. They complained that the tutorial was constantly jumping and shifting the code around.</p>\n<blockquote><p>Felt it cluttered and interfered with the code. felt annoyed each time I need to click the button to hide it. Dont mix it up with the code.</p></blockquote>\n<p>Some of the respondents appreciated the tighter integration between instruction and code. </p>\n<blockquote><p>I like this design the best so far. Tutorial is directly next to the code that is meant to be changed so you know exactly where you are in the code.</p></blockquote>\n<p>A few comments noted that the design was fun!</p>\n<blockquote><p>It was fun, funny, and interactive. It gave me tasks to do and while I did them, I learned different ways to do the same kind of task. It made it more memorable than looking up the method in a book.</p></blockquote>\n<p>Looking back at the user ratings, expander was the only design novices preferred more than experienced coders. For experienced coders, it’s likely the novelty would wear off very quickly.</p>\n<h2>Proposed Designs</h2>\n<p>Based on the feedback, it’s clear that sidebar is the preferred position, with drawer a solid alternative when horizontal space is at a premium (as is the case with the new Thimble). Keeping these comments in mind, I wanted to put a couple more possibilities out there.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-1-1024x546.png\" alt=\"Proposal 1\" width=\"780\" height=\"416\" class=\"alignnone size-large wp-image-10942\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-1-1024x546.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-1-500x267.png 500w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></p>\n<p>The first is to keep the sidebar layout, but toggle it through the file panel instead of the preview. For beginner coders, it’s critical to have a tight feedback loop between editing code and seeing the results, cause and effect. At the same time, having a tutorial suggests that it contains instruction that’s needed to guide their activity. In contrast, many beginner projects involve only one or two files at once, and switching between files is a relatively infrequent task. The ideal setup, then, it to have the editor, preview, and tutorial on screen at once.</p>\n<p>One of the main drawbacks of this occurs when beginners are first learning to relate markup in an HTML document with stylesheet rules in a CSS file. In this case, the proposed design would actually cause more friction. To mitigate this, file references could be supported within the tutorial. Like the smartline feature in the original tutorials, which allowed a tutorial author to create interactive links to specific lines of code, these references could allow the user to jump to the most relevant files from within the tutorial. Yet another drawback is that users could lose awareness of the file panel entirely, especially if they grow accustomed to the file references within tutorials.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2-1024x415.png\" alt=\"Proposal 2 Wide\" width=\"780\" height=\"316\" class=\"alignnone size-large wp-image-10946\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2-1024x415.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2-500x203.png 500w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></p>\n<p>The second is to offer a responsive layout. For larger screens that can afford it, the tutorial can be displayed as its own panel, giving Thimble a 4-column layout. For smaller screens, the tutorial could adapt to a drawer position at the bottom of the editor panel. The drawback of this is that most users might be working on smaller screens (there’s probably analytics to answer this), and that the transition between layouts is jarring.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2b-500x438.png\" alt=\"Proposal 2 Narrow\" width=\"500\" height=\"438\" class=\"aligncenter size-medium wp-image-10948\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2b-500x438.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2b-1024x897.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/11/proposal-2b.png 1940w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" /></p>\n<p>So that’s my two cents on positioning tutorials in a code editor. All in all, I’m excited by the evolution of Thimble and, along with the rest of <a href=\"http://openhtml.org\">the openHTML group</a>, look forward to contributing to its progress.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Learning",
"term": "Learning",
"url": null
},
{
"label": "User Interface",
"term": "User Interface",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=10724",
"title": "Developing for Web Developers",
"description": "As web developers, the deal is that we try to support our users on all the different platforms they might use to view our site. Generally speaking, that spans everything from the latest mobile devices … <a href=\"https://thomaspark.co/2015/08/developing-for-web-developers/\">Read more</a>",
"url": "https://thomaspark.co/2015/08/developing-for-web-developers/",
"published": "2015-08-05T14:31:55.000Z",
"updated": "2015-08-05T14:31:55.000Z",
"content": "<p>As web developers, the deal is that we try to support our users on all the different platforms they might use to view our site. Generally speaking, that spans everything from the latest mobile devices to Internet Explorers that’ve long outstayed their welcome.</p>\n<p>But what about when your site isn’t meant for the general public, but rather other web developers. How closely does that still hold? That’s the question I had when <a href=\"http://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/\">building FontCDN</a>.</p>\n<p>W3Schools provides <a href=\"httsp://www.w3schools.com/browsers/\">stats on browser and OS share</a>, but given their focus is web tutorials, their audience skews toward the beginner. Fortunately, two of my previous projects, <a href=\"https://bootswatch.com\">Bootswatch</a> and <a href=\"http://glyphsearch.com\">GlyphSearch</a>, are closer to the crowd I was aiming for with <a href=\"https://thomaspark.co/projects/fontcdn/\">FontCDN</a>.</p>\n<h2>The Numbers</h2>\n<p>Comparing logs, I found the breakdown surprisingly consistent between the two sites. In fact, they were within a few percentage points of each other across the board with one exception. So for this section, I’ll present data for Bootswatch since it’s been around longer.</p>\n<p>As you can see below, when it comes to device share, desktop has consistently eclipsed mobile and tablets. You probably don’t want to neglect mobile visitors entirely, since they might be checking out your site before deciding to share it or come back to it on desktop, but gracefully degrading the experience may be enough.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/08/devices.png\" alt=\"Device Share on Bootswatch\" width=\"1800\" height=\"1100\" class=\"alignnone size-full wp-image-10747 size-xl\" /></p>\n<p>Here’s the breakdown by operating system. Maybe it’s because I’m in a bubble of universities and startups, but I was surprised by how low the Mac share was. Perhaps this is due to the more design-oriented Mac developers not needing designed Bootswatch themes (Mac share was 10% higher on GlyphSearch). On the flip side, Linux share was greater than I expected.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/08/os.png\" alt=\"OS Share on Bootswatch\" width=\"1800\" height=\"1100\" class=\"alignnone size-full wp-image-10749 size-xl\" /></p>\n<p>Chrome and Firefox are the most used browsers. Not a surprise given the quality of their dev tools.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/08/browsers.png\" alt=\"Browser Share on Bootswatch\" width=\"1800\" height=\"1100\" class=\"alignnone size-full wp-image-10742 size-xl\" /></p>\n<p>A pleasant surprise was that among IE users, two-thirds are on the latest version.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/08/ie.png\" alt=\"Internet Explorer Versions on Bootswatch\" width=\"1800\" height=\"1100\" class=\"alignnone size-full wp-image-10748 size-xl\" /></p>\n<p>Just for fun, here’s what the update cycle looks like for Chrome in that same time.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/08/chrome.png\" alt=\"Chrome Versions on Bootswatch\" width=\"1800\" height=\"1100\" class=\"alignnone size-full wp-image-10743 size-xl\" /></p>\n<p>So how do the Bootswatch and GlyphSeach numbers stack up to the general public? Here’s a comparison of device share based on data from <a href=\"http://www.w3counter.com/globalstats.php\">W3Counter</a>. Think of green as global and blues as different subsets of web developers.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/08/compare-devices.png\" alt=\"Device Share Comparison\" width=\"1800\" height=\"1100\" class=\"alignnone size-full wp-image-10770 size-xl\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-devices.png 1800w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-devices-500x306.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-devices-1024x626.png 1024w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" /></p>\n<p>Here’s OS share:</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/08/compare-os.png\" alt=\"OS Share Comparison\" width=\"1800\" height=\"1100\" class=\"alignnone size-full wp-image-10771 size-xl\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-os.png 1800w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-os-500x306.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-os-1024x626.png 1024w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" /></p>\n<p>And browser share:</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/08/compare-browsers.png\" alt=\"Browser Share Comparison\" width=\"1800\" height=\"1100\" class=\"alignnone size-full wp-image-10769 size-xl\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-browsers.png 1800w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-browsers-500x306.png 500w, https://thomaspark.co/wp/wp-content/uploads/2015/08/compare-browsers-1024x626.png 1024w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" /></p>\n<p>Here’s the takeaway: If you’re developing web tools for web developers, you’ll do alright by targeting modern browsers on the desktop.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Data",
"term": "Data",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=10624",
"title": "A Better Way to Search Google Fonts",
"description": "Like most web developers, Google Fonts is an indispensable resource for me. What would otherwise be a choice between sticking to a small handful of web safe fonts or wrangling WOFFs, OTFs, and TTFs is … <a href=\"https://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/\">Read more</a>",
"url": "https://thomaspark.co/2015/08/a-better-way-to-search-google-fonts/",
"published": "2015-08-03T14:09:37.000Z",
"updated": "2015-08-03T14:09:37.000Z",
"content": "<p>Like most web developers, <a href=\"https://www.google.com/fonts\">Google Fonts</a> is an indispensable resource for me. What would otherwise be a choice between sticking to a small handful of web safe fonts or wrangling WOFFs, OTFs, and TTFs is solved with just two lines of code.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-1024x746.png\" alt=\"Google Fonts\" width=\"780\" height=\"568\" class=\"alignnone size-large wp-image-10652\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-300x219.png 300w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></p>\n<h2>Clicks and Conundrums</h2>\n<p>While Google Fonts is a valuable tool, its interface leaves much to be desired, a fact that hasn’t escaped the attention of folks like <a href=\"http://www.smashingmagazine.com/2013/09/dear-web-font-providers/\">Laura Franz</a> or <a href=\"http://sachagreif.com/more-google-webfonts-that-dont-suck/\">Sascha Grief</a>. As a devoted user of Google Fonts, I’d like to add a few of my own pet peeves to the conversation.</p>\n<p>First, one of the most common ways people arrive on Google Fonts is through a web search. <a href=\"https://www.google.com/fonts/specimen/Roboto\">The page you’ll land on</a>, while admittedly chock full of interesting history and statistics, doesn’t include the information you’re there for.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-landing1-1024x746.png\" alt=\"Google Fonts landing page\" width=\"780\" height=\"568\" class=\"alignnone size-large wp-image-10664\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-landing1-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-landing1-500x364.png 500w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></p>\n<p>For that, you’ll need to click the “Open in Google Fonts” link in the top right. “I thought I was already on Google Fonts,” you might wonder.</p>\n<p>Second, the Google Fonts interface is peppered with buttons, many unlabelled, that always give me a half-second pause. “Which one do I click to start using the font?” Hint: it’s not the bright blue button that beckons.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-buttons.png\" alt=\"Google Fonts Buttons\" width=\"895\" height=\"100\" class=\"alignnone size-full wp-image-10673\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-buttons.png 895w, https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-buttons-500x56.png 500w\" sizes=\"auto, (max-width: 895px) 100vw, 895px\" /></p>\n<p>Finally, Google Fonts includes a lot of directions and tips that are useful for the first-time user, but after the 100th visit, only serve to waste space. Add fixed bars at the top and bottom of the page and you end up with the most crucial bits below the fold, maybe even buried in a hidden tab.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-detail-1024x746.png\" alt=\"Google Fonts detail view\" width=\"780\" height=\"568\" class=\"alignnone size-large wp-image-10649\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-detail-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/googlefonts-detail-300x219.png 300w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></p>\n<h2>Enter FontCDN</h2>\n<p>Last week I tried my hand at building the Google Fonts interface that I wanted to use. The result is <a href=\"https://thomaspark.co/projects/fontcdn/\">FontCDN</a>.</p>\n<p><a href=\"https://thomaspark.co/projects/fontcdn/\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-1024x746.png\" alt=\"FontCDN\" width=\"780\" height=\"568\" class=\"alignnone size-large wp-image-10653\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-300x219.png 300w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></a></p>\n<p>FontCDN addresses a different use case than what Google Fonts seems to be designed for. Rather than deeply exploring and comparing different fonts within Google Fonts or within a prototyping tool like <a href=\"https://typecast.com/\">Typecast</a>, the goal of FontCDN is to quickly grab the fonts you’re interested in and try them out within the context of your actual project.</p>\n<p>You can sort and filter the 700+ fonts available on Google Fonts any which way. You can even browse fonts that have been recommended around <a href=\"http://sachagreif.com/google-webfonts-that-dont-suck/\">the</a> <a href=\"http://www.smashingmagazine.com/2014/03/taking-a-second-look-at-free-fonts/\">web</a>, a feature inspired by <a href=\"https://typekit.com/fonts\">Typekit</a>.</p>\n<p>Click a font to view the import and style code. Click a button to copy it to your clipboard. There’s no step three.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-modal-1024x746.png\" alt=\"FontCDN modal\" width=\"780\" height=\"568\" class=\"alignnone size-large wp-image-10651\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-modal-1024x746.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/fontcdn-modal-300x219.png 300w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></p>\n<p>Give <a href=\"https://thomaspark.co/projects/fontcdn/\">FontCDN</a> a try and let me know what you think.</p>\n<h2>Lessons</h2>\n<p>Performance was a priority given how resource-intensive it is to browse hundreds of fonts, and using <a href=\"http://facebook.github.io/react/\">React</a> was one of the keys. But there are surely many more optimizations to be made. If you want help out, the project is on <a href=\"https://github.com/thomaspark/fontcdn/\">GitHub</a>.</p>\n<p>While JSX resides in some kind of uncanny valley, the componentization and render methods made it worthwhile. So much so that when it comes time to revamp <a href=\"http://glyphsearch.com/\">GlyphSearch</a>, I’ll probably give it the React treatment.</p>\n<p>On a final note, hat tip to <a href=\"http://webpack.github.io/\">WebPack</a>, <a href=\"https://github.com/seatgeek/react-infinite\">React Infinite</a>, and <a href=\"https://github.com/typekit/webfontloader\">Web Font Loader</a>, which saved me a boatload of effort on this project.</p>\n<h2>Response</h2>\n<p>My announcement of this project was <a href=\"https://twitter.com/thomashpark/status/628593168414572544/retweets\" rel=\"noopener\" target=\"_blank\">retweeted</a> by the official Google Fonts account (@googlefonts). Not only did they seem to take the critiques in stride, but soon after they released a major overhaul of Google Fonts that was in the same direction as my approach — and about a mile further. Clearly it had been in the works!</p>\n<blockquote class=\"twitter-tweet\">\n<p lang=\"en\" dir=\"ltr\">Blog post: A Better Way to Search Google Fonts. <a href=\"http://t.co/UlxHaQtyqP\">http://t.co/UlxHaQtyqP</a></p>\n<p>— Thomas H. Park (@thomashpark) <a href=\"https://twitter.com/thomashpark/status/628593168414572544?ref_src=twsrc%5Etfw\">August 4, 2015</a></p></blockquote>\n<p> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "User Interface",
"term": "User Interface",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=10545",
"title": "Polyfill for Scoped CSS",
"description": "Scoped CSS is a new feature that makes it possible to add <style> elements anywhere in your document, scoping the CSS rules it contains to its parent element. This was just what we needed while … <a href=\"https://thomaspark.co/2015/07/polyfill-for-scoped-css/\">Read more</a>",
"url": "https://thomaspark.co/2015/07/polyfill-for-scoped-css/",
"published": "2015-07-22T13:53:45.000Z",
"updated": "2015-07-22T13:53:45.000Z",
"content": "<p>Scoped CSS is a new feature that makes it possible to add <code class=\"language-markup\"><style></code> elements anywhere in your document, scoping the CSS rules it contains to its parent element. This was just what we needed while <a href=\"http://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/\">developing Snowball</a>.</p>\n<p>Unfortunately, support is <a href=\"http://caniuse.com/#feat=style-scoped\">limited to Firefox</a>, and existing polyfills like <a href=\"https://github.com/PM5544/scoped-polyfill\">scoped-polyfill</a> and <a href=\"https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin\">jQuery-Scoped-CSS</a> weren’t working quite the way we needed. So I ended up creating a new polyfill for our project, which I’ve made available on GitHub.</p>\n<div class=\"center\">\n<a class=\"standard-btn blue-btn xlarge-btn\" href=\"https://github.com/thomaspark/scoper\"><span>Scoper</span></a>\n</div>\n<p>To use Scoper, simply include scoper.js on your page.</p>\n<p><script async src=\"//jsfiddle.net/thomaspark/rpe402LL/embed/result,html,css/\"></script></p>\n<p>How Scoper works is that for each <code class=\"language-markup\"><style scoped></code> element, the parent (or scoping) element is wrapped with a new element that’s been assigned a unique ID. This ID is prepended to all of its selectors.</p>\n<p>Scoper should work in Chrome, Safari, and IE9+, with tests built using <a href=\"http://mochajs.org/\">Mocha</a>.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.co/?p=10422",
"title": "Snowball: A WordPress Plugin for Storytelling on the Web",
"description": "Since May, our research group has been developing a new tool called Snowball. As with our other tools, the purpose of Snowball is to empower people from all sorts of backgrounds to express and create … <a href=\"https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/\">Read more</a>",
"url": "https://thomaspark.co/2015/07/snowball-a-wordpress-plugin-for-storytelling-on-the-web/",
"published": "2015-07-20T13:30:30.000Z",
"updated": "2015-07-20T13:30:30.000Z",
"content": "<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball-1024x323.png\" alt=\"Snowball\" width=\"780\" height=\"246\" class=\"alignnone size-large wp-image-10497\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball-1024x323.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball-300x95.png 300w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></p>\n<p>Since May, <a href=\"http://openhtml.org\">our research group</a> has been developing a new tool called <a href=\"http://snowball.openhtml.org/\">Snowball</a>. As with our other tools, the purpose of Snowball is to empower people from all sorts of backgrounds to express and create — tell their stories — on the web.</p>\n<p>We chose to implement Snowball as a WordPress plugin because WordPress users represent our target audience, and WordPress powers over 20% of the <em>entire web</em>, used everywhere from CNN and TechCrunch to the classroom.</p>\n<h1>Storytelling in the Digital Age</h1>\n<p>Stories take many forms, but we drew inspiration from articles like <a href=\"http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek\">Snow Fall</a> (if you couldn’t guess by the name). The work of the New York Times and a handful of other visionary organizations are exemplars of effective storytelling on the web. Three qualities set their work apart.</p>\n<div id=\"attachment_10487\" style=\"width: 790px\" class=\"wp-caption alignnone\"><a href=\"http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-10487\" src=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/snowfall-1024x668.png\" alt=\"Snow Fall by John Branch — New York Times\" width=\"780\" height=\"509\" class=\"size-large wp-image-10487\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/snowfall-1024x668.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/snowfall-300x196.png 300w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></a><p id=\"caption-attachment-10487\" class=\"wp-caption-text\">Snow Fall by John Branch — New York Times</p></div>\n<h3>Minimalist</h3>\n<p>Articles tend to be minimalist. This reflects a respect for both the audience and the content, and makes for a more immersive experience.</p>\n<div id=\"attachment_10480\" style=\"width: 790px\" class=\"wp-caption alignnone\"><a href=\"https://medium.com/matter/the-web-we-have-to-save-2eb1fe15a426\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-10480\" src=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/thewebwehavetosave-1024x668.png\" alt=\"The Web We Have to Save by Hossein Derakhshan — Medium\" width=\"780\" height=\"509\" class=\"size-large wp-image-10480\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/thewebwehavetosave-1024x668.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/thewebwehavetosave-300x196.png 300w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></a><p id=\"caption-attachment-10480\" class=\"wp-caption-text\">The Web We Have to Save by Hossein Derakhshan — Medium</p></div>\n<h3>Bespoke</h3>\n<p>Not only are distractions removed, but what remains purposefully enhances the content. The design is tailored to the content, advancing from the realm of grayscale newsprint to <a href=\"http://www.smashingmagazine.com/the-death-of-the-blog-post/\">vivid magazine spreads</a>.</p>\n<div id=\"attachment_10478\" style=\"width: 790px\" class=\"wp-caption alignnone\"><a href=\"http://jasonsantamaria.com/articles/chunky-in-fury\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-10478\" src=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/chunkyinfury-1024x668.png\" alt=\"Chunky in Fury by Mike Monteiro — Jason Santa Maria\" width=\"780\" height=\"509\" class=\"size-large wp-image-10478\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/chunkyinfury-1024x668.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/chunkyinfury-300x196.png 300w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></a><p id=\"caption-attachment-10478\" class=\"wp-caption-text\">Chunky in Fury by Mike Monteiro — Jason Santa Maria</p></div>\n<h3>Interactive</h3>\n<p>Perhaps most importantly, the content is interactive. One of the things that sets the web apart from mass media like newspapers and television is the interplay between creator and consumer. Online journalism is only now starting to tap into this potential by making articles <a href=\"http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/\">interactive</a> and <a href=\"http://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html?_r=0\">social</a>.</p>\n<div id=\"attachment_10479\" style=\"width: 790px\" class=\"wp-caption alignnone\"><a href=\"http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-10479\" src=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/whatiscode-1024x668.png\" alt=\"What is Code? by Paul Ford — Bloomberg\" width=\"780\" height=\"509\" class=\"size-large wp-image-10479\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/whatiscode-1024x668.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2015/07/whatiscode-300x196.png 300w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" /></a><p id=\"caption-attachment-10479\" class=\"wp-caption-text\">What is Code? by Paul Ford — Bloomberg</p></div>\n<h1>Snowball Effect</h1>\n<p>Unfortunately, most organizations don’t have the luxury of keeping world-class art departments and software development teams on staff. And most individuals, though they may have a story to tell, lack the technical skills required to craft these types of articles.</p>\n<p>This is where Snowball comes in.</p>\n<p>Although we’ve left plenty of headroom for people who know how to code or want to learn along the way, we’ve designed Snowball so that technical skills or a technical staff are not requirements. To make Snowball accessible to the beginner, we’ve adopted the following principles.</p>\n<h3>Chunking</h3>\n<p>Gone are the days where you can “View Source” on a webpage and make any sense of it. Likewise, it takes a lot more code nowadays just to start making something meaningful. No doubt one of the big leaps in the coming years will be <a href=\"http://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/\">componentization</a>, paving the way for web development at a higher level of abstraction.</p>\n<p>While we wait for the new standards to crystalize, we’ve taken our own approach in Snowball. First, we’ve decomposed modern web articles, identifying different chunks of content that are used to construct them. We’ve then given users a way to build up new articles using these content types, one block at a time. Snowball supports content ranging from pull quotes to interactive visualizations.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball1.gif\" alt=\"Blocks\" width=\"780\" height=\"273\" class=\"alignnone size-large wp-image-10531\"></p>\n<h3>Looping</h3>\n<p>A tight feedback loop encourages playful experimentation and learning, so we’ve equipped Snowball with a live preview feature, which is something WordPress doesn’t offer by default. Tinker with a value and you can immediately see the rendered results. Not only that, but within the code view, you can inspect changes in the underlying HTML and CSS.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball2.gif\" alt=\"Live Preview\" width=\"780\" height=\"273\" class=\"alignnone size-large wp-image-10532\"></p>\n<h3>Scaffolding</h3>\n<p>While the overall structure of each block is determined by its type, users still need to give it their own touch. Snowball provides different degrees of support depending on the user’s abilities and goals.</p>\n<p>Snowball offers a graphical interface that makes it easy to populate a block’s content and most pertinent styles. If you want to go beyond that, a code interface allows you to add your own tweaks with just a dash of CSS. And for the power users, an entirely custom block can be created with code.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2015/07/snowball3.gif\" alt=\"Code View\" width=\"780\" height=\"273\" class=\"alignnone size-large wp-image-10530\"></p>\n<h1>Trying It Out</h1>\n<p>We’ve started our rollout, presenting Snowball <a href=\"https://twitter.com/excitecenter/status/621768521266147328\">last week at the ExCITe Center’s T3 event</a>. With that said, Snowball is a research prototype at heart, and still a work in progress.</p>\n<p>Next month, we’ll be hosting workshops in Philadelphia, where anyone interested in Snowball, from journalists and bloggers to students, will be invited to try it out and give their feedback.</p>\n<p>In the fall, we plan to conduct more sustained pilot tests with partners, including news organizations and journalism courses.</p>\n<p>If you’re interested in participating in either the workshops or pilot tests, drop me an email. And for more details about Snowball, check out the <a href=\"http://snowball.openhtml.org/\">project site</a> or the <a href=\"https://github.com/thomaspark/snowball/\">GitHub repository</a>.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "Learning",
"term": "Learning",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=9486",
"title": "PubCSS: Formatting Academic Publications in HTML & CSS",
"description": "You have two choices when it comes to formatting academic papers for conferences and journals: Microsoft Word and LaTeX. Word is familiar and easy for anyone to pick up. But the WYSIWYG interface that makes … <a href=\"https://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/\">Read more</a>",
"url": "https://thomaspark.co/2015/01/pubcss-formatting-academic-publications-in-html-css/",
"published": "2015-01-21T12:25:52.000Z",
"updated": "2015-01-21T12:25:52.000Z",
"content": "<p>You have two choices when it comes to formatting academic papers for conferences and journals: Microsoft Word and LaTeX.</p>\n<p>Word is familiar and easy for anyone to pick up. But the WYSIWYG interface that makes it so easy also makes it easy to create inconsistent, amateur-looking documents that are tough to maintain and fine-tune. On top of this, you get a file format that isn’t friendly to revision control, diminishing collaboration through a system like GitHub.</p>\n<p>LaTeX is powerful and produces beautiful documents, but requires installing a hefty toolchain, learning a new syntax, and familiarizing yourself with its powerful abstractions. This is a <a href=\"http://www.johndcook.com/blog/2008/04/03/microsoft-word-and-latex/\">significant front-end investment</a>, one that <a href=\"http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0115069\">may not pay off</a>. In my experience, there’s usually at least one author who hasn’t made that investment, and so the team falls back to Word anyway. </p>\n<p><a href=\"https://github.com/thomaspark/pubcss/\">PubCSS</a> is an exploration of HTML and CSS as a third option. It’s a library of stylesheets and templates for formatting academic papers. Perhaps HTML and CSS can hit the sweet spot between the ease of Word and the efficiency LaTeX. Like LaTeX, HTML is a markup language, but one that a lot more people have experience with. CSS has proven its worth for styling fluid layouts, and with <a href=\"http://www.smashingmagazine.com/2015/01/07/designing-for-print-with-css/\">CSS3 modules</a> around the corner, things can only improve for print.</p>\n<h1>Output</h1>\n<p>So how’s PubCSS’s output look? Pretty darn good. Here’s a sample page for the ACM SIG proceedings. Note that most of the layout, typography, and numbering is handled by a single stylesheet.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/01/acm-sig-sample-latex.png\" alt=\"acm-sig-sample-latex\" width=\"1275\" height=\"1650\" class=\"aligncenter size-full wp-image-9545 border\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/01/acm-sig-sample-latex.png 1275w, https://thomaspark.co/wp/wp-content/uploads/2015/01/acm-sig-sample-latex-232x300.png 232w, https://thomaspark.co/wp/wp-content/uploads/2015/01/acm-sig-sample-latex-791x1024.png 791w\" sizes=\"auto, (max-width: 1275px) 100vw, 1275px\" /></p>\n<p>You can compare the actual PDF output for the following formats:</p>\n<ul>\n<li><a href=\"http://www.acm.org/sigs/publications/proceedings-templates\">ACM SIG Proceedings</a> vs. <a href=\"https://github.com/thomaspark/pubcss/blob/master/dist/acm-sig/templates/acm-sig-sample-latex.pdf\">PubCSS</a></li>\n<li><a href=\"http://www.sigchi.org/publications/chipubform\">ACM SIGCHI Proceedings</a> vs. <a href=\"https://github.com/thomaspark/pubcss/blob/master/dist/acm-sigchi/templates/acm-sigchi-sample.pdf\">PubCSS</a></li>\n<li><a href=\"http://www.sigchi.org/publications/chipubform\">ACM SIGCHI Extended Abstracts</a> vs. <a href=\"https://github.com/thomaspark/pubcss/blob/master/dist/acm-sigchi-ea/templates/acm-sigchi-ea-sample.pdf\">PubCSS</a></li>\n<li><a href=\"http://www.ieee.org/conferences_events/conferences/publishing/templates.html\">IEEE Conference Proceedings</a> vs. <a href=\"https://github.com/thomaspark/pubcss/blob/master/dist/ieee/templates/ieee-sample.pdf\">PubCSS</a></li>\n</ul>\n<p>A bonus of using HTML is that with a few lines of CSS targeting <code class=\"language-css\" inline=\"true\">@media screen</code>, you’ve got yourself a <a href=\"https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web.html\">web version</a> of the paper.</p>\n<p><a href=\"https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper1.png\" alt=\"Web Paper\" width=\"2422\" height=\"1834\" class=\"aligncenter size-full wp-image-9564\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper1.png 2422w, https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper1-300x227.png 300w, https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper1-1024x775.png 1024w\" sizes=\"auto, (max-width: 2422px) 100vw, 2422px\" /></a></p>\n<p>You can also add niceties like responsive design, reference tooltips, and image lightboxes to create an <a href=\"https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web-theme.html\">interactive web paper</a> that feels at home on the web.</p>\n<p><a href=\"https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web-theme.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper-theme1.png\" alt=\"Web Paper Theme\" width=\"2422\" height=\"1834\" class=\"aligncenter size-full wp-image-9565\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper-theme1.png 2422w, https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper-theme1-300x227.png 300w, https://thomaspark.co/wp/wp-content/uploads/2015/01/web-paper-theme1-1024x775.png 1024w\" sizes=\"auto, (max-width: 2422px) 100vw, 2422px\" /></a></p>\n<h1>Quick Start</h1>\n<p>Using PubCSS is simple:</p>\n<ol>\n<li>Create an HTML file, or modify one of the templates, to add your content</li>\n<li>Link your HTML to a <code inline=\"true\">pub.css</code> stylesheet</li>\n<li>Build a PDF from the HTML using Prince with the command<br /><code class=\"language-bash\" inline=\"true\">prince input.html output.pdf</code></li>\n</ol>\n<p>You can grab the templates and stylesheets from the <a href=\"https://github.com/thomaspark/pubcss/\">GitHub repo</a>. ACM and IEEE formats are available so far. The only dependency is <a href=\"http://www.princexml.com/\">Prince</a>, which is free for non-commercial use.</p>\n<h1>Documentation</h1>\n<p>OK, it’s not quite that simple. You still have to mark up your content. <a href=\"http://htmlpreview.github.io/?https://github.com/thomaspark/pubcss/blob/master/dist/acm-sig/templates/acm-sig-sample-word.html\">Here’s</a> what the markup for a typical paper looks like. The main components are outlined below.</p>\n<p>Sections are automatically numbered by PubCSS. Just follow this pattern.</p>\n<pre>\n<code class=\"language-markup\" lang=\"html\"><p>\n<h1>Section Header</h1>\n<section>\n <h2>Subsection Header</h2>\n <p>Lorem ipsum</p>\n</section>\n</p></code>\n</pre>\n<p>Figures and tables are similarly numbered if you include a caption.</p>\n<pre>\n<code class=\"language-markup\" lang=\"html\"><table>\n <tr><td>1</td><td>2<td></tr>\n <caption>Example Table</caption>\n</table>\n\n<figure>\n <img src=\"graph.png\">\n <figcaption>Example Figure</figcaption>\n</figure></code></pre>\n<p>References are also numbered. Don’t forget to assign them unique IDs.</p>\n<pre>\n<code class=\"language-markup\" lang=\"html\"><cite id=\"nicole\">Nicole. 2015. Title of paper. <em>Journal</em>, 4(3), 1-10.</cite></code>\n</pre>\n<p>Citations to the references make use of these IDs.</p>\n<pre>\n<code class=\"language-markup\" lang=\"html\"><a href=\"#nicole\"></a></code>\n</pre>\n<p>Sections, tables, and figures can also be referenced by adding a class.</p>\n<pre>\n<code class=\"language-markup\" lang=\"html\"><a href=\"#intro\" class=\"section\"></a>\n<a href=\"#example-table\" class=\"table\"></a>\n<a href=\"#example-figure\" class=\"figure\"></a></code>\n</pre>\n<p>Equations are also numbered. MathML is well-supported by Prince. For the web, you’ll need <a href=\"http://www.mathjax.org/\">MathJax</a> to render MathML properly in Chrome and Internet Explorer.</p>\n<pre>\n<code class=\"language-markup\" lang=\"html\"><div class=\"equation\">\n <math xmlns=\"http://www.w3.org/1998/Math/MathML\">\n <mi>E</mi>\n <mo>=</mo>\n <mi>m</mi>\n <msup>\n <mi>c</mi>\n <mn>2</mn>\n </msup>\n </math>\n</div></code>\n</pre>\n<p>Footnotes are made within the body text, and are automatically moved to the bottom of the current page.</p>\n<pre>\n<code class=\"language-markup\" lang=\"html\"><p>This is text.<span class=\"footnote\">And this is a footnote.</span></p></code>\n</pre>\n<p>Smart quotes can be used in lieu of straight quotes by enclosing the text like so. You can nest quotes within quotes.</p>\n<pre>\n<code class=\"language-markup\" lang=\"html\"><q>To be or not be.</q></code>\n</pre>\n<p>Utility classes are also available to modify layout and counter behavior.</p>\n<ul>\n<li><code class=\"language-css\" inline=\"true\">col-2</code> divide the element into 2 columns</li>\n<li><code class=\"language-css\" inline=\"true\">col-3</code> divide the element into 3 columns</li>\n<li><code class=\"language-css\" inline=\"true\">col-4</code> divide the element into 4 columns</li>\n<li><code class=\"language-css\" inline=\"true\">col-span</code> span all of the columns of parent</li>\n<li><code class=\"language-css\" inline=\"true\">col-break-before</code> force column break before element</li>\n<li><code class=\"language-css\" inline=\"true\">col-break-after</code> force column break after element</li>\n<li><code class=\"language-css\" inline=\"true\">page-break-before</code> force page break before element</li>\n<li><code class=\"language-css\" inline=\"true\">page-break-after</code> force page break after element</li>\n<li><code class=\"language-css\" inline=\"true\">counter-skip</code> do not count this header</li>\n<li><code class=\"language-css\" inline=\"true\">counter-reset</code> reset counter to 0</li>\n</ul>\n<p>For customization, one of the major advantages of PubCSS is that you can use CSS. All of the usual rules apply.</p>\n<p>The architecture of PubCSS is similar to <a href=\"http://bootswatch.com\">Bootswatch</a> — a set of LESS files used to generate CSS for the current themes and to bootstrap new ones. If you want to make more extensive changes, or create a new theme, you’ll want to dig into the LESS source. The most common changes can be made through <code inline=\"true\">variables.less</code>, such as toggling page numbers and setting counter styles.</p>\n<h1>Notes</h1>\n<p>PubCSS is meant to be proof-of-concept, a demonstration of HTML and CSS as viable alternative for formatting academic papers. Note that these templates are not officially sanctioned by ACM or IEEE. Unless a venue requires only the PDF output, they’ll also be expecting the source in the form of LaTeX files or a Word document.</p>\n<p>Among the limitations of PubCSS are that citations in APA or MLA style (Park, 2015) are possible but clumsier than their counterpart [1]. You also lose the magic of BibTeX for reference management, though on the bright side, all of your content is localized to a single file. Finally, when debugging PDF output, you really come to miss the developer tools available in web browsers today.</p>\n<p>For the <a href=\"https://thomaspark.co/projects/pubcss/demo/acm-sig-sample-web-theme.html\">interactive web paper</a>, I used JavaScript and hard-coded HTML to achieve many of the interactive effects. But once browsers start supporting CSS3 properties like <code inline=\"true\">target-counter</code> and <code inline=\"true\">target-content</code>, as Prince already does, it’ll be possible to implement most of these effects with only CSS — that is, outputting both print and fully interactive web versions with a single pub.css file. How cool.</p>\n<p>Finally, get in touch if you have a request for another publication format. I’d love to hear from you if you’re interested in using PubCSS.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=9265",
"title": "Graduated Experiences in Golf and Programming",
"description": "A recent post about efforts to counter the declining popularity of golf got me thinking. I’m a pretty terrible golfer, but still have fond memories of playing with friends and family over the years, and … <a href=\"https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/\">Read more</a>",
"url": "https://thomaspark.co/2014/04/graduated-experiences-in-golf-and-programming/",
"published": "2014-04-23T12:27:39.000Z",
"updated": "2014-04-23T12:27:39.000Z",
"content": "<p>A recent post <a href=\"http://www.marco.org/2014/04/21/golf\">about efforts to counter the declining popularity of golf</a> got me thinking. I’m a pretty terrible golfer, but still have fond memories of playing with friends and family over the years, and do my best to make a couple of rounds each summer. The reason I started playing wasn’t my father, who admittedly is an avid golfer, or stars like Tiger Woods on TV every Sunday. The single greatest influence was a place just a few miles from where I grew up called Woody’s.</p>\n<p><a href=\"http://www.philly.com/philly/sports/golf/course_guide/Wood_s_Golf_Center.html\">Woody’s</a> was a golf complex with a driving range, two mini-putt courses, a 9-hole chip & putt course, and an 18-hole par-3 course. Many summer nights were spent with friends on the driving range, the mini-putt courses, or simply hanging out. Woody’s offered three things that made it a great introduction to golf: an accessible environment, beginner-friendly equipment, and graduated experiences.</p>\n<p>Woody’s made golf accessible. It was nearby, cheap, and had a welcoming atmosphere. Rather than sitting at the end of a winding, cloistered driveway, the facility and parking lot stretched along a busy highway. People of all ages and backgrounds could be seen there on any given day, from those practicing drills on the driving range or putting green, to others whiffing on swings and generally making fools of themselves. There was an air of playfulness to this prim sport.</p>\n<p>A big factor in Woody’s accessibility was that you didn’t need to invest time researching and money purchasing your own equipment. Woody’s provided putters, a rack of old clubs to experiment with on the driving range, a pitching wedge and putter combo for chip & putt, and full sets to rent for the par-3 course. And whether you decided to borrow clubs or bring your own, there was no stigma. Well, you might have gotten some looks bringing your own putter to mini-putt, although <a href=\"http://grantland.com/the-triangle/putt-putt-perfection/\">apparently it’s not unheard of</a>.</p>\n<p>Most important of all, there were graduated experiences. Individually, none of the courses at Woody’s were the best. There were mini-putt courses with far fancier animatronics and better-groomed 18-hole courses for sure. But Woody’s offered proximity between these different activities. The sum was greater than the parts. Each activity was a complete, self-contained experience, but you were exposed to them all and could easily transition from one to another requiring more skill. When you started outgrowing the chip & putt course, you’d be tempted to try the par-3 course.</p>\n<p>Time spent at Woody’s wasn’t as highly focused and organized as it would be through golf lessons, yet its impacts were long-lasting. For me and most people who spent time at Woody’s, we didn’t start by identifying ourselves as golfers. The goal and reality was never to become a professional on the PGA tour. But we were rewarded with developed skills, rich experiences, and an affection for the sport, whether we winded up as spectating fans, casual hobbyists, or the obsessed.</p>\n<p>A few years ago, <a href=\"http://fanadelphia.com/woodys-golf-center-the-end-of-an-era/\">Woody’s was closed</a> to make way for a hospital. My hometown still boasts many 18-hole golf courses where khakied and cleated men make the rounds, and driving ranges (often accompanied by batting cages—another narrow slice of a sport) where boisterous children play. But where Woody’s once provided intermediate activities that acted as pathways to “real” golf, there is now a chasm. Hard to imagine anyone but the most determined and resourced making it from the driving range to the clubhouse.</p>\n<h2>What’s This Got To Do With Programming?</h2>\n<p>To me, concerns about the declining popularity of golf parallel those about getting people involved in programming. Golf and programming share many criticisms, from being the domain of a privileged few to requiring a steep learning curve to start, let alone enjoy. This leads me to wonder about the Woody’s of programming.</p>\n<p>Like Woody’s accessible atmosphere, there are initiatives like <a href=\"https://webmaker.org/\">Mozilla Webmaker</a> that create a welcoming environment for learning to code and free online courses like <a href=\"http://www.codecademy.com/\">Codecademy</a> that target beginners. And like the putters, pitching wedges, and basic golf club sets you could borrow at Woody’s, there are free and easy-to-use tools like <a href=\"http://thimble.webmaker.org\">Thimble</a> and <a href=\"http://openhtml.org\">openHTML</a> suitable for beginners.</p>\n<p>But I’m not sure where the graduated experiences are. Technology can be explicitly designed to support this, as in the case of <a href=\"https://wiki.mozilla.org/Webmaker/Concept-Nimble\">Nimble</a>. But missing is the social component, akin to what sociologists Lave and Wenger refer to as <a href=\"https://en.wikipedia.org/wiki/Legitimate_peripheral_participation\">legitimate peripheral participation</a>.</p>\n<p>You might argue that the web as a whole serves this function. But that’s about as true as the roads helping kids get from the driving range to the country club. Open source projects can also provide these experiences. Doubtless there are many examples of contributors who have gone from fixing typos in the readme to the core team. But if you’re spending time on GitHub, the battle’s already been won. Perhaps ultra-inclusive hackerspaces would be a start.</p>\n<p>Where are these communities where programmers of different levels of expertise, from the most novice of novices and casual of casuals, can have complete and meaningful experiences, yet still play and work in proximity with, observe, and learn from one another? Where are the pathways from the driving range <a href=\"http://www.amazon.com/Unlocking-Clubhouse-Computing-Jane-Margolis/dp/0262632691\">to the clubhouse</a>?</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Learning",
"term": "Learning",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=9649",
"title": "TF2 Collective",
"description": "In Team Fortress 2, there are nine playable classes with unique personalities and complementary abilities: pyro, engineer, spy, heavy, sniper, scout, soldier, demo, and medic. When referring to several scouts, or pyros, or heavies, it’d … <a href=\"https://thomaspark.co/2014/02/tf2-collective/\">Read more</a>",
"url": "https://thomaspark.co/2014/02/tf2-collective/",
"published": "2014-02-27T18:32:20.000Z",
"updated": "2014-02-27T18:32:20.000Z",
"content": "<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/02/classes.jpg\" alt=\"TF2 Classes\" width=\"1200\" height=\"675\" class=\"aligncenter size-full wp-image-9769\" /></p>\n<p>In Team Fortress 2, there are <a href=\"https://wiki.teamfortress.com/wiki/Classes\">nine playable classes</a> with unique personalities and complementary abilities: pyro, engineer, spy, heavy, sniper, scout, soldier, demo, and medic.</p>\n<p>When referring to several scouts, or pyros, or heavies, it’d be perfectly adequate to refer to each as a “group” or “bunch”. But given TF2’s whimsical style, why not adopt creative language like the <a href=\"http://www.thealmightyguru.com/Pointless/AnimalGroups.html\">terms of venery used for animals</a>? A pod of dolphins, a murder of crows, a zeal of zebras, a wisdom of wombats…</p>\n<p>To decide on the term that best evokes each class, I polled the TF2 community, like I <a href=\"http://thomaspark.co/2011/05/starcraft-collective/\">had previously done for Starcraft</a>. For each class, I presented five choices and the option to write-in your own. A final question asked respondents to give their primary class. You can view the survey <a href=\"https://docs.google.com/forms/d/1ZHnoLykTP7ZCnk_jCW2j90_NYtZ80JDzDeObVwLY7aY/viewform?usp=send_form\">here</a>.</p>\n<p>Here are the results, based on 404 responses:</p>\n<p><a href=\"#scout\">Swarm of Scouts</a><br />\n<a href=\"#soldier\">Squad of Soldiers</a><br />\n<a href=\"#pyro\">Pack of Pyros</a><br />\n<a href=\"#demo\">Spam of Demos</a><br />\n<a href=\"#heavy\">Horde of Heavies</a><br />\n<a href=\"#engineer\">Nest of Engineers</a><br />\n<a href=\"#medic\">Mob of Medics</a><br />\n<a href=\"#sniper\">Surplus of Snipers</a><br />\n<a href=\"#spy\">Murder of Spies</a></p>\n<p>Read on for the full details.</p>\n<h2 id=\"scout\">Swarm of Scouts</h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/02/scouts.jpg\" alt=\"Scouts\" width=\"1200\" height=\"675\" class=\"aligncenter size-full wp-image-9712\" /></p>\n<p>Scouts can certainly feel like a swarm of irritating gnats. I propose the alternate “flock” be used for soda-popper scouts.</p>\n<p><span class=\"option\">Swarm</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 32%;\">32%</span></span><br />\n<span class=\"option\">Scatter</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 21%;\">21%</span></span><br />\n<span class=\"option\">Flock</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 19%;\">19%</span></span><br />\n<span class=\"option\">Rush</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 13%;\">13%</span></span><br />\n<span class=\"option\">Bonk</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 9%;\">9%</span></span></p>\n<p>Write-Ins:<br />\nScoot, Squad</p>\n<p>Scouts call themselves:<br />\nSwarm</p>\n<h2 id=\"soldier\">Squad of Soldiers</h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/02/soldiers.jpg\" alt=\"Soldiers\" width=\"1200\" height=\"674\" class=\"aligncenter size-full wp-image-9714\" /></p>\n<p>For soldiers, “squad” was the winner among the militaristic options. As write-ins, “flight” and “pocketful” were best at capturing the styles of gameplay soldiers are known for.</p>\n<p><span class=\"option\">Squad</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 46%;\">46%</span></span><br />\n<span class=\"option\">Battalion</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 32%;\">32%</span></span><br />\n<span class=\"option\">Spam</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 8%;\">8%</span></span><br />\n<span class=\"option\">Stock</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 5%;\">5%</span></span><br />\n<span class=\"option\">Service</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 3%;\">3%</span></span></p>\n<p>Write-Ins:<br />\nFlight, Pocketful, Platoon, Barrage, ‘Merica</p>\n<p>Soldiers call themselves:<br />\nSquad</p>\n<h2 id=\"pyro\">Pack of Pyros</h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/02/pyros.jpg\" alt=\"Pyros\" width=\"1200\" height=\"675\" class=\"aligncenter size-full wp-image-9711\" /></p>\n<p>All five options for Pyro were popular, but “pack” was the frontrunner. There were plenty of write-ins as well. One of these was “patrol”, which works well to describe pybros who dutifully spycheck.</p>\n<p><span class=\"option\">Pack</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 32%;\">32%</span></span><br />\n<span class=\"option\">Plague</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 17%;\">17%</span></span><br />\n<span class=\"option\">Huddle</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 15%;\">15%</span></span><br />\n<span class=\"option\">Phlog</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 13%;\">13%</span></span><br />\n<span class=\"option\">Conflagration</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 12%;\">12%</span></span></p>\n<p>Write-Ins:<br />\nPatrol, Hudda, Mmmph, Kindling, Inferno, Infestation, Blaze, Backdraft</p>\n<p>Pyros call themselves:<br />\nPack</p>\n<h2 id=\"demo\">Spam of Demos</h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/02/demos.jpg\" alt=\"Demos\" width=\"1200\" height=\"675\" class=\"aligncenter size-full wp-image-9707\" /></p>\n<p>For demos, “spam” edged out the other choices. Demos mains saw it differently however, preferring the more neutral “drove”. Most of the write-ins made reference to the demo’s predilection for scrumpy. Like “keg”, which nicely doubles as a reference to explosive gunpowder. Another write-in, “charge”, is fitting for the demoknights headed your way.</p>\n<p><span class=\"option\">Spam</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 42%;\">42%</span></span><br />\n<span class=\"option\">Drove</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 34%;\">34%</span></span><br />\n<span class=\"option\">Kaboom</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 5%;\">5%</span></span><br />\n<span class=\"option\">Detonation</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 3%;\">3%</span></span><br />\n<span class=\"option\">Domination</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 2%;\">2%</span></span></p>\n<p>Write-Ins:<br />\nCharge, Demonstration, Keg, Drunk, Flask, Patch</p>\n<p>Demos call themselves:<br />\nDrove</p>\n<h2 id=\"heavy\">Horde of Heavies</h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/02/heavies.jpg\" alt=\"Heavies\" width=\"1200\" height=\"675\" class=\"aligncenter size-full wp-image-9709\" /></p>\n<p>For heavies, it was neck-and-neck between “horde” and “herd”, with “horde” on top by just 1 vote. Among the slow-moving, sandvich-munching heavy themselves, “herd” was more popular, proving that heavies have the best sense of humor. “Bevy” was an inspired write-in, and frankly should have been one of the original options on the survey.</p>\n<p><span class=\"option\">Horde</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 30%;\">30%</span></span><br />\n<span class=\"option\">Herd</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 30%;\">30%</span></span><br />\n<span class=\"option\">Mass</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 19%;\">19%</span></span><br />\n<span class=\"option\">Hulk</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 7%;\">7%</span></span><br />\n<span class=\"option\">Heap</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 6%;\">6%</span></span></p>\n<p>Write-Ins:<br />\nBevy, Pootis, Stampede, Pile, Huddle, Bulk, Bulge, Blob</p>\n<p>Heavies call themselves:<br />\nHerd</p>\n<h2 id=\"engineer\">Nest of Engineers</h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/02/engies.jpg\" alt=\"Engies\" width=\"1200\" height=\"675\" class=\"aligncenter size-full wp-image-9708\" /></p>\n<p>For engineers, “nest” was a predictable outcome, since it already exists in the TF2 lexicon. It’s fitting all the same given that “nest” is also the collective noun for the turtle.</p>\n<p><span class=\"option\">Nest</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 47%;\">47%</span></span><br />\n<span class=\"option\">Hive</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 19%;\">19%</span></span><br />\n<span class=\"option\">Crew</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 14%;\">14%</span></span><br />\n<span class=\"option\">Rodeo</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 7%;\">7%</span></span><br />\n<span class=\"option\">Wrangle</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 6%;\">6%</span></span></p>\n<p>Write-Ins:<br />\nHub, Network, Shed, Crib, Camp, Turtle, Mess</p>\n<p>Engineers call themselves:<br />\nNest</p>\n<h2 id=\"medic\">Mob of Medics</h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/02/medics.jpg\" alt=\"Medics\" width=\"1200\" height=\"675\" class=\"aligncenter size-full wp-image-9710\" /></p>\n<p>For medics, “mob” was the runaway choice, though you’re unlikely to ever actually see one in the wild. Most of the write-ins played off the idea of medicine, though several also made bird-like references due to the plague masks they sometimes wear.</p>\n<p><span class=\"option\">Mob</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 42%;\">42%</span></span><br />\n<span class=\"option\">Quack</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 15%;\">15%</span></span><br />\n<span class=\"option\">Prescription</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 9%;\">9%</span></span><br />\n<span class=\"option\">Mirage</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 8%;\">8%</span></span><br />\n<span class=\"option\">Mend</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 6%;\">6%</span></span></p>\n<p>Write-Ins:<br />\nDose, Ward, Triage, Chain, Uber, Practice, Flock, Gaggle, Crusade, Paradox</p>\n<p>Medics call themselves:<br />\nMob</p>\n<h2 id=\"sniper\">Surplus of Snipers</h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/02/snipers.jpg\" alt=\"Snipers\" width=\"1200\" height=\"675\" class=\"aligncenter size-full wp-image-9713\" /></p>\n<p>For snipers, “surplus” was the clear winner. On any given server, you’re more likely to see an excess of snipers than any other class, and plenty of people expressed their displeasure at this fact. Based on their votes, even sniper mains themselves recognized it.</p>\n<p><span class=\"option\">Surplus</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 46%;\">46%</span></span><br />\n<span class=\"option\">Score</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 13%;\">13%</span></span><br />\n<span class=\"option\">Society</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 12%;\">12%</span></span><br />\n<span class=\"option\">Shelter</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 5%;\">5%</span></span><br />\n<span class=\"option\">Snivel</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 4%;\">4%</span></span></p>\n<p>Write-Ins:<br />\nScope, Firing Squad, Battlement, Stand, Stakeout, Camper Van, Salvage, Teamful, Deadweight</p>\n<p>Snipers call themselves:<br />\nSurplus</p>\n<h2 id=\"spy\">Murder of Spies</h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2015/02/spies.jpg\" alt=\"Spies\" width=\"1200\" height=\"675\" class=\"aligncenter size-full wp-image-9715\" /></p>\n<p>For spies, “murder” was most popular, though spy mains prefer to call themselves a “syndicate”. Several write-ins deserve honorable mention, particularly “society”, “conspiracy”, “cloak”, and “spook”. A murder of spies is always a nightmare, for both teams. </p>\n<p><span class=\"option\">Murder</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 33%;\">33%</span></span><br />\n<span class=\"option\">Syndicate</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 27%;\">27%</span></span><br />\n<span class=\"option\">Sneak</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 11%;\">11%</span></span><br />\n<span class=\"option\">Slaughter</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 8%;\">8%</span></span><br />\n<span class=\"option\">Mischief</span><span class=\"progress\"><span class=\"progress-bar\" style=\"width: 5%;\">5%</span></span></p>\n<p>Write-Ins:<br />\nSpook, Society, Conspiracy, Cloak, Shpee, Shadow, Smorgasborg, Shit-Ton</p>\n<p>Spies call themselves:<br />\nSyndicate</p>\n<h3>Credits</h3>\n<p>My thanks to <a href=\"http://steamcommunity.com/profiles/76561198085628990\">sting.</a> for providing the artwork.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Games",
"term": "Games",
"url": null
},
{
"label": "Language",
"term": "Language",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=9197",
"title": "3 Simple Design Bookmarklets to Improve Your Aesthetics",
"description": "In math, you’re sometimes so focused on getting the calculations right that you end up with nonsensical answers without realizing it. In web design there’s a similar phenomenon, where you’re so intent on pixel perfection … <a href=\"https://thomaspark.co/2013/11/3-simple-design-bookmarklets-to-improve-your-aesthetics/\">Read more</a>",
"url": "https://thomaspark.co/2013/11/3-simple-design-bookmarklets-to-improve-your-aesthetics/",
"published": "2013-11-11T11:54:44.000Z",
"updated": "2013-11-11T11:54:44.000Z",
"content": "<p>In math, you’re sometimes so focused on getting the calculations right that you end up with nonsensical answers without realizing it. In web design there’s a similar phenomenon, where you’re so intent on pixel perfection that you lose sight of the bigger picture.</p>\n<p>This is where Nick Pettit’s <a href=\"http://blog.teamtreehouse.com/3-simple-design-tests-to-improve-your-aesthetics\" target=\"_blank\" rel=\"noopener noreferrer\">three “design tests”</a> come in — simple aesthetic exercises that serve as sanity checks for your website’s design. In the post, he suggests opening up a screenshot of your website in Photoshop, and applying the following filters:</p>\n<ul>\n<li><strong>Grayscale</strong> to gauge contrast between light and dark, rather than by colors</li>\n<li><strong>Blurry</strong> to examine the composition of colors</li>\n<li><strong>Upside-down</strong> to get a fresh perspective on composition and balance</li>\n</ul>\n<p>Fortunately, with CSS3 properties like <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/filter\" target=\"_blank\" rel=\"noopener noreferrer\">filter</a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/transform\" target=\"_blank\" rel=\"noopener noreferrer\">transform</a>, Photoshop is not required. All it takes are these simple bookmarklets to run the design tests right in your browser.</p>\n<h3>Gray Effect</h3>\n<pre>\n<code class=\"language-javascript\" lang=\"js\">\njavascript:(function(){\n document.body.setAttribute('style',\n 'filter:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale\");\n -webkit-filter:grayscale(1);\n filter:grayscale(1);'\n );\n})();\n</code>\n</pre>\n<h3>Blur Effect</h3>\n<pre>\n<code class=\"language-javascript\" lang=\"js\">\njavascript:(function(){\n document.body.setAttribute('style',\n 'filter:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='10' /></filter></svg>#blur\");\n -webkit-filter:blur(10px);\n filter:blur(10px);'\n );\n})();\n</code>\n</pre>\n<h3>Flip Effect</h3>\n<pre>\n<code class=\"language-javascript\" lang=\"js\">\njavascript:(function(){\n document.body.setAttribute('style',\n '-webkit-transform:rotate(180deg);\n -moz-transform:rotate(180deg);\n transform:rotate(180deg);'\n );\n})();\n</code>\n</pre>\n<h3>The Bookmarklets</h3>\n<p>Do these design tests make a difference? Judge for yourself by following the link below.</p>\n<div class=\"center\">\n<a class=\"standard-btn red-btn xlarge-btn\" href=\"https://thomaspark.co/projects/designbookmarklets/\"><span>Demo</span></a>\n</div>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=9066",
"title": "GlyphSearch: Improving the Search for Icon Fonts",
"description": "Right now we’re blessed with many, well, awesome icon fonts that continue to grow with every release, like Font Awesome, Glyphicons, and Ionicons. And game-changers like Iconic might be just around the bend. But searching … <a href=\"https://thomaspark.co/2013/11/glyphsearch-improving-the-search-for-icon-fonts/\">Read more</a>",
"url": "https://thomaspark.co/2013/11/glyphsearch-improving-the-search-for-icon-fonts/",
"published": "2013-11-05T14:52:47.000Z",
"updated": "2013-11-05T14:52:47.000Z",
"content": "<p>Right now we’re blessed with many, well, awesome icon fonts that continue to grow with every release, like <a href=\"http://fontawesome.io/\">Font Awesome</a>, <a href=\"http://glyphicons.com/\">Glyphicons</a>, and <a href=\"http://ionicons.com/\">Ionicons</a>. And game-changers like <a href=\"http://useiconic.com/\">Iconic</a> might be just around the bend. But searching through this abundance of icons one by one often leads me to tedium and eye strain.</p>\n<p>Sure, I can use the browser’s find function or the in-page search filter to search a library. But unless I match the class name exactly, it won’t be found. This is a problem <a href=\"http://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/\">I’ve talked about before</a>, and one that Font Awesome takes some steps to address by aliasing icon names. But then I compare multiple libraries, deliberating on which to use based on coverage and design, and this problem multiplies.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/11/speedometers.png\" alt=\"Speedometers\" width=\"800\" height=\"200\" class=\"aligncenter size-full wp-image-9080\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/11/speedometers.png 800w, https://thomaspark.co/wp/wp-content/uploads/2013/11/speedometers-300x75.png 300w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>To scratch this itch of mine, this past weekend I created <a href=\"http://glyphsearch.com/\">GlyphSearch</a>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-1600x1081.png\" alt=\"GlyphSearch\" width=\"800\" height=\"541\" class=\"aligncenter size-large wp-image-13713\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-1600x1081.png 1600w, https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-800x540.png 800w, https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-768x519.png 768w, https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-1536x1037.png 1536w, https://thomaspark.co/wp/wp-content/uploads/2013/11/glyphsearch-2048x1383.png 2048w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>It allows you to search Font Awesome, Glyphicons, and Ionicons simultaneously, and icons have been tagged with additional terms, meaning for example that all three of the icons above should be found regardless of whether you query for “tachometer”, “dashboard”, or “speedometer”. You can also click an icon to quickly copy the class name to your clipboard.</p>\n<div class=\"center\">\n<a class=\"standard-btn red-btn xlarge-btn\" href=\"http://glyphsearch.com\"><span>GlyphSearch</span></a>\n</div>\n<p>GlyphSearch is about as minimal a tool as I could make for this, but it gets the job done for me, and hopefully you agree. I was tempted to add settings like font size and color but resisted; if there’s any demand, let me know.</p>\n<h3>Notes</h3>\n<p>Besides the icon font libraries themselves, I use <a href=\"http://www.algolia.com/\">Algolia</a> for search and <a href=\"http://bootswatch.com/flatly/\">Flatly</a> for styles. The project is hosted on <a href=\"https://github.com/thomaspark/glyphsearch\">GitHub</a>.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "User Interface",
"term": "User Interface",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=8906",
"title": "Weaving Tutorials into Mozilla Thimble",
"description": "I’m headed to Mozilla Festival this week, after spending the summer working for Mozilla Webmaker. Everything at Webmaker is a team effort, so I helped out on a number of projects and had a blast … <a href=\"https://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/\">Read more</a>",
"url": "https://thomaspark.co/2013/10/weaving-tutorials-into-mozilla-thimble/",
"published": "2013-10-22T14:56:52.000Z",
"updated": "2013-10-22T14:56:52.000Z",
"content": "<p>I’m headed to <a href=\"http://mozillafestival.org/\">Mozilla Festival</a> this week, after spending the summer working for <a href=\"https://webmaker.org/\">Mozilla Webmaker</a>. Everything at Webmaker is a team effort, so I helped out on a number of projects and had a blast doing it. But I wanted to document my main effort — adding a tutorial feature to Thimble — from design to research to implementation.</p>\n<h2>Designing Tutorials</h2>\n<p><a href=\"https://thimble.webmaker.org/\">Thimble</a> is a web-based editor that makes it dead simple to create and publish web pages. It’s often used to teach web development to beginners, with educators relying on HTML comments to provide inline explanations of the code. This summer, our goal was to give Thimble explicit support for this kind of instruction.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/10/thimble.png\" alt=\"Thimble\" width=\"1412\" height=\"975\" class=\"aligncenter size-full wp-image-8958\" /></p>\n<p>I started out the process by sketching mockups of potential designs with pen and paper. While I already had a sense of what direction I wanted to take it, this was colored mostly by unsupported assumptions and personal preferences. So instead I took a breadth-first approach, exploring many different designs and making use of user testing.</p>\n<p>Eventually, I settled on five designs. Some, like Sidebar and Drawer, are already commonplace in coding environments. Others, like Expander, have more distant inspirations like Google Images and iTunes. I then turned these into functional prototypes. Some smoke and mirrors may have been involved.</p>\n<p>You can hover over a mockup below to see how the eventual prototype turned out, and click to try it out for yourself.</p>\n<div class=\"two-columns-one\">\n<h3 style=\"margin: 1em 0 0; text-align: center;\">Palette</h3>\n<div class=\"crossfade\">\n<img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/09/palette-prototype.jpg\" alt=\"Palette Prototype\" width=\"1314\" height=\"982\" class=\"aligncenter size-full wp-image-8882\" /><br />\n<a href=\"http://polar-tor-6216.herokuapp.com/examples/palette.html\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/09/palette-mockup.jpg\" alt=\"Palette Mockup\" width=\"1314\" height=\"982\" class=\"aligncenter size-full wp-image-8881 top\" /></a>\n</div>\n</div>\n<div class=\"two-columns-one last\">\n<h3 style=\"margin: 1em 0 0; text-align: center;\">Sidebar</h3>\n<div class=\"crossfade\">\n<img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/09/sidebar-prototype.jpg\" alt=\"Sidebar Prototype\" width=\"388\" height=\"290\" class=\"aligncenter size-full wp-image-8886\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/09/sidebar-prototype.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/sidebar-prototype-300x224.jpg 300w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" /><br />\n<a href=\"http://polar-tor-6216.herokuapp.com/examples/sidebar.html\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/09/sidebar-mockup.jpg\" alt=\"Sidebar Mockup\" width=\"388\" height=\"290\" class=\"aligncenter size-full wp-image-8885 top\" /></a>\n</div>\n</div>\n<div class=\"two-columns-one\">\n<h3 style=\"margin: 1em 0 0; text-align: center;\">Drawer</h3>\n<div class=\"crossfade\">\n<img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/09/drawer-prototype.jpg\" alt=\"Drawer Prototype\" width=\"388\" height=\"290\" class=\"aligncenter size-full wp-image-8880\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/09/drawer-prototype.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/drawer-prototype-300x224.jpg 300w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" /><br />\n<a href=\"http://polar-tor-6216.herokuapp.com/examples/drawer.html\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/09/drawer-mockup.jpg\" alt=\"Drawer Mockup\" width=\"388\" height=\"290\" class=\"aligncenter size-full wp-image-8879 top\" /></a>\n</div>\n</div>\n<div class=\"two-columns-one last\">\n<h3 style=\"margin: 1em 0 0; text-align: center;\">Popover</h3>\n<div class=\"crossfade\">\n<img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/09/popover-prototype.jpg\" alt=\"Popover Prototype\" width=\"388\" height=\"290\" class=\"aligncenter size-full wp-image-8884\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/09/popover-prototype.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/popover-prototype-300x224.jpg 300w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" /><br />\n<a href=\"http://polar-tor-6216.herokuapp.com/examples/popover.html\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/09/popover-mockup.jpg\" alt=\"Popover Mockup\" width=\"388\" height=\"290\" class=\"aligncenter size-full wp-image-8883 top\" /></a>\n</div>\n</div>\n<div class=\"two-columns-one\">\n<h3 style=\"margin: 1em 0 0; text-align: center;\">Expander</h3>\n<div class=\"crossfade\">\n<img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/09/expander-prototype.jpg\" alt=\"Expander Prototype\" width=\"388\" height=\"290\" class=\"size-full wp-image-8862\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/09/expander-prototype.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/expander-prototype-300x224.jpg 300w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" /><br />\n<a href=\"http://polar-tor-6216.herokuapp.com/examples/expander.html\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/09/expander-mockup.jpg\" alt=\"Expander Mockup\" width=\"388\" height=\"290\" class=\"size-full wp-image-8864 top\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/09/expander-mockup.jpg 388w, https://thomaspark.co/wp/wp-content/uploads/2013/09/expander-mockup-300x224.jpg 300w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" /></a>\n</div>\n</div>\n<div class=\"divider\"></div>\n<h2>Getting User Feedback</h2>\n<p>Next, I wanted to learn about users’ perceptions of the designs. To get as many people trying out the prototypes as possible, we ran an online survey. Respondents completed basic tasks using all five of the prototypes, as well as the HTML comments version as a baseline, in randomized order. They then rated them and answered a few brief questions.</p>\n<p>92 responses were accepted, from 12 females and 80 males. Respondents averaged 25 years of age, ranging from 16 to 52, and representing 16 different countries.</p>\n<p>The graph below shows the average ranking given for each design on a scale of 1 to 5. As you can see, Sidebar was most preferred, followed by the similarly conventional Drawer.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsoverall.png\" alt=\"Ratings Overall\" width=\"800\" height=\"500\" class=\"aligncenter size-full wp-image-9041\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsoverall.png 800w, https://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsoverall-300x188.png 300w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<p>Breaking down responses by 17 novices versus 75 experienced coders of HTML, the trends hold for the most part. But Expander is a notable exception, its highly guided interface far more popular with beginners than experts. I should also note that Expander was the most complex design, and its prototype the most rough-around-the-edges, leaving plenty of room for improvement.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsbyexperience.png\" alt=\"Ratings by Experience\" width=\"800\" height=\"500\" class=\"aligncenter size-full wp-image-9040\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsbyexperience.png 800w, https://thomaspark.co/wp/wp-content/uploads/2013/10/ratingsbyexperience-300x188.png 300w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" /></p>\n<h2>Implementing Tutorials</h2>\n<p>Based on these results, we built the Sidebar design. (For the record, my hunch at the outset was to go with Drawer.)</p>\n<p>Basic functionality includes displaying the tutorial in a pane, toggling it into and out of view, toggling between two sizes, and switching between tutorials if multiple ones are associated with a document. You can see the results below. </p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/10/thimbletutorials.png\" alt=\"Thimble Tutorials\" width=\"1456\" height=\"975\" class=\"aligncenter size-full wp-image-8975\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/10/thimbletutorials.png 1456w, https://thomaspark.co/wp/wp-content/uploads/2013/10/thimbletutorials-300x201.png 300w, https://thomaspark.co/wp/wp-content/uploads/2013/10/thimbletutorials-1024x686.png 1024w\" sizes=\"auto, (max-width: 1456px) 100vw, 1456px\" /></p>\n<p>I also created options to automatically paginate a tutorial and enable a feature dubbed smartlines, which detects line references in the tutorial, turns them into links that highlight the relevant line of code on hover and smooth-scroll to it on click, and updates their line number as the code is edited. The resize button, smooth-scrolling, and moving the tutorial navigation from bottom to top are all a direct result of feedback given in the survey.</p>\n<p>One interesting issue in implementing interactive behaviors across tutorial and code editor is that tutorials are displayed in a cross-domain iframe, even when that tutorial is another Thimble make. To overcome this, the tutorials must include a script that communicates with the editor via <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage\">postMessage</a>.</p>\n<p>To implement all this, I had to learn the ropes in many systems, including <a href=\"https://github.com/mozilla/webmaker-suite\">Webmaker Suite</a>, <a href=\"https://bugzilla.mozilla.org/\">Bugzilla</a>, and libraries like <a href=\"http://requirejs.org/\">RequireJS</a> and <a href=\"http://codemirror.net/\">CodeMirror</a>.</p>\n<p>The commit is found <a href=\"https://github.com/mozilla/thimble.webmaker.org/commit/ed516a25ad7beaf2f3c00f7283249c0d8ff0d71d\">here on GitHub</a>.</p>\n<h2>How to Use Tutorials Today</h2>\n<p>As of this week, the tutorials feature is live! To link a tutorial to your own Thimble document, simply tag the document with the following, where the URL points to the tutorial:</p>\n<pre>\n<code class=\"markup\">tutorial-http://foo.com</code>\n</pre>\n<p>Essentially any webpage can be used as a tutorial, but we provide a <a href=\"https://thimble.webmaker.org/projects/tutorial\">starter tutorial</a> for you to remix and use. This starter tutorial includes the aforementioned pagination and smartline features. Of course you can always go your own road and build your own tutorials in Thimble, taking HTML, CSS, and JS as far as they will go.</p>\n<p>Here’s the <a href=\"https://support.mozilla.org/en-US/kb/thimble-tutorials\">official SuMo article</a> and <a href=\"https://cynthiang.ca/2013/10/26/webmaker-education-friendly-tutorials-in-thimble/\">Cynthia Ng’s excellent walkthrough</a>.</p>\n<h2>Tutorials in Action</h2>\n<p>Some examples of tutorials:</p>\n<ul>\n<li><a href=\"https://thimble.webmaker.org/project/22957/remix\">Rainy day</a></li>\n<li><a href=\"https://thimble.webmaker.org/project/22915/remix\">Maps and geolocation</a></li>\n<li><a href=\"https://thimble.webmaker.org/project/23585/remix\">A todo app</a></li>\n<li><a href=\"https://thimble.webmaker.org/project/21875/remix\">Positioning zombies</a></li>\n<li><a href=\"https://thomaspark.makes.org/thimble/tutorial-tutorial/remix\">Tutorial on making tutorials</a></li>\n<li><a href=\"https://thimble.webmaker.org/es/project/26537/edit\">Tutorial on making tutorials en español</a></li>\n</ul>\n<h2>Future Directions</h2>\n<p>Although the tutorial feature has landed, it’s far from finished. Among the features I hope to see are support for line ranges, <a href=\"https://bugzilla.mozilla.org/show_bug.cgi?id=928793\">a more powerful way to associate line references with code</a>, an indicator for when a line is highlighted off-screen, draggable resizing, and state persistence. Line widgets in CodeMirror 3 also pave the way for Expander as an alternative interface.</p>\n<p>On the research front, I’ve been looking for an excuse to conduct an eye-tracking study, and the different tutorial interfaces seem ripe for that kind of thing. And lest we forget, learning is a complicated phenomenon, and the survey only scratches the surface by probing first impressions. How the different designs impact understanding remains a wide open question.</p>\n<h2>Acknowledgements</h2>\n<p>My thanks to the Webmaker team, especially <a href=\"https://twitter.com/remixmanifesto\">Brett Gaylor</a> for giving me the opportunity this summer, <a href=\"https://twitter.com/cassiemc\">Cassie McDaniel</a> for helping get the research rolling, and <a href=\"https://twitter.com/TheRealPomax\">Mike “Pomax” Kamermans</a> for his invaluable code reviews. And thanks to all of you who took the time to complete our survey.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Learning",
"term": "Learning",
"url": null
},
{
"label": "User Interface",
"term": "User Interface",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=8618",
"title": "CRAPCHA: Completely Ridiculous And Phony Captcha that Hassles for Amusement",
"description": "We’ve all run into CAPTCHAs, those annoying registration fields you never get right on the first try. But CAPTCHAs do play a valuable role, keeping spambots out by verifying that you’re a human. On top … <a href=\"https://thomaspark.co/2013/04/crapcha-completely-ridiculous-and-phony-captcha-that-hassles-for-amusement/\">Read more</a>",
"url": "https://thomaspark.co/2013/04/crapcha-completely-ridiculous-and-phony-captcha-that-hassles-for-amusement/",
"published": "2013-04-01T12:08:46.000Z",
"updated": "2013-04-01T12:08:46.000Z",
"content": "<p>We’ve all run into <a href=\"http://en.wikipedia.org/wiki/CAPTCHA\">CAPTCHAs</a>, those annoying registration fields you never get right on the first try. But CAPTCHAs do play a valuable role, keeping spambots out by verifying that you’re a human. On top of this, <a href=\"http://www.google.com/recaptcha\">reCAPTCHA</a> serves a greater good, having you digitize old books in the process.</p>\n<p>Meet CRAPCHA.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/04/crapcha.png\" alt=\"CRAPCHA\" width=\"395\" height=\"215\" class=\"aligncenter size-full wp-image-8809\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/04/crapcha.png 395w, https://thomaspark.co/wp/wp-content/uploads/2013/04/crapcha-300x163.png 300w\" sizes=\"auto, (max-width: 395px) 100vw, 395px\" /></p>\n<p>CRAPCHA doesn’t serve a dual purpose. It barely serves a single purpose. And it isn’t to keep spammers out.</p>\n<p>What CRAPCHA does is annoy users by presenting a CAPTCHA with indecipherable text. Nothing new so far? Well, CRAPCHA attempts are posted to the CRAPCHA board, providing amusement for all. You can even click on a timestamp to save one for posterity. Try it out for yourself:</p>\n<div class=\"center\">\n<a class=\"standard-btn red-btn xlarge-btn\" href=\"https://crapcha.com\"><span>CRAPCHA</span></a>\n</div>\n<h4>Add To Your Site</h4>\n<p>If you run a site and want to spring this on your unsuspecting guests, simply copy and paste the following code.</p>\n<p><code lang=\"html4strict\"><iframe src=\"https://crapcha.com/embed/\" frameborder=\"0\" scrolling=\"0\" width=\"300\" height=\"150\"></iframe></code></p>\n<p>Word of warning, CRAPCHA doesn’t actually validate anything. On the other hand, it’s fun.</p>\n<h4>Notes</h4>\n<p>CRAPCHAs are created using a mix of weird <a href=\"http://unicode-table.com/\">Unicode</a> and <a href=\"http://fortawesome.github.com/Font-Awesome/\">Font Awesome</a> characters that have undergone CSS3 transforms.</p>\n<p>Attempts are saved and retrieved using the lovely service provided by <del datetime=\"2018-04-30T15:46:18+00:00\"><a href=\"https://parse.com/\">Parse</a></del> <a href=\"https://firebase.google.com/\">Firebase</a>.</p>\n<p>You can check out CRAPCHA’s source on <a href=\"https://github.com/thomaspark/crapcha\">Github</a>.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=8719",
"title": "iRoll: Rickrolling with iPhone Web Apps",
"description": "One feature that’s often overlooked in iOS is adding webpages to your homescreen. You even get a nice retina icon if the webpage author designates one. Naturally, my mind went to how this feature could … <a href=\"https://thomaspark.co/2013/03/iroll-rickrolling-with-iphone-web-apps/\">Read more</a>",
"url": "https://thomaspark.co/2013/03/iroll-rickrolling-with-iphone-web-apps/",
"published": "2013-03-31T18:50:26.000Z",
"updated": "2013-03-31T18:50:26.000Z",
"content": "<p>One feature that’s often overlooked in iOS is adding webpages to your homescreen. You even get a nice retina icon if the webpage author designates one.</p>\n<p>Naturally, my mind went to how this feature could be used for a prank: Replace legitimate app with fake. The fake looks exactly the same, but takes you to an annoying video instead. If you’re feeling really cruel, you surround the one real app with a screenful of imposters.</p>\n<p>Spot the Instagram that <em>doesn’t</em> take you to a rendition of “Never Gonna Give You Up”.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/03/instagram.png\" alt=\"Instagram\" width=\"640\" height=\"189\" class=\"aligncenter size-full wp-image-8782\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/03/instagram.png 640w, https://thomaspark.co/wp/wp-content/uploads/2013/03/instagram-300x89.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" /></p>\n<p>I started by making a one-off site, but as programmers tend to do, I decided to generalize it. The result is iRoll.</p>\n<div class=\"center\">\n<a class=\"standard-btn red-btn xlarge-btn\" href=\"https://thomaspark.co/projects/iroll/\"><span>iRoll</span></a>\n</div>\n<h2>How to Use</h2>\n<p>First, choose an app or enter a custom app ID — it uses this to grab any app’s name and icon. To find an app ID, go to the app in iTunes, right-click on the icon to copy the link, and then get the 9-digit number in the URL. For example, the app ID in the link below is 585259203.</p>\n<p><code>https://itunes.apple.com/us/app/super-stickman-golf-2/id585259203?mt=8</code></p>\n<p>Next, give iRoll a destination URL. This can be a Rick Astley video, a Rick Astley image, or anything else on the web.</p>\n<p>Then, open the generated link on the target iPhone or iPad. You can email or manually type the shortened URL, or snap the QR code using a <a href=\"https://itunes.apple.com/us/app/qr-reader-for-iphone/id368494609?mt=8\">QR reader app</a>.</p>\n<p>Finally, open the link in Safari and save it to the home screen. In Safari, you’ll find the option by tapping the Send button, which you might have used before to email or tweet a link.</p>\n<h2>Let’s Talk Design</h2>\n<p>Technically speaking, iRoll is simple. It takes two inputs, app ID and destination URL, and formats a webpage with the app’s title and touch icon, and a redirect to the destination URL.</p>\n<p>But <em>using</em> iRoll can be surprisingly complicated task, especially for the average end user. Sit Grandma down, and have her find an app ID, copy a link from her laptop to phone, and add the page to her home screen. See how that plays out.</p>\n<p>So how did I design iRoll to simplify the task for users?</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2013/03/iroll.png\" alt=\"iRoll\" width=\"1335\" height=\"916\" class=\"aligncenter size-full wp-image-8788\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2013/03/iroll.png 1335w, https://thomaspark.co/wp/wp-content/uploads/2013/03/iroll-300x206.png 300w, https://thomaspark.co/wp/wp-content/uploads/2013/03/iroll-1024x703.png 1024w\" sizes=\"auto, (max-width: 1335px) 100vw, 1335px\" /></p>\n<h3>Progressive Disclosure</h3>\n<p>iRoll takes advantage of <a href=\"http://en.wikipedia.org/wiki/Progressive_disclosure\">progressive disclosure</a>. The task of creating a fake app is presented in simple, discrete steps. As you complete one step, the next comes into view, avoiding the overload that might come with presenting them all at once.</p>\n<p>Take advantage of the third dimension. By that I don’t mean the z-axis — which is often ill-advised, but time.</p>\n<h3>Sensible Presets</h3>\n<p>iRoll’s design started with two input fields, for the app ID and destination URL. Simple! But getting an app ID is fairly involved, from the nonobvious way to copy an app’s link, to visually parsing the 9-digit number from it. On top of that, there’s a great deal of cognitive load in <em>choosing</em> an app.</p>\n<p>To address this, iRoll provides a few preset options for both app and URL. They lower the bar to getting started with iRoll, and signal to users how it can be used.</p>\n<p>Provide options that cover what you assume to be the “fat head”, while offering freer input for the “long tail”.</p>\n<h3>Little Big Details</h3>\n<p>Finally, the main use case for iRoll is generating a link on your PC, and then copying it over to your iPhone or iPad. Unfortunately, moving digital data like a URL from one device to another still involves a great deal of friction. Recognizing this, I provided a shortened URL and a QR code.</p>\n<p>Look for the <a href=\"http://littlebigdetails.com/\">little touches</a> that can oil the wheels, or simply delight.</p>\n<p>It goes to show that what’s initially a simple app to build can morph a great deal once the user experience is taken into consideration.</p>\n<h2>Notes</h2>\n<p>App names and icons are pulled from Apple’s <a href=\"http://www.apple.com/itunes/affiliates/resources/documentation/itunes-store-web-service-search-api.html\">iTunes Search API</a>.</p>\n<p>URLs are shortened using the <a href=\"http://is.gd/developers.php\">is.gd API</a>.</p>\n<p>There are a few JavaScript libraries out there for generating QR codes, but <a href=\"http://hg.mearie.org/qrjs/\">qr.js by Kang Seonghoon</a> worked best for me.</p>\n<p>Check out the source code on <a href=\"https://github.com/thomaspark/iroll\">GitHub</a>.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=8440",
"title": "Cinnamon.js: Find In-Page Text using Synonyms",
"description": "A visitor to your site decides to follow you on Twitter. You have a link in your footer — but their search for “Twitter” comes up empty and they move on. Unfortunately, you named the … <a href=\"https://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/\">Read more</a>",
"url": "https://thomaspark.co/2013/02/cinnamon-js-find-in-page-text-using-synonyms/",
"published": "2013-02-07T13:14:30.000Z",
"updated": "2013-02-07T13:14:30.000Z",
"content": "<p>A visitor to your site decides to follow you on Twitter. You have a link in your footer — but their search for “Twitter” comes up empty and they move on. Unfortunately, you named the link “@username” instead.</p>\n<p><a href=\"https://github.com/thomaspark/cinnamon.js\">Cinnamon.js</a> prevents just this situation, taking some of the pain out of naming things. It allows users to find links, images, and other content by their synonyms, using the browser’s built-in Find function.</p>\n<h4>Demo</h4>\n<p>To see it in action, search this page for “Twitter”, “Spice”, “Email”, or “Contact”.</p>\n<blockquote>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus orci ut mi laoreet rhoncus. Pellentesque congue urna tincidunt tortor rhoncus dapibus. Duis faucibus dolor a sem ultrices at facilisis risus cursus. Cras vel euismod nisl. Ut vitae risus et libero sagittis ultrices et vitae ligula. Follow me at <a href=\"https://twitter.com/thomashpark\" data-cinnamon=\"Twitter\">@thomashpark</a>. Aliquam at turpis id diam placerat consequat at vitae est. Aenean tellus magna, lacinia vitae facilisis facilisis, egestas ut sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <span data-cinnamon=\"Email,Contact\">Reach</span> me <a href=\"mailto:[email protected]\">here</a>. Donec tincidunt dapibus dui luctus rhoncus. Nam sagittis egestas blandit. Nulla imperdiet tincidunt enim, a tempus sapien volutpat a. Maecenas sed elit ipsum, ut tristique odio. Suspendisse potenti.</p>\n<p><span data-cinnamon=\"Spice\"><img decoding=\"async\" src=\"https://farm4.staticflickr.com/3039/2660995478_fa23f10c6e.jpg\" alt=\"Cinnamon\"></span><br />Photo by <a href=\"https://www.flickr.com/photos/27369469@N08/2660995478/\">kobiz7</a></p>\n</blockquote>\n<h4>Download</h4>\n<p>You can download the script or view it on GitHub below.</p>\n<div class=\"center\">\n<a class=\"standard-btn red-btn xlarge-btn\" href=\"https://raw.github.com/thomaspark/cinnamon.js/master/cinnamon.min.js\"><span>Download</span></a> <a class=\"standard-btn black-btn xlarge-btn\" href=\"https://github.com/thomaspark/cinnamon.js\"><span>GitHub</span></a>\n</div>\n<h4>Usage</h4>\n<p>Add Cinnamon.js just before your body’s end tag. Then wrap your element of choice (span tags are recommended) and give it a data-cinnamon attribute with a comma-separated list of synonyms as its value. If you wrap an image, its alt text will also be used, as in the image above. Cinnamon.js works on modern browsers and IE8+.</p>\n<p>Here’s an example:</p>\n<pre>\n<code lang=\"html\" class=\"lang-markup\"><span data-cinnamon=\"Azure,Cerulean,Cobalt\">Blue</span></code>\n</pre>\n<h4>Notes</h4>\n<p>This is meant to be a proof of concept, and you probably shouldn’t use it in production. <a href=\"http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353\">Hidden text</a>, used deceptively, can be penalized by Google. Precisely what’s counted as deception is anyone’s guess, but there’s a risk that it’s deemed a dirty SEO tactic even if it is not intended as such.</p>\n<p>Cinnamon.js doesn’t hurt accessibility; it uses <a href=\"http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden\">aria-hidden</a> to tell screen readers to ignore the synonyms.</p>\n<p>In the course of testing, one thing I discovered was that Safari handles in-page search quite differently from other browsers. Safari doesn’t search for strings mid-word unless the word uses CamelCase. When highlighting matched text, it ignores certain CSS properties like overflow, opacity, and z-index. Highlighting is semi-disabled by setting -webkit-user-select to none.</p>\n<p>Check out the <a href=\"https://github.com/thomaspark/cinnamon.js/blob/master/cinnamon.js\">source</a> to see how it works.</p>\n<p>Some questions: Do regular people even use their browser’s Find function? Is the user’s reliance on the Find function a symptom of poor design, or is there room for better in-page search as there has been for site and web search?</p>\n<h4>Updates</h4>\n<ul>\n<li><strong>26 February 2013:</strong> I wrote an article with <a href=\"http://robertnyman.com/\">Robert Nyman</a> about this for <a href=\"https://hacks.mozilla.org/2013/02/finding-words-by-synonym-with-cinnamon-js/\">Mozilla Hacks</a>.\n<li><strong>5 March 2013:</strong> <a href=\"http://www.artiss.co.uk/\">David Artiss</a> has packaged Cinnamon.js up as <a href=\"http://wordpress.org/extend/plugins/cinnamon/\">a WordPress plugin</a>.\n<li><strong>25 March 2013:</strong> Michael Kutschall is making some promising strides with an empty font approach. He goes into more detail in <a href=\"http://www.chaotic-good.de/sandbox/cinnamon.php\">a blog post</a>.\n</ul>\n<p><script type=\"text/javascript\" src=\"https://thomaspark.co/projects/cinnamon.js/cinnamon.js\"></script></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=8186",
"title": "Digitizing Books on the Cheap and Easy",
"description": "In 2011, for the first time, Amazon sold more Kindle ebooks than paperbacks. Last June, ebook sales surpassed hardcovers for all of the US. The futurist dream of a paperless world is slowly but surely … <a href=\"https://thomaspark.co/2012/12/digitizing-books-on-the-cheap-and-easy/\">Read more</a>",
"url": "https://thomaspark.co/2012/12/digitizing-books-on-the-cheap-and-easy/",
"published": "2012-12-19T16:15:41.000Z",
"updated": "2012-12-19T16:15:41.000Z",
"content": "<p>In 2011, for the first time, Amazon sold more Kindle ebooks than paperbacks. Last June, ebook sales surpassed hardcovers for all of the US. The futurist dream of a paperless world is slowly but surely becoming reality.</p>\n<p>With books, there are downsides to going digital, but perhaps the greatest upside is that they become omnipresent. You can load up <em>all</em> your books on <em>all</em> your devices. A thousand ebooks weigh the same and take up the same physical space as one. Anyone who’s dealt with textbooks or moved recently will attest to the value in that.</p>\n<p>Unfortunately, not all books are available in digital format, and may never be. And you’ve got all these expensive books already sitting on the shelf. You could DIY and build your own book scanner (costing anywhere from <a href=\"http://www.instructables.com/id/DIY-High-Speed-Book-Scanner-from-Trash-and-Cheap-C/?ALLSTEPS\">$300</a> to <a href=\"http://www.theverge.com/2012/11/13/3639016/google-books-scanner-vacuum-diy\">$1,500</a>), but is there an easier way?</p>\n<h4>At Your Service</h4>\n<p>Enter <a href=\"http://1dollarscan.com/\">1DollarScan</a>. As their name suggests, books can be scanned for as little as $1. How it works is that you mail them your book, and they scan it and send it back as a PDF.</p>\n<p>This is a destructive process, where the book spine is cut off to improve and expedite scanning. In other words, you won’t be seeing your book again. If that’s a dealbreaker, there are <a href=\"http://www.blueleaf-book-scanning.com/\">services offering a non-destructive option</a>, but expect to pay a premium.</p>\n<p>Pricing is $1 per 100-page “set”. Options include OCR for $1 per set, high resolution (600 dpi) for $2 per set, and touch-up such as angle correction and compression for $2 per set. There’s also a free automated feature called Fine Tune that optimizes scans for target devices like the iPhone, iPad, Kindle, and Nook.</p>\n<h4>A First Pass</h4>\n<p>I have several books I’d like to digitize, but started with <a href=\"http://www.amazon.com/Interaction-Design-Beyond-Human-Computer/dp/0470665769/\">Interaction Design: Beyond Human-Computer Interaction</a>. It’s a book I use at regular but infrequent intervals, weighs in at a hefty 3 pounds and 600 pages, and for which an official ebook is not available. This makes it a prime candidate.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-book.jpg\" alt=\"Interaction Design book\" width=\"960\" height=\"640\" class=\"aligncenter size-full wp-image-8418\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-book.jpg 960w, https://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-book-300x200.jpg 300w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" /></p>\n<h6>Quality</h6>\n<p>Here’s how the scan turned out. The <a href=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-1dollarscan.pdf\">PDF</a> shows exactly how it looks. As you can see, it’s very good quality. My only criticisms are that the scan is slightly askew, and the text is fainter than I’d like it to be (possibly due to the slightly glossy finish of the pages). There’s the touch-up option that promises to be even better, but I was satisfied without it.</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-1dollarscan.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-1dollarscan-701x960.png\" alt=\"Interaction Design - 1DollarScan\" width=\"700\" height=\"960\" class=\"aligncenter size-large wp-image-8338 border\" /></a></p>\n<p>Just for fun, here’s what you get with <a href=\"http://books.google.com/books?id=b-v_6BeCwwQC&printsec=frontcover&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false\">Google Books</a>, who does their own scanning:</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-googlebooks.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-googlebooks-754x960.jpg\" alt=\"Interaction Design - Google Books\" width=\"700\" height=\"891\" class=\"aligncenter size-large wp-image-8343 border\" /></a></p>\n<p>And the scan of the 2nd edition I was working with before:</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-manual.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-manual-743x960.png\" alt=\"interactiondesign-manual\" width=\"743\" height=\"960\" class=\"aligncenter size-large wp-image-8347\" /></a></p>\n<h6>OCR</h6>\n<p>OCR is key for being able to search within a book and copy text out of it. I sprang for the option so I could compare their job (top) with my own using Adobe Acrobat Pro 8 (bottom). Both do an excellent job, with only an extraneous space added in the header by Acrobat. However, notice that 1DollarScan’s OCR leaves hyphenation as is, while Acrobat joins each word together. This gives Acrobat the edge in finding these words in a text search.</p>\n<blockquote>\n<pre>\n11.7.1 Design Patterns for Interaction Design\n\nDesign patterns capture experience, but they have a different structure and a different phi-\nlosophy from other forms of guidance or specific methods. One of the intentions of the pat-\nterns community is to create a vocabulary, based on the names of the patterns, that designers\ncan use to communicate with one another and with users. Another is to produce a literature\nin the field that documents experience in a compelling form.\n\nThe idea of patterns was first proposed by Christopher Alexander, a British architect\nwho described patterns in architecture. His hope was to capture the 'quality without a name'\nthat is recognizable in something when you know it is good.\n</pre>\n</blockquote>\n<blockquote>\n<pre>\n11.<span style=\"color: red;\"> 7</span>.1 Design Patterns for Interaction Design\n\nDesign patterns capture experience, but they have a different structure and a different philosophy\nfrom other forms of guidance or specific methods. One of the intentions of the patterns\ncommunity is to create a vocabulary, based on the names of the patterns, that designers\ncan use to communicate with one another and with users. Another is to produce a literature\nin the field that documents experience in a compelling form.\n\nThe idea of patterns was first proposed by Christopher Alexander, a British architect\nwho described patterns in architecture. His hope was to capture the 'quality without a name'\nthat is recognizable in something when you know it is good.\n</pre>\n</blockquote>\n<p>Here’s another comparison of 1DollarScan’s OCR (top) with Acrobat Pro’s (bottom), for a different font. They make the same four errors.</p>\n<blockquote>\n<pre>\nFigure 11.23 The LilyPad Arduino kit. <span style=\"color: red;\">l</span>t comprises sensors, actuator boards, and conductive threa<span style=\"color: red;\">o</span>.\nOnline tutorials are available that enable anyone to build their own (see web.media.mit.edu/<span style=\"color: red;\">-</span>leah/\nLilyPad/build/turn_signaljacket.<span style=\"color: red;\"> h</span>tml)\n</pre>\n</blockquote>\n<blockquote>\n<pre>\nFigure 11.23 The LilyPad Arduino kit. <span style=\"color: red;\">l</span>t comprises sensors, actuator boards, and conductive threa<span style=\"color: red;\">o</span>.\nOnline tutorials are available that enable anyone to build their own (see web.media.mit.edu/<span style=\"color: red;\">-</span>leah/\nLilyPad/build/turn_signaljacket.<span style=\"color: red;\"> h</span>tml)\n</pre>\n</blockquote>\n<p>My advice is to skip the OCR option and run it yourself if you have a program for it.</p>\n<h6>Fine Tune</h6>\n<p>Fine Tune is a free service offered by 1DollarScan that targets specific devices through compression, margin removal, resolution optimization, and character optimization. The original scan comes in at 332 MB, compared to the iPad at 88 MB, iPhone at 63 MB, and Kindle at 30 MB. The iPad-optimized version looks pretty close to the original. On other devices, there are more substantial changes.</p>\n<p>Here’s a comparison for the iPhone, with the original on the left and the fine-tuned version on the right. The margins, including running headers and page numbers, have been cropped out. It doesn’t account for the iPhone 5’s larger screen yet however.</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-iphone.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-iphone-280x600.png\" alt=\"Interaction Design - iPhone\" width=\"280\" height=\"600\" class=\"aligncenter size-medium wp-image-8384\" /></a></p>\n<p>And here’s a comparison for the Kindle Touch.</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-kindle.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-kindle-470x600.png\" alt=\"Interaction Design - Kindle\" width=\"470\" height=\"600\" class=\"aligncenter size-medium wp-image-8385\" /></a></p>\n<p>It’s a tough call. The optimized version has a smaller file size and makes better use of screen real estate, but there is noticeable artifacting and distortion. Since it’s free, you can try both out and decide for yourself.</p>\n<h6>Price</h6>\n<p>With 6 sets and the OCR option, the total came to $12. Shipping via media mail tacked on $3. Not one dollar by any means, but not costly either. And by far the cheapest book scanning service out there. For a 200-page book without OCR, you’re looking at about $4 including shipping.</p>\n<h6>Turnaround</h6>\n<p>1DollarScan is located in California. With media mail, it took 8 days for the book to reach them from Philadelphia. Once it arrived, turnaround was a single day.</p>\n<h6>Legality</h6>\n<p>Scanning a book you have legally acquired for personal usage would appear to fall under fair use, just the same as ripping a CD you’ve bought. 1DollarScan requires you to include <a href=\"http://1dollarscan.com/pdf/user_agreement.pdf\">a signed agreement form</a> with the book declaring the same.</p>\n<h4>Parting Thoughts</h4>\n<p>For certain books, there’s no substitute for touch of the printed page. But for most, the convenience of an ebook trumps all. And as the technology and design of ebooks marches forward, while publishers use cheaper and cheaper materials for print, this will increasingly be the case.</p>\n<p>If you’re considering digitization, <a href=\"http://1dollarscan.com/\">1DollarScan</a> is a good choice. In fact, I’ve got a few more books on the shelf that I intend to get scanned in the near future.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-ipad.jpg\" alt=\"Interaction Design iPad\" width=\"960\" height=\"640\" class=\"aligncenter size-full wp-image-8419\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-ipad.jpg 960w, https://thomaspark.co/wp/wp-content/uploads/2012/12/interactiondesign-ipad-300x200.jpg 300w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" /></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=8078",
"title": "The iTunes Expanding Album Effect",
"description": "iTunes 11 marks a significant departure from previous versions. While many of the changes are problematic (another post for another time), I want to focus on one positive: the expanding album effect. Similar to folders … <a href=\"https://thomaspark.co/2012/12/the-itunes-expanding-album-effect-in-css-js/\">Read more</a>",
"url": "https://thomaspark.co/2012/12/the-itunes-expanding-album-effect-in-css-js/",
"published": "2012-12-12T12:56:35.000Z",
"updated": "2012-12-12T12:56:35.000Z",
"content": "<p>iTunes 11 marks a significant departure from previous versions. While many of the changes are problematic (another post for another time), I want to focus on one positive: the expanding album effect.</p>\n<p>Similar to folders in iOS, this effect lets users to scan a list of items and open one up in place. This has advantages over more traditional pop-up windows and mode changes, which can obscure content and cause the user to lose their place in the list.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/itunes11.png\" alt=\"iTunes 11\" width=\"960\" height=\"854\" class=\"aligncenter size-full wp-image-8079\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/12/itunes11.png 960w, https://thomaspark.co/wp/wp-content/uploads/2012/12/itunes11-300x267.png 300w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" /></p>\n<p>A second aspect of this feature is that it uses content to enhance the chrome. In the detailed view, the background and text colors are generated algorithmically from album art. This not only serves a practical purpose in making the detailed view stand out from the list, but creates a nice (in most cases) aesthetic effect and a sense of feeling that differentiates one album from the next. The intrepid Seth Thompson and Wade Cosgrove have already recreated this, using <a href=\"http://stackoverflow.com/questions/13637892/how-does-the-algorithm-to-color-the-song-list-in-itunes-11-work\">Mathematica</a> and <a href=\"http://www.panic.com/blog/2012/12/itunes-11-and-colors/\">Cocoa</a> respectively. Apple’s algorithm, it turns out, is pretty sophisticated.</p>\n<p>Here’s my take, using HTML, CSS, and Javascript.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/12/expandingalbums.png\" alt=\"Expanding Albums Demo\" width=\"1159\" height=\"918\" class=\"aligncenter size-full wp-image-8133\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/12/expandingalbums.png 1159w, https://thomaspark.co/wp/wp-content/uploads/2012/12/expandingalbums-300x238.png 300w, https://thomaspark.co/wp/wp-content/uploads/2012/12/expandingalbums-1024x811.png 1024w\" sizes=\"auto, (max-width: 1159px) 100vw, 1159px\" /></p>\n<p>And you can check it out for yourself here:</p>\n<div class=\"center\"><a class=\"standard-btn red-btn xlarge-btn\" href=\"https://thomaspark.co/projects/expandingalbums/\"><span>Demo</span></a></div>\n<h4>Details</h4>\n<p>The demo is built with <a href=\"http://app-folders.com/\">App Folders</a>, with behavior and style modified to mimic iTunes. <a href=\"http://lokeshdhakar.com/projects/color-thief/\">Color Thief</a> is used to derive colors on-the-fly from album art using a median cut algorithm. On top of this, I selected colors for acceptable contrast by converting RGB to YIQ, a color space that <a href=\"http://24ways.org/2010/calculating-color-contrast/\">better reflects human perceptions</a>. Last but not least, <a href=\"http://mustache.github.com/\">Mustache</a> is used to pull album data from a JSON file into templates.</p>\n<p>I got to play with several exciting HTML5 and CSS3 properties in making this demo, including <a href=\"http://www.quirksmode.org/css/textoverflow.html\">text-overflow</a>, <a href=\"http://www.quirksmode.org/css/multicolumn.html\">multi-columns</a>, <a href=\"http://www.quirksmode.org/css/transitions.html\">transitions</a>, <a href=\"http://www.quirksmode.org/css/animations.html\">animations</a>, and canvas. Unfortunately, this means the demo requires a modern browser. The future can’t come fast enough.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "User Interface",
"term": "User Interface",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=7678",
"title": "The Hacker News Slap",
"description": "For those who aren’t familiar, Hacker News is a popular site where a community of techies discuss a wide range of topics. According to HN’s guidelines, on-topic submissions are “[a]nything that good hackers would find … <a href=\"https://thomaspark.co/2012/10/the-hacker-news-slap/\">Read more</a>",
"url": "https://thomaspark.co/2012/10/the-hacker-news-slap/",
"published": "2012-10-20T17:11:33.000Z",
"updated": "2012-10-20T17:11:33.000Z",
"content": "<p>For those who aren’t familiar, <a href=\"http://news.ycombinator.com/news\">Hacker News</a> is a popular site where a community of techies discuss a wide range of topics. According to HN’s guidelines, on-topic submissions are “[a]nything that good hackers would find interesting. That includes more than hacking and startups. If you had to reduce it to a sentence, the answer might be: anything that gratifies one’s intellectual curiosity.”</p>\n<p><span id=\"more-7678\"></span>Getting your content on the HN front page can be <a href=\"http://swombat.com/2011/1/13/how-to-get-your-startup-on-hacker-news\">a big deal</a>, a fact that hasn’t escaped spammers. To keep them at bay and maintain the quality of the site, moderators have had to be quite active. And whether you’re in agreement with it or not, it’s fair to say that they’ve operated opaquely, from <a href=\"https://jcs.org/notaweblog/2012/06/13/hellbanned_from_hacker_news/\">hellbans</a> to <a href=\"http://techzinglive.com/page/1023/178-tz-discussion-the-hacker-news-slap\">the slap</a> — where a submission rises to the front page, and just as quickly vanishes from it.</p>\n<p>Mods can kill a submission and instantly send it into oblivion. But more marginal submissions can also be flagged by mods or users for being off topic, low-content fluff, spammy, or otherwise poor quality — or perfectly valid submissions by those who disagree with it. This can even happen to articles occupying the coveted top spot, with plenty of points and a lively discussion. If enough mods and users flag it, it’ll quietly slip down the rankings and off the front page.</p>\n<p>From the perspective of the community, these are silent failures. They’re a missed opportunity to learn how the flag feature is being used and what content the community does (or more to the point, does not) value. If you’ve been visiting HN for awhile, you might feel that you’ve already developed a sense for how things work. But <a href=\"http://blog.rjmetrics.com/surprising-hacker-news-data-analysis/\">as a recent analysis of HN shows</a>, the reality can surprise you.</p>\n<h4>A User Script</h4>\n<p>I wrote a <a href=\"http://userscripts.org/scripts/show/150452\">user script</a> that highlights the submissions that have been on the receiving end of the slap. The script inserts scores based on the <a href=\"http://amix.dk/blog/post/19574\">HN ranking algorithm</a>, a function of each submission’s points and age. Submissions ranked below others with half their score are highlighted in red; a rough heuristic but definitely indicative of being slapped down. Weaker candidates are highlighted in orange; while they may have penalized, it could also be explained by the algorithm being out-of-date or incomplete (it is).</p>\n<p>The script also works on the <a href=\"http://www.domador.net/extras/services/hourly-hn-snapshot/\">Hourly HN Snapshot archive</a>. Try it out on past frontpages, like <a href=\"http://hhn.domador.net/2011/10/27/10/\">October 27, 2011</a>.</p>\n<h4>Installation</h4>\n<p>You can get the script here: <a href=\"http://userscripts.org/scripts/show/150452\">http://userscripts.org/scripts/show/150452</a>.</p>\n<p>Install it in Chrome either by downloading the file and dragging it into the Extensions tab (sadly, user scripts can no longer be installed directly), or through the extension <a href=\"https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo\">Tampermonkey</a>. Firefox users can install through <a href=\"https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/\">Greasemonkey</a>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/10/hn.png\" alt=\"\" title=\"Hacker News\" width=\"727\" height=\"521\" class=\"alignnone size-full wp-image-7711\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/10/hn.png 727w, https://thomaspark.co/wp/wp-content/uploads/2012/10/hn-300x215.png 300w\" sizes=\"auto, (max-width: 727px) 100vw, 727px\" /></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=7489",
"title": "Learning to Code from Play by Play",
"description": "It’s a great time to learn to code. It seems as long as there’s been the web, there’s been text tutorials on coding. But now we’re seeing the rise of lecture videos (see iTunes U), … <a href=\"https://thomaspark.co/2012/08/learning-to-code-from-play-by-play/\">Read more</a>",
"url": "https://thomaspark.co/2012/08/learning-to-code-from-play-by-play/",
"published": "2012-08-12T19:17:03.000Z",
"updated": "2012-08-12T19:17:03.000Z",
"content": "<p>It’s a great time to learn to code.</p>\n<p>It seems as long as there’s been the web, there’s been text tutorials on coding. But now we’re seeing the rise of lecture videos (see <a href=\"http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewTop?genreId=40000009&id=29666&popId=65\" target=\"_blank\">iTunes U</a>), massive open online courses (see <a href=\"https://www.coursera.org/\" target=\"_blank\">Coursera</a>), and interactive tutorials (see <a href=\"http://www.codecademy.com/\" target=\"_blank\">Codecademy</a>). I’ve sampled them all, but what’s hooked me lately is watching pros at work — most recently 37signals designer Ryan Singer as he <a href=\"https://peepcode.com/products/ryan-singer-ii\" target=\"_blank\">designs and prototypes a UI</a>.</p>\n<p><span id=\"more-7489\"></span>Aside from the satisfaction of watching a master of his craft, these videos offer learning opportunities that would be edited out in more structured tutorials and polished lectures. Here are a few things I picked up from the screencast, things I wouldn’t have gotten from other sources on the subject.</p>\n<h4>Taking in the Environment</h4>\n<p>Many tutorials skip over the tools, provide their own simplified version, or go with the standard and most widely used. And this may well be the right approach for beginners. But for those with a bit more experience, it can be both fascinating and instructive to peer into the environments that developers have shaped to their needs and idiosyncrasies.</p>\n<ul>\n<li>Ryan carries out the screencast on his own machine (or at least his loaner). For prototyping, he uses Rails to take advantage of SCSS and templates, along with the hassle-free dev server <a href=\"http://pow.cx/\" target=\"_blank\">Pow</a>.</li>\n</ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/08/environment.png\" alt=\"\" title=\"Pow\" width=\"1000\" height=\"600\" class=\"alignnone size-full wp-image-7628\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/08/environment.png 1000w, https://thomaspark.co/wp/wp-content/uploads/2012/08/environment-300x180.png 300w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" /></p>\n<h4>Tricks of the Trade</h4>\n<p>While small tricks make good blog fodder, tutorials usually don’t leave room for them. Screencasts bring them to life, set in a greater context.</p>\n<ul>\n<li>Ryan would switch from code editor to Photoshop depending on what he wanted to mockup. On his Mac, he copied the browser window directly to clipboard a la Windows. I was familiar with <strong>command-shift-3</strong> to save a screenshot to file and <strong>command-shift-4</strong> to save a region, but didn’t know you could skip the file by adding <strong>control</strong> to each key combo.</li>\n<li>In Photoshop, he experimented with the width of elements by selecting an edge, holding down <strong>command-option-shift</strong>, and then arrowing in the direction he wanted the element to expand. Another must-know for designers.</li>\n</ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/08/photoshop.png\" alt=\"\" title=\"Photoshop\" width=\"1000\" height=\"600\" class=\"alignnone size-full wp-image-7631\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/08/photoshop.png 1000w, https://thomaspark.co/wp/wp-content/uploads/2012/08/photoshop-300x180.png 300w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" /></p>\n<h4>Resolving Issues</h4>\n<p>Screencasts often center on ill-defined problems that are rife with unanticipated issues. These issues can make for teachable moments in how to troubleshoot and resolve them effectively.</p>\n<ul>\n<li>At one point, Ryan wasn’t happy with where the header was breaking into two lines, but wanted to avoid a break tag if possible. The facilitator mentioned the <a href=\"https://developer.mozilla.org/en-US/docs/HTML/Element/wbr\" target=\"_blank\">HTML5 word break opportunity element</a>, which neither Ryan or I were familiar with before.</li>\n</ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/08/linebreak.png\" alt=\"\" title=\"Line break\" width=\"1000\" height=\"600\" class=\"alignnone size-full wp-image-7632\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/08/linebreak.png 1000w, https://thomaspark.co/wp/wp-content/uploads/2012/08/linebreak-300x180.png 300w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" /></p>\n<h4>As an Aside</h4>\n<p>Given airtime, most pros will inevitably expound on some higher level-issues about the field or community. In measured doses, these asides can be thought-provoking and reveal the bigger picture.</p>\n<ul>\n<li>Ryan discusses patterns for marking up sections like the one below. Do you tightly wrap the section content, or include the section header so the whole section is neatly encapsulated? He proposes a solution that’s sometimes used at 37signals, but explains that a good pattern hasn’t really been established yet.</li>\n<li>A few minutes later, he talks about the semantic baggage that ordered and unordered lists bring compared to divs.</li>\n</ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/08/markup.png\" alt=\"\" title=\"Markup\" width=\"1000\" height=\"600\" class=\"alignnone size-full wp-image-7633\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/08/markup.png 1000w, https://thomaspark.co/wp/wp-content/uploads/2012/08/markup-300x180.png 300w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" /></p>\n<h4>Conclusion</h4>\n<p>I hope we see more of these videos of designers and developers in action. With so many people relying on online learning and parlaying that into professional work that might also be remote, these videos help recover some of the tacit knowledge that’s been lost in other, more refined resources.</p>\n<p>If you haven’t already, check out previews for the rest of PeepCode’s <a href=\"https://peepcode.com/screencasts/play-by-play\" target=\"_blank\">Play by Play series</a>. Minecraft-creator <a href=\"http://www.mrspeaker.net/2011/09/27/notch-on-film\" target=\"_blank\">Notch’s marathon livestreams</a> are an epiphany, and Chris Coyier’s <a href=\"http://www.kickstarter.com/projects/150422311/screencasting-a-complete-redesign\" target=\"_blank\">redesign of CSS Tricks</a>, which has been successfully funded on Kickstarter, is another one to look forward to.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Learning",
"term": "Learning",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=7095",
"title": "Apple Storefronts Redux",
"description": "Last year, I posted a gallery of every Apple Store ever. It was a quick and dirty project, made on a whim. But it eventually took on a life of its own, getting coverage from … <a href=\"https://thomaspark.co/2012/07/apple-storefronts-redux/\">Read more</a>",
"url": "https://thomaspark.co/2012/07/apple-storefronts-redux/",
"published": "2012-07-10T02:37:06.000Z",
"updated": "2012-07-10T02:37:06.000Z",
"content": "<p>Last year, I posted <a href=\"http://thomaspark.co/2011/11/every-apple-storefront/\">a gallery of every Apple Store ever</a>. It was a quick and dirty project, made on a whim. But it eventually took on a life of its own, getting coverage from such heavyweights as <a href=\"http://www.macrumors.com/2011/11/09/gallery-of-storefront-photos-from-apples-357-retail-stores/\" target=\"_blank\">MacRumors</a>, <a href=\"http://gizmodo.com/5858264/every-single-apple-store-on-the-planet-in-under-60-seconds\" target=\"_blank\">Gizmodo</a>, and <a href=\"http://techland.time.com/2011/11/10/check-out-every-apple-store-ever-opened-in-order/\" target=\"_blank\">Time</a> (in that order).</p>\n<p><span id=\"more-7095\"></span> If I knew so many eyeballs would be on it, I’d have spent more time getting things right. It looked nice enough, but I knew that it didn’t work right. After that initial wave of attention subsided however, I decided to leave well enough alone, apart from adding the odd new store. It was a side project after all.</p>\n<p>And that went fine, until <a href=\"http://www.ifoapplestore.com/db/retail-web-pages-revised-2012/\" target=\"_blank\">Apple revised their site with high-resolution images</a>. Now the images were larger and cropped wider, meaning new stores no longer fit with the rest. So I started digging into Apple Storefronts again last week. At first, it was just to update it with the new images. But then I couldn’t help myself, and it snowballed into more.</p>\n<h4>More Changes</h4>\n<p>With the new, larger images, you see the trees more so than the forest. To address this, I added a toggle between two sizes, as well as a toggle for the labels.</p>\n<p>In addition to the old country and state filters, you can filter by year now, and sort by oldest or newest. And these views are mapped to different URLs, meaning you can save and share them.</p>\n<p>Then there’s the interface. I wanted the site to work better on mobile, so I adopted as my framework the tried-and-true <a href=\"http://twitter.github.com/bootstrap/\" target=\"_blank\">Bootstrap</a>. This also allowed me to use the Slate theme I created on <a href=\"http://bootswatch.com/\" target=\"_blank\">Bootswatch</a> for the visual design.</p>\n<p>The new features forced other interface changes. The old navbar was overloaded with links, and now I needed to make room for more. Where to put it all, especially on mobile? My solution was to move primary filters to a drop-down menu, but keep secondary filters out. Instead, they can be accessed by clicking a particular state or year on a label.</p>\n<p>Lastly, there’s been a host of performance improvements and a streamlined update process, thanks to <a href=\"https://developers.google.com/appengine/\" target=\"_blank\">Google App Engine</a> and Django’s templating system.</p>\n<p>So tweaked images… and then all this: version 2.0 of <a href=\"http://applestorefronts.appspot.com\" target=\"_blank\">Apple Storefronts</a>.</p>\n<p><a href=\"http://applestorefronts.appspot.com\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/07/applestorefronts2.png\" alt=\"\" title=\"Apple Storefronts 2\" width=\"555\" height=\"385\" class=\"aligncenter size-full wp-image-7255 margin-small\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/07/applestorefronts2.png 555w, https://thomaspark.co/wp/wp-content/uploads/2012/07/applestorefronts2-300x208.png 300w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" /></a></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=6909",
"title": "Introducing Bootswatch",
"description": "Although I spilled the beans in an interview yesterday, I wanted to formally announce a personal project called Bootswatch. It’s a collection of themed swatches that you can download for free and drop into your … <a href=\"https://thomaspark.co/2012/02/introducing-bootswatch/\">Read more</a>",
"url": "https://thomaspark.co/2012/02/introducing-bootswatch/",
"published": "2012-02-14T21:39:57.000Z",
"updated": "2012-02-14T21:39:57.000Z",
"content": "<p>Although I spilled the beans in <a target=\"_blank\" href=\"http://www.domain.me/blog/thomas-park-3691\">an interview yesterday</a>, I wanted to formally announce a personal project called <strong>Bootswatch</strong>. It’s a collection of themed swatches that you can download for free and drop into your Bootstrap site. You can check it out at <a target=\"_blank\" onclick=\"pageTracker._link(this.href); return false;\" href=\"http://bootswatch.com\">bootswatch.com</a>.</p>\n<p><span id=\"more-6909\"></span></p>\n<h4>What’s Bootstrap Again?</h4>\n<p><a target=\"_blank\" href=\"http://twitter.github.com/bootstrap/\">Bootstrap</a> is a popular web framework made by some talented people at Twitter. It allows even the most time-constrained and design-impaired to create nice-looking sites.</p>\n<p>As more and more sites adopt Bootstrap though, a growing issue is the uniformity between them. You might already recognize the signature black bar and blue buttons. Here are a few examples, taken from <a href=\"http://builtwithbootstrap.com/\" target=\"_blank\">Built with Bootstrap</a>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/02/bwbootstrap.png\" alt=\"\" title=\"Built with Bootstrap\" width=\"600\" height=\"407\" class=\"aligncenter size-full wp-image-7004 paddedLarger bordered\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/02/bwbootstrap.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/02/bwbootstrap-300x204.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" /></p>\n<p>My goal with Bootswatch is to enable developers using Bootstrap to try on a new look, without investing much time or energy. The best thing about it is that it doesn’t significantly alter your code or your workflow. </p>\n<h4>So how do I use Bootswatch?</h4>\n<p>First, head over to <a target=\"_blank\" onclick=\"pageTracker._link(this.href); return false;\" href=\"http://bootswatch.com\">Bootswatch</a> and pick a swatch. Download the bootswatch.min.css file associated with it.</p>\n<p>In Bootstrap’s CSS directory, you’ll find a stylesheet in full (bootstrap.css) and minified (bootstrap.min.css) forms. Rename them or move them to a safe place. Then drop in the new CSS file and check that your HTML points to it. If you ever change your mind, simply drop in another swatch or switch back to the original.</p>\n<h4>What if I want to extend Bootswatch?</h4>\n<p>Bootswatch is an open source project, and you’re welcome to modify the swatches further or create your own. If you’re interested, fork or follow the <a href=\"https://github.com/thomaspark/bootswatch\" target=\"_blank\">GitHub repository</a>.</p>\n<p>Each raw swatch consists of two <a href=\"http://lesscss.org/\" target=\"_blank\">LESS</a> files. One is variables.less, which is included by default in Bootstrap and allows you to customize <a href=\"http://twitter.github.com/bootstrap/less.html#variables\" target=\"_blank\">these settings</a>. The other is a new file called bootswatch.less that introduces more extensive changes. </p>\n<p>First, add these two files to <a href=\"https://github.com/twitter/bootstrap/\" target=\"_blank\">Bootstrap’s own LESS files</a>. You’ll be overwriting the default variables.less.</p>\n<p>Next, open up bootstrap.less and just before the line “Utility classes” at the end, add <code class=\"language-css\" lang=\"text\">@import \"bootswatch.less\";</code>. This command includes bootswatch.less when compiling the LESS files to CSS, and placing it near the end overrides earlier styles with the same <a href=\"http://www.w3.org/TR/CSS2/cascade.html#specificity\" target=\"_blank\">CSS selector specificity</a>.</p>\n<p>Now you can start customizing variables.less and bootswatch.less. You are also free to modify the other LESS files, which in some cases will be easier, but your swatch may become brittle to future changes in Bootstrap itself. When you’re ready to test your code, <a href=\"http://twitter.github.com/bootstrap/less.html#compiling\" target=\"_blank\">compile to CSS</a> and enjoy!</p>\n<h4>Update</h4>\n<p>Check out my article on Smashing Magazine about <a href=\"http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/\">Customizing Bootstrap</a>.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=6732",
"title": "Startups, Dotcoms, and Other TLDs",
"description": "I recently spent way too much time trying to find a domain for a project. Every good .com, and even most of the terrible ones, had long been claimed by squatters. This got me to … <a href=\"https://thomaspark.co/2012/02/startups-dotcoms-and-other-tlds/\">Read more</a>",
"url": "https://thomaspark.co/2012/02/startups-dotcoms-and-other-tlds/",
"published": "2012-02-01T15:08:16.000Z",
"updated": "2012-02-01T15:08:16.000Z",
"content": "<p>I recently spent way too much time trying to find a domain for a project. Every good .com, and even most of the terrible ones, had long been claimed by squatters.</p>\n<p>This got me to wonder how startups are dealing with this. From reading the news, it seems as though more and more are going with alternative TLDs like .me and .us. Many are even using <a target=\"_blank\" href=\"http://en.wikipedia.org/wiki/Domain_hack\" rel=\"noopener\">domain hacks</a> to turn this weakness into a strength. Are we reaching a tipping point with alternative TLDs, given their increasing visibility and viability?</p>\n<p><span id=\"more-6732\"></span> To find out, I went to <a target=\"_blank\" href=\"http://www.crunchbase.com/\" rel=\"noopener\">CrunchBase</a> and collected the domains of 1,000 companies founded in each year from 2005 to 2011<sup class='footnote'><a href='#fn-6732-1' id='fnref-6732-1' onclick='return fdfootnote_show(6732)'>1</a></sup>. Of course there are other factors at play in this sample, but it’s a fairly good way to uncover domain trends in the startup world.</p>\n<p>What I found was that .com (in blue below) dominates, same as it ever has. The recognizability and prestige of .com is a powerful, self-perpetuating thing. For the past seven years, it’s hovered at 85 percent with little sign of dropping. About 50 other TLDs nibble on the leftover slice of pie. Mouse over the graph for more details.</p>\n\n<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->\n<iframe loading=\"lazy\" width=\"600\" height=\"350\" frameborder=\"0\" scrolling=\"no\" src=\"https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkXMXPqHS7NAdGhZdUNoY2VfSHVTTEYwQzBYbERhNFE&single=true&gid=2&output=html&widget=false\" class=\"iframe-class\"></iframe>\n\n<p>Have startups been using the B-list TLDs, .net and .org? Only a bit. About 2 percent of startups use each, although while .org is finding a niche with NGOs and the like, .net may be falling out of vogue (relatively speaking) in recent years. </p>\n\n<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->\n<iframe loading=\"lazy\" width=\"600\" height=\"350\" frameborder=\"0\" scrolling=\"no\" src=\"https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkXMXPqHS7NAdGhZdUNoY2VfSHVTTEYwQzBYbERhNFE&single=true&gid=3&output=html&widget=false\" class=\"iframe-class\"></iframe>\n\n<p>And here’s a closer look at an assortment of TLDs that seem to be popular with startups. Ironically but perhaps unsurprisingly, .biz is a flop, while .me, .io, and .co enjoy upticks in the last year. It remains to be seen if this is part of a larger trend.</p>\n\n<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->\n<iframe loading=\"lazy\" width=\"600\" height=\"350\" frameborder=\"0\" scrolling=\"no\" src=\"https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkXMXPqHS7NAdGhZdUNoY2VfSHVTTEYwQzBYbERhNFE&single=true&gid=4&output=html&widget=false\" class=\"iframe-class\"></iframe>\n\n<p>For startups, one strategy might be to grab an alternative domain cheaply to start with, and to acquire the .com version when you get funded down the line. But with alternative TLDs hardly making a dent, it’s evident that having a .com is a priority right from the start, and that they’re perhaps willing to compromise their name to ensure that they land one.</p>\n<p>Despite the crowding on .com, it turns out that domain names aren’t getting any longer. Here’s a graph showing that there’s even a slight decrease in the number of characters since 2009.</p>\n\n<!-- iframe plugin v.5.2 wordpress.org/plugins/iframe/ -->\n<iframe loading=\"lazy\" width=\"600\" height=\"350\" frameborder=\"0\" scrolling=\"no\" src=\"https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkXMXPqHS7NAdGhZdUNoY2VfSHVTTEYwQzBYbERhNFE&single=true&gid=5&output=html&widget=false\" class=\"iframe-class\"></iframe>\n\n<p>To keep domain names short, there’s certainly much of the same creativity with naming startups today as <a href=\"http://messymatters.com/pgnames\" target=\"_blank\" rel=\"noopener\">Paul Graham noted back in 2006</a>. And despite the influx of alternative TLDs, startups are, for the time being, still dotcoms.</p>\n<div class='footnotes' id='footnotes-6732'>\n<div class='footnotedivider'></div>\n<ol>\n<li id='fn-6732-1'> For the list, and a brief trip down memory lane, here’s the <a href=\"http://thomaspark.co/wp/wp-content/uploads/2012/02/domains.csv\" target=\"_blank\" rel=\"noopener\">CSV</a>. <span class='footnotereverse'><a href='#fnref-6732-1'>↩</a></span></li>\n</ol>\n</div>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Data",
"term": "Data",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=6585",
"title": "Better Badges on Netflix",
"description": "Today our attention is divided among many apps on many devices, networked and constantly updating. Given this, status badges are used more than ever to help users maintain awareness. They’re used everywhere from operating systems … <a href=\"https://thomaspark.co/2012/01/better-badges-on-netflix/\">Read more</a>",
"url": "https://thomaspark.co/2012/01/better-badges-on-netflix/",
"published": "2012-01-17T23:04:02.000Z",
"updated": "2012-01-17T23:04:02.000Z",
"content": "<p>Today our attention is divided among many apps on many devices, networked and constantly updating. Given this, status badges are used more than ever to help users maintain awareness. They’re used everywhere from operating systems to applications to websites, to varying degrees of success.</p>\n<p>What makes a badge well-designed is that it communicate a bit of timely information in a punchy way. This is accomplished through consistency and contrast. Consistency helps users to recognize a badge by sticking with a standard look and position. Contrast helps users to notice a badge by choosing a color and shape that stands out from the content.</p>\n<p><span id=\"more-6585\"></span> Facebook is one example that achieves both consistency and contrast, though they have it relatively easy. Given the monochromatic context, nearly any splash of color will do.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/01/facebook.png\" alt=\"\" title=\"Facebook\" width=\"600\" height=\"40\" class=\"aligncenter size-full wp-image-6693 paddedLarge\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/01/facebook.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/facebook-300x20.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" /></p>\n<p>Apple and Netflix have a tougher job because their badges are applied to wildly varying content. In iOS, Apple overcomes this in two ways. First, they give the badge a drop shadow and border that contrasts with the badge itself, making it stand out whether it’s applied to an icon that’s dark, light, or nearly any combination of colors. Second, Apple offsets the badge to a position that’s outside the bounds of the icon. This alters the icon’s silhouette and, more importantly, creates a separation between metadata and object.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/01/iphone.png\" alt=\"\" title=\"iPhone\" width=\"600\" height=\"171\" class=\"aligncenter size-full wp-image-6695 paddedLarge\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/01/iphone.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/iphone-300x86.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" /></p>\n<p>Netflix does neither, and the result is that as you scan through their offerings a screenful at a time, the badges hardly stand out.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/01/netflix.png\" alt=\"\" title=\"Netflix\" width=\"600\" height=\"190\" class=\"aligncenter size-full wp-image-6691 paddedLarge\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/01/netflix.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/netflix-300x95.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" /></p>\n<p>A challenge faced by Netflix stems from the semantics of their badges. Instead of communicating a number or simple alert, they need to depict “New Episodes” and perhaps other meanings like “New to Netflix” and “Expiring Soon”, for which there aren’t standard symbols, yet<sup class='footnote'><a href='#fn-6585-1' id='fnref-6585-1' onclick='return fdfootnote_show(6585)'>1</a></sup>.</p>\n<p>Netflix’s has an amazing track record, designing slick interfaces <a href=\"http://functionsource.com/post/netflix-feature\" target=\"_blank\">for over 400 different devices</a>. They can do much better with their badges.</p>\n<div class='footnotes' id='footnotes-6585'>\n<div class='footnotedivider'></div>\n<ol>\n<li id='fn-6585-1'> Other video services like Hulu Plus, iTunes, and Amazon Instant Video don’t even attempt badges like these, though they would do well to. <span class='footnotereverse'><a href='#fnref-6585-1'>↩</a></span></li>\n</ol>\n</div>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "User Interface",
"term": "User Interface",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=6125",
"title": "Kindle Touch Gestures",
"description": "Here’s a quick guide to multitouch gestures on Kindle Touch, since Amazon doesn’t provide documentation and some commands are less than obvious. Gestures include taps, holds, swipes, and pinches. Let me know if there are … <a href=\"https://thomaspark.co/2012/01/kindle-touch-gestures/\">Read more</a>",
"url": "https://thomaspark.co/2012/01/kindle-touch-gestures/",
"published": "2012-01-04T14:43:23.000Z",
"updated": "2012-01-04T14:43:23.000Z",
"content": "<p>Here’s a quick guide to multitouch gestures on <a href=\"http://www.amazon.com/Kindle-Touch-Wi-Fi-Ink-Display/dp/B005890G8Y/\" target=\"_blank\">Kindle Touch</a>, since Amazon doesn’t provide documentation and some commands are less than obvious. Gestures include taps, holds, swipes, and pinches. Let me know if there are any I’ve missed.</p>\n<p><span id=\"more-6125\"></span> </p>\n<h3>Tap</h3>\n<p>Kindle Touch uses a system of invisible tapzones called EasyReach.<br />\n<img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-zones.png\" alt=\"\" title=\"Zones\" width=\"600\" height=\"674\" class=\"aligncenter size-full wp-image-6139\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-zones.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-zones-267x300.png 267w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" /></p>\n<p><strong>Tap right zone:</strong> Next page<br />\n<strong>Tap left zone:</strong> Previous page<br />\n<strong>Tap top-right zone:</strong> Toggle bookmark<br />\n<strong>Tap top zone:</strong> Book options<br />\n<a href=\"http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-options.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-options.png\" alt=\"\" title=\"Options\" width=\"600\" height=\"674\" class=\"aligncenter size-full wp-image-6137\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-options.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-options-267x300.png 267w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" /></a></p>\n<h3>Hold</h3>\n<p><strong>Hold:</strong> Dictionary + text options<br />\n<img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-hold.png\" alt=\"\" title=\"Hold\" width=\"600\" height=\"674\" class=\"aligncenter size-full wp-image-6134\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-hold.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-hold-267x300.png 267w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" /><br />\n<strong>Hold and drag:</strong> Text options<br />\n<img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-holddrag.png\" alt=\"\" title=\"Hold and drag\" width=\"600\" height=\"674\" class=\"aligncenter size-full wp-image-6136\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-holddrag.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-holddrag-267x300.png 267w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" /></p>\n<h3>Swipe</h3>\n<p><strong>Swipe right:</strong> Next page<br />\n<strong>Swipe left:</strong> Previous page<br />\n<strong>Swipe up:</strong> Next chapter<br />\n<strong>Swipe down:</strong> Previous chapter</p>\n<h3>Pinch</h3>\n<p><strong>Pinch together:</strong> Decrease font size<br />\n<strong>Pinch apart:</strong> Increase font size<br />\n<img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-pinch.png\" alt=\"\" title=\"Pinch\" width=\"600\" height=\"674\" class=\"aligncenter size-full wp-image-6138\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-pinch.png 600w, https://thomaspark.co/wp/wp-content/uploads/2012/01/kindletouch-pinch-267x300.png 267w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" /></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=5717",
"title": "99designs and Eight Values of Identity",
"description": "Over at 99designs, businesses can hold contests to get logos designed for them. To provide better direction to identity designers than “I’ll know it when I see it” or “just make it pop”, each business … <a href=\"https://thomaspark.co/2012/01/99designs-and-eight-values-of-identity/\">Read more</a>",
"url": "https://thomaspark.co/2012/01/99designs-and-eight-values-of-identity/",
"published": "2012-01-03T15:09:47.000Z",
"updated": "2012-01-03T15:09:47.000Z",
"content": "<p>Over at <a href=\"http://99designs.com/\" target=\"_blank\">99designs</a>, businesses can hold contests to get logos designed for them. To provide better direction to identity designers than “I’ll know it when I see it” or “just make it pop”, each business is asked to create a design brief that includes a description of their business, the type of logo they want, and the values that their logo should communicate.</p>\n<p><span id=\"more-5717\"></span> The values are dubbed <strong>manliness, maturity, bling factor, ageness, fun, volume, complexity, and in-your-faceness</strong> in the source code, and they’re input via sliders on an integer scale from -5 to +5. </p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/12/sliders.png\" alt=\"\" title=\"Sliders\" width=\"463\" height=\"434\" class=\"aligncenter size-full wp-image-5821\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/12/sliders.png 463w, https://thomaspark.co/wp/wp-content/uploads/2011/12/sliders-300x281.png 300w\" sizes=\"auto, (max-width: 463px) 100vw, 463px\" /></p>\n<p>The sliders seem like a good idea, but I began to wonder about them. To what extent do contest holders really use them? What values do businesses wish to communicate? Are they useful to designers?</p>\n<p>All of the design briefs on 99designs are publicly accessible, so naturally the research side of me took hold. To get at the questions above, I ended up scraping slider data for the last 999 contests<sup class='footnote'><a href='#fn-5717-1' id='fnref-5717-1' onclick='return fdfootnote_show(5717)'>1</a></sup>.</p>\n<h3>To what extent are the sliders used?</h3>\n<p>I’m starting with the assumption that a slider left at 0 is unused, in the sense that the contest holder doesn’t particularly care either way about that value. The table below tallies up the number of sliders used in each contest.</p>\n<table>\n<tr>\n<th>Sliders Used</th>\n<th>Percent of Contests</th>\n</tr>\n<tr>\n<td>8</td>\n<td>9%</td>\n</tr>\n<tr>\n<td>7</td>\n<td>15%</td>\n</tr>\n<tr>\n<td>6</td>\n<td>21%</td>\n</tr>\n<tr>\n<td>5</td>\n<td>20%</td>\n</tr>\n<tr>\n<td>4</td>\n<td>13%</td>\n</tr>\n<tr>\n<td>3</td>\n<td>9%</td>\n</tr>\n<tr>\n<td>2</td>\n<td>6%</td>\n</tr>\n<tr>\n<td>1</td>\n<td>2%</td>\n</tr>\n<tr>\n<td>0</td>\n<td>5%</td>\n</tr>\n</table>\n<p>It turns out that in 95% of contests, at least one slider is used. However, the modus operandi seems to be to pick a few values to emphasize, while skipping over the rest. Only in 9% of cases are all eight sliders used. On average, it’s closer to five sliders.</p>\n<h3>Is there variety in the responses?</h3>\n<p>Even if contest holders are using the sliders, it’s not very informative if they’re all using them to give identical responses. Here’s a breakdown of how each slider is used by percent and standard deviation, which gives a taste of how diverse the responses are.</p>\n<table>\n<tr>\n<th></th>\n<th>-5</th>\n<th>-4</th>\n<th>-3</th>\n<th>-2</th>\n<th>-1</th>\n<th>0</th>\n<th>+1</th>\n<th>+2</th>\n<th>+3</th>\n<th>+4</th>\n<th>+5</th>\n<th>Mean</th>\n<th>SD</th>\n</tr>\n<tr>\n<th>Manliness</th>\n<td>2</td>\n<td>2</td>\n<td>4</td>\n<td>5</td>\n<td>6</td>\n<td>49</td>\n<td>7</td>\n<td>12</td>\n<td>7</td>\n<td>2</td>\n<td>4</td>\n<td>+0.37</td>\n<td>1.97</td>\n</tr>\n<tr>\n<th>Maturity</th>\n<td>2</td>\n<td>2</td>\n<td>8</td>\n<td>12</td>\n<td>12</td>\n<td>35</td>\n<td>9</td>\n<td>10</td>\n<td>7</td>\n<td>2</td>\n<td>2</td>\n<td> -0.13</td>\n<td>1.97</td>\n</tr>\n<tr>\n<th>Bling factor</th>\n<td>6</td>\n<td>5</td>\n<td>10</td>\n<td>12</td>\n<td>11</td>\n<td>39</td>\n<td>6</td>\n<td>6</td>\n<td>4</td>\n<td>1</td>\n<td>1</td>\n<td>-0.77</td>\n<td>2.02</td>\n</tr>\n<tr>\n<th>Ageness</th>\n<td>9</td>\n<td>8</td>\n<td>18</td>\n<td>19</td>\n<td>9</td>\n<td>26</td>\n<td>3</td>\n<td>3</td>\n<td>2</td>\n<td>1</td>\n<td>1</td>\n<td>-1.57</td>\n<td>2.07</td>\n</tr>\n<tr>\n<th>Fun</th>\n<td>3</td>\n<td>3</td>\n<td>7</td>\n<td>12</td>\n<td>12</td>\n<td>27</td>\n<td>9</td>\n<td>12</td>\n<td>9</td>\n<td>3</td>\n<td>3</td>\n<td>+0.04</td>\n<td>2.25</td>\n</tr>\n<tr>\n<th>Volume</th>\n<td>2</td>\n<td>2</td>\n<td>6</td>\n<td>12</td>\n<td>12</td>\n<td>50</td>\n<td>6</td>\n<td>7</td>\n<td>4</td>\n<td>1</td>\n<td>1</td>\n<td>-0.32</td>\n<td>1.65</td>\n</tr>\n<tr>\n<th>Complexity</th>\n<td>5</td>\n<td>6</td>\n<td>17</td>\n<td>23</td>\n<td>11</td>\n<td>29</td>\n<td>3</td>\n<td>3</td>\n<td>2</td>\n<td>1</td>\n<td>1</td>\n<td>-1.38</td>\n<td>1.83</td>\n</tr>\n<tr>\n<th>In-your-faceness</th>\n<td>0</td>\n<td>1</td>\n<td>3</td>\n<td>6</td>\n<td>6</td>\n<td>49</td>\n<td>10</td>\n<td>13</td>\n<td>8</td>\n<td>2</td>\n<td>3</td>\n<td>+0.50</td>\n<td>1.69</td>\n</tr>\n</table>\n<p>Far and away, 0 is the most popular choice for every value, reaching 50% for a few. None too surprising given that it’s both the neutral answer and the default. Still, there is a fair deal of variation.</p>\n<p>Some of the values are heavily skewed (e.g., ageness, complexity). This could be a matter of terminology (“complex” might hold a more negative connotation than a term like “detailed”), or simply the prevailing trends.</p>\n<h3>How do values relate to one another?</h3>\n<p>To explore correlation between values, here’s a table of pairwise comparisons.</p>\n<table>\n<tr>\n<th></th>\n<th>Maturity</th>\n<th>Bling</th>\n<th>Ageness</th>\n<th>Fun</th>\n<th>Volume</th>\n<th>Complexity</th>\n<th>Faceness</th>\n</tr>\n<tr>\n<th>Manliness</th>\n<td>.201</td>\n<td>.050</td>\n<td>-.044</td>\n<td>.312</td>\n<td>-.076</td>\n<td>.083</td>\n<td>.091</td>\n</tr>\n<tr>\n<th>Maturity</th>\n<td></td>\n<td>-.108</td>\n<td>.278</td>\n<td>.475</td>\n<td>.165</td>\n<td>.142</td>\n<td>-.034</td>\n</tr>\n<tr>\n<th>Bling factor</th>\n<td></td>\n<td></td>\n<td>.027</td>\n<td>-.136</td>\n<td>-.092</td>\n<td>-.087</td>\n<td>.133</td>\n</tr>\n<tr>\n<th>Ageness</th>\n<td></td>\n<td></td>\n<td></td>\n<td>.135</td>\n<td>.239</td>\n<td>.098</td>\n<td>-.145</td>\n</tr>\n<tr>\n<th>Fun</th>\n<td></td>\n<td></td>\n<td></td>\n<td></td>\n<td>.276</td>\n<td>.123</td>\n<td>-.065</td>\n</tr>\n<tr>\n<th>Volume</th>\n<td></td>\n<td></td>\n<td></td>\n<td></td>\n<td></td>\n<td>-.107</td>\n<td>-.407</td>\n</tr>\n<tr>\n<th>Complexity</th>\n<td></td>\n<td></td>\n<td></td>\n<td></td>\n<td></td>\n<td></td>\n<td>.110</td>\n</tr>\n</table>\n<p>As you can see, fun tends to be associated with youth and masculinity. Volume & in-your-faceness also have substantial overlap.</p>\n<p>If a value needed to be made redundant, a strong case could be made for either volume or in-your-faceness, given all of the data above.</p>\n<h3>What else?</h3>\n<p>Of course looking at how contest holders use the sliders is only half of the conversation. The other half is to ask as designers: Do you actually pay attention to these sliders? Is it only when a response is at an extreme? Which values contribute most to your practice? Would any other values would be useful to you?</p>\n<div class='footnotes' id='footnotes-5717'>\n<div class='footnotedivider'></div>\n<ol>\n<li id='fn-5717-1'> More could be done with this data, including breaking it down by industry (e.g., Food & Drink, Medical & Pharmaceutical, Sport). Maybe I will do that in a follow-up post. <a href='http://thomaspark.co/wp/wp-content/uploads/2011/12/999designs.csv'>Here’s</a> a CSV file if you want to explore. <span class='footnotereverse'><a href='#fnref-5717-1'>↩</a></span></li>\n</ol>\n</div>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Data",
"term": "Data",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=5484",
"title": "Density Control",
"description": "Google has been making sweeping changes to the look of their products. One of these changes is the addition of density control. With a couple of clicks, users of Gmail and Reader can now switch … <a href=\"https://thomaspark.co/2011/12/density-control/\">Read more</a>",
"url": "https://thomaspark.co/2011/12/density-control/",
"published": "2011-12-16T17:43:06.000Z",
"updated": "2011-12-16T17:43:06.000Z",
"content": "<p>Google has been making <a href=\"http://googleblog.blogspot.com/2011/11/gmails-new-look.html\" target=\"_blank\">sweeping</a> <a href=\"http://googlereader.blogspot.com/2011/10/new-in-reader-fresh-design-and-google.html\" target=\"_blank\">changes</a> to the look of their products. One of these changes is the addition of <strong>density control</strong>. With a couple of clicks, users of Gmail and Reader can now switch between a <strong>comfortable</strong>, <strong>cozy</strong>, and <strong>compact</strong> display.</p>\n<p><span id=\"more-5484\"></span> It may seem like a totally unremarkable feature. But here’s why Google deserves credit for it.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/12/densitycontrol.gif\" alt=\"\" title=\"Comfortable, cozy, compact\" width=\"600\" height=\"340\" class=\"aligncenter size-full wp-image-5589\" /></p>\n<h3>It’s Uncommon</h3>\n<p>Density control is surprisingly rare. It’s not to be confused with <a href=\"http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html\" target=\"_blank\">zoom</a>, which is found in all sorts of applications from web browsers to Office. Zoom enlarges everything, whereas display density changes only the spacing between things. In Reader for instance, comfortable, cozy, and compact all use a 13-pixel font, but give items a height of 37, 31, and 27 pixels respectively</p>\n<p>Only spatial file managers come to mind as another example. Though I’m sure there’s a laundry list of others I’ve forgotten.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/12/finder.png\" alt=\"\" title=\"Mac Finder\" width=\"600\" height=\"416\" class=\"aligncenter size-full wp-image-5636\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/12/finder.png 600w, https://thomaspark.co/wp/wp-content/uploads/2011/12/finder-300x208.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" /></p>\n<h3>It’s Useful</h3>\n<p>The old Gmail and Reader were most like the compact setting, packing lots of information into the available space. Yet it’s apparent that Google’s designers now prefer comfortable as the default for desktop resolutions.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/12/oldreader.png\" alt=\"\" title=\"Old Reader\" width=\"570\" height=\"419\" class=\"aligncenter size-full wp-image-5678\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/12/oldreader.png 570w, https://thomaspark.co/wp/wp-content/uploads/2011/12/oldreader-300x221.png 300w\" sizes=\"auto, (max-width: 570px) 100vw, 570px\" /></p>\n<p>Many power users want <a href=\"http://www.codinghorror.com/blog/2006/07/information-density-and-dr-bronner.html\" target=\"_blank\">information density</a> at all costs, while others want the greater accessibility or readability or aesthetics that spacing brings. People can be extremely sensitive to these preferences, especially when dealing with changes to a familiar interface (the Twitter iPhone client is <a href=\"http://www.marco.org/2011/12/09/twitter-client-screenshots\" target=\"_blank\">a recent case of this</a>). And this is where density control comes in.</p>\n<p>Instead of a temporary measure meant to appease a grumbling user base, I hope this is a sign of what’s to come in other Google products. Users of Search, Docs, and News could also benefit from density control. In fact, it’s something we should see more of in general, particularly for information-dense applications.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "User Interface",
"term": "User Interface",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=5224",
"title": "Touch on Kindle",
"description": "I was lucky enough to receive a Kindle Touch as an early Christmas present. To be clear, I love it as a long-form reading device, from its weight to its battery life to its integration … <a href=\"https://thomaspark.co/2011/12/touch-on-kindle/\">Read more</a>",
"url": "https://thomaspark.co/2011/12/touch-on-kindle/",
"published": "2011-12-07T16:44:53.000Z",
"updated": "2011-12-07T16:44:53.000Z",
"content": "<p>I was lucky enough to receive a <a href=\"http://www.amazon.com/Kindle-Touch-Wi-Fi-Ink-Display/dp/B005890G8Y/\" target=\"_blank\">Kindle Touch</a> as an early Christmas present. To be clear, I love it as a long-form reading device, from its weight to its battery life to its integration with Amazon’s ecosystem. It’s already begun to replace my next shelf of books.</p>\n<p>With that said, here’s my quick review of it so far, with a few ways Amazon could make it that much better.</p>\n<p><span id=\"more-5224\"></span> </p>\n<h4>Touch</h4>\n<p>Most smartphones and tablets rely on capacitive sensors embedded directly in the display, but the Kindle Touch has infrared sensors set in the bezel. Whereas capacitive touch can distinguish skin from other forms of contact, these infrared sensors detect nearly anything as a touch event. The upside is that you can use the Kindle Touch while wearing gloves or with any pointy thing as a stylus. The downside is that other materials like the fabric of your sleeve can accidentally trigger it. These are more side effects though, of Amazon using infrared sensors to preserve the quality of the E Ink display.</p>\n<p>The Kindle Touch touts a range of multitouch gestures. Taps are used for page turning, item selection, and the soft keyboard. Swipes can also be used to turn pages, and to scroll elements that extend offscreen. Pinch allows you to adjust text size and zoom into a webpage. In terms of recognizing these gestures as input, it’s fairly reliable and precise. </p>\n<p>One thing that has made iOS so successful is its use of direct manipulation — that is, fine-grained (essentially continuous) gesture input, mapped closely to the system’s feedback, which models some physical phenomenon. Apple was able to create the illusion of manipulating elements as if they were physical, and they accomplished it having iOS be extremely responsive to the user’s gestures.</p>\n<p>However, the Kindle’s E Ink display, you may be aware, is slow. Refresh rates measure in the hundreds of milliseconds, compared to 17 milliseconds for devices like the iPhone and iPad. So with the Kindle Touch, Amazon has wisely used multitouch gestures more to invoke discrete commands than for continuous direct manipulation. What this means is that a swipe, no matter how fast or far, moves the carousel of books three places; each pinch enlarges text by one size. The exception is the web browser, and there’s a reason that’s still experimental.</p>\n<h4>Form Factor</h4>\n<p>My first thought upon opening the package was that the Kindle Touch is even smaller than I imagined. With each successive model, Amazon has shrunk the form factor down while keeping the 6-inch display intact. It’s gone from 8.0 × 5.3 inches in the first two generations, to 7.5 × 4.8 in the Kindle 3, to 6.8 × 4.7 in the Kindle Touch (Kindle 4 is smaller yet).</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/12/sidebyside.jpg\" alt=\"\" title=\"Kindle 2, Kindle Touch, paperback\" width=\"600\" height=\"300\" class=\"aligncenter size-full wp-image-5449\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/12/sidebyside.jpg 600w, https://thomaspark.co/wp/wp-content/uploads/2011/12/sidebyside-300x150.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" /></p>\n<p>While greater portability is nice, it’s past the point of diminishing returns. I’d like to see the next version of the Kindle Touch return to the original form factor – with display enlarged – making it roughly the size of a large paperback. Reading books would be made more comfortable, navigating the library and store even more so. </p>\n<h4>Home Button</h4>\n<p>Setup is dead simple, but afterwards I got stuck for longer than I care to admit on how to access my library. I eventually realized that what I had assumed to be a speaker was no speaker at all.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/12/homebutton.jpg\" alt=\"\" title=\"Not a speaker\" width=\"600\" height=\"175\" class=\"aligncenter size-full wp-image-5417\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/12/homebutton.jpg 600w, https://thomaspark.co/wp/wp-content/uploads/2011/12/homebutton-300x88.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" /></p>\n<p>A silly oversight on my part to be sure. But as bad as it is to make buttons non-obvious in software, it’s that much worse in hardware. TV makers, are you listening?</p>\n<h4>Book Covers</h4>\n<p>I was disappointed to learn that the library can’t display book covers. I don’t know where I got that idea from.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/12/kindletouch.jpg\" alt=\"\" title=\"Kindle Touch with Ribbon\" width=\"490\" height=\"484\" class=\"aligncenter size-full wp-image-5420\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/12/kindletouch.jpg 490w, https://thomaspark.co/wp/wp-content/uploads/2011/12/kindletouch-300x296.jpg 300w\" sizes=\"auto, (max-width: 490px) 100vw, 490px\" /></p>\n<p>Oh, right. Amazon, please add this option for when we’re using your books, not just when you’re selling them to us.</p>\n<h4>X-Ray</h4>\n<p>One of the value-added features the Kindle Touch offers is <a href=\"http://blog.laptopmag.com/video-amazon-kindle-touchs-x-ray-reference-tool-makes-ereading-easier\" target=\"_blank\">X-Ray</a>. Amazon analyzes each book and presents key people, places, and things, background information on them, and where they show up in the book.</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/12/xray.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/12/xray-1024x655.png\" alt=\"\" title=\"X-Ray\" width=\"555\" height=\"355\" class=\"aligncenter size-large wp-image-5431\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/12/xray-1024x655.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2011/12/xray-300x192.png 300w, https://thomaspark.co/wp/wp-content/uploads/2011/12/xray.png 1250w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" /></a></p>\n<p>Not all books support it yet, but Amazon doesn’t tell you which do and don’t. (As of this writing, <a href=\"http://www.amazon.com/Man-Who-Mistook-Wife-ebook/dp/B003MQNI6W/\" target=\"_blank\">The Man Who Mistook His Wife for a Hat</a> does, <a href=\"http://www.amazon.com/Consider-Lobster-Other-Essays-ebook/dp/B000S1LVHW/\" target=\"_blank\">Consider the Lobster</a> does not). Under the “Text-to-Speech” bullet point seems as good a spot as any.</p>\n<h4>The Other Kindle</h4>\n<p>Overall, I’m highly satisfied with the Kindle Touch. But if you’re in the market for an e-reader, the Kindle 4 is also <a href=\"http://www.marco.org/2011/12/02/kindle-touch-vs-nook-simple-touch-kobo-touch-kindle-4\" target=\"_blank\">worthy of consideration</a>.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=4930",
"title": "Every Apple Storefront Ever",
"description": "Way back in August of 2001, some good friends and I took a road trip down to Virginia to attend a concert. Unfortunately the rains came, the venue got flooded, and the concert was cancelled. … <a href=\"https://thomaspark.co/2011/11/every-apple-storefront/\">Read more</a>",
"url": "https://thomaspark.co/2011/11/every-apple-storefront/",
"published": "2011-11-09T02:27:42.000Z",
"updated": "2011-11-09T02:27:42.000Z",
"content": "<p>Way back in August of 2001, some good friends and I took a road trip down to Virginia to attend a concert. Unfortunately the rains came, the venue got flooded, and <a href=\"http://voices.washingtonpost.com/postrock/2008/05/radiohead_visits_dc_mother_nat.html\" target=\"_blank\">the concert was cancelled</a>. Disappointing, but as something of a concession prize, I got to check out the very first brick & mortar Apple Store, which had opened in Tysons Corner just a few weeks earlier.</p>\n<p><span id=\"more-4930\"></span> At the time, most analysts considered Apple’s fledgling retail initiative to be <a href=\"http://www.businessweek.com/magazine/content/01_21/b3733059.htm\" target=\"_blank\">doomed</a>. But though Tysons Corner seemed like a modest start, it was a blueprint for big things to come. 357 stores and counting later, Apple is <a href=\"http://retailsails.com/2011/08/23/retailsails-exclusive-ranking-u-s-chains-by-retail-sales-per-square-foot/\" target=\"_blank\">tops in sales per square foot</a>, and they did it by applying many of the same principles as they do to their products: natural materials, understated aesthetics, and <a href=\"http://www.macrumors.com/2011/11/08/apple-store-app-for-ios-updated-to-support-new-self-checkout-system-for-retail-stores/\" target=\"_blank\">innovative processes</a>.</p>\n<p>Anyway, one thing I wanted to do was go back and see how Apple storefronts have evolved over the past decade. I couldn’t find anywhere to do this easily, so I decided to create a gallery myself. Check it out here:</p>\n<blockquote><p><a href=\"http://applestorefronts.appspot.com/\" target=\"_blank\" onclick=\"pageTracker._link(this.href); return false;\">http://applestorefronts.appspot.com/</a></p></blockquote>\n<p>Scanning the gallery, you can see that Apple follows certain conventions, but isn’t shy about breaking them. They’ve tweaked things here and there, and are quite audacious with their flagship locations. (By the way, is “flagship” a formal designation, and is there a list of them somewhere?)</p>\n<p>What are your most or least favorites? What do you love or hate about them? Do you notice any trends? What do you think is Apple’s next step?</p>\n<h4>Notes</h4>\n<p>Images collected from Apple.com with <a href=\"http://www.crummy.com/software/BeautifulSoup/\" target=\"_blank\">Beautiful Soup</a>. Opening dates courtesy of <a href=\"http://www.ifoapplestore.com/db/\" target=\"_blank\">ifoAppleStore</a>. The gallery uses <a href=\"http://www.appelsiini.net/projects/lazyload\" target=\"_blank\">Lazy Load</a> by Mika Tuupola and is hosted on <a href=\"http://code.google.com/appengine/\" target=\"_blank\">Google App Engine</a>.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=4799",
"title": "Share in Google Reader Again",
"description": "Despite its name, Google Reader had up until now three levels of use: Reader: read RSS items Linkroll: share RSS items with friends Social network: converse on these shared RSS items with these friends What … <a href=\"https://thomaspark.co/2011/11/share-in-google-reader-again/\">Read more</a>",
"url": "https://thomaspark.co/2011/11/share-in-google-reader-again/",
"published": "2011-11-01T16:06:14.000Z",
"updated": "2011-11-01T16:06:14.000Z",
"content": "<p>Despite its name, Google Reader had up until now three levels of use:</p>\n<ol>\n<li>Reader: read RSS items</li>\n<li>Linkroll: share RSS items with friends</li>\n<li>Social network: converse on these shared RSS items with these friends</li>\n</ol>\n<p>What was nice about this is that you could exchange and comment on posts within the flow of reading them.</p>\n<p><span id=\"more-4799\"></span> Unfortunately, Google <a href=\"http://googlereader.blogspot.com/2011/10/new-in-reader-fresh-design-and-google.html\" target=\"_blank\">has cut the social features from Reader</a> in an attempt to funnel users to Google Plus. I’m only annoyed, but it’s left some people <a href=\"http://kirbybits.wordpress.com/2011/10/21/wherein-i-try-to-explain-why-google-reader-is-the-best-social-network-created-so-far/\" target=\"_blank\">really upset</a>. Here’s a way to restore some of this functionality, until a suitable replacement <a href=\"http://hivemined.org/\" target=\"_blank\">comes along</a>.</p>\n<h4>A Workaround</h4>\n<p>First, you’ll need an account with a bookmarking service. <a href=\"http://delicious.com/\" target=\"_blank\">Delicious</a> is free, but <a href=\"http://pinboard.in/\" target=\"_blank\">Pinboard</a> is well worth supporting. After you’ve signed up, go into “Reader settings” in the top-right corner, click “Send To”, and “Create a custom link” at the bottom. Add one of these as your URL:</p>\n<pre><code>http://delicious.com/save?url=${url}&title=${title}¬es=${source}</code></pre>\n<pre><code>https://pinboard.in/add?&url=${url}&title=${title}&description=${source}\n&tags=reader</code></pre>\n<p>If you want to go all in, name it “Share in Reader” and give it this icon URL: </p>\n<pre><code>http://www.google.com/reader/ui/favicon.ico</code></pre>\n<p>Get back to Reader and now you’ll have a familiar “Share in Reader” option at the bottom of each article. When you share something, there’s a field to enter comments, although two-way conversation isn’t possible.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/11/shareinreader.png\" alt=\"\" title=\"Share in Reader\" width=\"555\" height=\"243\" class=\"aligncenter size-full wp-image-4893\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/11/shareinreader.png 555w, https://thomaspark.co/wp/wp-content/uploads/2011/11/shareinreader-300x131.png 300w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" /></p>\n<p>You can also use bookmarklets to share any page you happen to visit, just like old times. Drag <a href=\"javascript:(function(){f='http://www.delicious.com/save?url='+encodeURIComponent(window.location.href)+'&title='+encodeURIComponent(document.title)+'¬es='+encodeURIComponent(''+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text))+'&v=6&';a=function(){if(!window.open(f+'noui=1&jump=doclose','deliciousuiv6','location=1,links=0,scrollbars=0,toolbar=0,width=550,height=585'))location.href=f+'jump=yes'};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})()\"\">Delicious</a> or <a href=\"javascript:q=location.href;if(document.getSelection)%7Bd=document.getSelection();%7Delse%7Bd='';%7D;p=document.title;void(open('https://pinboard.in/add?url='+encodeURIComponent(q)+'&description='+encodeURIComponent(d)+'&title='+encodeURIComponent(p)+'&tags=reader','Pinboard','toolbar=no,width=700,height=350'));\">Pinboard</a> into your bookmark bar.</p>\n<p>Give your friends your new feed, which will look like one of the following:</p>\n<pre><code>http://delicious.com/v2/rss/username</code></pre>\n<pre><code>http://feeds.pinboard.in/rss/u:username/t:reader</code></pre>\n<p>If you want to keep your shared links from being discoverable, you can dig up a private feed link for these services as well.</p>\n<p>Have your friends create their own, store them in a “People you follow” folder, and you’re back to good.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/11/peopleyoufollow.png\" alt=\"\" title=\"People You Follow\" width=\"264\" height=\"230\" class=\"aligncenter size-full wp-image-4895\" /></p>\n<p>A downside of this is that it can take an hour or two for the feeds to refresh. But if you want to resist the will of a mighty company like Google, while continuing to use their service, it’s going to be an uphill battle.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=4593",
"title": "In Portrait or Landscape",
"description": "Yesterday, Microsoft’s Steven Sinofsky responded to chatter about how Windows 8, in its grand debut, was demoed almost exclusively in landscape mode. In the post, he affirms Windows 8’s agnosticism. Our point of view is … <a href=\"https://thomaspark.co/2011/10/in-portrait-or-landscape/\">Read more</a>",
"url": "https://thomaspark.co/2011/10/in-portrait-or-landscape/",
"published": "2011-10-21T18:28:37.000Z",
"updated": "2011-10-21T18:28:37.000Z",
"content": "<p>Yesterday, Microsoft’s Steven Sinofsky <a href=\"http://blogs.msdn.com/b/b8/archive/2011/10/20/optimizing-for-both-landscape-and-portrait.aspx\" target=\"_blank\">responded</a> to chatter about how Windows 8, in its grand debut, was demoed almost exclusively in landscape mode. In the post, he affirms Windows 8’s agnosticism.</p>\n<p><span id=\"more-4593\"></span> <img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.me/wp/wp-content/uploads/2011/10/windows-8-tablet.jpg\" alt=\"\" title=\"Windows 8 Tablet\" width=\"595\" height=\"389\" class=\"aligncenter size-full wp-image-4703\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/windows-8-tablet.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/windows-8-tablet-300x196.jpg 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<blockquote><p>Our point of view is that both portrait and landscape orientations are important, and experiences can be great in either orientation. Rather than picking a posture and orientation for optimization, we designed an experience that makes sense regardless of how the device is held, one that feels tailored for the app and its content.</p></blockquote>\n<p>Ignoring that the <a href=\"http://thisismynext.com/2011/09/13/windows-8-samsung-tablet-leak/\" target=\"_blank\">first Windows 8 tablet from Samsung</a> has its hardware button positioned to make landscape the default, and the packaging to reflect that (<a href=\"http://www.apple.com/ipad/built-in-apps/\" target=\"_blank\">in contrast to the iPad</a>), Sinofsky’s response still rings true. <a href=\"http://brooksreview.net/2011/09/tablet-power/\" target=\"_blank\">This informal survey</a> from Ben Brooks further underscores his point.</p>\n<p>This naturally leads to questions about when and why people might favor one orientation over the other. Most users probably hold their tablets in landscape to watch videos and in portrait to read long-form text. But what about for all of the other ways tablets can be used?</p>\n<h3>Some Stats</h3>\n<p>Since I’m not privy to data that might answer this, I thought an interesting proxy might be to look at how apps are presented in the App Store. Do apps tend to feature screenshots in one particular orientation? Are there patterns among certain classes of apps? This reveals a bit about how apps are designed to be used or how the developers idealize it.</p>\n<p>I went through the top paid iPad apps, as well as the top 25 for each App Store category, and classified each into one of five categories: all of the screenshots are portrait, or landscape; most (all but one) are portrait, or landscape; and they’re about even (more than one of each).</p>\n<p>Here’s how the 200 top paid apps look.</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/topapps.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/topapps-1024x192.png\" alt=\"\" title=\"Top Paid iPad Apps\" width=\"595\" height=\"111\" class=\"aligncenter size-large wp-image-4633\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/topapps-1024x192.png 1024w, https://thomaspark.co/wp/wp-content/uploads/2011/10/topapps-300x56.png 300w, https://thomaspark.co/wp/wp-content/uploads/2011/10/topapps.png 1119w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></a></p>\n<p>Surprisingly, only 21 percent show off their app in both orientations.</p>\n<p>Despite the primacy of portrait in Apple’s iPad marketing, the majority of top paid apps use landscape in theirs, at least within the App Store. That’s no guarantee of course that this is how people spend most of their <em>time</em> on their iPads, using these and other apps.</p>\n<p>Not all categories are represented equally in top paid apps, which happens to be extremely game heavy. By looking at each App Store category individually, a better picture emerges of the diverse ways that iPads are held and used.</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/categories.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/categories-1024x658.png\" alt=\"\" title=\"Orientation by iPad App Categories\" width=\"595\" height=\"382\" class=\"aligncenter size-large wp-image-4635\" /></a></p>\n<p>Platforms today are recognizing that great user experiences have the potential to be created in either portrait or landscape, and this is certainly an important first step. But this graph renews questions about when and why developers choose one orientation over the other, and what opportunities there are for both new and existing apps to make better use of the available space, however the tablet is held.</p>\n<p>Given how only 21 percent of iPad apps show themselves off as fluid between landscape and orientation, one wonders if Windows 8 developers will be up to the task of building apps in both orientations, plus <a href=\"http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/1261.Windows_2D00_in_2D00_landscape_2D00_mode_5F00_636279EA.png\" target=\"_blank\">the snap and fill views</a>, for <a href=\"http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/5875.Chart_2D002D002D00_Windows_2D00_7_2D00_screen_2D00_resolutions_5F00_3E64B971.png\" target=\"_blank\">so many resolutions and aspect ratios</a> — and doing it well.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Data",
"term": "Data",
"url": null
},
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
},
{
"label": "User Interface",
"term": "User Interface",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=4413",
"title": "User Research Gone Astray",
"description": "The Building Windows 8 blog offers some fascinating insight into Microsoft’s research and design processes. Take the recent post on improving Windows Explorer. It begins with a discussion on how Windows Explorer is used today. … <a href=\"https://thomaspark.co/2011/10/user-research-gone-astray/\">Read more</a>",
"url": "https://thomaspark.co/2011/10/user-research-gone-astray/",
"published": "2011-10-16T15:08:02.000Z",
"updated": "2011-10-16T15:08:02.000Z",
"content": "<p>The <a href=\"http://blogs.msdn.com/b/b8/\" target=\"_blank\">Building Windows 8 blog</a> offers some fascinating insight into Microsoft’s research and design processes. Take the recent post on <a href=\"http://blogs.msdn.com/b/b8/archive/2011/08/29/improvements-in-windows-explorer.aspx\" target=\"_blank\">improving Windows Explorer</a>.</p>\n<p><span id=\"more-4413\"></span> It begins with a discussion on how Windows Explorer is used today. Through telemetry data — “based on hundreds of millions of individuals opting in to provide anonymous data about product usage” — Microsoft finds that the top 10 commands make up 81.8% of use, and that these commands (e.g., paste, properties, copy) are primarily accessed through the contextual menu.</p>\n<p>The development team combines this with customer feedback on the top requested features, and uses this to justify the changes from Windows 7…</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/win7-window.png\" alt=\"\" title=\"Windows 7 window\" width=\"595\" height=\"519\" class=\"aligncenter size-full wp-image-4438\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/win7-window.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/win7-window-300x262.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>…to the design below.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/win8-window.png\" alt=\"\" title=\"Windows 8 window\" width=\"595\" height=\"670\" class=\"aligncenter size-full wp-image-4430\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/win8-window.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/win8-window-266x300.png 266w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>It seems that essentially, every single command that customers have used or requested has been moved into a <a href=\"http://en.wikipedia.org/wiki/Ribbon_(computing)\" target=\"_blank\">ribbon</a> or wedged into some corner of the chrome. And many are rightfully <a href=\"http://seldo.tumblr.com/post/9549775746/this-is-genuinely-microsofts-idea-of-a\" target=\"_blank\">lambasting it</a>.</p>\n<p>But, you might protest, they did research! With users! And got a ton of data! So how did it go wrong?</p>\n<h3>The IROP Keyboard</h3>\n<p>By focusing user research on low-level operations with the old system, and using that as the starting point for the redesign, you end up merely resizing, rearranging, and removing parts of the interface. You don’t make the quantum leap, and you sometimes make things worse.</p>\n<p>I’m reminded of a recent paper by Andreas Zeller, Thomas Zimmerman, and Christian Bird (the last two authors from Microsoft Research, ironically) titled <a href=\"http://thomas-zimmermann.com/publications/details/zeller-promise-2011/\" target=\"_blank\">Failure is a Four-Letter Word: A Satire in Empirical Research</a>.</p>\n<p>In the paper, the authors collect keystroke-level data in Eclipse and correlate it with programmers’ errors. They find this data to be an excellent predictor, with the letters “i”, “r”, “o”, and “p” guilty of the strongest correlations. Based on these findings, they come up with a cheeky solution for reducing programmers’ errors:</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/irop-keyboard.jpg\" alt=\"\" title=\"IROP Keyboard\" width=\"595\" height=\"226\" class=\"aligncenter size-full wp-image-4494\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/irop-keyboard.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/irop-keyboard-300x114.jpg 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>The IROP keyboard addresses the data, quite directly. But it obviously misses the deeper problems.</p>\n<h3>From Actions to Activities</h3>\n<p><a href=\"http://www.jnd.org/dn.mss/human-centered_design_considered_harmful.html\" target=\"_blank\">In the vocabulary of Donald Norman</a>, operations combine to make actions, which make tasks, which make activities. According to this scheme, Microsoft has with their data looked at actions. The key is to start higher up this hierarchy, considering the activities users are engaged in and the goals they’re trying to achieve.</p>\n<p>Windows Explorer is <a href=\"http://www.computerworld.com/s/article/print/9220157/A_deep_dive_into_Windows_8_Developer_Preview\" target=\"_blank\">gradually being sunset</a>, so they get some slack here. But I sure hope they aren’t being steered wrong elsewhere by their user research.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "User Interface",
"term": "User Interface",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=4273",
"title": "Ghost Legs: Randomizing the Asian Way",
"description": "I had a bunch of relatives from Korea visit over the summer, and naturally an arm wrestling tournament broke out. What I found most interesting though was how they set up the initial match-ups. They … <a href=\"https://thomaspark.co/2011/10/ghost-legs-randomizing-the-asian-way/\">Read more</a>",
"url": "https://thomaspark.co/2011/10/ghost-legs-randomizing-the-asian-way/",
"published": "2011-10-12T16:50:41.000Z",
"updated": "2011-10-12T16:50:41.000Z",
"content": "<p>I had a bunch of relatives from Korea visit over the summer, and naturally an arm wrestling tournament broke out. What I found most interesting though was how they set up the initial match-ups. They didn’t draw straws, pick names out of a hat, roll a die, or eeny meeny miny moe. Instead, they made a grid.</p>\n<p><span id=\"more-4273\"></span> I learned that this is a common way of randomizing things in Asia. In Korea it’s called 사다리, in China 畫鬼腳, and in Japan 阿弥陀籤. The Korean and Chinese translate to <a href=\"https://en.wikipedia.org/wiki/Ghost_Leg\" target=\"_blank\" rel=\"noopener noreferrer\">ghost leg</a>, their poetic word for “ladder”.</p>\n<p>How it works is this. You list the things you want to randomize at the top of your paper. You write the categories you want to randomly place them into at the bottom. Draw vertical lines connected each pair — these make up the “legs” of the ladder. Then randomly draw in “rungs”, or you can fold over the options to cover them up and have someone else do it. Once that’s done, follow each path down the ladder, taking every rung you reach. <a href=\"http://askakorean.blogspot.com/2010/12/how-do-you-climb-ladder.html\" target=\"_blank\" rel=\"noopener noreferrer\">This post</a> gives a visual step-by-step of how it works, and <a href=\"http://www2.edc.org/makingmath/studentWork/amidaKuji/AmidaKujiByDavidSenft.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">this paper</a> offers a mathematical analysis.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/ghostlegs.png\" alt=\"\" title=\"Ghost Legs\" width=\"500\" height=\"450\" class=\"aligncenter size-full wp-image-4590\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/ghostlegs.png 500w, https://thomaspark.co/wp/wp-content/uploads/2011/10/ghostlegs-300x270.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" /></p>\n<p>What I decided to do was create an interactive web version of this. I started with an HTML table, which leads to a few benefits. Since a table is already a grid, it’s straightforward to style it using CSS. The image above shows the result.</p>\n<p>Also, instead of dynamically creating the table, I made it so anyone can easily make their own table with labels and as many columns and rows as they like. Then by simply assigning it to the “ghostleg” class and copying over the JavaScript and CSS (which you’re welcome to do), they can have their own customized version. By using <code>thead</code> and <code>tfoot</code>, the section of the code to input all your labels is right at the top, not buried in the table markup.</p>\n<p>I looped through each table row, counting the number of cells and picking a random place to draw a rung (or skip the row). Finally, a hover function was attached that highlights the path from each item to its random outcome.</p>\n<p>Play around with <a href=\"https://thomaspark.co/projects/ghostlegs/\" target=\"_blank\" rel=\"noopener noreferrer\">Ghost Legs</a>, or have a look at the <a href=\"https://jsbin.com/ofoban/1/edit#javascript,html,live\" target=\"_blank\" rel=\"noopener noreferrer\">code</a>.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "Games",
"term": "Games",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=4083",
"title": "Fuzzy Circles in Google Plus",
"description": "The hallmark of Google Plus so far has been Circles. In contrast to Facebook where you’re either a friend or you’re not (until you put people into lists), Circles has you categorize people as friends, … <a href=\"https://thomaspark.co/2011/10/fuzzy-circles-in-google-plus/\">Read more</a>",
"url": "https://thomaspark.co/2011/10/fuzzy-circles-in-google-plus/",
"published": "2011-10-10T17:23:34.000Z",
"updated": "2011-10-10T17:23:34.000Z",
"content": "<p>The hallmark of Google Plus so far has been Circles. In contrast to Facebook where you’re either a friend or you’re not (until you put people into lists), Circles has you categorize people as friends, family, coworkers, etc. right from the start. This compartmentalization is meant to make targeting specific audiences and managing privacy easier.</p>\n<p><span id=\"more-4083\"></span> <img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/googleplus.png\" alt=\"\" title=\"Google Plus Circles\" width=\"595\" height=\"239\" class=\"aligncenter size-full wp-image-4235\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/googleplus.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/googleplus-300x121.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>This sounds simple, and it is if your circles are static. But things start to get hazy when your circles have changing memberships.</p>\n<p>Is posting to a circle like sending email? In this model, each message is sent off to everyone who’s in the group at that particular time. When you add someone to the group, they get access to messages sent only while they’re a member. When you remove them, they get to keep those messages but nothing more.</p>\n<p>Or is it more like giving out keys to a locked diary? Facebook walls and protected Twitter feeds fall into this category. When you add someone to the group, they get access to all of the accumulated content up to that point, past and present. When you remove them, the system revokes their access to all content.</p>\n<p>It turns out that when you add someone to a circle in Google Plus, they get access to all of the content that’s ever been posted to that circle, if not in their stream then by drilling into your activity. This kind of falls in line with the locked diary model. But unlike this model, removing someone from your circle does not revoke their access. Instead, a number of scenarios can play out.</p>\n<p>Compare what you expect to happen in each of the following situations with what actually occurs.</p>\n<ol>\n<li>\n<p><strong>You make a post to a circle, but realize you don’t want Alice, who’s in the circle, to see it. You quickly remove her from the circle.</strong></p>\n<p>Google Plus indicates to you that Alice no longer has access to the post, but if it made it into her stream, she can continue viewing it! Alice can even see comments made by others after she was removed, though she cannot make comments herself or share it with others. What does and does not end up in a person’s stream is not entirely clear.</p>\n</li>\n<li>\n<p><strong>You post to a circle, and Bob replies yet again with a drama-filled comment. You decide to remove him from the circle once and for all.</strong></p>\n<p>Because Bob has commented, he now keeps full access to the post. In this case, Google Plus correctly indicates that he has access. He can continue adding comments to the post, and he can share it with others outside the circle by default. And on top of that, he can see subsequent comments made to the post.</p>\n</li>\n<li>\n<p><strong>You posted some personal things to your circle, but that was awhile back. You add Carol, who you’ve just made friends with, to your circle. Unfortunately, she starts to act creepy and so you remove her.</strong></p>\n<p>These old posts most likely did not make it into Carol’s stream. Even if she went into your profile’s activity and commented on them there, she will lose access to them. If the posts did make it into her stream though (which might be possible if they’re not that old and/or her stream is not that populated), she keeps access. You just have no way of knowing which case it is.</p>\n</li>\n</ol>\n<p>Granted some of these are most certainly due to bugs, but this serves as a reminder that Circles are not as airtight as you might think.</p>\n<p>And though not as farcical as <a href=\"http://upload.wikimedia.org/wikipedia/en/8/8b/Google_Wave.png\" target=\"_blank\">Wave</a>, the model Google has created here is still complex, confusing user expectations for how the system works and social norms for how it should be used.</p>\n<p>This confusion will inevitably lead to gaffes. Even if these boil down to user error and not some technical failure, Google should not be entirely free from blame.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "User Interface",
"term": "User Interface",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=3823",
"title": "Making Menus Escapable",
"description": "A post on my impressions of Ubuntu 11 led to lots of thoughtful discussion here and over at Hacker News. The part that seemed to generate the most interest was my take on why certain … <a href=\"https://thomaspark.co/2011/10/making-menus-escapable/\">Read more</a>",
"url": "https://thomaspark.co/2011/10/making-menus-escapable/",
"published": "2011-10-07T13:59:57.000Z",
"updated": "2011-10-07T13:59:57.000Z",
"content": "<p>A post on <a href=\"http://thomaspark.co/2011/10/seven-minutes-in-ubuntu/\">my impressions of Ubuntu 11</a> led to lots of thoughtful discussion here and <a target=\"_blank\" href=\"http://news.ycombinator.com/item?id=3063156\">over at Hacker News</a>. The part that seemed to generate the most interest was my take on why certain menus seemed so troublesome.</p>\n<p><span id=\"more-3823\"></span> And while I described the problem in some depth, I glazed over any solution. So here I am to expand a bit on how Unity’s menus, and menus in general, might be improved, once again applying the <strong>angle of escape</strong> concept and pulling examples from the Mac.</p>\n<h3>Recap</h3>\n<p>I observed that when trying to select a menu item in Ubuntu, it’s quite easy to accidentally trip another menu. Due to the aspect ratio of Ubuntu’s menus, which tend to be taller and thinner, their angles of escape are often smaller than their Mac counterparts. Highlighted yellow in the screenshot below, you get 65 degrees with the Apple menu, compared to 50 degrees with Ubuntu’s system menu. This difference seems to have a noticeable impact.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated.png\" alt=\"\" title=\"Mac OS X and Ubuntu system menus\" width=\"595\" height=\"310\" class=\"aligncenter size-full wp-image-3726\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated-300x156.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>Further, let’s assume that users have two tendencies: to target the text of a menu item more than the whitespace, and to move in a straight line to their target. I believe these are reasonable hypotheses, at least for novices who haven’t trained themselves out of this behavior yet. Then due to Ubuntu’s placement of the menu item text in the example above, the problem is only compounded.</p>\n<h3>Resize the Menu</h3>\n<p>So what can we do about this? A straightforward approach is to increase the width of the menu. This helps the menu both as a target (invoking <a href=\"http://particletree.com/features/visualizing-fittss-law/\" target=\"_blank\">Fitts’ Law</a> again) and as a point of escape, a double win.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/clocks.png\" alt=\"\" title=\"Analog and Digital Time Menus on Mac\" width=\"399\" height=\"350\" class=\"aligncenter size-full wp-image-3877\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/clocks.png 399w, https://thomaspark.co/wp/wp-content/uploads/2011/10/clocks-300x263.png 300w\" sizes=\"auto, (max-width: 399px) 100vw, 399px\" /></p>\n<p>But while it helps visibility and targeting to a lesser degree, <strong>increasing the height of a menu actually hurts escapability</strong>. This is something to consider when comparing OS X’s 21 pixel menu bar to Ubuntu’s 23 pixels.</p>\n<h3>Buffer Time and Space</h3>\n<p>Since the ’80s, both Apple and Microsoft have dealt with escapability in the context of hierarchical menus, each addressing it in their own way. If you were to treat hierarchical menus at face value, the user would have to steer carefully across the width of a menu item to avoid triggering a neighbor.</p>\n<p>Microsoft’s solution was, and continues to be, to keep the submenu displayed for an extra split second, regardless of your actions. If you’re quick enough, you can get to the submenu taking any path you wish.</p>\n<p>Apple’s solution in Mac OS was to <a href=\"http://www.quinn.echidna.id.au/Quinn/WWW/HISubtleties/HierarchicalMenus.html\" target=\"_blank\">widen the angle of escape to 90 degrees</a>, so that as long as your movement was more horizontal than vertical, the submenu would stay open. Bruce Tognazzini, the original drafter of Apple’s HIG, talks about both approaches <a href=\"http://www.asktog.com/columns/022DesignedToGiveFitts.html\" target=\"_blank\">here under question 6</a>.</p>\n<p>This <a href=\"http://arstechnica.com/apple/reviews/1999/12/macos-x-dp2.ars/5\" target=\"_blank\">went away in the transition to OS X</a>, but has since returned in a smarter form. Now the angle of escape is based on the size of the submenu, as long as you maintain a certain speed. Ubuntu takes a similar approach, but none of the OSes apply it to the main menu bar.</p>\n<p>In the image below, you can see how the naïve, classic Mac OS, and Mac OS X approaches compare in their angles of escape.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/submenu.gif\" alt=\"\" title=\"Submenus\" width=\"577\" height=\"900\" class=\"aligncenter size-full wp-image-3930\" /></p>\n<h3>Make the Menu Sticky</h3>\n<p>Another approach is to make the menu sticky. Once clicked, it stays activated until you click elsewhere, maximizing the angle of escape. The tradeoff here is that it prevents you from performing the “piano slide” to scan multiple menus quickly. This makes it best suited for specialized menus.</p>\n<p>Likely for technical reasons, third-party menu extras on the Mac take on this property, though Apple’s own menu extras do not. Apple’s Spotlight menu (which, it should be noted, is in the same position as Ubuntu’s system menu that started this whole discussion) quite intentionally gets the sticky treatment.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/menuextra1.png\" alt=\"\" title=\"Menu Extra on Mac\" width=\"595\" height=\"184\" class=\"aligncenter size-full wp-image-3971\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/menuextra1.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/menuextra1-300x93.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>Ubuntu might find good use for this approach in the right half of their menu bar.</p>\n<h3>Change the Target</h3>\n<p>A final approach is to offer visual cues for staying within the angle of escape. This might be achieved by keeping the menu item area narrow, dropping wider items further down the list, or lengthening the text of shorter items to fill the space.</p>\n<p>Strong highlighting, as found in OS X and Ubuntu, also encourages users to use the entire width of the menu item. While the highlighting in Windows 7 is more subtle, menu items are rendered as buttons on hover, similarly signaling that the whitespace can be clicked.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/startmenu.png\" alt=\"\" title=\"Windows 7 Start Menu\" width=\"509\" height=\"537\" class=\"aligncenter size-full wp-image-3977\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/startmenu.png 509w, https://thomaspark.co/wp/wp-content/uploads/2011/10/startmenu-284x300.png 284w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\" /></p>\n<p>To wrap up, let’s take a look at the volume controls in Mac OS X, Windows 7, and Ubuntu below. On Mac and Windows, the control stays within the angle of escape (though it doesn’t matter on Windows because theirs is sticky). On Ubuntu though, it extends well beyond it. <a href=\"http://www.youtube.com/watch?v=lVUokjAlREs\" target=\"_blank\">This video</a> demonstrates the problem in motion.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/volumecontrols.png\" alt=\"\" title=\"Volume controls for Mac, Windows, and Ubuntu\" width=\"526\" height=\"362\" class=\"aligncenter size-full wp-image-4066\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/volumecontrols.png 526w, https://thomaspark.co/wp/wp-content/uploads/2011/10/volumecontrols-300x206.png 300w\" sizes=\"auto, (max-width: 526px) 100vw, 526px\" /></p>\n<p>The obvious solution is to make Ubuntu’s volume control vertical. But we don’t necessarily have to follow the convention of other OSes to make it usable. We could make the menu sticky. We could add a time or space buffer. We could reorder the menu items. We could resize the menu or slider control. Or we could do some combination of these.</p>\n<p>Sure, this is all sweating the small stuff. But multiply that over a whole operating system, and that’s how you end up creating a great user experience.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "User Interface",
"term": "User Interface",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=3521",
"title": "Seven Minutes in Ubuntu",
"description": "For a while now, I’ve been using my home machine with MAMP to develop a research prototype. But last week, I got my hands on a PC to use as a web server. Before I … <a href=\"https://thomaspark.co/2011/10/seven-minutes-in-ubuntu/\">Read more</a>",
"url": "https://thomaspark.co/2011/10/seven-minutes-in-ubuntu/",
"published": "2011-10-02T14:10:47.000Z",
"updated": "2011-10-02T14:10:47.000Z",
"content": "<p>For a while now, I’ve been using my home machine with <a href=\"http://www.mamp.info/en/mamp/index.html\" target=\"_blank\">MAMP</a> to develop a research prototype. But last week, I got my hands on a PC to use as a web server. Before I could get started on it though, I needed an operating system to install — ideally one that would get the job done with minimal setup and training on my part. After a bit of reading online, I chose <a href=\"http://www.ubuntu.com/ubuntu\" target=\"_blank\">Ubuntu</a>.</p>\n<p><span id=\"more-3521\"></span> <a href=\"http://thomaspark.me/wordpress/wp-content/uploads/2011/10/ubuntu.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.me/wordpress/wp-content/uploads/2011/10/ubuntu-thumbnail.png\" alt=\"\" title=\"Ubuntu\" width=\"595\" height=\"446\" class=\"aligncenter size-full wp-image-4360\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/ubuntu-thumbnail.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/ubuntu-thumbnail-300x225.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></a></p>\n<p>What follows are my first impressions of Ubuntu 11. And I mean my very first impressions, after using it for just a few minutes, taking on the persona of a lifetime Mac user.</p>\n<p>And these impressions come from someone who’s used mostly Windows at work and Mac at home. Sure, there’s a sprinkling of Solaris, IRIX, and Linux mixed in there, but I haven’t used Ubuntu, and haven’t had to adjust to the changes that Unity brings (such as <a href=\"http://yokozar.org/blog/archives/194\" target=\"_blank\">moving the window controls</a>). So I’m just the user that Ubuntu is targetting.</p>\n<p>I hope you find this perspective of interest, whether you’re curious about an alternative operating system, or are a seasoned Linux user, developer, or advocate who wants to see things through a fresh set of eyes.</p>\n<h3>The Good</h3>\n<p>My greatest concern was that I’d have to do a lot of installing and configuring before I could get anything meaningful done. All I wanted was a standard setup, and to not derail focus from my work.</p>\n<p>Fortunately, Ubuntu presents a familiar interface and is ready to go right out of the box. It doesn’t take much nowadays given how many of our applications are web-based, and on Ubuntu, Firefox comes pre-installed (more on that later). Remote desktop is built-in, which made it a breeze to set up VNC with my Mac. Window management <a href=\"http://windows.microsoft.com/en-US/windows7/products/features/snap\" target=\"_blank\">a la Windows 7 Snap</a> was a nice surprise; this requires a third-party app on the Mac.</p>\n<h3>The Bad</h3>\n<p>Like Mac OS X, Ubuntu puts the active application’s name in the menu bar. In OS X, this contains a menu of application-level functions like About, Preferences, and Quit. In Ubuntu, this is a non-clickable region (highlighted red), despite being nestled among and pretty much indistinguishable from the clickable ones (highlighted green). There’s something jarring about clicking something expectantly and not having it respond.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/menubars-annotated.png\" alt=\"\" title=\"Ubuntu and Mac OS X menu bars\" width=\"595\" height=\"74\" class=\"aligncenter size-full wp-image-3802\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/menubars-annotated.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/menubars-annotated-300x37.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>I can see that the designers are trying to establish a hierarchy here, from the Ubuntu menu (which aligns with the dock) to the active application to the application’s menus. Still, there should be a stronger visual indicator that the application name is not clickable. Or you could just turn it into a menu, <a href=\"http://cbtcafe.com/mactutorials/applicationswitcher/appswitcher.html\" target=\"_blank\">taking a page from Mac OS 9</a>.</p>\n<p>You might have noticed that Ubuntu’s menu bar is more tightly packed than OS X’s. A problem here is that while trying to select an item from a drop-down menu, it’s easy to accidentally trip another menu. This is most problematic with the system menu in the top right corner.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated.png\" alt=\"\" title=\"Mac OS X and Ubuntu system menus\" width=\"595\" height=\"310\" class=\"aligncenter size-full wp-image-3726\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/system-menus-annotated-300x156.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>Mac OS X’s Apple menu gives you a target of 45 by 21 pixels, compared to Ubuntu’s 28 by 23 pixels. These areas are highlighted green above. But <a href=\"http://particletree.com/features/visualizing-fittss-law/\" target=\"_blank\">as Fitts’ Law reminds us</a>, these corner targets are both effectively infinite in size.</p>\n<p>More important than size is the <strong>angle of escape</strong> — the number of degrees you can move the cursor out without activating an adjacent menu. You get 65 degrees in OS X versus 50 degrees in Ubuntu, as highlighted yellow.</p>\n<p>In fact, Ubuntu should have an even bigger angle than OS X. Due to the placement of the icon on the right and the left-justification of the menu items, you can’t travel in a straight line to click the first few pieces of text — this will activate the next menu. Instead, you have to perform a loop-de-loop. Widening the clickable area would help somewhat.</p>\n<p>Now onto my next set of gripes, which center around managing new software. As I mentioned earlier, Firefox comes preinstalled. When I checked to see which version was installed, I was presented with the window below.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/mozilla-about.png\" alt=\"\" title=\"Firefox about window\" width=\"595\" height=\"362\" class=\"aligncenter size-full wp-image-3715\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/mozilla-about.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/10/mozilla-about-300x183.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>Version 4.0 is several major bumps behind the other platforms, which are sitting at 7.0.1. Below that is the text “Mozilla Firefox for Ubuntu canonical – 1.0”. Is this the 1.0 canonical version of Mozilla Firefox for Ubuntu? Or Mozilla Firefox for Ubuntu canonical version 1.0? And how does that relate to version 4.0? Apparently, <a href=\"https://bugs.launchpad.net/ubuntu/+source/firefox-3.5/+bug/418203\" target=\"_blank\">I’m not the only one</a> who finds this confusing.</p>\n<p>And worse yet, there is no obvious way to update. I’m still not clear on whether there’s a newer version available, and how to update if it’s the case.</p>\n<p>Anyway, the main reason I opened Firefox was to install Google Chrome (sorry Mozilla!). Fortunately, the latest version of Chrome was available to download. Double-clicking the package doesn’t take you to a standalone installer, but to Ubuntu Software Center.</p>\n<p>Here, software is listed at two level, technical items and what I presume to be applications. But what’s classified as each can be a surprise. In the application list are items like Input Method Switcher and Multimedia Systems Selector, things most would consider system extensions more so than apps. On the other hand, Google Chrome is listed in technical items with a nondescript icon and label, along with 1,303 other things. Can you spot it in the image below?</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/usc-chrome.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/10/usc-chrome.png\" alt=\"\" title=\"Ubuntu Software Center\" width=\"595\" height=\"361\" class=\"aligncenter size-full wp-image-3762\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/10/usc-chrome.png 882w, https://thomaspark.co/wp/wp-content/uploads/2011/10/usc-chrome-300x182.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></a></p>\n<p>After installing Chrome, the natural next step is to open it. Yet, there’s nowhere in Ubuntu Software Center to do this directly. Contrast this with Windows, where you’re asked if you want to start the program, or the new way in OS X, where an application installed from the Mac App store <a href=\"http://vimeo.com/18501598\" target=\"_blank\">jumps right into your dock</a>.</p>\n<h3>The Beautiful</h3>\n<p>Despite these issues, I give <a href=\"http://design.canonical.com/\" target=\"_blank\">the designers</a> major props. Open source software has a reputation for being ugly and catering only to the power user. But based on my initial experiences, they’ve created a polished user interface that’s beautiful and user friendly in Ubuntu.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "User Interface",
"term": "User Interface",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=3167",
"title": "The Devour Effect",
"description": "The folks over at Devour maintain a nice collection of videos, wrapped in a clean interface. One of the touches is that each video is presented using what I call the Devour Effect: a text … <a href=\"https://thomaspark.co/2011/09/the-devour-effect/\">Read more</a>",
"url": "https://thomaspark.co/2011/09/the-devour-effect/",
"published": "2011-09-26T16:12:52.000Z",
"updated": "2011-09-26T16:12:52.000Z",
"content": "<p>The folks over at <a href=\"http://devour.com\" target=\"_blank\">Devour</a> maintain a nice collection of videos, wrapped in a clean interface. One of the touches is that each video is presented using what I call the Devour Effect: a text description in the foreground and a still from the video blurred in the background.</p>\n<p><span id=\"more-3167\"></span> <img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/devour.png\" alt=\"\" title=\"Devour\" width=\"595\" height=\"345\" class=\"aligncenter size-full wp-image-3176\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/09/devour.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/devour-300x174.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>I was curious how Devour produced the blurred effect and so I took a look at their code. It turns out they simply preprocess the images in something like Photoshop. Sure, that may be the most bulletproof approach, but where’s the fun in that?</p>\n<p>What follows is a comparison between Devour’s approach and four other, more programmatic techniques, including a pure CSS solution. The ones that utilize canvas or SVG are based on <a href=\"http://www.flother.com/blog/2010/image-blur-html5-canvas/\" target=\"_blank\">Matt Riggott’s work</a>. And as a point of reference, you can see the actual rendering from Devour above and what an unblurred version looks like below.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/unblurred.png\" alt=\"\" title=\"Unblurred\" width=\"300\" height=\"170\" class=\"aligncenter size-full wp-image-3282\" /></p>\n<h3>Preprocess with Photoshop</h3>\n<p>As I mentioned, Devour creates blurred stills in advance. The text is then overlaid by assigning it a negative top margin. I’ve recreated this here. The only difference to the actual rendering above, you might notice, is that I use Futura since I don’t have access to <a href=\"http://www.ms-studio.com/FontSales/proximanovacond.html\" target=\"_blank\">Proxima Nova Condensed</a>.</p>\n<p><a href=\"http://jsbin.com/enaral/1/edit#html,live\" target=\"_blank\">View the code and live render</a>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/photoshop.png\" alt=\"\" title=\"Photoshop\" width=\"300\" height=\"170\" class=\"aligncenter size-full wp-image-3280\" /></p>\n<h3>Blur with Canvas and JavaScript</h3>\n<p>An alternative approach is to create a canvas element and embed the image in it. JavaScript can be used within a canvas to manipulate images, from scaling or rotating all the way down to pixel-specific operations. This is precisely how the <a href=\"http://www.pixastic.com/lib/docs/actions/blur/\" target=\"_blank\">blur action</a> in Pixastic works. Here, the blurring function loops through the image several times and averages each pixel’s color value with that of its neighbors.</p>\n<p><a href=\"http://jsbin.com/olebur/1/edit#javascript,html,live\" target=\"_blank\">View the code and live render</a>. You might notice that the image here is Base64 encoded. This is to overcome a cross-domain security issue with JS Bin. You should be able to reference the image in the normal way.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/canvas.png\" alt=\"\" title=\"Canvas\" width=\"300\" height=\"170\" class=\"aligncenter size-full wp-image-3277\" /></p>\n<h3>Blur with SVG and XML</h3>\n<p>SVG is an image format that has a number of filter effects built right into it. While SVG is normally reserved for vector graphics, you can also embed a bitmap image in it. Then all it takes is a few lines of XML to apply a Gaussian blur to it. One thing to note is the weird glow around the border.</p>\n<p><a href=\"http://jsbin.com/isifoc/1/edit#html,live\" target=\"_blank\">View the code and live render</a>. If you were to open the SVG file in a text editor, you would discover <a href=\"http://jsbin.com/uhedeh/1/edit#html,live\" target=\"_blank\">markup like this</a>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/svg.png\" alt=\"\" title=\"SVG\" width=\"300\" height=\"170\" class=\"aligncenter size-full wp-image-3281\" /></p>\n<h3>Layer with Canvas and JavaScript</h3>\n<p>In contrast to the pixel-based algorithms used in the previous techniques, the final two use a simple trick to blur more efficiently. Copies of the image are stacked upon each another, offset by a few pixels and partially transparent.</p>\n<p>Here, a canvas element is created and the image is embedded at full opacity. With each call of the blurring function, copies of the image are stacked on itself recursively, set at an opacity of 12.5 percent and offset in each direction by a pixel. Each iteration results in an increasingly blurred image.</p>\n<p><a href=\"http://jsbin.com/ixamep/1/edit#javascript,html,live\" target=\"_blank\">View the code and live render</a>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/layers.png\" alt=\"\" title=\"Layers\" width=\"300\" height=\"170\" class=\"aligncenter size-full wp-image-3279\" /></p>\n<h3>Layer with CSS</h3>\n<p>Finally, I wanted to see if I could achieve a similar effect using pure CSS — that is, without the aid of JavaScript, canvas, or SVG. Here, copies of the original image are set to an opacity of 12.5 percent and offset from the original by two pixels in each of eight directions.</p>\n<p>A couple of remarks about the code. The copies are all given absolute positioning, meaning they are positioned relative to their common parent. CSS classes are used to set the offset of an image in a cardinal direction; a combination of these classes is used to offset an image diagonally. Finally, in order to use z-index to keep text at the top of the stack, all of the elements using z-index are given a position other than default static.</p>\n<p><a href=\"http://jsbin.com/enucef/1/edit#html,live\" target=\"_blank\">View the code and live render</a>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/css.png\" alt=\"\" title=\"CSS\" width=\"300\" height=\"170\" class=\"aligncenter size-full wp-image-3278\" /></p>\n<h3>Conclusion</h3>\n<p>So how do these approaches measure up? As you can see from the side-by-side comparison, they all do an adequate job. Click to enlarge.</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/comparo.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/comparo.png\" alt=\"\" title=\"Comparison of outputs\" width=\"595\" height=\"337\" class=\"aligncenter size-full wp-image-3379\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/09/comparo.png 900w, https://thomaspark.co/wp/wp-content/uploads/2011/09/comparo-300x170.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></a></p>\n<p>If you don’t want to bust out Photoshop and wrangle with a bunch of images, or you want to create a dynamic effect, try one of the alternative approaches. If, on top of that, you’re not comfortable programming, you can get by with just CSS.</p>\n<p>But if you want what’s speediest and most robust on the client, do as Devour does.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=2668",
"title": "Trebek: Building an Offline Web App",
"description": "In my experimentation with HTML5, I ended up making Trebek, a web app that allows you to play along at home with Jeopardy! The idea is that by trying to answer questions before the contestants … <a href=\"https://thomaspark.co/2011/09/trebek-building-an-offline-web-app/\">Read more</a>",
"url": "https://thomaspark.co/2011/09/trebek-building-an-offline-web-app/",
"published": "2011-09-20T15:40:03.000Z",
"updated": "2011-09-20T15:40:03.000Z",
"content": "<p>In my experimentation with HTML5, I ended up making Trebek, a web app that allows you to play along at home with <a href=\"http://en.wikipedia.org/wiki/Jeopardy\" target=\"_blank\" rel=\"noopener noreferrer\">Jeopardy!</a> The idea is that by trying to answer questions before the contestants do and keeping score, you can gauge your chances of making it onto the show. <a href=\"http://www.pisspoor.com/jep.html\" target=\"_blank\" rel=\"noopener noreferrer\">According to two-time winner Karl Coryat</a>, you have an excellent shot if you can score $28,000 or higher on a consistent basis, and Trebek helps keep track of your performance.</p>\n<p><span id=\"more-2668\"></span> <a href=\"https://thomaspark.co/projects/trebek/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/iphone.png\" alt=\"\" title=\"Trebek on iPhone\" width=\"595\" height=\"316\" class=\"aligncenter size-full wp-image-3007\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/09/iphone.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/iphone-300x159.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></a></p>\n<p>You can try Trebek out below. For best results, load it in Safari on your iPhone or iPad, then <a href=\"http://www.lifehacker.com.au/2011/06/add-website-bookmarks-to-your-iphones-homescreen/\" target=\"_blank\" rel=\"noopener noreferrer\">add it to your home screen</a>.</p>\n<blockquote><p><a href=\"https://thomaspark.co/projects/trebek/\" target=\"_blank\" rel=\"noopener noreferrer\">https://thomaspark.co/projects/trebek/</a></p></blockquote>\n<p>What I want to do in this post is share some simple things I did to give Trebek a more app-like experience, despite it being a mere HTML/CSS/JavaScript bundle. If you’re interested in web development, read on.</p>\n<h3>Tailoring the interface by scaling elements</h3>\n<p>Trebek’s primary use case is leaning back on a sofa and pulling out your smartphone just as the show’s about to start. But it’s meant to be usable for – and therefore scales to – a full range of devices. You can test this out by loading it in a browser window and resizing to various shapes and sizes.</p>\n<p>There are several ways to achieve this, but what I recommend is setting the font-size of the body to 100% and then using em as a unit of measure throughout the rest of the code.</p>\n<pre>\n<code class=\"language-css\" lang=\"css\">\nbody {\n font-size: 100%;\n}\n\n#score {\n padding: 0.2em 0 0.2em 0;\n font-size: 6em;\n text-shadow: #000000 0.05em 0.05em 0.02em;\n}\n</code>\n</pre>\n<p>The size of em depends on the font-size of the element. By default, 1 em equals 16 pixels. But by changing the base font-size, you can scale all properties that are using em simultaneously. With the following jQuery, you can update body’s font-size, and therefore all of these properties, whenever the window is resized.</p>\n<pre>\n<code class=\"language-javascript\" lang=\"javascript\" nowrap=\"0\">\n$(window).resize(function(){\n $('body').css('font-size', Math.floor($(window).height() * 100 / 768) + '%');\n});\n</code>\n</pre>\n<p>You can see why using pixels instead might be a bad idea. As an absolute unit, you have to recalculate and update the pixel size of each property individually, each time the window is resized.</p>\n<p>On the other hand, using percent to size things is appealing since it’s relative by its very nature. Using percent also means you no longer require an update function for when the window is resized. If you set an image’s width to be 25%, it’s always going to be 25% of whatever, you might assume. However, keep in mind that percentages are local, meaning they’re based on the element’s parent and not a global value. While they’re useful for site layout, they’re less effective for fine-tuned properties like padding and text-shadow. Just try using percents to set the same padding for multiple elements, when their parent elements are different sizes.</p>\n<p>While I simply scaled the interface, you might consider <a href=\"http://www.alistapart.com/articles/responsive-web-design/\" target=\"_blank\" rel=\"noopener noreferrer\">media queries</a> for more custom interfaces conditional on resolution, aspect ratio, and orientation. For example, you could provide a one-column interface for smartphones versus a two-column interface for tablets.</p>\n<h3>Cutting the cord with local storage & application cache</h3>\n<p>Local storage allows you to store data on the client in much the same way as a browser cookie. It allows you to avoid databases — nice for a lightweight app, particularly one you intend to work offline. One word of warning though: clearing the browser’s cache results in the data being lost. Trebek uses local storage to save scores and keep a history of a user’s performance.</p>\n<p>To use local storage, bundle up your data into a JavaScript object and use the following code. First, it checks that local storage is supported. Next, it checks if a data object has been saved under the key ‘trebek’ before and if so, assigns it to a variable. In the second part of the code, a function is bound to the save button. This function adds a new entry to the data object using the current date/time as key and current score as value, and then puts the whole object in local storage under the key ‘trebek’.</p>\n<pre>\n<code class=\"language-javascript\" lang=\"javascript\">\nif(localStorage){\n if(localStorage.getItem('trebek')){\n stats = JSON.parse(localStorage.getItem('trebek'));\n }\n\n $('#save').bind('mouseup', function(){\n var now = new Date();\n stats[now.toString()] = parseInt($('#score').text());\n localStorage.setItem('trebek', JSON.stringify(stats));\n});\n</code>\n</pre>\n<p>Application cache stores your essential files so your web app can work offline, useful when your smartphone is in airplane mode or you have an iPod touch sans wifi. For Trebek, the greatest benefit regardless of whether the device is offline or not is that application cache improves startup speed.</p>\n<p>The main thing you need is a cache manifest, which is a text file that specifies the resources to be cached for future use. Name this file “cache.manifest”, with the following content, and place it in the root of your web app. Under the CACHE section, you want to list all of the assets you wish to be cached except for the manifest file itself.</p>\n<pre>\n<code class=\"language-bash\" lang=\"bash\">\nCACHE MANIFEST\n# Trebek version 1.0\n\nCACHE:\nindex.html\ncss/style.css\njs/jquery-1.6.3.min.js\njs/script.js\nimg/icon-web.png\n\nNETWORK:\n\nFALLBACK:\n</code>\n</pre>\n<p>Each time the web app is opened while online, the cache manifest is checked to see if it’s been changed (such as by updating the version number comment). If a change has been made, this triggers the browser to re-cache the rest of the files. If not, the cache continues to be used.</p>\n<p>With the cache manifest in place, you want to declare it in one of your pages by adding the following attribute to the HTML tag.</p>\n<pre>\n<code class=\"language-markup\" lang=\"html4strict\">\n<html manifest=\"cache.manifest\">\n</code>\n</pre>\n<p>Finally, make sure that your web server is serving files with the manifest extension as type “text/cache-manifest”. It won’t work otherwise. You can check this using your favorite browser’s developer tool. If the file type is not correct, add the following line to the .htaccess file in the root of your web server.</p>\n<pre>\n<code class=\"language-bash\" lang=\"bash\">\nAddType text/cache-manifest manifest\n</code>\n</pre>\n<p>That covers the very basics of using local storage and application cache to enable offline functionality in your web app. Obviously much has been glossed over, so if you want to learn more, check out Mark Pilgrim’s chapters on <a href=\"http://diveintohtml5.org/storage.html\" target=\"_blank\" rel=\"noopener noreferrer\">local storage</a> and <a href=\"http://diveintohtml5.org/offline.html\" target=\"_blank\" rel=\"noopener noreferrer\">application cache</a>.</p>\n<h3>Putting on the finishing touches for iOS</h3>\n<p>Here are a few more steps you can take to put some polish on your newly offline-capable web app. First, save your favicon for multiple resolutions: 48, 57, 72, and 114 pixels. Not only are browsers making greater use of large favicons, but they can be used as icons when your web app is saved to your home screen, giving it a bit more of that native feel.</p>\n<p>In the header of your page, add the following elements. The first specifies a favicon for web browsers, and the next three are for the iPhone, iPad, and iPhone retina display respectively. You can skip the <code>-precomposed</code> tag to have iOS automatically add its customary gloss to your icon.</p>\n<pre>\n<code class=\"language-markup\" lang=\"html4strict\" nowrap=\"0\">\n<link rel=\"icon\" type=\"image/png\" href=\"img/icon-web.png\"/>\n<link rel=\"apple-touch-icon-precomposed\" href=\"img/icon-iphone.png\" sizes=\"57x57\"/>\n<link rel=\"apple-touch-icon-precomposed\" href=\"img/icon-ipad.png\" sizes=\"72x72\"/>\n<link rel=\"apple-touch-icon-precomposed\" href=\"img/icon-retina.png\" sizes=\"114x114\"/>\n</code>\n</pre>\n<p>If you want to give your web app a custom splash screen, add the following tags as well. The images you reference must be exactly 1004×768, 768×1004, and 320×460 pixels respectively. As far as I can tell, iPhone 4’s retina resolution is not supported yet.</p>\n<pre>\n<code class=\"language-markup\" lang=\"html4strict\" nowrap=\"0\">\n<link rel=\"apple-touch-startup-image\" href=\"img/startup-ipad-landscape.png\" media=\"screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)\"/>\n<link rel=\"apple-touch-startup-image\" href=\"img/startup-ipad-portrait.png\" media=\"screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)\"/>\n<link rel=\"apple-touch-startup-image\" href=\"img/startup-iphone-portrait.png\" media=\"screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)\"/>\n</code>\n</pre>\n<p>Add the following code to tell Safari that your site is intended as a web app, change the menu bar to black, hide the chrome to display the app full-screen, and prevent pinch-to-zoom.</p>\n<pre>\n<code class=\"language-markup\" lang=\"html4strict\" nowrap=\"0\">\n<meta name=\"apple-mobile-web-app-capable\" content=\"yes\"/>\n<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\"/>\n<meta name=\"apple-touch-fullscreen\" content=\"yes\"/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0\"/>\n</code>\n</pre>\n<p>So there you have it. It’s great to see the progress that’s being made with the web in recent years. Although it hasn’t quite reached parity with native apps, for many of the simpler apps you find in the App Store, it’s now possible to create an equivalent experience using HTML5.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Games",
"term": "Games",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=2617",
"title": "Sizing Up Programmatically",
"description": "Yesterday, I showed a graphic that lays out popular devices by display size. In this post, I want to show a version created using HTML, CSS, and JavaScript. The upside of doing this programmatically rather … <a href=\"https://thomaspark.co/2011/09/sizing-up-programmatically/\">Read more</a>",
"url": "https://thomaspark.co/2011/09/sizing-up-programmatically/",
"published": "2011-09-09T15:39:30.000Z",
"updated": "2011-09-09T15:39:30.000Z",
"content": "<p>Yesterday, I showed a <a href=\"http://thomaspark.co/2011/09/sizing-up-samsung/\">graphic that lays out popular devices by display size</a>. In this post, I want to show a version created using HTML, CSS, and JavaScript. The upside of doing this programmatically rather than manually in a drawing program is that it’s easier to update, adjusts to each user’s viewport, and can be made interactive. The downside is that sometimes web technology isn’t up to the task of rendering something nicely yet.</p>\n<p><span id=\"more-2617\"></span> With the programmatic approach, the main function takes in a set of objects, each of which represents a device with corresponding specs: display size (diagonal in inches), display resolution (height and width in pixels), and physical dimensions (height and width in inches).</p>\n<p>Each device is then rendered as a div. The aforementioned specs are used to determine its size and shape, with the content area of the div acting as the display and its border serving as the bezel. The display size is also used to determine the horizontal position of each device.</p>\n<p>There are also three optional parameters. Scale factor defaults 1 millimeter to 1 pixel, but can be varied per device. Vertical shift centers the display in the bezel by default, but can be tweaked for certain devices such as the Kindle. Finally, curve factor can customize the roundedness of a device using the border-radius property, useful for devices like the Veer, although there are some kinks with that.</p>\n<p>Below is a screenshot of the results, and you can <a href=\"https://thomaspark.co/projects/sizingup/\" target=\"_blank\" rel=\"noopener noreferrer\">view the live version here</a>. You can also <a href=\"http://jsbin.com/oripup/edit#javascript,html\" target=\"_blank\" rel=\"noopener noreferrer\">have a look at the code</a>, but pardon the cruft as this is just a proof of concept.</p>\n<p><a href=\"https://thomaspark.co/projects/sizingup/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/sizingup-small.png\" alt=\"\" title=\"Sizing Up Programmatically\" width=\"595\" height=\"986\" class=\"aligncenter size-full wp-image-2623\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/09/sizingup-small.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/sizingup-small-181x300.png 181w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></a></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Code",
"term": "Code",
"url": null
},
{
"label": "Demo",
"term": "Demo",
"url": null
},
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
},
{
"label": "Visualization",
"term": "Visualization",
"url": null
},
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=2525",
"title": "Sizing Up Samsung",
"description": "With new devices being released at such a rapid pace, it’s hard to keep up. Perhaps the most frenzied of the bunch has been Samsung, who’s adopted a mentality of “let’s release everything and see … <a href=\"https://thomaspark.co/2011/09/sizing-up-samsung/\">Read more</a>",
"url": "https://thomaspark.co/2011/09/sizing-up-samsung/",
"published": "2011-09-08T17:14:55.000Z",
"updated": "2011-09-08T17:14:55.000Z",
"content": "<p>With new devices being released at such a rapid pace, it’s hard to keep up. Perhaps the most frenzied of the bunch has been Samsung, who’s adopted a mentality of “let’s release everything and see what sticks”. This really comes out when graphing some of the most popular devices by display size.</p>\n<p><span id=\"more-2525\"></span> As you can see, while most companies have two distinct classes — a smartphone at 3-4″ and a tablet at 10″ — <a href=\"http://reviews.cnet.com/8301-19736_7-20102320-251/samsung-galaxy-tablet-sizes-compared/\" target=\"_blank\">Samsung is offering several ‘tweeners</a> that bridge them. Note though that they still have a gap, which I expect to be filled shortly with a Samsung Galaxy NoteTab 6.5. In all seriousness, it’s surprising that they haven’t targeted that particular size given Amazon’s already found a market there. </p>\n<p>One thing’s for sure. It’s going to be interesting to see if any ‘tweener devices eventually gain a foothold, and it looks like Samsung’s <em>in vivo</em> experimentation will be showing us the way.</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/sizingupsamsung-medium.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/sizingupsamsung-small.png\" alt=\"\" width=\"595\" height=\"554\" class=\"aligncenter size-full wp-image-2608\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/09/sizingupsamsung-small.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/sizingupsamsung-small-300x279.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></a></p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
},
{
"label": "Visualization",
"term": "Visualization",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=2380",
"title": "Fantasy Slopegraphs",
"description": "I love me some fantasy baseball. Mainly when I’m near the top. With the regular season winding down and the playoffs set to start, my team sits comfortably in second place (in a league of … <a href=\"https://thomaspark.co/2011/09/fantasy-slopegraphs/\">Read more</a>",
"url": "https://thomaspark.co/2011/09/fantasy-slopegraphs/",
"published": "2011-09-03T14:40:47.000Z",
"updated": "2011-09-03T14:40:47.000Z",
"content": "<p>I love me some <a href=\"http://en.wikipedia.org/wiki/Fantasy_baseball\" target=\"_blank\">fantasy baseball</a>. Mainly when I’m near the top. With the regular season winding down and the playoffs set to start, my team sits comfortably in second place (in a league of 12). But this post is only partly to brag about the Mythical Man-Moths.</p>\n<p><span id=\"more-2380\"></span> It’s also to reflect on them. How did my draft selections ultimately turn out? Which players ended up being disappointments, and which were bargains or outright steals? Who ended up contributing most to this season’s success? </p>\n<p>A <a href=\"http://charliepark.org/slopegraphs/\" target=\"_blank\">slopegraph</a> is an interesting way of capturing the answers. Below is one I made of my players: their rankings (against all other players) at the end of last season on the left, the draft picks I used to select them at the start of this season in the middle, and their ranks as of this week on the right<sup class='footnote'><a href='#fn-2380-1' id='fnref-2380-1' onclick='return fdfootnote_show(2380)'>1</a></sup>. Players released at some point in the season are gray, while those picked up as free agents are green. Click for full size.</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/baseballslopegraph-full.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/09/baseballslopegraph-thumb.png\" alt=\"\" title=\"Fantasy baseball slopegraph\" width=\"595\" height=\"609\" class=\"aligncenter size-full wp-image-2415\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/09/baseballslopegraph-thumb.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/09/baseballslopegraph-thumb-293x300.png 293w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></a></p>\n<div class='footnotes' id='footnotes-2380'>\n<div class='footnotedivider'></div>\n<ol>\n<li id='fn-2380-1'> Ranks are taken from <a href=\"http://baseball.fantasysports.yahoo.com/\" target=\"_blank\">Yahoo! Sports</a>. <span class='footnotereverse'><a href='#fnref-2380-1'>↩</a></span></li>\n</ol>\n</div>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Games",
"term": "Games",
"url": null
},
{
"label": "Visualization",
"term": "Visualization",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=2032",
"title": "Puck Remotes and Magic Remotes",
"description": "I previously talked about why the current Apple TV is a stopgap for the true Apple TV. With that in mind, I want to discuss my experience with the current model and what it means … <a href=\"https://thomaspark.co/2011/08/puck-remotes-and-magic-remotes/\">Read more</a>",
"url": "https://thomaspark.co/2011/08/puck-remotes-and-magic-remotes/",
"published": "2011-08-31T12:27:39.000Z",
"updated": "2011-08-31T12:27:39.000Z",
"content": "<p>I previously talked about why the current Apple TV is a stopgap for <a href=\"http://thomaspark.co/2011/08/the-true-apple-tv/\">the true Apple TV</a>. With that in mind, I want to discuss my experience with the current model and what it means for an eventual Apple-branded TV. Through the lens of the remote control.</p>\n<p><span id=\"more-2032\"></span> <img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/08/appletvremote.jpg\" alt=\"\" title=\"Apple TV remote\" width=\"595\" height=\"195\" class=\"size-full wp-image-2233\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/08/appletvremote.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/08/appletvremote-300x98.jpg 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>Apple is renowned for its excellent design. But with the Apple TV remote, they’ve made a number of missteps.</p>\n<ul>\n<li><strong>It’s too small.</strong> Forget losing it between your couch cushions, how about between the pages of a magazine? At 6 millimeters, it’s so thin that it never fits comfortably in one’s hand, and is awkward if not painful to use for a significant length of time. There’s a limit to how small handheld devices should be, and it’s been exceeded.</li>\n<li><strong>It’s short range.</strong> The remote is infrared, meaning it requires a direct line of sight. The Apple TV can’t be tucked away, and at certain angles, the remote is unresponsive.</li>\n<li><strong>It lacks buttons.</strong> While other companies continue to make remotes <a href=\"http://www.engadget.com/2010/10/12/sonys-internet-tv-powered-by-google-tv-first-hands-on/\" target=\"_blank\">overly complex</a>, Apple goes the opposite extreme. Six buttons do the job most of the time, but not always. One of the things I miss most is a dedicated power button. If you’re in the Netflix app for instance, you have to exit out of it to the home screen with multiple “menu” clicks before you hold the select button for two seconds to power down the Apple TV. Not exactly intuitive or convenient.</li>\n</ul>\n<p>Small and unergonomic. Tethered to a short range. Not enough buttons. Sound familiar? <strong>The Apple TV remote is the new puck mouse.</strong></p>\n<p>The so-called <a href=\"http://en.wikipedia.org/wiki/Apple_USB_Mouse\" target=\"_blank\">“hockey puck” mouse</a> was included with the original iMac in 1998 and stubbornly thereafter for more two years. With its release came a chorus of complaints. It was too small for comfort, they said as they bought <a href=\"http://www.drbottkg.com/prod/iCatch.html\" target=\"_blank\">third-party plastic shells</a>. The round shape meant that it was constantly getting turned around and losing orientation. The two-foot cable was too short for most setups. And of course there was that old chestnut about the single button.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/08/imacpuckmouse.jpg\" alt=\"\" title=\"iMac puck mouse\" width=\"540\" height=\"330\" class=\"aligncenter size-full wp-image-2231\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/08/imacpuckmouse.jpg 540w, https://thomaspark.co/wp/wp-content/uploads/2011/08/imacpuckmouse-300x183.jpg 300w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" /></p>\n<p>Eventually Apple gave up on the puck mouse, though they still were never able to get the mouse quite right. Last year, they ditched the “faster horses” approach, going in a completely different direction with <a href=\"http://en.wikipedia.org/wiki/Magic_Trackpad\" target=\"_blank\">Magic Trackpad</a>.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/08/magictrackpad.png\" alt=\"\" title=\"Magic Trackpad\" width=\"595\" height=\"239\" class=\"alignnone size-full wp-image-2274\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/08/magictrackpad.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/08/magictrackpad-300x121.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>If, then, the current Apple TV remote is the puck remote, what would it take for it to become the magic remote?</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=2180",
"title": "The True Apple TV",
"description": "In the face of rumors that Apple is working on a TV, many remain skeptical that they would get into such a commoditized business. Let me offer some counterpoints. The boundary between computers and TVs … <a href=\"https://thomaspark.co/2011/08/the-true-apple-tv/\">Read more</a>",
"url": "https://thomaspark.co/2011/08/the-true-apple-tv/",
"published": "2011-08-28T17:19:42.000Z",
"updated": "2011-08-28T17:19:42.000Z",
"content": "<p>In the face of rumors that <a href=\"http://www.macrumors.com/2011/08/28/multiple-sources-suggest-apple-working-on-television-for-as-early-as-2012/\" target=\"_blank\">Apple is working on a TV</a>, many remain skeptical that they would get into such a commoditized business. Let me offer some counterpoints.</p>\n<p><span id=\"more-2180\"></span> <img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/08/appletv2.jpg\" alt=\"\" title=\"Apple TV 2\" width=\"595\" height=\"476\" class=\"aligncenter size-full wp-image-2204\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/08/appletv2.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/08/appletv2-300x240.jpg 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>The boundary between computers and TVs is blurring. TVs are becoming increasingly connected and “smart”, while personal computers are becoming a platform for obtaining, viewing, and serving video content. This follows the convergence of mobile phones and computing, and <a href=\"http://www.asymco.com/2011/08/22/nokia-vs-android/\" target=\"_blank\">a shakeup of the mobile phone industry</a> since 2008.</p>\n<p>While the hardware specs of current TVs are decent, the user interface leaves something to be desired, both in terms of software and hardware. Think of how poor the remote control, built-in Internet “apps”, channel guide, and configuration settings are on most TVs. There is room for improvement in the user experience, and no doubt Apple believes it can do much better.</p>\n<p>In markets that Apple does enter, they favor streamlined integration, from the original Macintosh to the current iMac. Not only does this integration lead to simplicity and elegance, but it opens doors to new possibilities, some of which I’ll talk about in a later post. This also includes the aforementioned TV remote, channel guide, and settings. Having a standalone device like the current Apple TV doesn’t fit with this philosophy.</p>\n<p>There are still compelling reasons to offer a standalone device: to reach those who’ve already bought an HDTV, and to allow people to upgrade their Apple TVs without tossing out their perfectly good TV sets. As to the second, upgrade concerns will soon become irrelevant. Once cloud-based storage and 1080p resolution are rolled out fully, only software updates will be needed to stay relatively up to date. They are nearly there. As to the first, Apple might offer a standalone device alongside the integrated model.</p>\n<p>But only as a reluctant, and perhaps temporary, measure. To Apple, the standalone model is only a step toward their vision of an integrated one, the true Apple TV.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=1949",
"title": "Toward the Man-Purse",
"description": "After nearly a decade of service, my messenger bag is finally giving up the ghost. I’ve been looking for a replacement that’s smaller and lighter: just enough to hold a 13-inch Macbook Air, some pen … <a href=\"https://thomaspark.co/2011/08/toward-the-man-purse/\">Read more</a>",
"url": "https://thomaspark.co/2011/08/toward-the-man-purse/",
"published": "2011-08-24T12:51:04.000Z",
"updated": "2011-08-24T12:51:04.000Z",
"content": "<p>After nearly a decade of service, my messenger bag is finally giving up the ghost. I’ve been looking for a replacement that’s smaller and lighter: just enough to hold a 13-inch Macbook Air, some pen and paper, and maybe a book. And I’m realizing that the man-purse is an inevitability.</p>\n<p><span id=\"more-1949\"></span> <img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/08/manpurse.png\" alt=\"\" title=\"Toward the man-purse\" width=\"595\" height=\"400\" class=\"alignnone size-full wp-image-1961\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/08/manpurse.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/08/manpurse-300x202.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>Once upon a time, men used briefcases to carry around their contracts, bundles of cash, and nuclear launch codes. Over the years, these morphed into laptop bags and messenger bags. In the meantime, many have gotten quite used to the convenience, if not essentiality, of having things beyond their keys and wallet on them.</p>\n<p>Until the state of the art reaches a point where <a href=\"http://tvtropes.org/pmwiki/pmwiki.php/Main/WeWillNotHavePocketsInTheFuture\" target=\"_blank\">pockets are pointless</a>, the need for such a bag remains. But the requirements are changing. Convergence means fewer devices to carry around; instead of a PDA, MP3 player, and camera, you have a smartphone. Miniaturization means the devices you do carry around are getting thinner and lighter; 15-inch behemoths make room for subnotebooks and iPads. Digitization means fewer documents printed on paper; paperbacks are replaced with a Kindle.</p>\n<p>What’s needed is a smaller bag. And whether you can <a href=\"http://www.nytimes.com/2010/12/16/fashion/16ipad.html\" target=\"_blank\">come to grips with it or not</a>, let’s accept that we’re entering man-purse territory.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Gadgets",
"term": "Gadgets",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=1900",
"title": "Version Inflation",
"description": "Major versions sure don’t go as far as they used to. Both Google and Mozilla have adopted rapid release schedules for their web browsers, aiming for four or more major releases per year. As a … <a href=\"https://thomaspark.co/2011/08/version-inflation/\">Read more</a>",
"url": "https://thomaspark.co/2011/08/version-inflation/",
"published": "2011-08-17T19:49:45.000Z",
"updated": "2011-08-17T19:49:45.000Z",
"content": "<p>Major versions sure don’t go as far as they used to. Both Google and Mozilla have adopted rapid release schedules for their web browsers, aiming for four or more major releases per year. As a point of reference, it took Microsoft five long years to bump Internet Explorer from version 6 to 7! One per year seems about the norm.</p>\n<p><span id=\"more-1900\"></span> As with economic inflation, more versions means that each version holds less significance. It seems that this is precisely what Google and Mozilla hope to achieve, deemphasizing “What version are you on?” in favor of “Are you up to date?” <a href=\"http://www.techzoom.net/publications/silent-updates/\">Silent, automatic updates</a> and <a href=\"https://bugzilla.mozilla.org/show_bug.cgi?id=678775\">hidden version numbers</a> certainly support this notion. Perhaps more people will stay up-to-date, benefiting both security and standards, but we’ll have to wait and see the impact it has on web development.</p>\n<p>Mozilla hasn’t always had this approach, but when Firefox and Thunderbird asked me to update to 6.0 today, I had to take pause. “Am I going nuts, or did I just update to 5.0 last month?” It turns out I hadn’t lost it yet.</p>\n<p>I went back to compare the release schedules of the major browsers. You can see them plotted by year…</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/08/browserversionsbyyear.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/08/browserversionsbyyear-1024x695.png\" alt=\"\" title=\"Browser Versions by Year\" width=\"595\" height=\"403\" class=\"alignnone wp-image-1908\" /></a></p>\n<p>…and by months since initial release.</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/08/browserversionsbyrelease.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/08/browserversionsbyrelease-1024x694.png\" alt=\"\" title=\"Browser Versions by Release\" width=\"595\" height=\"403\" class=\"alignnone size-large wp-image-1932\" /></a></p>\n<p>There are clearly two schools of thought, the traditional versus the rapid releases of Chrome and Firefox as of late. Projecting with a simple linear regression (I know), here’s what’s in store for the year 2020.</p>\n<ul>\n<li>Internet Explorer 13</li>\n<li>Firefox 10.4</li>\n<li>Safari X</li>\n<li>Chrome 55.1.531.866</li>\n<li>Opera 17 Series</li>\n</ul>\n<p>But with the latest change in policy from Mozilla, and perhaps other organizations following suit, version inflation may be much greater, if they even matter at all.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Web",
"term": "Web",
"url": null
}
]
},
{
"id": "http://thomaspark.me/?p=1525",
"title": "Starcraft Collective",
"description": "Groups of animals get special collective nouns1, some of which are familiar (e.g., a pride of lions, a gaggle of geese) and others that are less known but equally evocative: a crash of rhinos, a … <a href=\"https://thomaspark.co/2011/05/starcraft-collective/\">Read more</a>",
"url": "https://thomaspark.co/2011/05/starcraft-collective/",
"published": "2011-05-18T14:14:32.000Z",
"updated": "2011-05-18T14:14:32.000Z",
"content": "<p>Groups of animals get special collective nouns<sup class='footnote'><a href='#fn-1525-1' id='fnref-1525-1' onclick='return fdfootnote_show(1525)'>1</a></sup>, some of which are familiar (e.g., a pride of lions, a gaggle of geese) and others that are less known but equally evocative: a crash of rhinos, a charm of hummingbirds, a prickle of porcupines, a loveliness of ladybugs, a cackle of hyenas, a glint of goldfish, a parliament of owls.</p>\n<p>Starcraft units aren’t too far off from animals — Zerglings are reminiscent of dogs, ultralisks elephants, and archons big, white fluffy bunnies — so what collective nouns would capture the spirit of each? Searching the web, I found that the question had been posed before, with lots of ideas but no consensus.</p>\n<p><span id=\"more-1525\"></span><img decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/scbanner.jpg\" alt=\"\" title=\"Immortals versus siege tanks\" width=\"100%\" height=\"275\" class=\"aligncenter size-full wp-image-1643\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/05/scbanner.jpg 595w, https://thomaspark.co/wp/wp-content/uploads/2011/05/scbanner-300x139.jpg 300w\" sizes=\"(max-width: 595px) 100vw, 595px\" /></p>\n<p>I conducted a survey to settle the matter<sup class='footnote'><a href='#fn-1525-2' id='fnref-1525-2' onclick='return fdfootnote_show(1525)'>2</a></sup>. Each SC2 unit was given five options (plus “other”) that were culled from various sources. In all, 764 people (40% Zerg, 27% Protoss, 19% Terran, and 14% Random) took the survey over the span of three days.</p>\n<h4>Results</h4>\n<p>The top vote-getters for each unit are summarized below.</p>\n<table>\n<tr>\n<td><strong>Terran</strong></td>\n<td><strong>Zerg</strong></td>\n<td><strong>Protoss</strong></td>\n</tr>\n<tr>\n<td>crew of SCVs</td>\n<td>swarm of drones</td>\n<td>cluster of probes</td>\n</tr>\n<tr>\n<td>pack of MULEs</td>\n<td>batch of larvae</td>\n<td>legion of zealots</td>\n</tr>\n<tr>\n<td>squad of marines</td>\n<td>brood of broodlings</td>\n<td>league of stalkers</td>\n</tr>\n<tr>\n<td>band of marauders</td>\n<td>cluster of overlords</td>\n<td>force of sentries</td>\n</tr>\n<tr>\n<td>pack of reapers</td>\n<td>swarm of zerglings</td>\n<td>watch of observers</td>\n</tr>\n<tr>\n<td>company of ghosts</td>\n<td>harem of queens</td>\n<td>assembly of immortals</td>\n</tr>\n<tr>\n<td>gang of hellions</td>\n<td>horde of hydralisks</td>\n<td>spectrum of warp prisms</td>\n</tr>\n<tr>\n<td>battery of siege tanks</td>\n<td>brood of banelings</td>\n<td>sweep of colossi</td>\n</tr>\n<tr>\n<td>battalion of thors</td>\n<td>congress of overseers</td>\n<td>plume of phoenix</td>\n</tr>\n<tr>\n<td>squadron of vikings</td>\n<td>infestation of roaches</td>\n<td>cloud of void rays</td>\n</tr>\n<tr>\n<td>convoy of medivacs</td>\n<td>host of infestors</td>\n<td>conclave of high templar</td>\n</tr>\n<tr>\n<td>congress of ravens</td>\n<td>outbreak of infested terrans</td>\n<td>brotherhood of dark templar</td>\n</tr>\n<tr>\n<td>brigade of banshees</td>\n<td>flock of mutalisks</td>\n<td>ball of archons</td>\n</tr>\n<tr>\n<td>fleet of battlecruisers</td>\n<td>cluster of corruptors</td>\n<td>armada of carriers</td>\n</tr>\n<tr>\n<td></td>\n<td>network of nydus worms</td>\n<td>cloud of interceptors</td>\n</tr>\n<tr>\n<td></td>\n<td>stampede of ultralisks</td>\n<td>fleet of motherships</td>\n</tr>\n<tr>\n<td></td>\n<td>eclipse of brood lords</td>\n<td></td>\n</tr>\n</table>\n<h4>Some Notes</h4>\n<p>The most consensus was for “pack” of MULEs. Ravens were the other unit named for an animal; its official collective (unkindness) actually came in last place, while it received the most write-ins with “murder” and “flock.”</p>\n<p>The most contentious units were banelings (#1 and #4 separated by 6%), immortals (#1 and #2 by 2.4%), phoenix (#1 and #3 by 2.0%), and colossi (#1 and #3 by 1.4%). Protoss units in particular seem far from settled.</p>\n<p>For Zerg units, “swarm” fared well both as an option and as a write-in. Should all Zerg units simply be considered “the swarm”?</p>\n<p>Generally one can’t have more than one mothership in-game, which led to some interesting write-ins: paradox, singularity, singleton, FOREVER ALONE.</p>\n<p>“Other” honorable mentions: a flower of vikings, a nevermore of ravens, a clutch of larva, a grack of zerglings, a useless of hydralisks, a gaggle of mutalisks, a bronze league of observers, a gathering of immortals, an imbalance of colossi, a wing of phoenix.</p>\n<p>Finally, a creative exercise for the reader: given the units of your domain, can you come up with collectives that capture their spirit?</p>\n<h4>Appendix</h4>\n<p>Here are the full results for <a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/terran.png\">Terran</a>, <a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/zerg.png\">Zerg</a>, and <a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/protoss.png\">Protoss</a>.</p>\n<div class='footnotes' id='footnotes-1525'>\n<div class='footnotedivider'></div>\n<ol>\n<li id='fn-1525-1'> A longer list of animal collective nouns can be found <a href=\"http://www.thealmightyguru.com/Pointless/AnimalGroups.html\">here</a>. <span class='footnotereverse'><a href='#fnref-1525-1'>↩</a></span></li>\n<li id='fn-1525-2'> The solicitation can be viewed <a href=\"http://www.reddit.com/r/starcraft/comments/h9riu/take_the_starcraft2_collective_nouns_survey/\">here</a>. <span class='footnotereverse'><a href='#fnref-1525-2'>↩</a></span></li>\n</ol>\n</div>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Data",
"term": "Data",
"url": null
},
{
"label": "Games",
"term": "Games",
"url": null
}
]
},
{
"id": "http://pilcro.ws/?p=266",
"title": "Icon Blues",
"description": "I’m not the only one who’s noticed that blue icons seem to be totally overrepresented. But is it really this bad, or is the confirmation bias just acting up again? I decided to find out. … <a href=\"https://thomaspark.co/2011/05/icon-blues/\">Read more</a>",
"url": "https://thomaspark.co/2011/05/icon-blues/",
"published": "2011-05-04T10:32:40.000Z",
"updated": "2011-05-04T10:32:40.000Z",
"content": "<p>I’m not the only one who’s noticed that <a href=\"http://www.subtraction.com/2008/02/25/blue-in-the-\">blue icons seem to be totally overrepresented</a>. But is it really this bad, or is the confirmation bias just acting up again? I decided to find out.</p>\n<p><span id=\"more-266\"></span> <a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/blueicons.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/blueicons.png\" alt=\"\" title=\"Blue Icons\" width=\"582\" height=\"118\" class=\"aligncenter size-full wp-image-1488\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/05/blueicons.png 582w, https://thomaspark.co/wp/wp-content/uploads/2011/05/blueicons-300x61.png 300w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" /></a></p>\n<h4>The Method</h4>\n<p>From each of the twenty iTunes categories (e.g., books, business, education), I collected the icons of the top 30 paid iPhone apps. I used the <a href=\"http://www.pythonware.com/products/pil/\">Python Imaging Library</a> to run through these images pixel by pixel, classifying them into 11 main colors and tallying them up.</p>\n<p>Here are a couple of examples shown by percentage. <a href=\"http://itunes.apple.com/us/app/chat-for-google-talk/id407644858?mt=8\">Chat for Google Talk</a>:</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/googletalk.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/googletalk.png\" alt=\"\" width=\"608\" height=\"496\" class=\"aligncenter size-full wp-image-1427\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/05/googletalk.png 608w, https://thomaspark.co/wp/wp-content/uploads/2011/05/googletalk-300x245.png 300w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" /></a></p>\n<p>And <a href=\"http://itunes.apple.com/us/app/angry-birds/id343200656?mt=8\">Angry Bird</a>s:</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/angrybirds.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/angrybirds.png\" alt=\"\" width=\"608\" height=\"496\" class=\"aligncenter size-full wp-image-1486\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/05/angrybirds.png 608w, https://thomaspark.co/wp/wp-content/uploads/2011/05/angrybirds-300x245.png 300w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" /></a></p>\n<p>At this point, I could have aggregated all of the pixels across all icons and counted their colors, but that didn’t seem very informative. Instead, I focused on the major colors of each icon, which I defined as making up at least 30 percent of the pixels. With this criteria, the Google Talk icon is white and gray, and the Angry Birds icon is blue.</p>\n<h4>The Results</h4>\n<p>Here’s how the colors broke down for each category (click to enlarge):</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/categories.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/categories-1024x120.png\" alt=\"\" width=\"595\" height=\"69\" class=\"aligncenter size-large wp-image-1438\" /></a></p>\n<p>And the aggregate:</p>\n<p><a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/overall.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/05/overall.png\" alt=\"\" width=\"407\" height=\"496\" class=\"aligncenter size-full wp-image-1439\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/05/overall.png 407w, https://thomaspark.co/wp/wp-content/uploads/2011/05/overall-246x300.png 246w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" /></a></p>\n<p>Blue icons were indeed the most common. But while I expected half or more of the icons to be blue, it came closer to one-third. Even at that level though, blue far exceeded the other colors. This is a shame, given that some of my favorite iPhone icons (e.g., <a href=\"http://itunes.apple.com/us/app/delivery-status-touch-package/id290986013?mt=8\">Delivery Status</a>, <a href=\"http://itunes.apple.com/us/app/instagram/id389801252?mt=8\">Instagram</a>, <a href=\"http://itunes.apple.com/us/app/paprika-recipe-manager-for/id406732590?mt=8\">Paprika</a>) use little to no blue. The worst offenders in this regard were travel and navigation apps, half of which were blue. </p>\n<p>Black was the least common color for an icon. There were also very few yellow, purple, pink, or white icons, so if you want your app to stand out, there you go.</p>\n<p>Pink was most popular with health & fitness apps. Make of that what you will.</p>\n<p>A couple of things I took away from the process. First, I couldn’t find much help in the way of information or software for reducing a million colors down to the ones you’d, say, find in a Crayola 12-pack. You can accomplish this by carving out the color space, but as <a href=\"http://imgs.xkcd.com/blag/satfaces_map_1024.png\">this chart from the xkcd color survey</a> shows, the colors we define are quite idiosyncratic, both as a product of human perception and as an artifact of human culture. I ended up converting from RGBA to <a href=\"http://en.wikipedia.org/wiki/HSL_and_HSV\">HSL</a>, which made it a bit easier to come up with clunky heuristics to classify the colors.</p>\n<p>Second, the illusory nature of color. Juxtaposing different colors skewed them, the sizes of the backgrounds were overestimated, and shadows threw perceptions off. A case of the human mind outsmarting itself. This makes it tough to give an accurate account, when a pixel is technically one color, but people all perceive it to be another. Most of the time, it’s the perception that matters.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Data",
"term": "Data",
"url": null
}
]
},
{
"id": "http://blindp.wordpress.com/?p=8",
"title": "Pyramid Schemes",
"description": "The other day, I was having breakfast and scouring the cereal box for reading material when I came across the new food pyramid. What had they done! This version apparently replaced the old one back … <a href=\"https://thomaspark.co/2011/04/pyramid-schemes/\">Read more</a>",
"url": "https://thomaspark.co/2011/04/pyramid-schemes/",
"published": "2011-04-12T20:32:19.000Z",
"updated": "2011-04-12T20:32:19.000Z",
"content": "<p>The other day, I was having breakfast and scouring the cereal box for reading material when I came across <a href=\"https://en.wikipedia.org/wiki/Food_pyramid_(nutrition)#/media/File:MyPyramidFood.svg\">the new food pyramid</a>. What had they done!</p>\n<p><span id=\"more-8\"></span> <img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidnew.png\" alt=\"\" title=\"New Food Pyramid\" width=\"595\" height=\"464\" class=\"aligncenter size-full wp-image-4585\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidnew.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidnew-300x234.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /> </p>\n<p>This version apparently replaced the old one back in 2005. No doubt the actual content of the original <em>was</em> highly dubious, but it’s hard to argue against its memorability. I can still picture the carb foundation and fatty capstone like it was yesterday.</p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidold.png\" alt=\"\" title=\"Old Food Pyramid\" width=\"595\" height=\"462\" class=\"aligncenter size-full wp-image-4586\" srcset=\"https://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidold.png 595w, https://thomaspark.co/wp/wp-content/uploads/2011/04/foodpyramidold-300x233.png 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" /></p>\n<p>Unfortunately, with the new version, a lot of what made the original effective was lost. Let’s run through the issues from an information design perspective.</p>\n<h3>Mixed Signals</h3>\n<p>Is the new pyramid just a logo, or is it conveying more specific information? It’s not clear at first glance. The old pyramid communicated its purpose as an information graphic and primed the mind for interpreting it this way.</p>\n<h3>Missing the Point</h3>\n<p>The value of a pyramid diagram is in using its shape to represent hierarchical or proportional information — large bottom to small top. In the new pyramid, the sections are proportional but drawn as vertical bands! The USDA give two reasons for this change. First, to emphasize variety, that you should have something from each food group every day. Fair enough. Second, to emphasize moderation, the wider base of each band representing that you should have more foods with low fat and sugar from that group, and the narrow top meaning less foods with high fat and sugar. I kid you not.</p>\n<h3>Not Enough Info</h3>\n<p>Sometimes a picture is worth a thousand words, but a bit of text can have a multiplicative effect. The widths of the colored bands vary and are meant to be general guidelines. But precisely what is anyone’s guess. Should we strive to balance the food groups equally, or cut down on meats and beans? Should we have more grains than anything else, as clearly suggested in the original? And what is the yellow band?</p>\n<h3>Hidden Messages</h3>\n<p>Did you realize that the white tip of the pyramid represents discretionary calories, such as from candy and alcohol? Me neither.</p>\n<h3>Jack of all Trades, Master of None</h3>\n<p>The food pyramid is supposedly a “food guidance system,” yet crammed in is Clippy McClipartson scaling it to symbolize the importance of physical activity. Let’s work on the “food guidance” part.</p>\n<h3>Chartjunk</h3>\n<p>Giving examples of each food group is a great idea, but the execution needs improvement. The cluttered layout and horrible quality of the clip art make it more distracting than informative.</p>\n<p>The bottom line is, does the new food pyramid help people make informed decisions about the nutritional value of their meals? I would argue not. Effective information design hinges on a message that is consistent and focused. The new food pyramid, which reeks of design-by-committee, fails on both accounts.</p>\n<p>What can be done then? I suggest stamping the pyramid in big, bold text with “MyPyramid.gov” and moving the <a href=\"http://www.mypyramid.gov/mypyramid/index.aspx\">Daily Food Plan</a> to the front page of the website.</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "Visualization",
"term": "Visualization",
"url": null
}
]
},
{
"id": "http://pilcro.ws/?p=187",
"title": "Save Icon",
"description": "Earlier this week, David Friedman proposed a new save icon to replace the antiquated floppy disk. In the ensuing discussion, many noted that with automatic revision control à la Google Docs and Mac OS X … <a href=\"https://thomaspark.co/2011/04/save-icon/\">Read more</a>",
"url": "https://thomaspark.co/2011/04/save-icon/",
"published": "2011-04-07T03:37:16.000Z",
"updated": "2011-04-07T03:37:16.000Z",
"content": "<p>Earlier this week, David Friedman proposed <a href=\"http://www.ironicsans.com/2011/04/idea_a_new_save_icon.html\">a new save icon</a> to replace the antiquated floppy disk. In the ensuing discussion, many noted that with automatic revision control à la Google Docs and Mac OS X Lion becoming the norm, the whole notion of saving would become history and render the issue moot.</p>\n<p><span id=\"more-187\"></span> <a href=\"http://thomaspark.co/wp/wp-content/uploads/2011/04/saveicon.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http://thomaspark.co/wp/wp-content/uploads/2011/04/saveicon.png\" alt=\"\" title=\"Save Icon\" width=\"149\" height=\"173\" class=\"alignleft size-full wp-image-1393\" /></a></p>\n<p>Whether that turns out to be the case or not, it raises several interesting questions. With so many computer icons based on specific technology, what happens when that technology fades from public consciousness? Does a lack of familiarity with that technology create usability problems with the icons? Should new icons be devised? And are they?</p>\n<p>All English speakers understand the word <em>window</em> to mean an opening designed to let in air or light. But only the geeks among us know the rich history of this word. It originates from an Old Norse phrase describing an opening in a building’s roof as a <em>wind eye</em>. This poeticism was important early on for understandability and communicability of a new idea. But as the word took hold, it established a meaning of its own that transcended its legacy. Today, a window is no longer thought of as the metaphorical wind eye — a window is a window.</p>\n<p>Icons are also a language, of the visual sort. In the early days of the graphical user interface, the <a href=\"http://en.wikipedia.org/wiki/Desktop_metaphor\">desktop metaphor</a> was heavily relied upon to communicate new ideas about computing. This was essential to its success, as the nascent GUI made a newbie out of everyone.</p>\n<p>However, GUI conventions have since become engrained in our culture, and the meaning of terms like desktop, file, and trash in a computing context now transcend the original metaphors. We are in an age where people interact with digital folders much more than manila ones, where they know how to search without having ever handled a magnifying glass, and where they adjust their volume control without realizing it depicts a speaker cone.</p>\n<p>And just as these icons live on beyond their origins, I say long live the floppy disk!</p>",
"image": null,
"media": [],
"authors": [
{
"name": "Thomas",
"email": null,
"url": null
}
],
"categories": [
{
"label": "User Interface",
"term": "User Interface",
"url": null
}
]
}
]
}