<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"  xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>Adactio</title>
        <description>The online home of Jeremy Keith, an author and web developer living and working in Brighton, England.</description>
        <language>en</language>
        <link>https://adactio.com/</link>
        <managingEditor>jeremy@adactio.com (Jeremy Keith)</managingEditor>
        <webMaster>jeremy@adactio.com (Jeremy Keith)</webMaster>
        <image>
            <title>Adactio</title>
            <link>https://adactio.com/</link>
            <url>https://adactio.com/images/rssbutton.gif</url>
            <width>88</width>
            <height>19</height>
        </image>
        <atom:link href="https://adactio.com/rss" rel="self" type="application/rss+xml" />
        <item>
            <title>Watching @lara_hogan speak confirms just how unmissable her new book will be https://abookapart.com/products/demystifying-public-speaking</title>
            <link>https://adactio.com/notes/11282</link>
            <description>
<![CDATA[
<p>Watching <a href="https://twitter.com/lara_hogan">@lara_hogan</a> speak confirms just how unmissable her new book will be</p>

<p><a href="https://abookapart.com/products/demystifying-public-speaking">https://abookapart.com/products/demystifying-public-speaking</a></p>

]]>
            </description>
            <pubDate>Mon, 03 Oct 2016 17:12:09 GMT</pubDate>
            <guid>https://adactio.com/notes/11282</guid>
        </item>
        <item>
            <title>Looks like @sazzy is ready to bring some magic to the @aneventapart stage this morning.</title>
            <link>https://adactio.com/notes/11281</link>
            <description>
<![CDATA[
<picture>
<source media="all and (min-width: 50em)" srcset="https://adactio.com/images/uploaded/11281/large.jpg" />
<source media="all and (min-width: 25em)" srcset="https://adactio.com/images/uploaded/11281/medium.jpg, /images/uploaded/11281/large.jpg 1.25x" />
<img class="u-photo" src="https://adactio.com/images/uploaded/11281/small.jpg" srcset="https://adactio.com/images/uploaded/11281/medium.jpg 1.5x, https://adactio.com/images/uploaded/11281/large.jpg 2.5x" alt="Looks like @sazzy is ready to bring some magic to the @aneventapart stage this morning." />
</picture>
<p>Looks like <a href="https://twitter.com/sazzy">@sazzy</a> is ready to bring some magic to the <a href="https://twitter.com/aneventapart">@aneventapart</a> stage this morning.</p>

]]>
            </description>
            <pubDate>Mon, 03 Oct 2016 14:11:27 GMT</pubDate>
            <guid>https://adactio.com/notes/11281</guid>
        </item>
        <item>
            <title>The Tyrell Corporation is building hotels now.</title>
            <link>https://adactio.com/notes/11280</link>
            <description>
<![CDATA[
<picture>
<source media="all and (min-width: 50em)" srcset="https://adactio.com/images/uploaded/11280/large.jpg" />
<source media="all and (min-width: 25em)" srcset="https://adactio.com/images/uploaded/11280/medium.jpg, /images/uploaded/11280/large.jpg 1.25x" />
<img class="u-photo" src="https://adactio.com/images/uploaded/11280/small.jpg" srcset="https://adactio.com/images/uploaded/11280/medium.jpg 1.5x, https://adactio.com/images/uploaded/11280/large.jpg 2.5x" alt="The Tyrell Corporation is building hotels now." />
</picture>
<p>The Tyrell Corporation is building hotels now.</p>

]]>
            </description>
            <pubDate>Sun, 02 Oct 2016 21:47:02 GMT</pubDate>
            <guid>https://adactio.com/notes/11280</guid>
        </item>
        <item>
            <title>This year’s models: @beep and @chriscoyier.</title>
            <link>https://adactio.com/notes/11279</link>
            <description>
<![CDATA[
<picture>
<source media="all and (min-width: 50em)" srcset="https://adactio.com/images/uploaded/11279/large.jpg" />
<source media="all and (min-width: 25em)" srcset="https://adactio.com/images/uploaded/11279/medium.jpg, /images/uploaded/11279/large.jpg 1.25x" />
<img class="u-photo" src="https://adactio.com/images/uploaded/11279/small.jpg" srcset="https://adactio.com/images/uploaded/11279/medium.jpg 1.5x, https://adactio.com/images/uploaded/11279/large.jpg 2.5x" alt="This year’s models: @beep and @chriscoyier." />
</picture>
<p>This year’s models: <a href="https://twitter.com/beep">@beep</a> and <a href="https://twitter.com/chriscoyier">@chriscoyier</a>.</p>

]]>
            </description>
            <pubDate>Sun, 02 Oct 2016 21:42:53 GMT</pubDate>
            <guid>https://adactio.com/notes/11279</guid>
        </item>
        <item>
            <title>Going to Orlando. brb</title>
            <link>https://adactio.com/notes/11278</link>
            <description>
