sbrl-github/TheBigWarehouse
1
0
Fork 0
mirror of https://github.com/sbrl/thebigwarehouse.git synced 2018-01-10 21:33:45 +00:00
Code Activity
TheBigWarehouse/BigBoxOfHTML.md
Starbeamrainbowlabs 0fdb91337d Fix grammar
2016-09-21 15:16:31 +01:00

6.4 KiB
Raw Blame History

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!).
  • RulersGuides.js - A JS bookmarklet that brings rulers and guidelines to any webpage.

Content & Generators

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

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.

  • 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