TheBigWarehouse/BigBoxOfHTML.md

The Big Box of HTML

Validators

• W3C Markup Validation Service - The original HTML validator for all your HTML validating needs
• Structured Data Linter - Check your page's microdata and structured data.

Testing Tools

• .resizr - Responsive website testing tool
• SSLlabs - THE SSL server test. Grades your website from A+ to F on it's SSL capabilities.
• WebPagetest - A web page performance testing tool. Provides a detailed analysis and suggest ways to improve.
• justice - An alternative web page performance monitor.
• Tota11y - A web page accessability testing tool. For developers that don't use assitive technologies themselves.
• lowvision.support - Another website accessibility testing tool. This one lets you simulate different types of colourblindness and several other conditions right in your web browser. Strange url: yes, Bad tool: no (it wouldn't be featured here if it wasn't!).
• RulersGuides.js - A JS bookmarklet that brings rulers and guidelines to any webpage.

Content & Generators

• Epic Favicon Generator - A simple no-fuss favicon generator.

• Cat Ipsum - A furrier alternative to Lorem Ipsum

• placehold.it - A simple no-fuss placeholder image service

• placekitten.com - A placeholder image service that gives you pictures of kittens

• Lorem Pixel - An alternative to placekitten.com.

• playr - A super simple HTML5 video and audio player

• High Resolution Browser Logos - A GitHub repository that contains high resolution logos for every browser under the sun

• htpasswd generator - Online tool that generates .htpasswd entries. Useful for both apache and nginx.

Layout

• Peppermint touch slider - Easy to use library for creating sliders.
• watermark.js - watermark images in the browser.
• Stickers.js - Apply an (interactive!) sticker effect to an image
• Stretchy - Easy form element autoresizing
• wallop - Library to show / hide stuff, includes a previous / next system.
• houdini - A super simple script to make an element collapsible.
• layzr.js - An easy to use lazy image loading script
• [be]lazy.js - An alternative to the above. Looks slightly more advanced, but also more complex.
• tabby - A drop-in easy to use tab system. Works using ids, and supports both <a> tags and buttons.

Accessibility

• abbr-touch - Make the title attribute of the <abbr> (abbreviation) HTML element accessible to touch screen users
• Help users checkout faster with autofill - A great article about using the autocomplete attribute to indicate what kind of content each input box should contain

Polyfills

• formfive - HTML5 form support for legacy browsers.

Colour Pickers

• Bumblemonkey Colour Picker - A simple colour picker. Also converts RGB to Hex and vice versa.
• ColorBlendy - Blend colors with different modes (e.g. multiply, overlay, dodge, etc.)

Fonts

• webfont-test - Compare up to 3 fonts at once
• Google Fonts on Github - A repository that contains the fonts available on Google Fonts.
• Font Library - An open source project that is tagging all the Google Fonts.
• Noto - A font that supports every single character in the Unicode character set. Every. single. one. If you can't find a font to display a specific character, use this. The whole thing weighs in at a staggering 472.6MB (!), although it's split up into different fonts for each language.
• &what; - Not strictly a font tool, but still useful. This website lets you search a considerably sized library of unicode characters and presents you with their HTML entity form.

Icon fonts and Equivalent

• Font Awesome - A cool icon font with 519(!) icons
• Open Iconic - An open source version of a much larger commerical icon set. Still good - has nice clear icons for use in many different projects.

Packaging Tools

• NW.js - Previously known as node-webkit, this tool lets you package your HTML / CSS / JS app into a bundle (native for your target desktop platform) with Blink & Node.JS.
• Electron - An alternative to the above. Looks to be smaller, but I don't really know how it works.

Tutorials and References

• HTML Cheatsheet - An interactive HTML5 cheat sheet. Gives a quick explanation along with a code example for each element.

• HTML5 Semantic Element Flowchart - Don't know which semantic HTML5 element to use? Use this flowchart to find out!

• Feditor.IO - Another online HTML / CSS / JS playground. Doesn't have a save function from what I can see, but apart from that it looks quite good.

• CodeMyUI.com - A curated collection of code snippets. A bit like this repository actually!

Support Websites

This section is a bit different - it contains link to sites that you might want to link to if a user of your website doesn't support a technology that you require.

• enable-javascript.com - Shows the user how to enable javascript in their browser
• What Browser? - Useful to link to if a user has an outdated browser
• Browse Happy - Another site to link your visitors that don't have an up to date browser to. Created by Wordpress.

Other

• SRI Hash Generator - Compute the SRI hash for the resource at a given url. See cloudflare's blog post (Scroll to the section on "Subresource Integrity") for more information.