From 505dec96b56fe00079f92716d728cb729786c5d4 Mon Sep 17 00:00:00 2001 From: Daniel Bulant Date: Sat, 18 Mar 2023 14:36:03 +0100 Subject: [PATCH] fix warnings, fix site --- remark/code.js | 4 -- src/lib/components/contact.svelte | 14 +++-- src/lib/components/navbar.svelte | 50 ++++++++++------ src/lib/components/posts/a.svelte | 1 - src/lib/components/posts/callout.svelte | 7 +-- src/lib/components/project.svelte | 5 +- src/lib/components/technologyDetails.svelte | 63 ++++++++++++-------- src/routes/+error.svelte | 3 +- src/routes/+page.svelte | 47 +++++++-------- src/routes/api/posts.json/+server.js | 4 +- src/routes/posts/+page.svelte | 4 +- src/routes/posts/rss.xml/+server.js | 4 +- src/routes/projects/heaventaker/+page.svelte | 11 +--- 13 files changed, 112 insertions(+), 105 deletions(-) diff --git a/remark/code.js b/remark/code.js index f618bc9..7f326c3 100644 --- a/remark/code.js +++ b/remark/code.js @@ -16,10 +16,6 @@ export const prettyCode = createRemarkPlugin({ node.innerHTML = node.innerHTML .replace(/{/g, "{") .replace(/}/g, "}"); - // console.log(node.innerHTML); - // console.log(node.innerHTML - // .replace(/{/g, "{") - // .replace(/}/g, "}")); Object.assign(node.style, { margin: "0 -1.5rem", padding: "0 1.5rem", diff --git a/src/lib/components/contact.svelte b/src/lib/components/contact.svelte index 2832a23..5cea094 100644 --- a/src/lib/components/contact.svelte +++ b/src/lib/components/contact.svelte @@ -22,28 +22,32 @@ Prague, Czech Republic
- + + GitHub
danbulant
- + + LinkedIn
danbulant
- + + Discord
TechmandanCZ#3372
- + + Twitter
@@ -78,7 +82,7 @@
- \ No newline at end of file diff --git a/src/lib/components/project.svelte b/src/lib/components/project.svelte index 5602210..c4a31f6 100644 --- a/src/lib/components/project.svelte +++ b/src/lib/components/project.svelte @@ -71,7 +71,7 @@ - diff --git a/src/lib/components/technologyDetails.svelte b/src/lib/components/technologyDetails.svelte index b5ddb80..3e927d7 100644 --- a/src/lib/components/technologyDetails.svelte +++ b/src/lib/components/technologyDetails.svelte @@ -17,21 +17,25 @@
{#if selected === "typescript"}

Typescript

-

Typescript prevents bugs and makes it easier to develop new functionality, as good IDEs will show types without having to go through documentation.

+

Typescript prevents bugs and makes it easier to develop new functionality, as good IDEs will show types without having to go through documentation.

+

Most of my new projects use Typescript. And those that don't have native Typescript have type definitions, like for example Commando.

+

Typescript has great integration with Deno, so whenever I use Deno for my scripts, I also use Typescript. An example can be found in this repository.

-

More information about Typescript can be found here.

+

More information about Typescript can be found here.

{:else if selected === "rust"}

Rust

Rust is a low-level memory-safe programming language by Mozilla. It has the speed of C and memory safety of high level languages (like Javascript).

I wanted to learn a low-level programming language to find out more about how computers work. I looked into multiple languages, but Rust seemed the best choice, as it's a low-level language with automatic memory handling.

-

To test out my knowledge, I tried to create a simple shell, and although I didn't finish it because I found out I was just reinventing the wheel (Fish shell in this case), I made great progress (it parses essentially everything normal shell should, and supports basic command running).

+ +

To test out my knowledge, I tried to create a simple shell, and although I didn't finish it because I found out I was just reinventing the wheel (Fish shell in this case), I made great progress (it parses essentially everything normal shell should, and supports basic command running).

{:else if selected === "x11"}

X11

-

I love reading about how computers work, especially in case of selected = "linux"}>Linux.

+

I love reading about how computers work, especially in case of selected = "linux"} on:keydown={() => selected = "linux"}>Linux.

X server (using X11 protocol) is currently the most used window handler in Linux.

-

I tried writing my own simple Window Manager in Javascript, which posed additional challenge, as X11 doesn't have official implementation for Node.JS. For the basic communication, I used node-x11, which implements only the basic X11 protocol without any abstraction (like what xlib does for C).

-

The code for the simple Window Manager (mostly an experiment) can be found here. This project also uses Vagrant by HashiCorp.

+

I tried writing my own simple Window Manager in Javascript, which posed additional challenge, as X11 doesn't have official implementation for Node.JS. For the basic communication, I used node-x11, which implements only the basic X11 protocol without any abstraction (like what xlib does for C).

+ +

The code for the simple Window Manager (mostly an experiment) can be found here. This project also uses Vagrant by HashiCorp.

{:else if selected === "cs"}

C#

I'm learning C# at my school, in addition to learning Unity and looking into the osu!framework.

@@ -39,19 +43,21 @@ {:else if selected === "git"}

Git + GitHub

I use Git version control system for all of my projects, even if I don't upload them to GitHub. Most of my projects can be found on GitHub.

-

My GitHub profile is @danbulant.

-

The source code of this website is available here

+ +

My GitHub profile is @danbulant.

+ +

The source code of this website is available here

{:else if selected === "docker"}

Docker + Docker compose + Docker desktop

Docker is the most widely used container runtime. Docker compose makes it easy to orchestrate multiple containers, and finally, Docker desktop is the easiest way to get Docker on Windows.

Most of my projects that I run on a server run in Docker, to make it easy to replicate environment, as well as make deployments easier via Nomad.

{:else if selected === "react"}

React

-

My first interactive websites were in React, before I moved to selected = "svelte"}>Svelte.