<![CDATA[
<p>Going to Orlando. brb</p>

]]>
            </description>
            <pubDate>Sat, 01 Oct 2016 08:14:18 GMT</pubDate>
            <guid>https://adactio.com/notes/11278</guid>
        </item>
        <item>
            <title>the new code – Even Stevens: Using Round and Space in Repeated Background Images</title>
            <link>http://thenewcode.com/1143/Even-Stevens-Using-Round-and-Space-in-Repeated-Background-Images</link>
            <description>
<![CDATA[
<p>See, when I first heard about <code>background-repeat: round;</code> I thought it was something to do with making things circular. But no, it&#8217;s about tiling a background image so that nothing gets cut off. The amount of tiling required is <em>rounded</em> to the nearest whole number.</p>

<p>Now I get it.</p>

]]>
            </description>
            <pubDate>Fri, 30 Sep 2016 23:01:15 GMT</pubDate>
            <guid>http://thenewcode.com/1143/Even-Stevens-Using-Round-and-Space-in-Repeated-Background-Images</guid>
            <category>css</category>
            <category>background</category>
            <category>images</category>
            <category>tiling</category>
            <category>tiles</category>
            <category>rounding</category>
            <category>round</category>
            <category>frontend</category>
            <category>development</category>
        </item>
        <item>
            <title>GreenSock | &amp;#8220;will-change&amp;#8221; must change? Animators beware.</title>
            <link>http://greensock.com/will-change</link>
            <description>
<![CDATA[
<blockquote>
  <p>This <code>will-change</code> property that was intended to <strong>SOLVE</strong> problems for animators may end up doing the opposite.</p>
  
  <p>It seems wise for the browsers to step back and let the spec authors fill in the implementation details and gain consensus before moving forward.</p>
</blockquote>

]]>
            </description>
            <pubDate>Fri, 30 Sep 2016 22:59:19 GMT</pubDate>
            <guid>http://greensock.com/will-change</guid>
            <category>will-change</category>
            <category>css</category>
            <category>animation</category>
            <category>browsers</category>
            <category>standards</category>
            <category>chrome</category>
            <category>scaling</category>
            <category>performance</category>
            <category>frontend</category>
            <category>development</category>
        </item>
        <item>
            <title>Sous vide lamb.</title>
            <link>https://adactio.com/notes/11275</link>
            <description>
<![CDATA[
<picture>
<source media="all and (min-width: 50em)" srcset="https://adactio.com/images/uploaded/11275/large.jpg" />
<source media="all and (min-width: 25em)" srcset="https://adactio.com/images/uploaded/11275/medium.jpg, /images/uploaded/11275/large.jpg 1.25x" />
<img class="u-photo" src="https://adactio.com/images/uploaded/11275/small.jpg" srcset="https://adactio.com/images/uploaded/11275/medium.jpg 1.5x, https://adactio.com/images/uploaded/11275/large.jpg 2.5x" alt="Sous vide lamb." />
</picture>
<p>Sous vide lamb.</p>

]]>
            </description>
            <pubDate>Fri, 30 Sep 2016 19:30:06 GMT</pubDate>
            <guid>https://adactio.com/notes/11275</guid>
        </item>
        <item>
            <title>Someday</title>
            <link>https://adactio.com/journal/11274</link>
            <description>
