this tutorial is for beginning web developers, especially those here on neocities! and especially those who maybe don't code to begin with! i'm going to walk through my tools and workflow. the goal of this is to share what works for me, and what needs each tool covers! this is NOT one size fits all!!! this could be intimidating for beginners! but i'd like to offer some hot tips on what tools can make life a little easier.
topics/tools i cover:
i create and develop my neocities site locally on my computer. this is my personal preference, so i'm gonna talk about my flow! i like it because i get some extra tools and extra breathing room that the neocities editor can't offer. this is not to boast superiority!! there is no superiority we all just make things!!!!
for a text editor, i primarily use vscode for my editing. i'd definitely recommend it! previously, i've used atom too, rest in peace. editors like vscode and atom have customizable themes and countless plugins/further customization at your disposal.
one epic thing about vscode [or other editors] is how easy it makes typing html tags. vscode uses emmet, or at least, emmet installed itself on mine? which is an awesome toolkit that saves you from having to type so many <>><>><><,<< all the time. you type div.container and BAM you get:
<div class="container">
<!-- ready to go babey!!!! -->
</div>
you select something, hit ctrl + m ctrl + w, type div and BAM it automatically wraps that junk in a div AND indents!
emmet uses a syntax very similar to css selectors. it can also generate paragraphs of lorem impsum! just type "lorem". it's made html so much more fun for me and i love just getting to type div.notes>p, which created the very box you're reading right now!
i had to edit this article and bring up emmet, i can't believe i forgot...
within vscode, i also use a plugin called live preview. what this does is runs a simple local [accessible by your machine only] server for testing your site's code.
but why use a local server! why not just open the html file in-browser? javascript! your browser will not allow you to run a local javascript file due to some security protocols. so if your site has no javascript, opening your files in browser will work fine! you can even link an external scripts.
one thing i really like about this workflow is that <a> elements' href attribute doesn't need to be formatted differently. to go back home, i can set href="/index.html", and on the live site, that link will take you to https://wormboy3.neocities.org/ a clean and pretty address. while working in your local developer server, the address won't be so pretty, but this doesn't matter!!!!!
why am i excited about this? i... i don't know.
the point is, using a local server is super easy and even auto-refreshes your browser as you edit though it can be a little overeager about it...
other vscode plugins i like!
first: what is typescript?
typescript is a "syntactic superset" of javascript (w3schools's wording). it is basically super-javascript, adding static data-typing. if you don't have experience with js, or this doesn't make sense: do not fear! this tool may not be for you yet.
i use typescript because it allows me to better organize my code, and it's easier for me to read with static data types. i'm less prone to errors this way!
ok, how does typescript work?
first note: your browser does not interpret and run typescript, it only interprets and runs javascript. when using typescript, you only write your code in typescript! then you compile it to javascript. the compiler takes .ts files and changes them to .js files--these are the files that you'll actually upload to your site.
it adds an extra step to coding, but it pays off for me. it takes 2 seconds.
ok but how does THAT work!
on your computer, you will need to install node.js, follow the instructions on its site for that! then you will install typescript using node's package manager. this should be easy, but this isn't a tutorial on installing typescript, just a recommendation. see my read more for links to proper tutorials.
my setup is configured so that one i want to compile my typescript to javascript, all i have to do is enter npx tsc in vscode's terminal tab. honestly, i still don't understand all the configurations i have setup. all i know is that i've got it working! there is always a mysterious beast in the code.
WHAT IS A GIT?!?!?!?
ok important: git and github are not one in the same.
git is a[n open source] version control system! it's very popular, and simple to use [especially with a text editor like vscode that doesn't make you use the terminal]. it does not alter your project structure or make interacting with your project any different, it just adds management features.
github is a hub for git projects, basically. it's a site that hosts and homes projects' git data. this allows for collaboration. world so beautiful with collaboration and pull requests.
and a version control system is system that keeps track of your code over time: the edits you make, what you have to say about those edits, and even different branches of development. git is not the only system, but i can't yet name any others off the top of my head. there's a lot of resources out there for learning git, including documentation on git's site, and on github's site.
you don't have to use github to use git. you can create a local [on your machine only] git repository [place for your project to live] on one computer. it may be a little harder to navigate without github's interface, but it is not unlearnable.
i would really suggest setting up a git repository if:
i would suggest making that git with github if:
don't worry about making a decision now: you can create a git or github repository of an existing project whenever you'd like.
both of these tools are free. to use git or github, you must download git from the official site as it is a sort of command-line application. find some tutorials in my readmore.
i use vscode and a live preview plugin as my programming environment. i prefer editing on my puter for privacy and reliability.
i use typescript to write organized, maintainable code for myself.
i use github to keep my project synced between computers, as well as a history of edits, AND to share my code with others.
these are some basic tools i really really want to suggest to my friends approaching web development, or any kind of development. even if not these specific tools, i feel the needs they fill are important to name and discuss! it makes my life so much easier and it's something i want to share! world so beautiful!
note: the resources below may include some extra parts and pieces that you don't need! you may also need to ask your own questions online, this is just a starting point. thank you for reading!!!!!!!