Tools, sites, and resources I use.

Development

• devdocs – All the documentation.

• HTML

  • Pug – Because after you’ve written HTML for awhile, you just want a nice abstraction over it where you can dip down into JavaScript at any given point.

  • htmlreference.io – List of all the HTML elements with nice examples of each.

• CSS

  • cssreference.io – List of all the CSS properties with simple examples of each.

    • box model

    • flexbox

    • grid

    • …also, animations, transitions, backgrounds, use this beautiful site. 🌈

  • learncssgrid.com – List of ALL the CSS grid properties on one page. Very visual and accessible.

  • flexbox playground – Learn flexbox in a nice sandbox.

  • flexboxdefense – Learn flexbox by playing tower defense. I usually hate these kinds of sites, but I’m a sucker for tower defense games. Plus, it’s really well done.

  • SCSS – SCSS, and NOT SASS. Nice abstraction on CSS that’s basically what the CSS spec is evolving into anyway, so why not get a head start?

  • Bulma – Open source CSS framework based on Flexbox. Dump Bootstrap.

  • shade – Gradient explorer. The only one you’ll ever need.

  • 30 Seconds of CSS – Curated list of #sick css snippets.

• JavaScript

  • JavaScript the Right Way – Great well designed overview of all JavaScript stuff you should know (more or less).

  • ES6 Overview – Simple overview of all ES6 features with examples.

  • ES6 Overview more in-depth – Like the above, except with less examples and more explanation.

  • JavaScript Design Patterns – Thanks Addy Osami. Exhaustive (imo) guide to Design Patterns in JavaScript.

  • Catolog of Design Patterns – Really well-designed and visual guide of common design patterns.

  • Jest – JavaScript testing. It’s not just for React.js, and it’s easier to setup up than other testing frameworks. Is it a project and not just a one-off? Write your tests.
    Try it out on repl.it

Design

• Photopea – Essentially Photoshop in the browser.

• Figma – Sketch in the browser for design work. I honestly can’t believe they let people use this for free.

Version Control (Git)

• Learn Git Branching – Learn Intermediate-to-Advanced git skills in a very visual and useful way.

• Simple Git Guide – Simple git guide. ALL on one page, big fonts, well-designed. Check it out.

• Less Simple Git Guide – You know all that stuff I said about the above link? Uhhh, yeah. This one’s a big more in-depth. Still on one page though, so it’s digestable.

Resources

• Learn X in Y minutes – The skinny on the syntaxes of ALL the programming languages. You won’t necessarily learn how to use the language, but at least you’ll be typing the right things.

• RegexOne – Learn Regular Expressions with simple, interactive exercises. Very well designed, and pretty fun.

• RegExr – Great environment to testing Regex expressions. Gives you explanations for what’s going on as well.

• Unsplash – The only stock photo site you need to know about.

• Gradient Joy – Beautiful gradients as placeholder images. Schnazzy.

• Unsplash Random Image – Get a random unsplash placeholder image

• Lists – Collection of lists and data for you to mess around with.

• Things every web application developer should know

• Codewars – Practice coding online.

• Markdown Cheat Sheet – Best cheat sheet I’ve found on Markdown.

• CommandlineFu – List of community-submitted shell commands, ranked by popularity.

Utilities

• caniuse.com – Found a cool new web feature? Nice! Now check if you can realistically use it at this point in browser tech.

• Fast.com – “How fast is my internet connection?” This site will tell you with a big, bold, in-your-face number. Plus it looks really nice.

• haveibeenpwnd.com – Enter your email address, and this site checks if your account information has been compromised by any data breaches.

• What every Browser knows about you – Get a breakdown of ALL the data your browser is broadcasting to every site you visit.

• repl – Fantastic little REPL to try out any programming language you want in the browser.

• draw.io – Online diagram tool.

Social

• Tweetdeck – Much cleaner UI. Also, you don’t get the annoying posts in your feed of what people you follow are “liking.”

• Glitch – Cool community with tutorials and an environment to code onling.

• Dev.to – Great community with tutorials and dev advice galore.

• Free Code Camp – Best free online way to learn coding.