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

73 lines
5.8 KiB
Markdown
Raw Normal View History

2015-04-28 17:18:39 +00:00
# The Big Box of HTML
## Validators
- [W3C Markup Validation Service](https://validator.w3.org/) - The original HTML validator for all your HTML validating needs
2015-04-28 17:18:39 +00:00
## Testing Tools
- [.resizr](http://resizr.co/) - Responsive website testing tool
2015-05-23 14:17:53 +00:00
- [SSLlabs](https://www.ssllabs.com/ssltest/) - THE SSL server test. Grades your website from A+ to F on it's SSL capabilities.
2015-06-02 13:14:37 +00:00
- [WebPagetest](http://www.webpagetest.org/) - A web page performance testing tool. Provides a detailed analysis and suggest ways to improve.
2015-06-24 07:01:32 +00:00
- [justice](http://okor.github.io/justice/) - An alternative web page performance monitor.
2015-07-05 08:06:29 +00:00
- [Tota11y](http://khan.github.io/tota11y/) - A web page accessability testing tool. For developers that don't use assitive technologies themselves.
2015-07-11 15:44:00 +00:00
- [lowvision.support](http://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!).
2015-07-27 10:46:28 +00:00
- [RulersGuides.js](http://mark-rolich.github.io/RulersGuides.js/) - A JS bookmarklet that brings rulers and guidelines to any webpage.
2015-06-01 07:19:26 +00:00
## Content & Generators
2015-06-26 07:42:43 +00:00
- [Epic Favicon Generator](https://epicfavicongenerator.com/) - A simple no-fuss favicon generator.
- [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
2015-08-24 14:28:34 +00:00
- [Lorem Pixel](http://lorempixel.com/) - An alternative to placekitten.com.
2015-06-12 05:38:09 +00:00
- [playr](http://plyr.io/) - A super simple HTML5 video and audio player
2015-06-01 07:19:26 +00:00
- [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
2015-06-11 10:55:33 +00:00
- [htpasswd generator](http://aspirine.org/htpasswd_en.html) - Online tool that generates .htpasswd entries. Useful for both apache and nginx.
2015-06-30 06:35:42 +00:00
## Layout
- [Peppermint touch slider](http://wd.dizaina.net/en/scripts/peppermint/) - Easy to use library for creating sliders.
2015-07-06 11:06:05 +00:00
- [watermark.js](http://brianium.github.io/watermarkjs/) - watermark images in the browser.
2015-07-27 10:57:50 +00:00
- [Stickers.js](http://stickerjs.cmiscm.com/) - Apply an (interactive!) sticker effect to an image
2015-08-09 12:13:42 +00:00
- [Stretchy](http://leaverou.github.io/stretchy/) - Easy form element autoresizing
2015-08-29 12:19:27 +00:00
- [wallop](http://pedroduarte.me/wallop/) - Library to show / hide stuff, includes a previous / next system.
2015-09-03 09:16:06 +00:00
- [houdini](https://github.com/cferdinandi/houdini/) - A super simple script to make an element collapsible.
2015-06-30 06:35:42 +00:00
2015-06-06 11:50:51 +00:00
## Accessibility
- [abbr-touch](https://github.com/Tyriar/abbr-touch) - Make the `title` attribute of the `<abbr>` (abbreviation) HTML element accessible to touch screen users
2015-08-02 08:06:33 +00:00
- [Help users checkout faster with autofill](http://updates.html5rocks.com/2015/06/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](http://etiennetalbot.github.io/formFive/) - HTML5 form support for legacy browsers.
2015-06-06 11:50:51 +00:00
2015-06-01 12:31:10 +00:00
## 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
2015-04-28 18:55:52 +00:00
- [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).
2015-06-06 11:46:41 +00:00
- [Font Library](http://katydecorah.com/font-library/) - An open source project that is tagging all the Google 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.
2015-04-28 17:18:39 +00:00
2015-05-31 19:57:24 +00:00
### Icon fonts and Equivalent
- [Font Awesome](http://fontawesome.io/) - A cool icon font with 519(!) icons
2015-05-31 19:58:57 +00:00
- [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.
2015-05-09 16:31:28 +00:00
2015-04-28 17:18:39 +00:00
## 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.
2015-05-09 16:31:28 +00:00
2015-06-01 12:28:48 +00:00
## 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!
2015-06-06 12:00:21 +00:00
- [Feditor.IO](http://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.
2015-05-12 08:43:06 +00:00
## 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
2015-06-01 16:14:34 +00:00
- [Browse Happy](http://browsehappy.com) - Another site to link your visitors what don't have an up to date browser to. Created by Wordpress.
2015-05-12 08:43:06 +00:00
2015-05-09 16:31:28 +00:00
## 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.