resources.md

Resources by Category

Here is a big dump of lots of resources for front-end devs.

My Atom Setuphttps://code.visualstudio.com/Download

Here's how I have Atom configured on my machine:

https://github.com/tiy-durham-fe-2015/curriculum/blob/master/atom-cheat-sheet.md

Git

Good tutorial:

https://www.atlassian.com/git/tutorials/setting-up-a-repository

CSS/HTML

Tools

Microsoft's code editor: https://code.visualstudio.com/Download

CSS triangle generator: http://apps.eky.hk/css-triangle-generator/

Text shadow, and other cewl stuff: http://www.css3generator.in/text-shadow.html

Media queries (responsive) for standard devices: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Test for browser support: http://caniuse.com

Lorem ipsum: http://meettheipsums.com/

CSS reset: http://meyerweb.com/eric/tools/css/reset/

Scale calculator for headers, line-heights, etc: http://type-scale.com/

Image, vector creation:

• https://krita.org/download/krita-desktop/
• https://inkscape.org/en/

Simple grid system:

• http://susy.oddbird.net/ is probably my favorite
  • Here's a good crash course on it
• http://jeet.gs/
• http://neat.bourbon.io/
• http://purecss.io/grids/

Find related products: http://www.producthunt.com/

Animations:

• http://www.justinaguilar.com/animations/index.html
• http://ianlunn.github.io/Hover/
• http://daneden.github.io/animate.css/
• http://leaverou.github.io/animatable/

Start a server in any directory on Mac:

python -m SimpleHTTPServer 8000

Preprocessors

• http://learnboost.github.io/stylus/
• http://sass-lang.com/
• http://lesscss.org/
• https://github.com/postcss/postcss

Frameworks, grids, etc

• Material design
• http://purecss.io/
• http://getskeleton.com/
• http://susy.oddbird.net/
• http://thoughtbot.com/open-source
• http://getbootstrap.com/
• http://foundation.zurb.com/

CSS guidelines: http://cssguidelin.es/

SCSS guidelines: http://sass-guidelin.es/

CSS Specificity rules:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Color scheme design:

• http://design-seeds.com
• http://colorschemedesigner.com/csd-3.5/
• http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
• https://color.adobe.com
• Pre-made color schemes: http://www.dtelepathy.com/blog/inspiration/beautiful-color-palettes-for-your-next-web-project

Sketching, drawing:

• https://inkscape.org/en/
• http://bohemiancoding.com/sketch/

Tutorials & Articles

HTML element categories: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories

CSS/HTML tutorial:

• http://learn.shayhowe.com/html-css/
• http://howtocodeinhtml.com/

Responsive tables: https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css/

Advanced CSS selectors game:

• http://flukeout.github.io/

Flexbox game:

• http://flexboxfroggy.com/

Layout tutorial: http://learnlayout.com/no-layout.html

Optimal line-lengths: http://baymard.com/blog/line-length-readability

Font-sizing explained: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

The Golden ratio: http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

CSS tips, tricks, and references: http://css-tricks.com/almanac/

The power of CSS illustrated:

• http://a.singlediv.com/
• http://www.csszengarden.com/

Intro to OOCSS: http://www.codersgrid.com/2013/05/10/how-to-code-better-css/

Video tutorials on all things web-programming: https://www.bento.io/

Free Images

• https://stock.tookapic.com
• http://jaymantri.com/
• http://getrefe.tumblr.com/
• http://nos.twnsnd.co/
• http://images.superfamous.com/
• http://www.pexels.com/
• https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b
• https://www.haikudeck.com
• https://unsplash.com/
• http://finda.photo/
• https://pixabay.com/ (Not all photos are safe for work...)

Fonts

• http://fontsquirrel.com
• http://google.com/fonts
• http://100daysoffonts.com/

Icon fonts:

• http://iconmonstr.com/
• http://app.fontastic.me/
• http://fontello.com

Some curated lists of web fonts:

• At the bottom of this article: https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96
• http://hellohappy.org/beautiful-web-type/
• http://www.typewolf.com/
• http://femmebot.github.io/google-type/
• http://www.webdesignerhub.com/free-retro-style-fonts/

Pretty sweet nav menus:

http://exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns

Inspiration

• http://uxmovement.com/
• http://uimovement.com/
• http://inspired-ui.com/
• http://inspirationui.com/
• https://www.pinterest.com/search/pins/?q=interface%20design
• https://dribbble.com
• http://zurb.com/patterntap
• http://littlebigdetails.com/
• http://html5up.net/
• http://codepen.io/patterns/
• http://squarespace.com/
• http://thoughtbot.com/
• http://line25.com/
• http://land-book.com/
• http://www.awwwards.com/
• http://lapa.ninja/
• http://logopond.com/