<![CDATA[
<p>In <a href="http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&amp;id=8f68160ba6">the latest issue</a> of Justin&#8217;s excellent <a href="http://responsivedesign.is/">Responsive Web Design</a> weekly newsletter, he includes a segment called &#8220;The Snippet Show&#8221;:</p>

<blockquote>
  <p>This is what tells all our browsers on all our devices to set the viewport to be the same width of the current device, and to also set the initial scale to 1 (not scaled at all). This essentially allows us to have responsive design consistently.</p>
</blockquote>

<pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
</code></pre>

<p>The <code>viewport</code> value for the <code>meta</code> element was invented by Apple when the iPhone was released. Back then, it was a safe bet that most websites were wider than the iPhone&#8217;s 320 pixel wide display—most of them were 960 pixels wide &#8230;because reasons. So mobile Safari would automatically shrink those sites down to fit within the display. If you wanted to over-ride that behaviour, you had to use the <code>meta viewport</code> gubbins that they made up.</p>

<p>That was nine years ago. These days, if you&#8217;re building a responsive website, you <em>still</em> need to include that <code>meta</code> element.</p>

<p>That seems like a shame to me. I&#8217;m not suggesting that the default behaviour should switch to assuming a fluid layout, but maybe the browser could just figure it out. After all, the CSS will already be parsed by the time the HTML is rendering. Perhaps a quick test for the presence of a <a href="https://adactio.com/journal/1559/">crawlbar</a> could be used to trigger the shrinking behaviour. No crawlbar, no shrinking.</p>

<p>Maybe someday the assumption behind the current behaviour <em>could</em> be flipped—assume a website is responsive unless the author explicitly requests the shrinking behaviour. I&#8217;d like to think that could happen soon, but I suspect that a depressingly large number of sites are still fixed-width (I don&#8217;t even want to know—don&#8217;t tell me).</p>

<p>There are other browser default behaviours that might someday change. Right now, if I type <code>example.com</code> into a browser, it will first attempt to contact <code>http://example.com</code> rather than <code>http<strong>s</strong>://example.com</code>. That means the <code>example.com</code> server has to do a redirect, costing the user valuable time.</p>

<p>You can mitigate this by putting your site on <a href="https://hstspreload.appspot.com/">the HSTS preload list</a> but wouldn&#8217;t it be nice if browsers first checked for <code>HTTPS</code> instead of <code>HTTP</code>? I don&#8217;t think that will happen anytime soon, but someday &#8230;someday.</p>

]]>
            </description>
            <pubDate>Fri, 30 Sep 2016 17:22:42 GMT</pubDate>
            <guid>https://adactio.com/journal/11274</guid>
            <category>browsers</category>
            <category>responsive</category>
            <category>design</category>
            <category>mobile</category>
            <category>https</category>
            <category>tls</category>
            <category>hsts</category>
            <category>security</category>
            <category>iphone</category>
            <category>meta</category>
            <category>viewport</category>
            <category>frontend</category>
            <category>development</category>
            <category>medium:id=850d3ead1dc0</category>
        </item>
        <item>
            <title>How can you contribute to Geek Mental Help Week? | Stuff &amp; Nonsense</title>
            <link>https://stuffandnonsense.co.uk/blog/about/how-can-you-contribute-to-geek-mental-help-week</link>
            <description>
<![CDATA[
<p>It&#8217;s <a href="http://geekmentalhelp.com/">Geek Mental Help Week</a> from Monday. You can get involved.</p>

<blockquote>
  <p>I believe that talking about mental health issues and sharing our experiences—not just those of people who suffer, but also those who live with and support us—can help everyone. Whether you struggle with your own mental health or care for someone who does, you can help others to understand how you cope. Geek Mental Help Week is all about sharing those experiences.</p>
</blockquote>

]]>
            </description>
            <pubDate>Fri, 30 Sep 2016 15:15:17 GMT</pubDate>
            <guid>https://stuffandnonsense.co.uk/blog/about/how-can-you-contribute-to-geek-mental-help-week</guid>
            <category>health</category>
            <category>geekmentalhelp</category>
            <category>depression</category>
            <category>help</category>
        </item>
        <item>
            <title>A spot of six-up sketching at @Clearleft.</title>
            <link>https://adactio.com/notes/11272</link>
            <description>
<![CDATA[
<picture>
<source media="all and (min-width: 50em)" srcset="https://adactio.com/images/uploaded/11272/large.jpg" />
<source media="all and (min-width: 25em)" srcset="https://adactio.com/images/uploaded/11272/medium.jpg, /images/uploaded/11272/large.jpg 1.25x" />
<img class="u-photo" src="https://adactio.com/images/uploaded/11272/small.jpg" srcset="https://adactio.com/images/uploaded/11272/medium.jpg 1.5x, https://adactio.com/images/uploaded/11272/large.jpg 2.5x" alt="A spot of six-up sketching at @Clearleft." />
</picture>
<p>A spot of six-up sketching at <a href="https://twitter.com/Clearleft">@Clearleft</a>.</p>

]]>
            </description>
            <pubDate>Fri, 30 Sep 2016 15:12:08 GMT</pubDate>
            <guid>https://adactio.com/notes/11272</guid>
        </item>
        <item>
            <title>Kebab.</title>
            <link>https://adactio.com/notes/11271</link>
            <description>
