Web Development Resources
When I first started learning development, I regularly bookmarked and kept notes on sites that I used, tutorials I liked, git repos that I found useful, etc…
As of today, I have condensed this down into the highest quality resources that I’ve used and found and put them into one curated list.
I’ll be updating this list regularly with things I’ve found, and I’ll make edit notes when major items are added. If I add more than a few items, I’ll probably put it into a second list of this series.
So, without any further explanation, here it is - 2 years of curated web development links that I regularly used and referenced in my past two years of learning development.
The List⌗
Fonts⌗
http://www.google.com/fontshttp://www.fontsquirrel.comhttp://comicneue.com/http://app.prototypo.io/ - font creator app, pretty cool
Icons⌗
- http://www.flaticon.com
- http://www.iconarchive.com
- http://fontawesome.io/
- http://evil-icons.io/
- http://icons8.com/
- https://thenounproject.com
Vectors and Stock Photos⌗
- http://www.freepik.com/
- https://unsplash.com/
- http://www.pexels.com/
- http://nos.twnsnd.co/
- https://stocksnap.io/ - this is my personal favorite.
CSS⌗
- http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#center - Best guide to centering with FlexBox I’ve yet found
- http://mikethedj4.github.io/Webkit-Scrollbar-Generator/ - Custom scrollbar CSS generator
SVG’s⌗
- https://jakearchibald.github.io/svgomg/ - Amazing editor and compressor for SVGs, I use it pretty frequently for larger SVG projects
Buttons⌗
- http://btn.jonmongeau.com
- http://mrmrs.io/btns/ great looking buttons
- http://simplesharingbuttons.com/ - best way to make simple sharing buttons
UI Kits⌗
- http://bootswatch.com (based on bootstrap)
- http://bootsnipp.com/
- http://presentation.creative-tim.com/ - Freebie Bootstrap Kits
- Semantic UI
React Tools⌗
- http://reapp.io/ui.html
- http://www.reactnative.com/
- https://github.com/webpack/react-starter - Webpack’s React Starter Template
Visual Design Frameworks⌗
These are the only two frameworks I’d ever recommend outside of Bootstrap.⌗
- http://semantic-ui.com/ - Really solid visual design framework. Has more options than Bootstrap, but less community and platform support.
- https://material.angularjs.org/latest/ - Angular Material integration
Code Snippets / Codepens⌗
- http://codepen.io/hone/pen/jERzmd - Material Design Search Transition
- http://codepen.io/zavoloklom/pen/wtApI - Material Design Panels and
- http://codepen.io/BrianDGLS/pen/eNmZyN - Parallax background in 4 lines of code
- http://codepen.io/aleprieto/pen/nAmIy - stripes / dots in CSS
- http://codepen.io/mildrenben/pen/WvGEzm - email and sign up widget that looks great
- http://codepen.io/pixelchar/pen/rfuqK - best responsive table I’ve ever seen, separates into panels for mobile, in SCSS
- http://codepen.io/davidkpiano/pen/xwyVXO?editors=110 - amazing css only calendar
- https://codepen.io/andreasstorm/pen/ZGjNwZ - Hands down the best and easiest to use toggle switches for material design that I’ve come across
Angular Directives⌗
- http://mbenford.github.io/ngTagsInput/
- http://stackoverflow.com/questions/18006334/updating-time-ago-values-in-angularjs-and-momentjs - TimeAgo directive in Angular that works REALLY well
- https://github.com/dwmkerr/angular-modal-service - best modal service I’ve yet found.
Angular Tips / Tricks⌗
- https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag - Get rid of hashbangs in URL
- http://stackoverflow.com/questions/22102815/how-to-delete-sign-in-angular-ui-router-urls - Troubleshooting
$location
issues with Angular hashbang URLs
Desktop Apps in JS⌗
Color palette and backgrounds⌗
- http://subtlepatterns.com/
- http://coolors.co/
- https://color.adobe.com/
- http://flatuicolors.com/
- http://paletton.com/
- PaintStrap
Deployment⌗
- nodeJS and nginx: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-14-04
- https://www.digitalocean.com/community/tutorials/how-to-install-a-mean-js-stack-on-an-ubuntu-14-04-server
- mongoDB: https://www.digitalocean.com/community/tutorials/how-to-install-a-mean-js-stack-on-an-ubuntu-14-04-server
Sublime Text Plugins / Mods / Themes⌗
- Emmet - http://emmet.io/download/
- Afterglow - http://yabatadesign.github.io/afterglow-theme/
- Brogrammer - https://github.com/kenwheeler/brogrammer-theme
- Floobits - best pair programming plugin I’ve ever found. Almost no lag.
- HTML / CSS / JS Prettifier - Search for this and install it using Sublimes package manager. It’s amazing.
- http://pleeease.io/play/ - Autoprefixer with additional tools but not in-IDE like AutoPrefix is
CSS Frameworks / Sheets⌗
- Normalize.css (I like Normalize more than a hard reset for CSS.)
- reset.css (I don’t use this very often, see above)
- skeleton.css - responsive, ultra-lightweight CSS library - super kickass for small projects, not very powerful for more advanced stuff, though.
- jeet - CSS grid only, useful for minimal projects or portfolio pages
- pills
Style Guides⌗
These are style guides that I generally adhere to as best as I can.⌗
- HTML / CSS http://workmanship.io/#
- Angular - https://github.com/johnpapa/angular-styleguide
- JS - http://standardjs.com/rules.html
Seed Templates⌗
Solid ES6 node jspm seed template with testing and travis⌗
Workflow and Dev Process Tutorials⌗
- https://github.com/purifycss/grunt-purifycss / https://github.com/purifycss/gulp-purifycss - Remove unused CSS in your styles
- http://www.johnpapa.net/angular-and-gulp/ - Template caching and other cool shit with Gulp building
- https://github.com/AlDanial/cloc - Count Lines Of Code script
- Open Sublime from CLI - http://ashleynolan.co.uk/blog/launching-sublime-from-the-terminal
Yeoman generators⌗
- http://www.johnpapa.net/hot-towel-angular/
- https://www.npmjs.com/package/generator-angm
- https://github.com/newaeonweb/generator-angm#readme
Tutorials / Helpful Resources⌗
http://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/Note: $resource
requires the ng-resource
library.
Advanced Routing with Angular⌗
https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c
Creating a Style Guide for Websites⌗
http://www.smashingmagazine.com/2010/07/21/designing-style-guidelines-for-brands-and-websites/
Mongoose Populate⌗
http://jaketrent.com/post/mongoose-population/
$http Then, Promises, and Chaining - Good User Profile Examples⌗
http://www.dwmkerr.com/promises-in-angularjs-the-definitive-guide/#promisessuccesserrorthen
Using httpInterceptors to supplement auth in Angular⌗
http://onehungrymind.com/winning-http-interceptors-angularjs/
Auth Handling with Angular and Passport⌗
How To Undo Almost Anything With Git⌗
https://github.com/blog/2019-how-to-undo-almost-anything-with-git
Angular Gulp Builds⌗
http://blog.jhades.org/what-every-angular-project-likely-needs-and-a-gulp-build-to-provide-it/http://mindthecode.com/lets-build-an-angularjs-app-with-browserify-and-gulp/
PostgreSQL on Ubuntu⌗
https://www.digitalocean.com/community/tutorials/how-to-install-and-use-postgresql-on-ubuntu-14-04n
Best Way To Setup Loading Spinners - Use $httpInterceptors⌗
Advanced Handling of Error and Success Functions with $http⌗
http://michalostruszka.pl/blog/2013/09/06/selective_http_errors_handling_in_angularjs/
Creating a JavaScript Library⌗
http://checkman.io/blog/creating-a-javascript-library/— Bonus: A template for creating a modular, AMD compatible, JS Library - https://github.com/jeremyckahn/lib-tmpl
Creating a JavaScript Framework⌗
http://www.aptuz.com/blog/create-javascript-mvc-framework/This is not so much of a “Hey, create a framework and use it in production!” as it is a “Hey, code your own framework to get an idea of how other frameworks do things so that you can get a better feel for what’s going on behind the scenes”
Multi-Site Hosting Setup with Git Update⌗
http://petemichaud.github.io/2013/09/05/multisite-server-jekyll-digitalocean.html