Resources

Links to tools, libraries, frameworks, and more to improve your development process.

General Guides & Information

#Web Development

Developer Roadmaps

Step by step guides and paths to learn different tools or technologies.

Languages & Markup

#HTML/SVG

SVGOMG

SVGOMG is SVGO's Missing GUI, aiming to expose the majority, if not all the configuration options of SVGO.

#CSS

Sass

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Tailwind CSS

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

#JavaScript

A Quick Tour of ES6 (Or, The Bits You'll Actually Use)

ES6 has been getting a lot of press lately. And with all of the benefits that the new syntax and built-ins bring, it damn well should.

ES6 Overview in 350 Bullet Points

I heard you like bullet points, so I made an article containing hundreds of those bad boys.

JavaScript30

Build 30 things with vanilla JS in 30 days with 30 tutorials.

Jamstack

Comprehensive guide for building Jamstack sites and home of the global Jamstack community.

Bundlephobia

Find the cost of adding a npm package to your bundle.

#PHP

Laravel Valet

Valet is a Laravel development environment for Mac minimalists. No Vagrant, no /etc/hosts file. You can even share your sites publicly using local tunnels.

Libraries & Frameworks

#React

Gatsby

Gatsby is a React-based open source framework for creating websites and apps.

Next.js

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.

React Sticky Node

A performant and comprehensive React sticky component.

React Joyride

Create awesome tours for your app! Showcase your app to new users or explain functionality of new features.

React Query

Fetch, cache and update data in your React and React Native applications all without touching any 'global state'.

React HTML Parser

A utility for converting HTML strings into React components.

React Number Format

React component to format number in an input or as a text.

#Vue.js

NuxtJS

Build your next Vue.js application with confidence using NuxtJS. An open source framework making web development simple and powerful.

#Svelte

Svelte

Svelte is a radical new approach to building user interfaces.

Svelte Kit

SvelteKit is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

#WordPress

Advanced Custom Fields

Use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data.

Underscores

Underscores is a starter theme designed to cut down many hours of development time when setting up a new custom theme.

Wordmove

Wordmove is a command line tool that lets you automatically mirror local WordPress installations and DB data back and forth from your local development machine to one or more remote servers.

WPGraphQL

WPGraphQL is a free, open-source WordPress plugin that provides an extendable GraphQL schema and API for any WordPress site.

Tooling & Bundlers

#Vite

Vite

Next Generation Frontend Tooling

@vitejs/plugin-react

Provides all-in-one React Support.

Expanding Knowledge

#Websites & Blogs

dev.to

A community of software developers getting together to help one another out.

ui.dev

Master the JavaScript Ecosystem

#Computer Science

Learn CS in 1000 Videos

An entire Computer Science curriculum using only YouTube videos.

Other

#Design

Figma

Figma brings your teams together to design better products from start to finish.

Coolors

Create the perfect palette or get inspired by thousands of beautiful color schemes.

CSS Gradient

A happy little website and free tool that lets you create a gradient background for websites.

Happy Hues

Happy Hues is a color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects.

BGJar

Free svg background generator for your websites, blogs and app.

#Typography

Type Scale

Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

#YouTube

freeCodeCamp

Learn to code for free.

Traversy Media

Traversy Media features web development and programming tutorials for web technologies including Node.js, Angular 2, React.js, PHP, Rails, HTML, CSS and more.

#Podcasts

Syntax

A Tasty Treats Podcast for Web Developers.

#Miscellaneous

Dracula Theme

A dark theme for hundreds of applications.