Tools, sites, and resources I use.
Development
devdocs β All the documentation.
HTML
- htmlreference.io β List of all the HTML elements with nice examples.
- Pug β A nice abstraction over HTML for Node.js
CSS
- cssreference.io β List of all the CSS properties with nice examples. Beautiful site. π
- 30 Seconds of CSS β Curated list of #sick css snippets.
- 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?
- shade β Gradient explorer. The only one youβll ever need.
- Flexbox
- flexbox playground β Learn flexbox in a nice sandbox.
- flexboxdefense β Learn flexbox by playing tower defense.
- Bulma β Open source CSS framework based on Flexbox. Dump Bootstrap.
- Grid
- learncssgrid.com β List of ALL the CSS grid properties on one page. Very visual and accessible.
JavaScript
- JavaScript.info - From the basics to advanced topics.
- JavaScript the Right Way β Great well designed overview of all JavaScript stuff you should know (more or less).
- ES6 Overview β Simple overview of new ES6 features. Example-heavy.
- ES6 Overview more in-depth β Overview of new ES6 features, like the above, except with less examples and more explanation.
- JavaScript Design Patterns β Guide to Design Patterns in JavaScript.
- Catolog of Design Patterns β Really well-designed and visual guide of common design patterns.
- Jest β JavaScript testing. Jest is not just for React.js, and is easier to setup up than other testing frameworks. Write your tests. Try Jest out on repl.it
Design
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 β Get the syntax on any language.
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.
Regex Crossword β Do Regex crosswords. Great for practicing, and fun!
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 public data for you to mess around with.
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.
Tiny helpers - A collection of free single-purpose online tools for web developers.
Excalidraw - Online drawing tool. Great for quick/simple flow diagrams and charts.
Type-Scale - Font scale tool thatβs great for visualizing font pairings and scalings.
Utilities
caniuse.com β Find out if you can use that new feature in the browser.
Fast.com β βHow fast is my internet connection?β This site will tell you.
haveibeenpwnd.com β Enter your email address and see if youβve 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.
draw.io β Online diagram tool.
Social
- Tweetdeck β Much cleaner UI than twitterβs native web client. Also, you donβt get the annoying posts in your feed of what people you follow are βliking.β
- Glitch β Cool dev community with tutorials and an environment to code online.
- dev.to β Great community with tutorials and dev advice galore.
- Free Code Camp β Best free online way to learn coding.
Comments