TheBigWarehouse/BigBoxOfHTML.md

The Big Box of HTML

Validators

• Tecate.js - Drop in this script and it will display a warning at the top of your page if you have any invalid markup
• W3C Markup Validation Service - The original HTML validator for all your HTML validating needs

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.

Content & Generators

• 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

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

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.
• &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

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

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 what 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.