# Front End Dev Links

source: [FrontLinks](https://simurai.com/blog/2014/10/01/front-links)

## Docs

* [HTML reference](http://htmlreference.io/)
* [DevDocs](http://devdocs.io/)
* [Native HTML Elements](http://nativeformelements.com/)
* [jQuery -> JS](http://youmightnotneedjquery.com/)
* [Default Font Family](http://fontfamily.io/)
* Shadow DOM
  * [The list](https://gist.github.com/3759334)
  * [Form Pseudo Elements](http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/)
* [Device sizes](http://www.google.com/design/tool/devices/)
* [SVG PocketGuide](https://github.com/jonitrythall/svgpocketguide/blob/master/svgpocketguide.md)

## CSS

* [CSS reference](http://cssreference.io/)
* [All CSS properties](http://ref.openweb.io/CSS/)
* [All CSS values](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_values_syntax)
* [CSS Triggers (perf)](http://csstriggers.com/)
* Stats
  * [StyleStats](http://stylestats.org/)
  * [CSS Stats](http://cssstats.com/)
* CSS Preprocessors
  * [Roole](http://roole.org/)
  * [CSS to SCSS](http://sebastianpontow.de/css2compass/)
* FlexBox
  * [cheatsheet](http://jonibologna.com/flexbox-cheatsheet/)
  * [Flexbox Playground](https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground)
  * [Patterns](http://webkit-flex.atomeye.com/)
  * [Flexbox in 5min](http://flexboxin5.com/)
  * [Flexplorer](http://bennettfeely.com/flexplorer/)
  * [FlexyBoxes](http://the-echoplex.net/flexyboxes/)
* Animation
  * [Bounce.js](http://bouncejs.com/)
  * [Stylie](http://jeremyckahn.github.io/stylie/)
* Easing:
  * [Bezier Builder](http://www.roblaplaca.com/examples/bezierBuilder/)
  * [Ceaser](http://matthewlein.com/ceaser/)
  * [cubic-bezier](http://cubic-bezier.com/)
  * [Easings](http://easings.net/)
* nth-child
  * [nth-test](http://nth-test.com/)
  * [:kids](http://codepen.io/RadLikeWhoa/full/cAJEo#tool)
* Color
  * [Color converter](http://briangrinstead.com/colorstash/)
  * [Contrast tester](http://jxnblk.com/colorable/demos/text/)
* [Clip Path](http://bennettfeely.com/clippy/)
* [px to em](http://matthewkosloski.me/labs/pixem/)
* [Cursors](http://chrisnager.github.io/cursors/)
* Live Edit
  * [Takana](http://usetakana.com/)
  * [Emmet](http://livestyle.emmet.io/)

## Libs + Frameworks

* [Web Starter Kit](https://developers.google.com/web/starter-kit/)
* [vue.js](http://vuejs.org/)
* [Physics Animation](http://impulse.luster.io/)
* [AniJS](http://anijs.github.io/)
* [Popmotion](https://popmotion.io/)

## Utils + Tools

* Wireframes
  * [Whimsical](https://whimsical.co/wireframes/)
  * [wireframe.cc](http://wireframe.cc/)
  * [Moqups](https://moqups.com/)
* HTML symbols
  * [☺ Characters](http://copypastecharacter.com/)
  * [Draw Chars](http://shapecatcher.com/)
* [Placeholder Image](http://placehold.it/)
* [FavIcon Editor](http://www.xiconeditor.com/)
* SVG
  * [SVG Optimizer](https://jakearchibald.github.io/svgomg/)
  * [Paths (editor)](http://jxnblk.com/paths/)
* [GitHub Editor](http://prose.io/)

## Resources

* [Color schemes](http://colorhunt.co/)
* Fonts
  * [Font Guide](http://www.typewolf.com/)
  * [Tagged Google Fonts](http://katydecorah.com/font-library/)
  * [Blokk Font](http://blokkfont.com)
* Icons
  * [Feather](https://feathericons.com/)
  * [Icomoon](http://icomoon.io/app/)
  * [Material](https://www.google.com/design/icons/)
  * [Entypo](http://entypo.com/characters/)
* Photos
  * [SplashBase](http://www.splashbase.co/)
  * [Stock Up](http://www.sitebuilderreport.com/stock-up)
  * [Unsucky Stock Photos](https://medium.com/design-ux/62ae4bcbe01b)
* [Subtle Patterns](http://subtlepatterns.com/)
* [UI Sounds](https://soundkit.io/) Copied