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

5.1 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.
  • 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!).

Content & Generators

Layout

Accessibility

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

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