JavaScript

Tutorials & Articles

Good intro to JS: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

Thorough documentation of weird JS behaviors and gotchas: http://bonsaiden.github.io/JavaScript-Garden/

Complete reference: http://devdocs.io/javascript/

Contrasting jQuery with basic JavaScript: http://youmightnotneedjquery.com/

Learn JS by playing games: http://www.jsdares.com/

Intro to functional programming: http://scott.sauyet.com/Javascript/Talk/FunctionalProgramming/

JS style guide: http://javascript.crockford.com/code.html

A quick overview of JavaScript: https://slides.com/concise/js/fullscreen#/

Node: http://nodeschool.io/

Angular: https://egghead.io/technologies/angularjs

Learn algorithms: https://www.khanacademy.org/computing/computer-science/algorithms

Libraries

A list of small, focused libraries: http://microjs.com

jQuery http://jquery.com/

lo-dash, a set of useful helpers: https://lodash.com/

Clipboard without flash dependency: https://github.com/zenorocha/clipboard.js

Lazy evaluation: http://danieltao.com/lazy.js/

Functional constructs in JS: http://ramdajs.com/docs/

Advanced physics library: http://brm.io/matter-js

Small, dependency-free drag-and-drop: https://github.com/bevacqua/dragula

Scrolling effects: https://github.com/gopatrik/space.js

Extract colors from images: https://jariz.github.io/vibrant.js/

Books

• http://eloquentjavascript.net/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
• https://github.com/getify/You-Dont-Know-JS

Visualizations on the web: http://chimera.labs.oreilly.com/books/1230000000345/index.html

Cool extension to D3: http://riccardoscalco.github.io/textures/

Rich text editor: http://www.alohaeditor.org/

WebGL (3D on the web): http://webglfundamentals.org/

Rendering HTML with WebGL (this is crazy): https://github.com/PixelsCommander/HTML-GL/blob/master/README.md

OAuth handiness: http://adodson.com/hello.js/#hellojs

Mighty morphin DOM: http://www.rich-harris.co.uk/ramjet/

Lightweight markdown editor: https://tibastral.github.io/markdownify/

GBA emulator written in JavaScript: http://jsemu.github.io/gba/

Speech recognition: https://www.talater.com/annyang/

Native Mobile

https://www.nativescript.org/

Git

Git cheat sheet: https://training.github.com/kit/downloads/github-git-cheat-sheet.pdf

General Tech

Blogs & News

• https://news.ycombinator.com/
• https://signalvnoise.com/
• https://robots.thoughtbot.com/
• http://www.joelonsoftware.com/
• http://alistapart.com/

Gulp stuff: https://developers.google.com/web/fundamentals/tools/build/setupbuildprocess?hl=en

Avoiding complexity: http://www.theeffectiveengineer.com/blog/hidden-costs-that-engineers-ignore?utm_source=Founder+Weekly+Newsletter&utm_campaign=1a5eed15d1-Founder_Weekly_Issue_163_December_31_2014&utm_medium=email&utm_term=0_286b01fd3e-1a5eed15d1-331306269

Interviewing

Getting an interview

Post your resume online!

• http://indeed.com
• http://dice.com

Prepping for an interview

Solve problems to keep your skills and brain sharp

• https://www.interviewcake.com/free-weekly-coding-interview-problem-newsletter?a=a&utm_source=coderbyte
• http://coderbyte.com
• http://www.toptal.com/javascript/interview-questions

Google "ACM programming competition problems", and try solving some of the problems you find

Find a free dataset and play with the data:

• https://github.com/caesar0301/awesome-public-datasets
• http://blog.yhathq.com/posts/7-funny-datasets.html
• http://archive.ics.uci.edu/ml/datasets.html

Design

Free resources for designers:

• https://medium.com/@ingojoseph/free-design-resources-187bb30cc762
• Web freebies... really good stuff: http://webdesign-freebies.tumblr.com/

Design for non-designers:

• http://samkap.github.io/design-starter-kit/

UX:

• http://uxmyths.com/
• http://goodui.org/
• http://ui-patterns.com/

Credit cards:

• http://jessepollak.github.io/card/
• https://medium.com/user-experience-design-1/the-anatomy-of-a-credit-card-payment-form-32ec0e5708bb

Google design guidelines:

http://www.google.com/design/spec/material-design/introduction.html

Here are some books. These aren't technical, so probably won't help you immediately with the IronYard course, but are great resources to help clarify your thinking on design. I'll be bringing these into the IronYard, so look for them there when the cohort starts.

Don't Make Me Think

Any of Edward Tufte's books

The Design of Everyday Things

Nicely designed sites

• https://snapguide.com/