<![CDATA[
<picture>
<source media="all and (min-width: 50em)" srcset="https://adactio.com/images/uploaded/11271/large.jpg" />
<source media="all and (min-width: 25em)" srcset="https://adactio.com/images/uploaded/11271/medium.jpg, /images/uploaded/11271/large.jpg 1.25x" />
<img class="u-photo" src="https://adactio.com/images/uploaded/11271/small.jpg" srcset="https://adactio.com/images/uploaded/11271/medium.jpg 1.5x, https://adactio.com/images/uploaded/11271/large.jpg 2.5x" alt="Kebab." />
</picture>
<p>Kebab.</p>

]]>
            </description>
            <pubDate>Fri, 30 Sep 2016 14:30:07 GMT</pubDate>
            <guid>https://adactio.com/notes/11271</guid>
        </item>
        <item>
            <title>Eagerly anticipating a kebab from @TheTrollsPantry.</title>
            <link>https://adactio.com/notes/11270</link>
            <description>
<![CDATA[
<picture>
<source media="all and (min-width: 50em)" srcset="https://adactio.com/images/uploaded/11270/large.jpg" />
<source media="all and (min-width: 25em)" srcset="https://adactio.com/images/uploaded/11270/medium.jpg, /images/uploaded/11270/large.jpg 1.25x" />
<img class="u-photo" src="https://adactio.com/images/uploaded/11270/small.jpg" srcset="https://adactio.com/images/uploaded/11270/medium.jpg 1.5x, https://adactio.com/images/uploaded/11270/large.jpg 2.5x" alt="Eagerly anticipating a kebab from @TheTrollsPantry." />
</picture>
<p>Eagerly anticipating a kebab from <a href="https://twitter.com/TheTrollsPantry">@TheTrollsPantry</a>.</p>

]]>
            </description>
            <pubDate>Fri, 30 Sep 2016 13:46:17 GMT</pubDate>
            <guid>https://adactio.com/notes/11270</guid>
        </item>
        <item>
            <title>70s Sci-Fi Art</title>
            <link>http://70sscifiart.tumblr.com/</link>
            <description>
<![CDATA[
<p>Sci-fi book covers and posters from the 1970s.</p>

]]>
            </description>
            <pubDate>Fri, 30 Sep 2016 11:13:40 GMT</pubDate>
            <guid>http://70sscifiart.tumblr.com/</guid>
            <category>sci-fi</category>
            <category>sciencefiction</category>
            <category>art</category>
            <category>books</category>
            <category>posters</category>
            <category>tumblr</category>
            <category>blog</category>
            <category>pictures</category>
        </item>
        <item>
            <title>So long and thanks for all the pics. https://www.flickr.com/photos/europeanspaceagency/sets/72157638315605535/</title>
            <link>https://adactio.com/notes/11268</link>
            <description>
<![CDATA[
<p>So long and thanks for all the pics.</p>

<p><a href="https://www.flickr.com/photos/europeanspaceagency/sets/72157638315605535/">https://www.flickr.com/photos/europeanspaceagency/sets/72157638315605535/</a></p>

]]>
            </description>
            <pubDate>Fri, 30 Sep 2016 11:08:55 GMT</pubDate>
            <guid>https://adactio.com/notes/11268</guid>
        </item>
        <item>
            <title>Napoletana.</title>
            <link>https://adactio.com/notes/11267</link>
            <description>
<![CDATA[
<picture>
<source media="all and (min-width: 50em)" srcset="https://adactio.com/images/uploaded/11267/large.jpg" />
<source media="all and (min-width: 25em)" srcset="https://adactio.com/images/uploaded/11267/medium.jpg, /images/uploaded/11267/large.jpg 1.25x" />
<img class="u-photo" src="https://adactio.com/images/uploaded/11267/small.jpg" srcset="https://adactio.com/images/uploaded/11267/medium.jpg 1.5x, https://adactio.com/images/uploaded/11267/large.jpg 2.5x" alt="Napoletana." />
</picture>
<p>Napoletana.</p>

]]>
            </description>
            <pubDate>Thu, 29 Sep 2016 21:30:07 GMT</pubDate>
            <guid>https://adactio.com/notes/11267</guid>
        </item>
        <item>
            <title>Building Resizeable Components with Relative CSS Units | CSS-Tricks</title>
            <link>https://css-tricks.com/building-resizeable-components-relative-css-units/</link>
            <description>
