Forem: Wumi4

Why I listened to radio stations for working

Wumi4 — Tue, 17 Jan 2023 12:40:05 +0000

For the past couple of days or so, I have been listening to music from radio stations around the world on radio.garden, whenever I'm working or studying.

The reason why I chose this over Youtube or my offline music collection is broken down into 6 parts:

I listened to songs I know and love. When I'm clicking on a radio station, I always know what to expect from the description or station name. Meanwhile if I turned into my Youtube collection, where it's just a bunch of random music, I never know if it's gonna play low-quality Rasputin or a banger phonk song while I'm studying.
Radio stations are like subreddits. You can find one for just about everything. If you want to listen to music from records that spins at 78 RPM from the late 1800s to the 1950s, you can. If you want to listen music from one of the world's northernmost inhabited areas, well, you can too. The thing is, no matter how obscure what you are looking for, there's almoat always a station just for it.
I never know what's playing next. If I listen to music on my Youtube collection, I can always knew what will be playing next (at least on mobile), and even if I do it on computer, the algorithm isn't exactly random. But on radio stations, it is truly random. I never know what's going to play next, or if I will enjoy it. I just know it's something I will expect from them. Yes, stations still replay music every once in a while, but at least it is not trying to appeal to me.
I discovered new songs. Every time I'm listening to a song on a certain station and found the song to be great, I often used my trusty Shazam to identify it. Radio stations has helped me discovered new songs that I liked and added them imto my music collection.
It's good for your privacy. With services like Spotify and Youtube, you run into the risk of data mining and megacorps selling your data for advertising companies. Meanwhile radio stations doesn't collect your data, and their advertisements only came in form of sponsorships.
It's easy. You don't have to sign up and log in and search to start listening to music. With radio, just tune in on a station you liked and you are set.

So yeah, that's why I listened to radio stations, and why you should, too.

This post is a cross-post from my personal blog. Check it out too!

A quick review of the Fresh web framework

Wumi4 — Mon, 04 Jul 2022 08:37:29 +0000

Unless you have been living under a rock, then you probably have heard of Fresh, the shiny new TypeScript web framework.

Fresh boasts some impressive features, such as:

No build step
No config needed
TypeScript support out of the box
No JavaScript is shipped to the client by default

But how good is Fresh in terms of developer experience?

To answer that question, I have built a simple file-system based pastebin service, called Petunia, using Fresh and Deno.

Short answer?

Fresh is pretty good if you already know React and Tailwind, though it has some quirks that you have to get used to, like handling input.

The longer answer?

Fresh relies on Preact--a lightweight version of React--to display components, so if you are a React developer, then Fresh should feel like home to you.

When initializing a new project, Fresh will also ask if you want to use Twind, which is a Tailwind-to-JS library. If you choose this option, then you will have the power of Tailwind without creating a config file or using PostCSS, which I thought is pretty cool.

Here are a few things to notice though:

Fresh uses NextJS's file-system based routing, so for example routes/link/[id].ts becomes /link/:id in the web app.
The way Fresh handles form submission is very different from React. Instead of using states like React, Fresh takes advantage of the HTML <form> element, by getting form data from <form> when the user enters the form, then using a custom handler to process that data, and return that data to the front-end.

Here's an example on the Fresh documentation, implementing a search form that filters an array of names server-side:

/** @jsx h */
import { h } from "preact";
import { Handlers, PageProps } from "$fresh/server.ts";

const NAMES = ["Alice", "Bob", "Charlie", "Dave", "Eve", "Frank"];

interface Data {
  results: string[];
  query: string;
}

export const handler: Handlers<Data> = {
  GET(req, ctx) {
    const url = new URL(req.url);
    const query = url.searchParams.get("q") || "";
    const results = NAMES.filter((name) => name.includes(query));
    return ctx.render({ results, query });
  },
};

export default function Page({ data }: PageProps<Data>) {
  const { results, query } = data;
  return (
    <div>
      <form>
        <input type="text" name="q" value={query} />
        <button type="submit">Search</button>
      </form>
      <ul>
        {results.map((name) => <li key={name}>{name}</li>)}
      </ul>
    </div>
  );
}

