The amount of tools for modern web development can be pretty overwhelming, and their number is only growing. This is my take on the tools you need to build a website in 2021. The video will break down the functions of four essential components for making a website, explore why we need them, and show how they fit together.
The stack that I’ll go over here is the standard React + GatsbyJS toolchain, paired with Bulma for styling and GraphQL for querying data, but I want to make this general enough that you can look for alternatives and compare the multitude of available tools so you can customize your web development loadout. The focus will be on frontend, static websites, which is the model for building your own personal website, blog, or small application.
====== Examples =====
https://jovial-banach-517dd1.netlify.app/tutorials/ – Preview the future of wintermutedigital.com built using the exact toolchain described in this video.
https://wd-pmdr.netlify.app/ – A minimal pomodoro timer built with React and Bulma.
https://rat-ece-simulator.netlify.app/ – A simple game with a website surrounding it. Built with React, Bulma and the Phaser 3 game engine. In case you want to replicate the functionality of itch.io, but have total control over the display.
===== Notes =====
I apologize for this video being late, it’s been a long time coming and I didn’t want to rush this video for December, what with five engineering exams on my doorstep. Hopefully you’ll find something interesting in this video, though it is different than my usual gamedev / blender content. It is related though, since web development is relevant to both – You can build a landing page for your game using React ( valorant.gg for instance), or a portfolio for your digital artwork. I think it’s a valuable skill.
Thank you for those of you who encouraged me to make a Discord! It is now live, here: https://discord.gg/5yjzTmmavY. I’m grateful to the little community that’s formed around this channel and I’d be happy to chat and hang out.
===== Timestamps =====
0:00 – Intro
0:45 – Gatsby, a Static Site Generator
2:29 – GraphQL, a Data Layer Tool / Query Language
3:50 – ReactJS, a Frontend UI Library for JS & TS
6:00 – Recap
6:37 – BulmaCSS – A (S)CSS Framework
7:35 – Example of how it works on Wintermute Digital
#webdev #react #js
