java tutorial, part 1!

blog/java_1.md

@@ -0,0 +1,97 @@
+So you want to learn to code. In my opinion, a good language for beginners is Java, because it's a rather easy to understand language, and it's cross-platform, meaning it can run on any operating system without the need for the programmer (you!) to change anything based on the platform. Also, Java is object-oriented (more on that later), meaning it's pretty good for writing any sort of simple or complex program.[^1]
+
+So let's start!
+
+# Setting it up
+To actually be able to compile[^2] any Java code, you first need to download the [Java Development Kit](https://jdk.java.net/), or JDK for short. If you're a Linux or Mac user, you can just follow [their installation tutorial](https://openjdk.java.net/install/), and if you're on Linux, you can follow [this tutorial from Stack Overflow](https://stackoverflow.com/a/52531093). To check if the installation worked, you can just type `java -version` into a command prompt (which you can open on Windows by just typing `cmd` into your search).
+
+Some people might disagree with me on this, but I recommend using an Integrated Development Environment (IDE) for development. An IDE is a program that helps you with coding by suggesting changes, notifying you of errors in your code and also allows you to easily run and debug your application. My personal suggestion would be to install [IntelliJ IDEA](https://www.jetbrains.com/idea/), but you could also use other IDEs like [Eclipse](https://www.eclipse.org/downloads/).
+
+The next thing you'll have to do is create a new project inside your IDE. For IntelliJ, all you have to do is click `New Project`, select `Java`, click `Next` twice and then type your project's name. I'm going to go with `JavaTutorial` for mine.
+
+# Hello World
+Once that's done, we can finally start programming. At first, you'll find that a lot of the stuff we're doing isn't explained directly, but I'll come back to some of the things I'm showing you now at a later point. Things like classes, methods and parameters probably won't make sense to you yet, but using them is required for even the most basic of running programs.
+
+The first thing we want to do is create a simple program that outputs something back to the user inside of the program's console. To start, simply right click your `src` folder and select `New` and `Java Class` and give it a name like `Main`. I'll show you the code for it first and then give you a quick rundown of the important parts you need to know about it for now.
+
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello Tutorial World!");
+    }
+}
+```
+That's it! If you now run your program (for IntelliJ, there should be a small green arrow to the left that you can click on), it'll print out the message to the console and then stop the program.
+
+A lot of the code you see above doesn't *really* matter to you right now. The important stuff is this:
+- Each instruction, each thing that the program should do, ends with a semicolon `;` and usually a new line, though that is optional.
+- Anything instruction you write between the inner curly braces `{}` will be executed in order of how it's written.
+- `System.out.println("<enter anything here>")` is an instruction that causes a line of text to be written to the console.
+
+As a little exercise, you can make your program output another line of text:
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello Tutorial World!");
+        System.out.println("This is another line of text!");
+    }
+}
+```
+
+# Variables
+Now the first thing you'll probably want to do is learn what variables are and how to use them. A variable, simply put, is any kind of value (a number, a string of text etc.) that can be changed and that has a name. In Java, each variable also has to have a fixed type: While a variable's *value* can be changed (say, from `some text` to `some other text`), its *type* cannot be changed (so a variable representing text cannot be changed into a variable representing a number). Variables are created as follows:
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello Tutorial World!");
+        System.out.println("This is another line of text!");
+
+        String someText;
+        int someNumber;
+
+        someText = "Some Text";
+        someNumber = 10;
+    }
+}
+```
+As you can see from line 6 and 7, to declare a variable, you need to put the variable's type first (`String` meaning text, `int` meaning an integer; a number without a decimal point), followed by the variable's name, which you can choose yourself. 
+
+For now, these variables don't have a value assigned to them yet. That's done in like 9 and 10. To assign a value to a variable, you first put the variable's name, followed by an equals sign `=`, followed by your desired value. For numbers, you can simply put them down, but text has to be wrapped in parentheses `""` (which is also why the text in lines 3 and 4 is wrapped in parentheses).
+
+To actually do something with the variables, let's have them be printed out to the console. *I've omitted the rest of the code here because it's getting quite long, but I'm just adding the following lines inside the inner braces `{}` below the already written code.*
+```java
+System.out.println(someText);
+System.out.println(someNumber);
+```
+As you can see, to print a variable's value to the console, all you have to do is put its name where you would usually put a piece of text directly. 
+
+# Variable Manipulation
+Obviously, this isn't really that exciting yet: Our program isn't really doing anything so far. Let's manipulate our variables. I've added the following code:
+```java
+someNumber = someNumber + 5;
+System.out.println(someNumber);
+```
+As you can see, you can use a plus sign `+` (as well as other mathematical operators) to do math with numbers. The first statement changes `someNumber`'s value to a new value: `someNumber + 5`. Running the program will show you that the result is pretty obvious: 15 is printed, because 10 + 5 = 15.
+
+The same kind of manipulation can be done with text, which is especially useful for printing variables to the console. The plus sign `+` chains two strings of text together.
+```java
+String chainedText = "The resulting value is " + someNumber;
+System.out.println(chainedText);
+```
+Here, a new variable is created (`String chainedText`) and its value is set (`=`) to the shown string plus the value of the `someNumber` variable. When added to the rest of the code, running this code should display `The resulting value is 15`.
+
+# Conclusion
+Now obviously, this is just the beginning of what you can learn and do with Java. I feel like this is a good point to finish the first part of this tutorial. I know it's probably not super interesting yet, but bear with me for a little while and you'll pretty quickly be able to do some pretty cool stuff.
+
+Before you click away, I'd like to ask you some questions that you can answer by clicking on the discussion link below this post:
+- Could you follow this tutorial?
+- What do you think about the pacing? Is it too fast or too slow, are there too many examples or too few?
+- Do you want me to actually continue this tutorial series?
+
+Anyway, thanks a lot for reading and happy coding! <3
+
+<br>
+
+[^1]: Also, it's what Minecraft mods are written in, which is probably the reason most of you are here.
+
+[^2]: Compiling is what occurs when code written by you is converted into something that the computer can actually understand. More on that later, probably.

blog/posts.json

@@ -46,5 +46,11 @@
         "id": "rock_bottom_mod",
         "date": "10/3/2019",
         "discuss": "https://twitter.com/Ellpeck/status/1180092634410487808"
+    },
+    {
+        "name": "Java Tutorial, Part 1: Hello World",
+        "summary": "The first part of my post series for programming beginners where I explain how to write code in Java.",
+        "id": "java_1",
+        "date": "10/10/2019"
     }
 ]

node/blog.js

@@ -8,7 +8,7 @@ require("./showdown-prettify");
 require("./showdown-footnotes");
 const converter = new showdown.Converter({
     parseImgDimensions: true,
-    headerLevelStart: 3,
+    headerLevelStart: 2,
     extensions: ["prettify", "footnotes"]
 });
 
@@ -51,8 +51,8 @@ module.exports = function () {
                         var c = "";
                         c += '<div class="list-display rounded">';
                         c += '<div class="blog-isolated">'
-                        c += '<h2 class="card-title">' + post["name"] + '</h2>';
+                        c += '<h1>' + post["name"] + '</h1>';
-                        c += '<div class="card-text" id="blog-post-' + id + '">'
+                        c += '<div id="blog-post-' + id + '">'
                         c += converter.makeHtml(content.toString());
                         c += '</div>';
                         c += '<span class="text-muted project-status blog-isolated-status">' + post["date"] + "</span>";

node/showdown-footnotes.js

@@ -20,7 +20,7 @@
         return [{
             type: 'lang',
             filter: function filter(text) {
-                return text.replace(/^\[\^([\d\w]+)\]:\s*((\n+(\s{2,4}|\t).+)+)$/mgi, function (str, name, rawContent, _, padding) {
+                return text.replace(/\[\^([\d\w]+)\]:\s*((\n+(\s{2,4}|\t).+)+)/mgi, function (str, name, rawContent, _, padding) {
                     var content = converter.makeHtml(rawContent.replace(new RegExp('^' + padding, 'gm'), ''));
                     return '<a class="blog-anchor" id="footnote-' + name + '"></a><div class="footnote">[' + name + ']:' + content + '</div>';
                 });
@@ -28,15 +28,15 @@
         }, {
             type: 'lang',
             filter: function filter(text) {
-                return text.replace(/^\[\^([\d\w]+)\]:( |\n)((.+\n)*.+)$/mgi, function (str, name, _, content) {
+                return text.replace(/\[\^([\d\w]+)\]:( |\n)((.+\n)*.+)/mgi, function (str, name, _, content) {
-                    return '<a class="blog-anchor" id="footnote-' + name + '"></a><small class="footnote">[' + name + ']: ' + content + '</small>';
+                    return '<a class="blog-anchor" id="footnote-' + name + '"></a><small class="footnote"><a href="#footnote-reference-' + name + '">[' + name + ']</a>: ' + content + '</small>';
                 });
             }
         }, {
             type: 'lang',
             filter: function filter(text) {
                 return text.replace(/\[\^([\d\w]+)\]/mgi, function (str, name) {
-                    return '<a href="#footnote-' + name + '"><sup>[' + name + ']</sup></a>';
+                    return '<a class="blog-anchor" id="footnote-reference-' + name + '"><a href="#footnote-' + name + '"><sup>[' + name + ']</sup></a>';
                 });
             }
         }];

style/style.css

@@ -80,9 +80,9 @@ body {
 }
 
 .blog-anchor {
-    display: block;
+    display: inline-block;
     position: relative;
-    top: -80px;
+    top: -86px;
     visibility: hidden;
 }