Cheatsheets - Simple site
Minimal tooling, Basic usage
Video tutorial
Coming soon...
Tooling
Terminal / Powershell
- An ugly, but effective UI (user interface) to manage your computer. Whatever you can do by "clicking here and there" you can do with commands here. Actually faster, and also, easier to automate. Already installed on your machine. (You just haven't used it yet...)
VS Code
- A text editor like Microsoft Word that "understand" coding languages (instead of pure human languages). It colors and underlines the syntax errors of coding languages (like Javascript) instead of the grammatical errors of human languages (like English or Hungarian). Free, but you need to install it.
NodeJS
- A so-called "runtime environment". A software that you can install on your laptop which can understand and execute a properly written text file - a Javascript code snippet. Free, but you need to install it.
Npm
- "Node Package Manager", a tool which helps you manage projects written in Javascript. Run scripts with it, or install open-source "packages" that other developers wrote and published. Free, comes with NodeJS.
Browser
- Another "runtime environment"... It can execute Javascript code (similarly to how NodeJS does), but it can also understand and execute HTML and CSS files. You already have one installed. (Google Chrome, Microsoft Edge, Opera, etc...)
Opencode
- An opensource "AI agent", a chatbot that runs on your machine. It also sees your code: it understands it, and not only answers your questions - based on your input AND your code - but also edits it when instructed. Free, but you need to install it - comes with free AI models as well.
Git
- A command line tool. Mostly used to version text files and the folders containing them - the source code of an application, in this case, your website. Free, but (probably) you need to install it.
Services
Github
- An online service (of Microsoft) where you can store your version controlled projects with all of its history, so that other developers can contribute. This is for the source code - this is not a runtime environment you just store text files here, you do not host or run anything. Free registration, 5 free private repositories. Alternatives: Gitlab, Bitbucket.
Docker
- A software that you can install on your machine. Could have been listed under "tooling" - a powerful tool that makes it easy for you to run various apps and softwares locally with almost zero setup. You can replicate complete evironments, and make it easy to create environments that are easy to port to other machines. Here you will only use it for the latter though. Free, but you need to install it.
Dockerhub
- An online service, where you can store your "dockerized artifacts" - you package your apps with all its dependencies with Docker, then upload it to Dockerhub, that others my download and run it. (You will download it to the machine you rent on Digital Ocean - from where you will host your website.) Free registration, 1 free private repository included.
Digital Ocean
- An online service (a wrapper over AWS - Amazon Web Services) where you can rent computers, so that you can store data, host services (apps, websites) and run computations on them. Free registration, but you need to provide your card details upfront. Some services are free, but for most you have to pay at least a small fee. Alternatives: AWS, Vultr, Linode.
Bureaucracy
Domain
- You need to visit a "domain name webshop", where you can create an accout and then buy ("rent", actually...) a domain like "nameofmycompany.com". You will need to authenticate with an email address and a phone number at least (usually), and maybe even need to provide further details. Even your ID card in certain cases. Always worth checking multiple "webshops", but not recommended checking them a lot... they work like flight prices, they go up based on interest.
- Ask ChatGPT: "Hey, I have a domain purchased at XYZ domain name webhop, and a site hosted at Digital Ocean app platform. Please guide me through the process of connecting them in small steps."
SEO
- "Search Engine Optimization": you want to make your site optimized for Google, so that when they (their bots) "crawl" the internet, and index EVERYTHING they find they know how to index YOUR site. It is fairly easy to get to a point where your site is the FIRST result when someone searches the name of your company, but much harder to make your site the first result when someone searches the product of your company. The most important step is to let Google and Microsfot know of your website by explicitly telling them about you at THEIR platform. (Their platforms: search.google.com and bing.com/webmaster.)
- Ask ChatGPT: "Hey, I have this site, with this content: <Insert your content here - full html content>. Please guide me through the process of the basic must have steps for SEO, and then maybe let's do some advanced stuff as well, but let's move in small steps."
Integrations
- The related code is already written, it is in the template project but you will need to set up some stuff to make it work in YOUR app. You will need to create an account at resend.com and set a few things: for local dev-env you need to set a few values in .env file, while for it to work in prod you need to set the environment variables at Digital Ocean. You can create a Resend account for free, and they have a fairly generous free tier (3000 sent emails/months).
- Ask ChatGPT: "Hey, I have an app with this code: <insert the code snippet from src/lib/api/email/index.js>, and I want email sending to work. Guide me through the related bureaucracy please. Let's do it in small steps. The code is already written, but I need to set the related environment variables in local dev in a .env file, and I need to set them at Digital Ocean's app platform."
Bot check
- The related code is already written, it is in the template project but you will need to set up some stuff to make it work in YOUR app. You will need to create an account at dash.cloudfare.com and set a few things: for local dev-env you need to set a few values in .env file, while for it to work in prod you need to set the environment variables at Digital Ocean. You can create a Cloudfare account for free, and they have a fairly generous free tier for bot check as well (10 sites).
- Ask ChatGPT: "Hey, I have an app with these environment variables: TURNSTILE_SITE_KEY, TURNSTILE_SECRET_KEY, TURNSTILE_CHECK_ENDPOINT, and I want cloudfare turnstile to work. The related code is already written, but I need to set the related environment variables in local dev in a .env file, and I need to set them at Digital Ocean's app platform.. Guide me through the related bureaucracy please. Let's do it in small steps. (The last env var has this default value: 'https://challenges.cloudflare.com/turnstile/v0/siteverify'.)"