1
0
Fork 0
mirror of https://github.com/sbrl/thebigwarehouse.git synced 2018-01-10 21:33:45 +00:00
TheBigWarehouse/BigBoxOfHTML.md

44 lines
3.2 KiB
Markdown

# The Big Box of HTML
## Validators
- [Tecate.js](https://github.com/kevinburke/tecate) - 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](https://validator.w3.org/) - The original HTML validator for all your HTML validating needs
## Testing Tools
- [.resizr](http://resizr.co/) - Responsive website testing tool
- [SSLlabs](https://www.ssllabs.com/ssltest/) - THE SSL server test. Grades your website from A+ to F on it's SSL capabilities.
## Content & Generators
- [Cat Ipsum](http://catipsum.com/) - A furrier alternative to Lorem Ipsum
- [placehold.it](https://placehold.it/) - A simple no-fuss placeholder image service
- [placekitten.com](http://placekitten.com/) - A placeholder image service that gives you pictures of kittens
- [High Resolution Browser Logos](https://github.com/alrra/browser-logos#high-resolution-browser-logos) - A GitHub repository that contains high resolution logos for every browser under the sun
## Colour Pickers
- [Bumblemonkey Colour Picker](http://bumblemonkey.com/picker/picker.html) - A simple colour picker. Also converts RGB to Hex and vice versa.
- [ColorBlendy](http://colorblendy.com/) - Blend colors with different modes (e.g. multiply, overlay, dodge, etc.)
## Fonts
- [webfont-test](http://webfont-test.com/) - Compare up to 3 fonts at once
- [Google Fonts on Github](https://github.com/google/fonts) - A repository that contains the fonts available on [Google Fonts](https://www.google.com/fonts).
- [&what;](http://www.amp-what.com/) - 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](http://fontawesome.io/) - A cool icon font with 519(!) icons
- [Open Iconic](https://useiconic.com/open/) - 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](http://nwjs.io/) - 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](http://electron.atom.io/) - 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](http://html5doctor.com/downloads/h5d-sectioning-flowchart.png) - 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](http://enable-javascript.com/) - Shows the user how to enable javascript in their browser
- [What Browser?](https://whatbrowser.org/) - Useful to link to if a user has an outdated browser
## Other
- [SRI Hash Generator](https://srihash.org/) - Compute the SRI hash for the resource at a given url. See [cloudflare's blog post](https://blog.cloudflare.com/an-introduction-to-javascript-based-ddos/) (Scroll to the section on "Subresource Integrity") for more information.