Building websites

After a year and a half, I think I've ironed out 85% of the concerns with our TechStack at DriveBrandStudio. Our goal is to build websites that will stay standing for 5-10 years, so this means stable code that will hold up to design pattern changes over time.

Either way, we are going to need VSCode. Any tool to enable SSH will do, but VSCode allows us to remote in, open the files and make changes, manage git, etc etc etc.... 

Locally, we need Prettier and WSL extensions, and I enjoy CSS Peak and Tailwind CSS IntelliSense, Todo Tree, and Auto Close/Rename Tag.  An understanding of DDev, WSL2 Ubuntu and SCP are extremely helpful. Ngrok is a fun feature in DDEV too!

For Remote, we need Remote - SSH, Remote - SSH: Editing Config, Remote - Tunnel, Remote - Development, Remote - Explorer. Utilizing PM2 as well is important for production sites.   

CraftCMS comes built in with Twig as a frontend. Twig works fine, but the syntax isn't widely used. This leads to difficulty when implementing JS libraries. JS may be vilified, but it is the 3rd piece of the website puzzle, and the on that hold the possibilities for cool and interesting behavior. React gives us access to syntax that is widely utilized by developers across the globe, but the issue is that this is a client sided language, meaning the device (phone, tablet, computer) that is requesting the website will receive and HTML file with a <div id='root' /> and a <script src="app.js" /> that pulls in all the JS to replace the div with your application. The problem here is when a robot (google trying to index the site, seo preview, etc) tries to see the site's content, the only thing available is that single <div>..... If we wrap our React app in a server (nextJS), then we can handle that first request behind-the-scene on the new frontend-server. Here, we receive the url request from the user and pick which template to build out and send to the user (or, if prerendered, just send). Now the user's first response is the entire page, rather than the React~ism of a single div and instructions.  

DigitalOcean provides reasonably priced Droplets (computers) for us to load all of our projects onto. RunCloud allows us to configure these servers easily, configuring Apache and NginX easily, configure the server environment (php version, php extensions, etc etc), connect to Github and set up webhooks, manage SSL certs, and much more.  All of this is not necessary, but incredibly convenient for expediting all of this boilerplate, or if you're like me, handling the things I don't understand (yet).

My head starts spinning around this point.....