+

My first interactive websites were in React, before I moved to selected = "svelte"} on:keydown={() => selected = "svelte"}>Svelte.

An example of such website is Animasher.

{:else if selected === "nomad"}

Nomad

-

Nomad is a distributed job scheduler, mainly for containers (via selected = "docker"}>Docker or Podman). Along with selected = "consul"}>Consul, it serves as a viable alternative to Kubernetes.

+

Nomad is a distributed job scheduler, mainly for containers (via selected = "docker"} on:keydown={() => selected = "docker"}>Docker or Podman). Along with selected = "consul"} on:keydown={() => selected = "consul"}>Consul, it serves as a viable alternative to Kubernetes.

I use Nomad as a job orchestrator on my server, to run my personal projects as well as few open-source one's, like my own NextCloud instance.

In that single-node cluster, I run multiple databases (MariaDB, MongoDB) and projects, which communicate with each other using Consul as service resolver. And all websites are behind Nginx as a reverse proxy.

{:else if selected === "consul"} @@ -62,22 +68,26 @@

Discord

Discord is a chat platform, originally aimed at gamers, but now for communities of all types.

I created a Discord bot igni (which is at the time of writing in 940 servers), to make running Discord communities easier and more fun.

-

The bot is written in Javascript with the use of Discord.js and a custom Commando framework. It's powered by selected = "mongodb"}>MongoDB, and it's website (which is in the works) uses selected = "sveltekit"}>SvelteKit, selected = "typescript"}>Typescript and Redis.

- + +

The bot is written in Javascript with the use of Discord.js and a custom Commando framework. It's powered by selected = "mongodb"} on:keydown={() => selected="electron"}>MongoDB, and it's website (which is in the works) uses selected = "sveltekit"} on:keydown={() => selected = "sveltekit"}>SvelteKit, selected = "typescript"} on:keydown={() => selected = "typescript"}>Typescript and Redis.

+ + {:else if selected === "electron"}

Electron

-

Electron is a framework for building cross-platform desktop applications using selected = "nodejs"}>Node.JS.

-

I use Electron whenever I want to create a desktop application easily, for example when I made my simply osu!visualizer, or when I ported eDEX-UI to Svelte.

+

Electron is a framework for building cross-platform desktop applications using selected = "nodejs"} on:keydown={() => selected = "nodejs"}>Node.JS.

+ +

I use Electron whenever I want to create a desktop application easily, for example when I made my simply osu!visualizer, or when I ported eDEX-UI to Svelte.

{:else if selected === "svelte"}

Svelte + SvelteKit

Svelte is a web framework for building interactive websites easily with smaller size.

-

I use Svelte for nearly all my new websites, including this one, osu!visualizer, Mangades and more.

+ +

I use Svelte for nearly all my new websites, including this one, osu!visualizer, Mangades and more.

I also use SvelteKit or Routify for sites that require multiple pages.

{:else if selected === "mysql"}

MySQL/MariaDB

MySQL is a widely used relational database, using SQL as the query language.

-

I use MariaDB (a fork of MySQL with improved speed) for most of my older projects before I knew about selected = "mongodb"}>MongoDB.

+

I use MariaDB (a fork of MySQL with improved speed) for most of my older projects before I knew about selected = "mongodb"} on:keydown={() => selected = "mongodb"}>MongoDB.

MariaDB is used in Animasher, Learner and on my older PHP experiments (which aren't publicly available).

{:else if selected === "mongodb"}

MongoDB

@@ -85,32 +95,35 @@

MongoDB powers igni and other projects. Igni also uses some more advanced features, like update streaming to synchronize multiple clients, search, indexes, aggregation pipelines and more.

{:else if selected === "postgresql"}

PostgreSQL

-

PostgreSQL is a faster alternative to selected="mysql"}>MySQL with more features.

+

PostgreSQL is a faster alternative to selected="mysql"} on:keydown={() => selected="mysql"}>MySQL with more features.

