Expand Set Up page
This commit is contained in:
parent
499527f722
commit
c86b4ae71a
@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="A site showcasing programming in ancient languages.">
|
||||
<title>Ancient Programming</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
18
src/App.vue
18
src/App.vue
@ -2,17 +2,15 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col min-h-screen">
|
||||
<header>
|
||||
<div class="pt-10 px-4 text-2xl grid place-items-center">
|
||||
<nav>
|
||||
<RouterLink to="/">Home</RouterLink> |
|
||||
<RouterLink to="/About">About</RouterLink> |
|
||||
<RouterLink to="/Fortran">Fortran</RouterLink> |
|
||||
<RouterLink to="/Pascal">Pascal</RouterLink> |
|
||||
<RouterLink to="/Lisp">Lisp</RouterLink>
|
||||
<div class="flex flex-col min-h-screen bg-var_background">
|
||||
<header class="flex justify-center">
|
||||
<nav class="pt-10 text-2xl flex place-items-center">
|
||||
<RouterLink class="mx-3" to="/">Home</RouterLink> |
|
||||
<RouterLink class="mx-3" to="/About">About</RouterLink> |
|
||||
<RouterLink class="mx-3" to="/Fortran">Fortran</RouterLink> |
|
||||
<RouterLink class="mx-3" to="/Pascal">Pascal</RouterLink> |
|
||||
<RouterLink class="mx-3" to="/Lisp">Lisp</RouterLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="pt-10 flex justify-center grow">
|
||||
|
||||
@ -4,9 +4,28 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-3xl">About This Page</h1>
|
||||
<hr>
|
||||
<p>This page is about ancient (before the year 2000) programming languages, like Fortran and C. This page is mostly
|
||||
about showing how it was done before fancy build tools and syntax were a thing. It also serves a purpose of a
|
||||
showing, with examples, how to not only set up the programming environments, but also the whole workflow from
|
||||
prototype to production.</p>
|
||||
<br>
|
||||
|
||||
<p>This whole idea started when I made my first "serious" blog, <a class="underline" href="https://rbwr.dk">rbwr.dk</a>, but it didn't
|
||||
feel like quite the "correct" place to put it. So the idea was shelved for a time... Until recently, when I picked
|
||||
up a project in Fortran. Yep, Fortran. I had gotten bored, and wanted to challenge myself. And I thought, that if
|
||||
I'm going to learn the language, I might as well put blood, sweat and tears into formulating and showcasing how
|
||||
it's done (correctly).</p>
|
||||
<br>
|
||||
|
||||
<p>I did initially want to try COBOL, but after looking at some examples, Fortran kind of looked more appealing lol.</p>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<h1 class="text-3xl">Who Am I?</h1>
|
||||
<hr>
|
||||
<p>My name is Rasmus Rasmussen (yes, that's my name), I live somewhere in the outskirts of Odense, and I'm primarily
|
||||
<p>My name is Rasmus Rasmussen (yes, that's my name), I live somewhere in the outskirts of Odense, Denmark, and I'm primarily
|
||||
a backend developer. But lately, I've started to like developing in vue3. With TypeScript, of cause. It's a nice
|
||||
chance of pace, and I often find myself wanting to experiment with different styling, as well as trying to
|
||||
optimize and minimize my bundles.</p>
|
||||
@ -39,10 +58,11 @@
|
||||
too far from my apartment.</p>
|
||||
<br>
|
||||
|
||||
<img src="/public/Images/avif/PXL_20230708_030149199_scaled.avif" alt="Meadow with fog." loading="lazy" decoding="sync" width="1434" height="1080">
|
||||
<img src="/public/Images/avif/PXL_20230708_030149199_scaled.avif" alt="Meadow with fog." loading="lazy" decoding="async" width="1434" height="1080">
|
||||
<p>Not bad huh? The things you see when everyone is asleep.</p>
|
||||
<br>
|
||||
<img src="/public/Images/avif/PXL_20230720_032828882_scaled.avif" alt="My humble bike." loading="lazy" decoding="sync" width="1434" height="1080">
|
||||
|
||||
<img src="/public/Images/avif/PXL_20230720_032828882_scaled.avif" alt="My humble bike." loading="lazy" decoding="async" width="1434" height="1080">
|
||||
<p>And this is my humble bike. It has taken me many places, and it's still going strong. The odometer no longer works,
|
||||
so I just use my FitBit Charge 5 instead. I've modeled and 3D printed the two orange bottle holders myself, on my
|
||||
Original Prusa MK3S+.</p>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<hr>
|
||||
<p></p>
|
||||
|
||||
<div class="font-mono ">
|
||||
<div class="font-mono">
|
||||
<pre><code class="text-sm">
|
||||
program hello
|
||||
implicit none
|
||||
@ -25,9 +25,8 @@ end program hello
|
||||
will compile to the exact same assembly. So if you only need to print something to stdout, just use <span><code>print *</code></span>
|
||||
as it conveys the meaning of the code better. Plus we don't need the full functionality of <span><code>write(*,*)</code></span>
|
||||
in this example.</p>
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<div class="font-mono">
|
||||
<pre><code class="text-sm">
|
||||
$ gfortran -o hello main.f90
|
||||
$ ./hello
|
||||
@ -38,9 +37,8 @@ $ ./hello
|
||||
<p>Now, hear me out, why not spice up the program a little bit more? What if we want to read user input? Well, fret
|
||||
not my friend, because I have just the solution for you then. All we gotta do is to read from the terminal, and
|
||||
then print out the value.</p>
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<div class="font-mono">
|
||||
<pre><code class="text-sm">
|
||||
program hello
|
||||
implicit none
|
||||
@ -80,11 +78,10 @@ end program hello
|
||||
<p>So in this case, where we check if <span><code>ios</code></span> is End Of File, then that means if we input an
|
||||
End Of File key combination (Ctrl+D on Unix/Linux, and Ctrl+Z on Windows), then the program would stop immediately.
|
||||
We use the <span><code>trim()</code></span> function to remove any trailing whitespaces. That's because, if you
|
||||
make a character bigger than the actual text, it will be fille with whitespace after the text. So now the output
|
||||
make a character array longer than the actual text, it will be filled with whitespace after the text. So now the output
|
||||
looks like this:</p>
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<div class="font-mono">
|
||||
<pre><code class="text-sm">
|
||||
$ gfortran -o hello main.f90
|
||||
$ ./hello
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
|
||||
<p>Table of contents:</p>
|
||||
<ul>
|
||||
<li><RouterLink to="/Fortran/SetUp">> Set Up</RouterLink></li>
|
||||
<li><RouterLink to="/Fortran/HelloWorld">> Hello World</RouterLink></li>
|
||||
<li><RouterLink to="/Fortran/ReadingAFile">> Reading A File</RouterLink></li>
|
||||
</ul>
|
||||
|
||||
95
src/components/Fortran/Fortran_Set_Up.vue
Normal file
95
src/components/Fortran/Fortran_Set_Up.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-3xl">Setting Up The Environment</h1>
|
||||
<hr>
|
||||
<br>
|
||||
|
||||
<p>If you're familiar with C, then you would feel right at home with Fortran's build environment. There isn't really
|
||||
an "official" compiler for the language, only a standard, that has to be implemented by the compilers. But there
|
||||
are a lot of great compilers, that might as well be "official."</p>
|
||||
<br>
|
||||
|
||||
<p>The top listed compiler on Fortran's website, is the GNU Fortran compiler (gfortran). It's the one I will be using
|
||||
throughout the examples on the site. Unless stated otherwise. There are also some other notable compilers, that
|
||||
has some rather interesting qualities to them.</p>
|
||||
<br>
|
||||
|
||||
<p>Compilers:</p>
|
||||
<ul>
|
||||
<li><a class="underline" href="https://lfortran.org/">lfortran</a> (This one can be used as an interactive
|
||||
compiler, and also supports parsing all of the 2018 standard syntax. It can also compile Fortran to WebAssemply).</li>
|
||||
<li><a class="underline" href="https://developer.nvidia.com/hpc-sdk">NVIDIA HPC SDK</a> (This one comes with a whole lot of GPU
|
||||
accelerated libraries).</li>
|
||||
</ul>
|
||||
<br>
|
||||
|
||||
<p>But , we will use gfortran. I will mainly be focusing on installing and developing on Linux.</p>
|
||||
<br>
|
||||
|
||||
<p>First, we install the compiler.</p>
|
||||
<br>
|
||||
|
||||
<p>For Fedora.</p>
|
||||
<code>$ sudo dnf install gcc-gfortran</code>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<p>For ubuntu.</p>
|
||||
<code>$ sudo apt install gfortran</code>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<p>And that's it. Pretty easy.</p>
|
||||
<br>
|
||||
|
||||
<h1 class="text-3xl">Project Structure</h1>
|
||||
<hr>
|
||||
<br>
|
||||
|
||||
<p>When creating a Fortran project, or any project in general, you want a structure. There is a lot of different
|
||||
layouts for the structure, but equal amongst them, is the <code>src</code> folder. That's where we keep all of out
|
||||
source code. Like <code>*.f90, *.f95</code> files.</p>
|
||||
<br>
|
||||
|
||||
<p>But other than that, most projects include a <code>Makefile</code> file, a <code>library</code>, <code>test</code>
|
||||
and <code>bin</code> folder. Your layout doesn't need to look like this specifically, nor does it have to contain
|
||||
the same folders. Each project is different, and so are the requirements. But this layout is simple, and great
|
||||
for medium to large projects.</p>
|
||||
<br>
|
||||
|
||||
<p>But if we're doing micro-projects, as in like, a hello world application, a test application, or a small tool,
|
||||
this layout is rather redundant, and on the examples on the website here, we will only use it on bigger projects,
|
||||
and we will let you know, when or how we set up the project.</p>
|
||||
<br>
|
||||
|
||||
<div class="font-mono">
|
||||
<pre><code class="text-sm">
|
||||
project/
|
||||
├── src/ # Source files (.f90, .f95, etc.)
|
||||
│ ├── modules/ # Module definitions
|
||||
│ └── main.f90 # Main program file
|
||||
├── include/ # Include files (e.g., interface definitions)
|
||||
├── lib/ # Library object files and archives
|
||||
├── bin/ # Executable binaries
|
||||
├── tests/ # Test cases
|
||||
└── Makefile # Build script
|
||||
</code></pre>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<p>Notes:</p>
|
||||
<ul>
|
||||
<li>> <code>src</code> (This is where we keep all of out source code).</li>
|
||||
<li>> <code>modules</code> (This is where we keep our classes. Or in Fortran-speak, modules).</li>
|
||||
<li>> <code>include</code> (This is where we keep our interfaces, that out modules will inherit from, if we're using Fortran 90 or above).</li>
|
||||
<li>> <code>bin</code> (This is where the compiled program should end up in).</li>
|
||||
</ul>
|
||||
<br>
|
||||
|
||||
<p>Makefiles are very useful, and becomes increasingly useful, the bigger the project is.</p>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,3 +1,10 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
--color-light: #2500ff;
|
||||
--color-dark: rgb(0, 0, 0);
|
||||
|
||||
--color-background: var(--color-light);
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import { createApp } from 'vue'
|
||||
import {createRouter, createWebHistory} from "vue-router";
|
||||
import './index.css'
|
||||
import './styles.css'
|
||||
import App from './App.vue'
|
||||
import Home from "./components/Home.vue";
|
||||
import About from "./components/About.vue";
|
||||
@ -9,6 +10,7 @@ import PascalIndex from "./components/Pascal/Pascal_Index.vue";
|
||||
import LispIndex from "./components/Lisp/Lisp_Index.vue";
|
||||
import FortranReadingFiles from "./components/Fortran/Fortran_Reading_Files.vue";
|
||||
import FortranHelloWorld from "./components/Fortran/Fortran_Hello_World.vue";
|
||||
import FortranSetUp from "./components/Fortran/Fortran_Set_Up.vue";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
@ -17,6 +19,7 @@ const router = createRouter({
|
||||
{path: '/About', name: 'About', component: About},
|
||||
|
||||
{path: '/Fortran', name: 'Fortran', component: FortranIndex},
|
||||
{path: '/Fortran/SetUp', name: 'SetUp', component: FortranSetUp},
|
||||
{path: '/Fortran/HelloWorld', name: 'HelloWorld', component: FortranHelloWorld},
|
||||
{path: '/Fortran/ReadingAFile', name: 'ReadingAFile', component: FortranReadingFiles},
|
||||
|
||||
|
||||
@ -3,13 +3,12 @@
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
#color-scheme: light dark;
|
||||
#color: rgba(255, 255, 255, 0.87);
|
||||
#background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,11 @@ export default {
|
||||
"./src/**/*.{js,ts,jsx,tsx,vue}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
colors: {
|
||||
var_background: "var(--color-background)"
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user