<![CDATA[
<p>A thorough and compelling demonstration of why it makes sense to size all the properties of your components—font size, margins, borders, etc.—in ems or rems rather than mixing in pixels for some properties. It&#8217;s all about the scalability, innit?</p>

]]>
            </description>
            <pubDate>Thu, 29 Sep 2016 17:22:03 GMT</pubDate>
            <guid>https://css-tricks.com/building-resizeable-components-relative-css-units/</guid>
            <category>css</category>
            <category>ems</category>
            <category>sizing</category>
            <category>relative</category>
            <category>units</category>
            <category>components</category>
            <category>patterns</category>
            <category>scaling</category>
            <category>frontend</category>
            <category>development</category>
        </item>
        <item>
            <title>Grid layout is a much needed step-change for CSS | Matt Hinchliffe, Front-End Developer</title>
            <link>http://maketea.co.uk/2016/09/28/css-grid-layout-is-a-step-change.html</link>
            <description>
<![CDATA[
<p>This is not only a really good explanation of CSS grid layout, it&#8217;s also a practical walkthrough, recreating the layout of the Financial Times. I think if I followed along at home, writing the markup and CSS outlined here, it would me to get this stuff &#8220;clicking&#8221; in my brain.</p>

]]>
            </description>
            <pubDate>Thu, 29 Sep 2016 17:17:16 GMT</pubDate>
            <guid>http://maketea.co.uk/2016/09/28/css-grid-layout-is-a-step-change.html</guid>
            <category>css</category>
            <category>grid</category>
            <category>layout</category>
            <category>frontend</category>
            <category>development</category>
            <category>design</category>
            <category>ft</category>
        </item>
        <item>
            <title>Passed by a second-hand book stall on the way into work. My defences were down. Not a bad haul for a fiver.</title>
            <link>https://adactio.com/notes/11264</link>
            <description>
<![CDATA[
<picture>
<source media="all and (min-width: 50em)" srcset="https://adactio.com/images/uploaded/11264/large.jpg" />
<source media="all and (min-width: 25em)" srcset="https://adactio.com/images/uploaded/11264/medium.jpg, /images/uploaded/11264/large.jpg 1.25x" />
<img class="u-photo" src="https://adactio.com/images/uploaded/11264/small.jpg" srcset="https://adactio.com/images/uploaded/11264/medium.jpg 1.5x, https://adactio.com/images/uploaded/11264/large.jpg 2.5x" alt="Passed by a second-hand book stall on the way into work. My defences were down. Not a bad haul for a fiver." />
</picture>
<p>Passed by a second-hand book stall on the way into work. My defences were down.</p>

<p>Not a bad haul for a fiver.</p>

]]>
            </description>
            <pubDate>Thu, 29 Sep 2016 10:59:04 GMT</pubDate>
            <guid>https://adactio.com/notes/11264</guid>
        </item>
        <item>
            <title>Gazing at moonlander.seb.ly like it’s one big interactive screensaver.</title>
            <link>https://adactio.com/notes/11263</link>
            <description>
<![CDATA[
<picture>
<source media="all and (min-width: 50em)" srcset="https://adactio.com/images/uploaded/11263/large.jpg" />
<source media="all and (min-width: 25em)" srcset="https://adactio.com/images/uploaded/11263/medium.jpg, /images/uploaded/11263/large.jpg 1.25x" />
<img class="u-photo" src="https://adactio.com/images/uploaded/11263/small.jpg" srcset="https://adactio.com/images/uploaded/11263/medium.jpg 1.5x, https://adactio.com/images/uploaded/11263/large.jpg 2.5x" alt="Gazing at moonlander.seb.ly like it’s one big interactive screensaver." />
</picture>
<p>Gazing at moonlander.seb.ly like it’s one big interactive screensaver.</p>

]]>
            </description>
            <pubDate>Wed, 28 Sep 2016 19:37:48 GMT</pubDate>
            <guid>https://adactio.com/notes/11263</guid>
        </item>

   </channel>
</rss>