Captain's log: earthdate 11/29/2019... lol jk but nah I just need somewhere to decompress a little bit of my rabbit hole learning.Have you ever wondered how the internet is built?! Well boy do I have a story for you - they don't call it the 'web' for nothing.
To start off with, there are two distinct sides to a website. The front-end/client-side (what you the user can see and interact with directly) and the back-end/server-side (all the logic and algorithms working behind the scenes basically).
The front-end (which is basically all I've been learning so far) is composed of 3 file types/languages:
- HTML - the skeleton of a website - this contains the actual things that you will see on the page - i.e. headings, paragraphs, images, etc. The other two file types must be linked to this one to do anything.
- CSS - completely controls the appearance of the HTML. Can change the color, size, position, order, font type, opacity of the 'things' in the HTML.
- JavaScript(aka JS) - the brains of the operation. More of what your normal programming language is - it can compute & perform functions. In terms of the front end, I believe it's mostly used for form validation (checking that your input looks correct before actually submitting it) and any 'same-page-manipulation' - which can be used for games, simple single-session functions (like conversion tools (ex. inches to miles or Celsius to Fahrenheit) or a mad-lib) and the coolest part is you can use JS to dynamically effect HTML and CSS, meaning you can change the content(somewhat) and look of a page based on whatever circumstances you program.
Cool, once you have those basics down you think you're ready to go, right? NOT EVEN CLOSE. There's an ocean of tools out there that are great for streamlining and expediting building sites and apps. It's great that they exist! It's overwhelming to figure out what I need to learn and piece it all together. Thus why I'm writing this. XD Here are the pieces I've been working with at least.
- The DOM - this is technically a part of HTML & JavaScript (it's how JS is able to effect the HTML's content) but it wasn't in either of the courses I took for either and it took me a while to figure out so I want to count it separately. : [
- Less/Sass:(two rival tools for doing the same thing) These are called CSS Preprocessors - basically they add some very nice additional syntax to CSS (a shorter way to write the same end result). So you write a .less or .sass file, then you run it through a compiler - which is basically a program that will translate your file into a .css file.
- Responsive Design - Basically the art of tastefully changing a page's layout based on the size of the screen it's being viewed on. Trying to prevent people on mobile from having to pinch and zoom.
- Bootstrap: a CSS framework* specifically geared towards building responsive mobile-first designs (meaning the mobile layout has #1 priority)
- Angular/React: (rivals again) JavaScript frameworks*. From what I understand so far they primarily help with DOM manipulation (which is kinda clunky out of the box)
- Git - version control. If you've ever played a video game on an emulator you've probably used save states. That's basically what git is - you can make save states of your code in case you try something new and mess it up, you can recover where you were before that.
*a framework (haven't really gotten too far into these so my understanding is subject to change) is kind of like a collection of semi-built pieces to make building faster, except I don't think the piece is completely built and I think you can customize a bit about it.
Alright, and that's just the front-end. I haven't even really gotten into the back-end except for my curiosity so far. Here's what I've found: (Geez I need a whiteboard)
- Databases - like it sounds, this is where the data gets stored. More specifically not the files like .html etc. but rather things like usernames, passwords, user settings, post content, user uploaded images, etc. SQL is the language for talking to a database. It can either be accessed directly by the programmers on the server-side (through CLI or a program like Microsoft SQL or MongoDB) but also things are retrieved, edited, added and deleted based on client-side interaction (obviously only through very controlled channels).
- Web Application - is a program on the server-side that basically is a middle-man between the front-end and the database I think, it can be made of one of many languages. (most common seem to be NodeJS, PHP, Python & Ruby. JS is a weird language in that it can only work through a browser. NodeJS is an application for basically making it work like any other, so you can use it without a browser.) So I think this is where more thorough validation is done (say for things like transactions or login verification) and also evil algorithms can track your history and preferences and change page content based on them. : d I've been told is fool hardy to try and make a web application without a framework so tack another step on the list...
- Command-line interface - this kind of just comes with any programming I think (except for front-end because that all works through a browser) but it's worth mentioning here - the vast majority of people use their computers with whats called a GUI (graphic user interface) - so you know how on your desktop you've got a mouse pointer and icons and a taskbar and you use those to navigate your system? Well, you can do all that same navigation with just typing. That's what the CLI is. Every computer has one. Of course you have to know the right syntax to navigate through it, but you can automate tasks with it which is pretty darn neat. It's important to know because that's what programs open with unless you specify another interface (I'm pretty sure at least XD).
HTTP has come up in several places and I get the basic gist of it but none of the explanations have been solid enough for me to make it a bullet. I'm trying desperately to figure out exactly how to allow user input to a database. Something as simple as an anonymous guestbook. I'm about to take a course on NodeJS, hopefully that will answer my question or at least point me where I need to go next.
Well. *sigh of relief* At least I got that off my chest. Maybe now I can read in peace. XD
Recent Posts
You're right. I see that now.