Created
July 24, 2012 00:17
-
-
Save christianhanvey/3167119 to your computer and use it in GitHub Desktop.
some useful reference links - in markdown
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
My Big List of Links | |
================================ | |
**Q. Does this link belong in this list?** | |
1. Yes, if it is a regular source of reference | |
2. Yes, if it contains important knowledge I want to learn | |
3. Yes, if it sets the standards I aspire to work by | |
4. Yes, if its content will push my boundaries | |
5. Yes, if it provides inspiration | |
SECTIONS | |
-------- | |
- [Reference](#reference) | |
- [Frameworks](#Frameworks) | |
- [Javascript](#Javascript) | |
- [Tools](#Tools) | |
- [Fonts](#Fonts) | |
- [MODX](#MODX) | |
- [Ideas to incorporate into projects](#Projectideas) | |
- [Mobile](#Mobile) | |
- [Inspiration](#Inspiration) | |
- [Design Theory](#DesignTheory) | |
- [Agencies & Designers](#Designers) | |
- [Process](#Process) | |
- [GIT](#GIT) | |
- [Email](#Email) | |
- [Video](#Video) | |
<a id="reference"></a> | |
Reference | |
------------------------- | |
###GENERAL | |
* [DOCHUB](http://dochub.io/) http://dochub.io/ | |
* [HTTP Statuses](http://httpstatus.es/) http://httpstatus.es/ | |
* [Can I Use?](http://caniuse.com/) http://caniuse.com/ | |
###Javascript | |
* [JQAPI](http://jqapi.com) http://jqapi.com | |
* [MDN](https://developer.mozilla.org/en-US/) https://developer.mozilla.org/en-US/ | |
* [JQ Fundamentals](http://jqfundamentals.com/) http://jqfundamentals.com/ | |
* [JSLint](http://jslint.com/) http://jslint.com/ | |
* [Javascript Garden](http://bonsaiden.github.com/JavaScript-Garden/) http://bonsaiden.github.com/JavaScript-Garden/ | |
###CSS | |
* [Quirksmode CSS Support Tables](http://www.quirksmode.org/css) http://www.quirksmode.org/css | |
* [Snookca's SMACSS](http://smacss.com/) http://smacss.com/ | |
* [LESS](http://lesscss.org/) http://lesscss.org/ | |
* [CSSLint](http://csslint.net/) http://csslint.net/ | |
* [CSS Browser Hacks](http://paulirish.com/2009/browser-specific-css-hacks/) http://paulirish.com/2009/browser-specific-css-hacks/ | |
###HTML | |
* [HTML5 for developers](http://developers.whatwg.org/) http://developers.whatwg.org/ | |
* [HTML5 Rocks](http://www.html5rocks.com/en/) http://www.html5rocks.com/en/ | |
* [Can I Use?](http://caniuse.com) http://caniuse.com | |
* [HTML5 Periodic Table ](http://joshduck.com/periodic-table.html) http://joshduck.com/periodic-table.html | |
* [HTML5 Please](http://html5please.us) | |
* HTML5 Readiness <http://html5readiness.com/> | |
###VALIDATION & TESTING | |
* [W3C Validator](http://validator.w3.org/) http://validator.w3.org/ | |
* W3CLove - entire site validation <http://w3clove.com/> | |
* Browserling <https://browserling.com/> | |
* Browserstack <http://www.browserstack.com/> | |
###FRONT END GUIDELINES | |
* Idiomatic CSS <https://github.com/necolas/idiomatic-css> | |
* Isobar <http://na.isobar.com/standards/> | |
* | |
<a id="Frameworks"></a> | |
FRAMEWORKS | |
------------------------- | |
* [html5boilerplate](http://html5boilerplate.com/) http://html5boilerplate.com/ | |
* [html5reset](http://html5reset.org/) http://html5reset.org/ | |
* [twitter bootstrap](http://twitter.github.com/bootstrap/) http://twitter.github.com/bootstrap/ | |
###GRID | |
* [Semantic Grid ](http://semantic.gs) http://semantic.gs | |
* [Gridpak](http://gridpak.com/) http://gridpak.com/ | |
* [Foundation](http://foundation.zurb.com/) http://foundation.zurb.com/ | |
<a id="Javascript"></a> | |
JAVASCRIPT | |
------------------------- | |
* [modernizr](http://modernizr.com) http://modernizr.com | |
* [selectivizr](http://selectivizr.com/) http://selectivizr.com/ | |
###JQUERY | |
* [Jquery](http://jquery.com) http://jquery.com | |
###APIs | |
* [Google Maps](http://code.google.com/apis/maps/documentation/javascript/basics.html) http://code.google.com/apis/maps/documentation/javascript/basics.html | |
###LIBRARIES | |
* [JSWiki](https://github.com/bebraw/jswiki/wiki) https://github.com/bebraw/jswiki/wiki | |
###INSPIRATION | |
* [Creative JS ](http://creativejs.com/) http://creativejs.com/ | |
### TECHNIQUES | |
* [Object Literal Pattern](http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/) http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/ | |
* | |
DUDES | |
------------------------- | |
- Paul Irish | |
- Chris Coyier | |
- Necolas Gallagher | |
- John Resig | |
- Addy Osmani | |
- Dmitry Baranovski | |
- ??? | |
<a id="Tools"></a><a href="#top" style="display:block; background-color:#eee;text-align:right;">Back to Top</a> | |
TOOLS | |
------------------------- | |
* The Toolbox <http://www.thetoolbox.cc/> | |
* [CSS3 Tools by simurai](http://www.delicious.com/stacks/view/Ufzjuo) http://www.delicious.com/stacks/view/Ufzjuo | |
* [CSS Tricks SNIPPETS](http://css-tricks.com/snippets/) http://css-tricks.com/snippets/ | |
###Performance | |
* [Google Page Speed](https://developers.google.com/pagespeed/) https://developers.google.com/pagespeed/ | |
* [Yahoo Performance Rules](http://developer.yahoo.com/performance/rules.html) http://developer.yahoo.com/performance/rules.html | |
* [YSlow](http://developer.yahoo.com/yslow/) http://developer.yahoo.com/yslow/ | |
* WebPageTest <http://www.webpagetest.org/> | |
###LINKS TO MORE REFERENCES/TOOLS | |
* [Move the web forward](http://movethewebforward.org/) http://movethewebforward.org/ | |
* Spritepad <http://wearekiss.com/spritepad> | |
<a id="Fonts"></a> | |
FONTS | |
------------------------- | |
### Web font suppliers | |
* [Google Web Fonts](http://www.google.com/webfonts) http://www.google.com/webfonts | |
* [Typekit](https://typekit.com/) https://typekit.com/ | |
* [FontSquirrel](http://www.fontsquirrel.com/) http://www.fontsquirrel.com/ | |
* [FontDeck](http://fontdeck.com) http://fontdeck.com | |
* [FontShop](http://fontshop.com/fontlist/n/web_fontfonts) http://fontshop.com/fontlist/n/web_fontfonts | |
* [FontFont](https://www.fontfont.com/) https://www.fontfont.com/ | |
* [FontSpring](http://fontspring.com) http://fontspring.com | |
* [League of Moveable Type](http://theleagueofmoveabletype.com) http://theleagueofmoveabletype.com | |
* [WebType](http://www.webtype.com/) http://www.webtype.com/ | |
### Reference, inspiration | |
* [Lost Type](http://losttype.com/) http://losttype.com/ | |
###Identifying fonts | |
* [Identifont](http://www.identifont.com/) http://www.identifont.com/ | |
* [What the font](http://www.myfonts.com/WhatTheFont/) http://www.myfonts.com/WhatTheFont/ | |
### Stacks | |
* [TypeStacks](http://typestacks.com/) http://typestacks.com/ | |
* [Font Stacks](http://cssfontstack.com/) http://cssfontstack.com/ | |
<a id="MODX"></a> | |
MODX | |
------------------------- | |
* Bob's guide to objects <http://bobsguides.com/revolution-objects.html> | |
* Modx Object cheatsheet <http://www.shawnwilkerson.com/modx-revolution/2012/03/04/modx-revolution-object-cheat-sheet-modresource/> | |
* Revolution Docs <http://rtfm.modx.com/display/revolution20/Home> | |
* Add On Docs <http://rtfm.modx.com/display/ADDON/Home> | |
<a id="Projectideas"></a> | |
SHIT TO USE IN A PROJECT | |
------------------------- | |
###WEB FONTS | |
font deck freebie | |
* [EXO SANS](http://www.ndiscovered.com/index.php/exo-font-family) http://www.ndiscovered.com/index.php/exo-font-family | |
* [icon fonts by simurai](http://www.delicious.com/stacks/view/SC3hpq) http://www.delicious.com/stacks/view/SC3hpq | |
* [PICTOS font](http://pictos.cc/) http://pictos.cc/ | |
lettering.js by Trent Walton | |
###CSS techniques | |
* [rollovers ](http://www.netmagazine.com/tutorials/create-progressively-enhanced-3d-css-rollovers) http://www.netmagazine.com/tutorials/create-progressively-enhanced-3d-css-rollovers | |
* [Adobe arrow like headers](http://css-tricks.com/adobe-like-arrow-headers/) http://css-tricks.com/adobe-like-arrow-headers/ | |
* [css tricks snippets](http://css-tricks.com/downloads/) http://css-tricks.com/downloads/ | |
###Animation | |
[Animate CSS](http://daneden.me/animate/) | |
###BUTTON techniques | |
* [super cool numbered buttons](http://www.esecamalich.com/blog/before-&-after/) http://www.esecamalich.com/blog/before-&-after/ | |
* [youtube buttons](http://css-tricks.com/youtube-popup-buttons/) http://css-tricks.com/youtube-popup-buttons/ | |
* [ZURB super awesome buttons ](http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba) http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba | |
* [collection of button styles](http://houseofbuttons.tumblr.com/) http://houseofbuttons.tumblr.com/ | |
* [Image Hover effects](http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/) http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ | |
* [ISOTOPE + Masonry](http://isotope.metafizzy.co/) http://isotope.metafizzy.co/ | |
* [Method & Craft](http://www.methodandcraft.com/) http://www.methodandcraft.com/ | |
* [CODROPS](http://tympanus.net/codrops/) http://tympanus.net/codrops/ | |
* [Red Team Design](http://www.red-team-design.com/) http://www.red-team-design.com/ | |
* [Web Designer Wall](http://webdesignerwall.com/) http://webdesignerwall.com/ | |
* <http://www.onextrapixel.com/2012/06/15/20-essential-jquery-plugins-for-every-developers-toolkit/> | |
<a id="Mobile"></a> | |
Mobile | |
------------------------- | |
* [Mobile Web Best Practices](http://mobilewebbestpractices.com/) | |
* [Mobile Web Best Practices - Resources](http://mobilewebbestpractices.com/resources/) | |
* [Mobile HTML5](http://mobilehtml5.org/) | |
<a id="Inspiration"></a> | |
HIGHLY COOL SHIT FOR INSPIRATION | |
------------------------- | |
* [Dribble](http://www.dribbble.com/) http://www.dribbble.com/ | |
* [Net Magazine top 20 CSS Sites](http://www.netmagazine.com/features/2011-review-20-css-sites-rocked) http://www.netmagazine.com/features/2011-review-20-css-sites-rocked | |
* [German Sites](http://www.designmadeingermany.de/sites-we-like/) http://www.designmadeingermany.de/sites-we-like/ | |
* <http://designmodo.com/html5-css3-websites/> | |
REALLY CRAZY SHIT | |
------------------------- | |
* [MDN CSS3 DEMOS](https://developer.mozilla.org/en-US/demos/tag/tech:css3/) https://developer.mozilla.org/en-US/demos/tag/tech:css3/ | |
<a id="DesignTheory"></a> | |
DESIGN THEORY | |
------------------------- | |
* [The Cicada Principal](http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/) http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/ | |
* [Law of page harmony](http://retinart.net/graphic-design/secret-law-of-page-harmony/) http://retinart.net/graphic-design/secret-law-of-page-harmony/ | |
* [Design Principles](http://principles.adactio.com/) http://principles.adactio.com/ | |
* [UK GOV Design Principles](https://www.gov.uk/designprinciples) https://www.gov.uk/designprinciples | |
IE | |
------------------------- | |
* [CSS3 PIE](http://css3pie.com/) http://css3pie.com/ | |
<a id="Designers"></a> | |
TOP AGENCIES | |
------------------------- | |
* [NCLUD](http://nclud.com/) http://nclud.com/ | |
* [ZURB](http://www.zurb.com/) http://www.zurb.com/ | |
* [HAPPY COG](http://happycog.com/) http://happycog.com/ | |
* [METALAB ](http://metalabdesign.com/) http://metalabdesign.com/ | |
TOP DESIGNERS | |
------------------------- | |
* [Trent Walton](http://trentwalton.com/) http://trentwalton.com/ | |
* [Dave Gamache](http://davegamache.com/) http://davegamache.com/ | |
Examples of great UX sites | |
------------------------- | |
* [etsy](http://www.etsy.com/) http://www.etsy.com/ | |
* [bagcheck](https://bagcheck.com/) https://bagcheck.com/ | |
* | |
UI Resources | |
------------------------- | |
* [Pattern Tap ](http://patterntap.com/) http://patterntap.com/ | |
* [yahoo design pattern library](http://developer.yahoo.com/ypatterns/) | |
* quince | |
* dell ui design library | |
CLIENTS | |
------------------------- | |
###Teach your clients about the mysteries of the web | |
* [http://weenudge.com/](http://weenudge.com/) | |
* [http://thereisnofold.com/](http://thereisnofold.com/) | |
* [Which mobile approach?](http://www.lukew.com/ff/entry.asp?1509) | |
* [Mobile performance matters](http://www.webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/) | |
###Client Relations | |
* [http://24ways.org/2007/10-ways-to-get-design-approval](http://24ways.org/2007/10-ways-to-get-design-approval) | |
* [http://supportdetails.com/](http://supportdetails.com/) | |
* <http://www.smashingmagazine.com/2011/05/06/how-to-get-sign-off-for-your-designs/> | |
SEO | |
-------------------------------------------------- | |
* [Google SEO starter guide](http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf) PDF | |
* [SEOMoz](http://www.seomoz.org/) http://www.seomoz.org/ | |
* quick analysis: http://www.business2community.com/online-marketing/the-15-minute-seo-audit-ammo-for-your-next-sales-meeting-0104694 | |
* [Microformats](http://microformats.org/) http://microformats.org/ | |
<a id="Process"></a> | |
PROCESS | |
-------------------------------------------------- | |
Things to follow in the process | |
- Sitepoint web design business kit v3 | |
* [Image Gallery preview](http://www.dropmocks.com/) http://www.dropmocks.com/ | |
* [Influence - Zurb's Design Preview](http://www.influenceapp.com/home) | |
* [InVision](https://projects.invisionapp.com/) https://projects.invisionapp.com/ | |
* [LaunchList](http://lite.launchlist.net/) http://lite.launchlist.net/ | |
<a id="GIT"></a> | |
GIT | |
-------------------------------------------------- | |
* [GIT - the simple guide](http://rogerdudler.github.com/git-guide/ ) http://rogerdudler.github.com/git-guide/ | |
* [Pro GIT](http://progit.org/book/) http://progit.org/book/ | |
* [GIT community book](http://book.git-scm.com/index.html) http://book.git-scm.com/index.html | |
###TUTORIALS | |
* [GIT for designers](http://thinkvitamin.com/design/git-for-designers-part-1/) | |
<a id="Email"></a> | |
HTML EMAIL | |
-------------------------------------------------- | |
* [Emailology](http://www.emailology.org/) http://www.emailology.org/ | |
* [Email Boilerplate](http://htmlemailboilerplate.com/) http://htmlemailboilerplate.com/ | |
<a id="Video"></a> | |
VIDEO | |
-------------------------------------------------- | |
[mediaelementjs.com](http://mediaelementjs.com/) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment