faq.html

<!DOCTYPE html><html id="akapart" lang="en"><head><meta charset="utf-8"><title>Frequently Asked Questions @ 10K Apart</title><link rel="stylesheet" href="/c/d.min.css"><link rel="stylesheet" href="/c/a.min.css" media="only screen"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="MobileOptimized" content="width"><meta name="HandheldFriendly" content="true"><link rel="apple-touch-icon" href="https://a-k-apart.com/i/i/icon-152.png"><meta name="msapplication-TileImage" content="/i/i/icon-144.png"><meta name="msapplication-TileColor" content="#FFFFFF"><link rel="manifest" href="/manifest.json"><meta property="og:site_name" content="10k Apart"><meta property="og:title" content="Frequently Asked Questions"><meta property="og:description" content="The who, what, when, where and why of this contest."><meta property="og:url" content="https:&#x2F;&#x2F;a-k-apart.com&#x2F;faq"><meta property="og:type" content="website"><meta property="og:image" content="https:&#x2F;&#x2F;a-k-apart.com&#x2F;i&#x2F;og_img.jpg"><meta name="twitter:card" value="summary"><meta name="twitter:site" value="@MSEdgeDev"><!--[if lt IE 9]>
	<script src="/j/html5shiv.min.js"></script>
	<![endif]--><link rel="preconnect" href="https://cdnjs.cloudflare.com/"><link rel="preconnect" href="https://www.google-analytics.com/"></head><body><div id="cookie-banner" role="alert"><form action="https://a-k-apart.com/cookies-ok" method="post"><input type="hidden" name="redirect_to" value=""><p>This site uses cookies for analytics and to track voting. If you’re interested, more details can be found in <a href="https:&#x2F;&#x2F;go.microsoft.com&#x2F;fwlink&#x2F;?LinkId&#x3D;521839#maincookiessimilartechnologiesmodule">our cookie policy</a>.</p><button type="submit">I’m cool with that</button></form></div><header class="banner"><div class="logo" data-link-all><h1 class="site-title"><a href="/index.html">10k <b>Apart</b></a></h1><p class="site-subtitle">Inspiring the Web with Just 10k</p><small>Brought to you by Microsoft and An Event Apart</small></div><nav aria-label="Main Navigation"><ul><li><a href="/faq.html">Read the Rules</a></li><li><a href="/gallery/index.html">View the Gallery</a></li><li><a href="/index.html#judges">Meet the Judges</a></li></ul></nav></header><main class="split"><h1>Frequently Asked Questions</h1><p>Please review the list of questions below before you contact us.</p><article class="faq" id="pe"><h2>Why progressive enhancement?</h2><p>Progressive enhancement is the gold standard for web design. It ensures your creation will reach the most people because it assumes nothing of your users other than they have access to the web via some sort of browser. Progressive enhancement makes no assumptions about a user’s abilities or the capabilities of their browser or device. For more on progressive enhancement, check out <a href="https://alistapart.com/article/understandingprogressiveenhancement">this article on <cite>A List Apart</cite></a> or take a look at <a href="https://adaptivewebdesign.info"><cite>Adaptive Web Design</cite></a> (you can <a href="https://adaptivewebdesign.info/1st-edition/read/">read the first edition for free</a>).</p></article><article class="faq" id="interop"><h2>Can I use a feature that is only implemented in one browser?</h2><p>You can, provided you still provide an experience for everyone who doesn’t have that feature. The focus of this contest is showing what’s possible using web standards. The web is constantly evolving though, and we recognize that. If you want to use a developing standard (e.g. <a href="https://www.w3.org/TR/service-workers/">Service Worker</a>) feel free, but don’t assume it’s available. Follow the philosophy of <a href="faq.html#pe">progressive enhancement</a>.</p></article><article class="faq" id="js"><h2>Why no JavaScript libraries?</h2><p>JavaScript has evolved a lot over the years and many of the pain points JavaScript libraries were created to address no longer exist. JavaScript libraries also add a lot of bulk to your code. In order to encourage folks to use native JavaScript functionality and keep their project as slim as possible, this year we’ve chosen to remove JavaScript libraries from the “free resource” camp. If you absolutely need a feature provided only by a library, consider extracting that piece (provided its license allows for that, of course) rather than including the whole library.</p><p>To see how JavaScript counts in your <abbr aria-label="ten kilobytes">10kB</abbr>, <a href="faq.html#size">scroll down</a>.</p></article><article class="faq" id="a11y"><h2>How do I test for accessibility?</h2><p>Real user testing is always best, but since this is a contest and we are looking to get you used to spot-checking your work for accessibility, we’d recommend taking a look at <a href="https://www.paciellogroup.com/resources/aviewer">aViewer</a>, <a href="https://github.com/dequelabs/axe-core">aXe</a>, <a href="https://addyosmani.com/a11y/">a11y</a>, <a href="https://channel9.msdn.com/Events/WebPlatformSummit/edgesummit2016/ES1610">F12’s Accessibility Tools</a>, <a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome’s Accessibility Developer Tools</a>, or any of the other amazing tools on the <a href="https://www.w3.org/WAI/ER/tools/">W3C’s Web Accessibility Evaluation Tools List</a>.</p></article><article class="faq" id="stack"><h2>Can I run part of my application on the server using PHP, Python, Node, etc.?</h2><p>Absolutely! In fact, we encourage it. We want folks to be able to to follow the best practices of progressive enhancement and include server-side fallbacks to critical front-end enhancements. The submission process includes spinning up an Azure instance just for your entry. We support deploying <a href="https://nodejs.org/en/blog/release/v6.3.0/">Node 6.3</a>, <a href="https://php.net/releases/5_6_0.php">PHP 5.6</a>, <a href="https://www.python.org/download/releases/3.4.0/">Python 3.4</a>, and <a href="https://www.microsoft.com/net/core">.Net Core</a> stacks. You can manage your dependencies using package.json (Node), composer.json (PHP), requirements.txt (Python), and NuGet (.Net Core).</p><p>If you are using PHP, make sure your index file is named <code>index.php</code>. If you are using Python or Node, you can customize your Azure instance using <code>web.config</code> files. We have <a href="webconfigs/web.config.python.txt">a starter <code>web.config</code> for Python</a> and <a href="webconfigs/web.config.node.txt">a starter <code>web.config</code> for Node</a> that you can use, just be sure to rename them <code>web.config</code> and include them in the root of your project.</p></article><article class="faq" id="size"><h2>How does the <abbr aria-label="ten kilobytes">10kB</abbr> limit factor in?</h2><p>Unlike in previous years, the <abbr aria-label="ten kilobytes">10kB</abbr> limit will be for a functional baseline experience. All of the code needed for folks to use your project should be contained in that <abbr aria-label="ten kilobytes">10kB</abbr>. You can use techniques like lazy-loading to enhance the experience by pulling in additional functionality, higher-resolution imagery, etc. as it makes sense to do so.</p><p>What that means, practically, is that the following <em>will</em> count against your <abbr aria-label="ten kilobytes">10kB</abbr>:</p><ul><li>Your HTML document;</li><li>Any <code>link</code>-ed and/or <code>@import</code>-ed CSS;</li><li>Any linked (via an inline <code>script</code>) JavaScript file;</li><li>Any inline graphic (i.e., any file referenced in an <code>img</code> element’s <code>src</code> attribute, including the fallback <code>img</code> used within <code>picture</code>);</li><li>Any inline <code>video</code> or <code>audio</code> (the first or only source of each) that does not have <code>preload="none"</code> set;</li><li>Any asset (e.g., graphics, fonts, etc.) referenced in CSS that applies universally (i.e., CSS that is not isolated to a media query or a medium other than “screen”); and</li><li>The contents and associated assets (per above) of any URL embedded using an <code>iframe</code>, <code>object</code>, or similar.</li></ul><p>The following <em>will not</em> count against your <abbr aria-label="ten kilobytes">10kB</abbr>:</p><ul><li><a href="faq.html#headers">HTTP headers</a>;</li><li>A <a href="faq.html#favicon">favicon</a> or any other graphic included in a <code>meta</code> tag for use with <a href="https://ogp.me/">Open Graph</a>, <a href="https://dev.twitter.com/cards/overview">Twitter Cards</a>, etc. (though the markup for the <code>meta</code> tag would count);</li><li>Any asset referenced in CSS that only applies within a media query or in a medium other than “screen”;</li><li>Any inline <code>video</code> or <code>audio</code> that is set to <code>preload="none"</code>;</li><li>Any asset that is lazy-loaded via JavaScript, including (but not limited to) graphics, fonts, HTML, CSS, and JavaScript.</li></ul><p>Note: If you do opt to lazy-load content, you should still do everything in your power to keep those lazy-loaded assets small. The ultimate size of each page will still be a factor in judging your entries. Optimize! Minify! Compress!</p></article><article class="faq" id="web"><h2>Can I use a 3rd-party Web service like Flickr, Twitter, Google Maps, etc.?</h2><p>Sure. If these are core to the experience, though, make sure they work without JavaScript *and* that the initial, usable page remains under the 10k limit.</p></article><article class="faq" id="db"><h2>Can I use a database?</h2><p>Sure. For most data storage needs, we encourage you to use <a href="https://www.json.org/">JSON</a> files. If you <em>really</em> need a relational database, you can use <a href="https://www.sqlite.org/">SQLite</a> too (assuming you include the required dependencies).</p></article><article class="faq" id="media"><h2>Can I stream audio or video from a server and not have it count against my <abbr aria-label="ten kilobytes">10kB</abbr>?</h2><p>If you're dynamically getting media from a general-purpose Web service; either based on user input or totally randomly, the media will not count against your <abbr aria-label="ten kilobytes">10kB</abbr>. You can also have the user supply you with a URL to a media file that you then process, and this will not count against your <abbr aria-label="ten kilobytes">10kB</abbr>. If your scenario is even slightly questionable, please send us an e-mail request with the details. For more detail on media, see “<a href="faq.html#">How does the <abbr aria-label="ten kilobytes">10kB</abbr> limit factor in?</a>”</p></article><article class="faq" id="favicon"><h2>Does a favicon count against me?</h2><p>No, we won’t hold your favicon against you. That said, <a href="https://jaydenseric.com/blog/favicon-optimization">optimize the heck out of it</a>.</p></article><article class="faq" id="headers"><h2>Do headers count against my transfer size?</h2><p>No, we won’t count headers against the <abbr aria-label="ten kilobytes">10kB</abbr> limit. Don’t abuse headers though. <a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields#Size_limits">Keep them slim</a>.</p></article><article class="faq" id="permission"><h2>What does it mean to get permission from the Web service?</h2><p>You don't need to send us a signed permission slip for your app to use sites like Flickr or Twitter. But it *is* your responsibility to ensure that your app uses any 3rd-party Web service in a way that adheres to that service's terms and conditions.</p></article><article class="faq" id="gzip"><h2>Can I gzip?</h2><p>Please do!</p></article><article class="faq" id="limit"><h2>How many times can I enter the contest?</h2><p>We permit 3 entries per person.</p></article><article class="faq" id="coop"><h2>Can I team up with a friend?</h2><p>Sure, you can work with others. Each entry is eligible for only one prize, though. And you should probably decide how you're going to split the prize before you start (visa card, registration, etc.)</p></article><article class="faq" id="plugins"><h2>Can I use a plugin like Flash or Silverlight?</h2><p>No, these are not allowed as this contest is focused on web standards. Feel free to use Canvas and SVG, though.</p></article></main><footer><p class="presented-by">Brought to you by <a href="https://developer.microsoft.com/microsoft-edge/">Microsoft Edge</a>, in association with <a href="https://aneventapart.com">An Event Apart</a>.</p><p><small id="license">©2007–16 <a href="https://www.microsoft.com">Microsoft</a></small> | <a href="/legal.html">Legalese</a> | <a href="https:&#x2F;&#x2F;go.microsoft.com&#x2F;fwlink&#x2F;?LinkId&#x3D;521839">Privacy Statement &amp; Cookies</a><br><a href="/colophon/index.html">Find out how this site was made</a></p></footer><!--[if gt IE 8]><!--><script src="/j/main.min.js"></script><!--<![endif]--></body></html>