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

4 KiB

The Big Box of HTML

Validators

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

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

Accessibility

  • abbr-touch - Make the title attribute of the <abbr> (abbreviation) HTML element accessible to touch screen users

Colour Pickers

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!

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

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