Discuss on HN | Tweet this post

You can also read this post in my blog.

Hosting fonts locally for Subreply CSS

Wumi4 — Fri, 01 Jul 2022 11:53:12 +0000

As promised in the previous post, today I will show you how you can host the font that Subreply CSS used (which is Route 159) locally for your project, and use them with Subreply.

Step 1: Download the font

Go to the website of Route 159, then click on the Download button.

After that, the zip file containing the fonts should start installing.

Step 2: Extract the font

After the installation was done, go to the folder containing the font, then unzip the zip file.

If you are using the terminal, use the command unzip <filename>, e.g. unzip route159_110.zip.

If you are using Windows, you can read this article from Microsoft.

After unzipping, your fonts folder should look like this:

Step 3: Move the fonts file to your project

After extracted all the fonts, we need to move them into your project.

Go to the directory Web Fonts, then:

If you are using the terminal, move the file Route159-Bold.woff and Route159-Regular.woff to your project.

mv Route159-Bold.woff <your-project>
mv Route159-Regular.woff <your-project>

If you are using Windows, open your project's folder in another window, then drag the file Route159-Bold.woff and Route159-Regular.woff from the fonts folder to your project's folder.

Step 4: Modify the CSS

Finally, we need to directly modify the CSS, so that it will work with our local fonts.

First, opening the CSS file containing Subreply CSS, using your favorite editor.

Then, using the Find and Replace feature of your editor, replace the following text with their corresponded text:

https://files.catbox.moe/gt6un3.woff to Route159-Regular.woff
https://files.catbox.moe/outwck.woff to Route159-Bold.woff

Save the file, and your fonts should start working!

Discuss on HN | Tweet this post |
Have questions or feedback? Email me

If you feel like the screenshot is from 2010 or something, then it's because I don't do image editing that well. This is my very first times using Krita and GIMP, so the quality isn't that good :)

Introducing Subreply CSS - A beautiful classless CSS style

Wumi4 — Fri, 01 Jul 2022 05:55:38 +0000

Recently, I came across this website called Subreply, which is an English-only forum with a clean and simplistic design.

When I first saw it, I immediately fall in love with its design: Simple, yet modern and beautiful. I love it so much that I decided to rip the CSS from the website and turn it into a classless CSS style.

And after about 2 days of active working, I introduce to you, Subreply CSS!

Subreply CSS is a classless CSS style that is designed to be modern, beautiful, and simple, just like where it came from.

Features include:

Lightweight - Only weights 4 kB! ¹
Mobile responsive and image responsive
Automatic dark/light theme (based on OS preferences)
Custom emojis before mailto:, sms:, and tel: links
Custom blockquotes and code blocks ²
Beautiful font (Route 159)
Fixing missing features from the original Subreply, such as radios and checkboxes

Subreply CSS is suitable for both personal blogs and simple websites!

Wow! That's exciting! Where can I know more about it?

You can go to the Github repo, which contains further information about the project.

I'm still skeptical, I want to try it first

You can try this demo ³ or just playing around with my website (yes, it uses Subreply CSS).

Downsides

Even though it has a lot of good points, Subreply CSS also has some downsides:

All the fonts are currently hosted on Catbox, a file hosting service that I am relying on. This means that if Catbox goes down, all the fonts will be rendered unusable. The best solution for this is to host fonts locally, and I am planning on writing a (short) blog post just for that, so stay tuned!

Questions? Feedback?

If you have any questions or feedback, feel free to email me!

For both original and minified version ↩
The blockquotes are stolen from here and the code blocks are stolen from here ↩
Note that the demo version can be a bit outdated. ↩

Some of my best programming language that I have designed

Wumi4 — Tue, 15 Mar 2022 13:51:31 +0000

Throughout my years with programming, I have designed 12 programming languages. Some of them I think are pretty interesting and has some potential. But most of them is either straight up copies from the language that it was based on, or not very interesting to talk about. So, in this post, I will select out some of my best designed programming languages.

1. 3xn

3xn is one of my very first programming languages (and the best one). It is a stack-based esolang where you are limited to only have the first three letters on each line as commands. Any character after that is comments. Here is a Hello world! in 3xn:


'He // Add the string 'He' to the stack
'll
'o  // There is a whitespace after the 'o'
'wo
'rl
'd!
$@. // Merge all things in stack together and print

As you can see, the Hello world! string has to be splitted into smaller parts to fit within the rule using '. And at the final line, we merge all the small strings together ($) and then print it out (@).

You may have (not) noticed the . at the final line, it is basically the no-op operator: It does nothing. It turns out to be pretty useful for single-line comments.

... This is a line of comment

Here is another one, the Counter example:

1:a // Assign a to 1
[.. // Start while loop
^a1 // Load a to stack and push 1
+:a // Plus 2 number on the stack and assign it back to a
^a@ // Outputs a
]0. // Jumps back to the start of the while loop

This one makes a bit less sense to me. There is a 0 after the ], which I honestly don't know why is it there. The line +:a should mean 'assign the + operator to a' (as from the assignment at the first line), but here it means 'add a to 1 and assign the result to a'.

I think the reason why this is interesting to me is because of the design: You are forced to limit to use only 3 commands on each line, which is kinda frustating and dumb. But also, it forces you to come up with solutions to fit within the rule.

2. Nook

Nook is a concatenative, interpreted programming language. It is heavily inspired by GNU dc. Here is a Hello world! example:

{Hello world!} w # Print "Hello world!" after push it to the stack
{Hello world!} p # The same as above, but does not pop the string

Nook uses the curly brackets to contain strings and functions, similiar to dc's square brackets. Nook uses two different operators for priting to output (w and p), while dc uses 1 (p).

Here is a more interesting example, the abs example:

i d { 0 > } { _1 * w } { w } ?

The example takes an integer input, then prints the absolute value of the number. At here, there are a few other operators to introduce. There is the d operator, which is short for duplicate. And the more important one, the ? or (if) operator.

In this example, assuming we give the input -50. The program will:

First, duplicate the number (So we have [-50, -50])
Then, we will check the condition of the if
- If -50 is lesser than 0 (which in this one it is), print out -50 * -1
- Else, we just prints out the input back

In our example, the program will print out 50, which is the result of the expression -50 * -1.

I think it is interesting because this is the only language that has been actually implemented so far. You can see the repo on GitHub and run all the examples by yourself. It is also a language that is practical (compare to other ones) and have sets of examples (in the examples/ directory) and a CHANGELOG which you can use as a source of documentation.

End

So that is the design of Nook and 3xn. They are, in my opinion, two of the best programming languages that I have designed. If you are more interested in other languages that I made, here is a GitHub repo containing all of my notes and examples.

I practice typing in Workman today. Here is my experience.

Wumi4 — Mon, 07 Mar 2022 12:00:53 +0000

Today, I have had an experience to practice typing using a keyboard layout called Workman. It is supposedly an improvement to other popular keyboard layouts, like Dvorak, Colemak, and of course, QWERTY. To practice it, I decided to go to Monkeytype, choose the Workman layout, and get started.

At first, typing on Workman is weird, as with other things. I was only be able to type at about 3-4 WPM, which is pretty terrible. But, as I start to get more comfortable with it, I started to improve my speed. Now, I usually achieved at around 10-18 WPM with simple sentences with >90% accurancy, which I think is pretty good.

A thing I really like with Workman is that it feels very comfortable to type. So comfortable in fact, I was sometimes be able to get the feeling of typing on QWERTY, which is something I never expected to get so early.

Another thing I like about this layout is that a lot of common words (such as that, is) are already on the home row, so you don't have to move your hands to type it, unlike QWERTY.

The only thing I don't like about Workman is that V is placed in a pretty weird place, making it probably the word that I mistyped the most. Also, because Workman shifts one key off on the top row, so often times, I would mistype P as my muscle memory would say to press on P on QWERTY, which resulted in ; instead.

Overall, using Workman has been a pretty enjoyable experience, and it has been one of the better decisions I have made in life.

(At the time of typing, I am still using QWERTY, because I will need to restart the computer to start typing in Workman, bruh.)

Use Ngrok to share a preview of your web project to everyone!

Wumi4 — Sat, 16 Oct 2021 09:04:38 +0000

