Frequently Asked Questions
Please review the list of questions below before you contact us.
Why progressive enhancement?
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 this article on A List Apart or take a look at Adaptive Web Design (you can read the first edition for free).
Can I use a feature that is only implemented in one browser?
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. Service Worker) feel free, but don’t assume it’s available. Follow the philosophy of progressive enhancement.
Why no JavaScript libraries?
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.
To see how JavaScript counts in your 10kB, scroll down.
How do I test for accessibility?
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 aViewer, aXe, a11y, F12’s Accessibility Tools, Chrome’s Accessibility Developer Tools, or any of the other amazing tools on the W3C’s Web Accessibility Evaluation Tools List.
Can I run part of my application on the server using PHP, Python, Node, etc.?
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 Node 6.3, PHP 5.6, Python 3.4, and .Net Core stacks. You can manage your dependencies using package.json (Node), composer.json (PHP), requirements.txt (Python), and NuGet (.Net Core).
If you are using PHP, make sure your index file is named index.php
. If you are using Python or Node, you can customize your Azure instance using web.config
files. We have a starter web.config
for Python and a starter web.config
for Node that you can use, just be sure to rename them web.config
and include them in the root of your project.
How does the 10kB limit factor in?
Unlike in previous years, the 10kB limit will be for a functional baseline experience. All of the code needed for folks to use your project should be contained in that 10kB. 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.
What that means, practically, is that the following will count against your 10kB:
- Your HTML document;
- Any
link
-ed and/or @import
-ed CSS; - Any linked (via an inline
script
) JavaScript file; - Any inline graphic (i.e., any file referenced in an
img
element’s src
attribute, including the fallback img
used within picture
); - Any inline
video
or audio
(the first or only source of each) that does not have preload="none"
set; - 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
- The contents and associated assets (per above) of any URL embedded using an
iframe
, object
, or similar.
The following will not count against your 10kB:
- HTTP headers;
- A favicon or any other graphic included in a
meta
tag for use with Open Graph, Twitter Cards, etc. (though the markup for the meta
tag would count); - Any asset referenced in CSS that only applies within a media query or in a medium other than “screen”;
- Any inline
video
or audio
that is set to preload="none"
; - Any asset that is lazy-loaded via JavaScript, including (but not limited to) graphics, fonts, HTML, CSS, and JavaScript.
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!
Can I use a 3rd-party Web service like Flickr, Twitter, Google Maps, etc.?
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.
Can I use a database?
Sure. For most data storage needs, we encourage you to use JSON files. If you really need a relational database, you can use SQLite too (assuming you include the required dependencies).
Can I stream audio or video from a server and not have it count against my 10kB?
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 10kB. 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 10kB. If your scenario is even slightly questionable, please send us an e-mail request with the details. For more detail on media, see “How does the 10kB limit factor in?”
Does a favicon count against me?
No, we won’t hold your favicon against you. That said, optimize the heck out of it.
What does it mean to get permission from the Web service?
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.
Can I gzip?
Please do!
How many times can I enter the contest?
We permit 3 entries per person.
Can I team up with a friend?
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.)
Can I use a plugin like Flash or Silverlight?
No, these are not allowed as this contest is focused on web standards. Feel free to use Canvas and SVG, though.