Currently, I'm working on few projects that use PostgreSQL as their main database and data storage.

{:else if selected === "node"}

Node.js

-

Node.js is a javascript runtime for servers and desktop applications (via selected="electron"}>Electron).

+

Node.js is a javascript runtime for servers and desktop applications (via selected="electron"} on:keydown={() => selected="electron"}>Electron).

I use Node.js in nearly all of my projects. In case of websites, as a build platform, and in case of backend servers or desktop applications, as the primary runtime.

-

I used Node.js from simply rollup scripts (like used in this website), to backend servers and APIs (like in case of Animasher and igni website), to Linux Window Manager and Discord Bots.

+ +

I used Node.js from simply rollup scripts (used in this website), to backend servers and APIs (in case of Animasher and igni website), to Linux Window Manager and Discord Bots.

{:else if selected === "deno"}

Deno

-

Deno is an alternative to selected="node"}>Node.js by the same authors, written in selected="rust"}>Rust.

-

I use Deno mostly for simple scripts, as javascript is more familiar than bash/zsh/fish scripting for me. An example can be found here, where I use Deno to programmatically set colors on my PS4 controller based on currently pressed buttons or currently playing Spotify song, on selected="linux"}>Linux (using native Linux APIs).

+

Deno is an alternative to selected="node"} on:keydown={() => selected="node"}>Node.js by the same authors, written in selected="rust"} on:keydown={() => selected="rust"}>Rust.

+ +

I use Deno mostly for simple scripts, as javascript is more familiar than bash/zsh/fish scripting for me. An example can be found here, where I use Deno to programmatically set colors on my PS4 controller based on currently pressed buttons or currently playing Spotify song, on selected="linux"} on:keydown={() => selected="linux"}>Linux (using native Linux APIs).

{:else if selected === "linux"}

Linux

Linux is a more efficient operating system, originally aimed at personal computers, now dominating all computing except personal computers.

I use Linux everywhere I can because of it's superior performance and configurability. On phones, I use Android (which is based on the Linux kernel). On my personal computers, I use Arch linux, and, lastly, on my servers I use Ubuntu or Arch linux.

-

I already experimented with Linux features, like DBus (for communicating with other applications, like getting current Spotify album and getting the average color from it here), X11 (the most used graphical user interface on Linux, which I talk more about "x11"}>here) and more.

-

I also use Linux for containers in selected="docker"}>Docker.

+

I already experimented with Linux features, like DBus (for communicating with other applications, like getting current Spotify album and getting the average color from it here), X11 (the most used graphical user interface on Linux, which I talk more about "x11"} on:keydown={() => "x11"}>here) and more.

+

I also use Linux for containers in selected="docker"} on:keydown={() => selected="docker"}>Docker.

{:else if selected === "nginx"}

Nginx

Nginx is a fast reverse proxy and web server.

-

I use it as a load balancer and reverse proxy for my projects. It usually sits between selected="cloudflare"}>Cloudflare and selected="node"}>Node.JS.

+

I use it as a load balancer and reverse proxy for my projects. It usually sits between selected="cloudflare"} on:keydown={() => selected="cloudflare"}>Cloudflare and selected="node"} on:keydown={() => selected="node"}>Node.JS.

I also used Nomad with Consul to generate nginx configuration and load balance between multiple job instances on my personal server.

{:else if selected === "cloudflare"}

Cloudflare

Cloudflare is a global CDN, DNS server and DDOS protection service.

-

I use Cloudflare to deflect common internet threats, cache and speed-up my web pages (I'm based in Czechia, but most of my traffic comes from USA, Cloudflare makes it fast for everyone) as well as to host my static websites (including this website) on their Cloudflare Pages product.

+ +

I use Cloudflare to deflect common internet threats, cache and speed-up my web pages (I'm based in Czechia, but most of my traffic comes from USA, Cloudflare makes it fast for everyone) as well as to host my static websites (including this website) on their Cloudflare Pages product.

I did also experiment with Cloudflare Workers, but I currently don't have a project suitable for that.

{/if}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte index 172c955..9f5a0c7 100644 --- a/src/routes/+error.svelte +++ b/src/routes/+error.svelte @@ -33,8 +33,7 @@ -{#await loadPosts()} -{:then posts} +{#await loadPosts() then posts} {#if posts && posts.length > 0}
OR
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 3a453ac..59f1139 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -16,7 +16,6 @@ export var data; var posts = data.posts; $: posts = data.posts; - $: if(typeof window !== "undefined") console.log(posts); var selectedPost = posts && posts.find(t => !t.categories.includes("experiment")); @@ -153,85 +152,85 @@ {typeof window !== "undefined" && window.matchMedia("(hover: none) and (pointer: coarse)").matches ? "Touch" : "Click"} each technology for more details about why I'm using it.
technologyHover = true} on:mouseleave={() => technologyHover = false}>