Situation

So, you just build a very cool website, but the only problem is that it is only available through your local web server, or localhost. You can buy a domain, set up a simple web server, get an SSL certificate, and then figure out how to set for the code to work. But what if you just want to share a quick preview of your website to a friend, or test it on mobile devices, without having to deploy or anything?

That's where tunnels come in! Tunnel allows you to set a secure, but temporary connection between your localhost and the Internet. In this post, I will show you how you can share a preview of your web project to everyone using Ngrok!

Get Started

Note: In here I am assuming you are using Linux or MacOS. If you use Windows or another OS, then this tutorial is maybe not for you.

Installation

First, we will need to create a Ngrok account. You can sign up using this link, or go to ngrok.com, and then click on Get Started For Free.

After signing up, you should have a dashboard that looks like this:

Now, click on Download for Linux, and a zip file should be installed.

Go to your default Download directory, and then unzip the zip file using unzip.

After unzipping, you should see an executable called ngrok. Running this executable should show something like this:

NAME:
   ngrok - tunnel local ports to public URLs and inspect traffic

DESCRIPTION:
    ngrok exposes local networked services behinds NATs and firewalls to the
    public internet over a secure tunnel. Share local websites, build/test
    webhook consumers and self-host personal services.
    Detailed help for each command is available with 'ngrok help <command>'.
    Open http://localhost:4040 for ngrok's web interface to inspect traffic.

[bla bla bla ...]

This means that we have installed Ngrok!

Authenticate the Ngrok agent

Now, we will need to authenticate the Ngrok agent that we just installed, this will grant us access to more features and longer session time.

On the dashboard, in the tab Getting Started, click on Your Authtoken. Click on that will lead to this:

Now, click Copy to copy your authtoken, and then type this on the terminal to authenticate:

./ngrok authtoken <YOUR_AUTHTOKEN>

After doing that, ngrok will output something like this:

Authtoken saved to configuration file: path/to/ngrok/config/file/ngrok.yml

Which means that we have authenticated our ngrok agent.

Fire it up

Now, we have done setting up our Ngrok, let's fire it up!

Before we get into it, we will set up ngrok in our $PATH to conveniently run ngrok everywhere in our shell, without having to remember the path.

Note that this depends on the shell that you are using. On fish (the shell that I am currently using), I will set up ngrok in my $PATH like this in .config/fish/config.fish:

export PATH="/path/to/ngrok/:$PATH"

Then, restart your terminal, and you should be able to run ngrok using ngrok command in the shell.

Now, we will start using Ngrok in our web project. For the purpose of this tutorial, I have set up a simple web server using Bottle Framework.

First, cd to your web project:

cd /path/to/your/project

Next, start the local web server. This depends on your project. For my project, since I only use a single file for my project (which is main.py), I can start the local web server of my project like this:

π python3 main.py
Bottle v0.12.19 server starting up (using WSGIRefServer())...
Listening on http://localhost:8080/
Hit Ctrl-C to quit.

After start the web server, open another terminal and type:

π ngrok http <PORT>

With <PORT> is the port of your local web server. In my case, it is 8080, so I will type in the terminal:

π ngrok http 8080

After press Enter, you should see an interface that looks like this:

ngrok by @inconshreveable                                                                                                                                (Ctrl+C to quit)

Session Status                online
Account                       Wumi4 (Plan: Free)
Version                       2.3.40
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://b0be-2001-ee0-4bab-5020-5343-d3ed-89bc-e519.ngrok.io -> http://localhost:8080
Forwarding                    https://b0be-2001-ee0-4bab-5020-5343-d3ed-89bc-e519.ngrok.io -> http://localhost:8080

Connections                   ttl     opn     rt1     rt5     p50     p90
                              2       0       0.01    0.00    0.01    0.01

As you can see, there are two different links in the Forwarding part: One is http and one is https. Click on any of these links will lead to your website.

End

So that's it! You have just learned how to use Ngrok to set up a temporary link that you can use to share it as a preview to everyone!

I hope you enjoy this tutorial! This is my first blog post since July, so the post may have some errors.

Ok, that's for all! Goodbye! 😄