(Poorly written) Basics in web development
This is a website in its simplest form:
You save that file as something.html and open it with a browser you see this:
I typed that from memory. Long time ago I remembered that skeleton from memory.
Nowadays websites are more complex than this. So what happened?
You named a file something.html which means an extension of “Hypertext markup language”.
File system/url
So above you see /C:/Users/Green/Desktop/... that’s where this file is stored. A server can be thought of as a computer that you’re accessing via the internet.
You can see above in a file explorer, where this something.html file is.
You may notice it looks similar to this: https://medium.com/@jdc-cunningham/weekday-woes-1-e1d6f7f61b86 where the folder some-folder would be the equivalent of `https://medium.com/@jdc-cunningham/ anyway that’s a URL baby and the filename weekday-woes-1-e1d6f7f61b86 would map to the something.html file of course this is not meant to be taken literally. You don’t need “real” folders in URL/API parsing.
So… you can put a file somewhere and load it. Now what about display?
Display
This is a convenient website, it tells you how big your browser is in pixels. This is not a 1:1 map to your device’s resolution eg. a 1080P screen may not report 1080 pixels across on this page. Anyway, the top left is (0, 0) px. This is where a concept “media query” comes in, which is related to CSS (how you style pages). You can set what are known as breakpoints, bootstrap is a common one where “large” is the equivalent of anything more than 992 pixels wide.
Styling
The only thing I’ll mention here is to look into something called “Flexbox”. If you want to center somethin (old meme) or align it top-right or bottom-right you can! Also use box-sizing: border-box .
Interactivity
Okay… so you have the visuals down. Now how do you cool stuff? That’s where a language like JavaScript comes in. With JavaScript you can bind to elements (things on a page) and do stuff. For example, if you wanted a button when clicked, to turn the background color of a website red, you would see something like:
Here you can see a piece of JavaScript that’s targetting this class (period) some-body-class when clicked, it will run this function () => {...} is the equivalent of function() {...} where it targets the body of the website and sets the background color to red. Red can be a string or it can be an exact thing like a hex value (# or 0x…). Note the selector eg. .some-body-class is not related to the end result. It can be anything, even a timer. As long as it fires the function () => {… that then switches the style.
URLs
We’re going back to this topic. So above I’ve talked about putting files in a folder. You have a computer… it can hold files/do things. A server is the same except some company owns it and you rent it/put stuff on it and it runs indefinitely (should).
If you wanted to buy a domain like mycooldomain.com you would go to some service like GoDaddy, Namecheap or Hover, etc… then this domain “belongs” to you after you pay for it. The computer (server, VPS) you rent would need to have this domain pointed at it. That’s through a system called DNS. With the DNS you point the domain to your server’s IP address ex. IPV4. At this point you need a webserver something like Apache or NGINX, others… go back to your folder above… and that’s what your server is like. A public/web-reachable folder by your pretty domain name.
Back to URLs… you may have seen in your life something like google.com?query=blah-blah-blah. The thing to note is the question mark, this is a “query”. Something similar is a route parameter except that would look like google.com/colors/red where red would be a “route parameter”.
So… you deal with URLs like that.
API
An API (application programming interface) is something that has URLs and it accepts “things”… it can be via the URL or a payload.
Scaling
Okay… this might be a jump in topic but you probably know that a normal car is not comparable to an F1 or Nascar… a computer/server can only do so much before it runs out of processing power (CPU) or memory (RAM). This is where you need multiples. You can scale across (multiple machines) or vertically (more power , same machine).
Frameworks
You may have heard this term before. There are different approaches/many. Different stacks.
Examples: Rails, .NET, Angular, Phoenix, etc…
Okay.. so… you know of operating systems… like Window, Linux, Mac… in server land the majority is Linux. But there are also windows web servers (.NET/Azure).
So… there are diffent languages eg. PHP, Python, JavaScript, Rust, C#, Go, C++, etc… as long as you get the job done right?…
Anyway there are many ways to build a website/flavors. You’ve got .NET (C# related), PHP eg. WordPress/Laravel, NextJS (JavaScript), Rails (Ruby), Elixir (Erlang), and more…
It doesn’t matter, at the heart of it, you’re dealing with the same idea, some URL is hit, you respond and serve something up. There are different concepts of that but REST is the main one.
Well I’ve lost interest in this, I will link to another more in depth post I had started writing like a year ago.
