mirror of
https://github.com/BBaoVanC/bbaovanc.com.git
synced 2025-09-04 11:57:35 -05:00
@@ -25,13 +25,6 @@ resources:
|
||||
src: dashboard-performance-graph.webp
|
||||
title: Picture of the `Performance` section on the Lighthouse CI dashboard
|
||||
|
||||
- name: youtube-embed-performance-comparison
|
||||
src: youtube-embed-performance-comparison.webp
|
||||
title: >-
|
||||
Performance hit caused by adding a YouTube embed. You can see the
|
||||
comparison itself [on this comparison
|
||||
page](https://lhci.bbaovanc.com/app/projects/bbaovanc.com/compare/01d2064b6fac?baseUrl=https%3A%2F%2Flocalhost%2Fblog%2Fthe-redesign-of-my-website%2F&compareUrl=https%3A%2F%2Flocalhost%2Fblog%2Fyoutube-url-structures-you-should-know%2F&baseBuild=01d2064b-6fac-40df-b4e6-373037ae1f9e).
|
||||
|
||||
---
|
||||
|
||||
The other day I set up automatic testing of my website using [Google Chrome
|
||||
@@ -122,7 +115,12 @@ where everything is throttled down a bunch, so the performance impact is more
|
||||
clear. Below is a screenshot of the difference in score between my blog post
|
||||
with a YouTube embed and a similarly sized blog post which has no video.
|
||||
|
||||
{{< figure src="youtube-embed-performance-comparison" >}}
|
||||
{{< figure src="youtube-embed-performance-comparison.webp" caption=`
|
||||
Performance hit caused by adding a YouTube embed. You can see the
|
||||
comparison itself [on this comparison
|
||||
page](https://lhci.bbaovanc.com/app/projects/bbaovanc.com/compare/01d2064b6fac?baseUrl=https%3A%2F%2Flocalhost%2Fblog%2Fthe-redesign-of-my-website%2F&compareUrl=https%3A%2F%2Flocalhost%2Fblog%2Fyoutube-url-structures-you-should-know%2F&baseBuild=01d2064b-6fac-40df-b4e6-373037ae1f9e).
|
||||
`
|
||||
/>}}
|
||||
|
||||
I can probably optimize this a little by making a copy of the built-in Hugo
|
||||
YouTube shortcode, and modifying it to defer the loading of the remote scripts.
|
||||
|
||||
@@ -20,12 +20,22 @@ resources:
|
||||
- name: feature
|
||||
src: listmonk-bobatheme-template.webp
|
||||
title: My custom newsletter template based on my website's custom theme.
|
||||
params:
|
||||
alt: >-
|
||||
Screenshot of an example newsletter email. It has a similar theme to my
|
||||
website, and contains two example paragraphs from my article on the
|
||||
Discord edited message trick. In contrast to most newsletters, the
|
||||
footer and its unsubscribe button is easily legible.
|
||||
|
||||
- name: listmonk-splash
|
||||
src: listmonk-splash.webp
|
||||
- src: listmonk-splash.webp
|
||||
title: >-
|
||||
Dashboard on listmonk ---
|
||||
[source](https://listmonk.app/static/images/splash.png)
|
||||
Dashboard on listmonk ---
|
||||
[source](https://listmonk.app/static/images/splash.png)
|
||||
params:
|
||||
alt: >-
|
||||
Screenshot of listmonk admin panel. There are statistics and graphs
|
||||
showing views, clicks, total subscribers, caompaigns, total messages
|
||||
sent, and total lists.
|
||||
|
||||
---
|
||||
|
||||
@@ -51,7 +61,7 @@ newsletter/mailing list manager I looked at that doesn't have an overall old and
|
||||
ugly interface. Additionally, it has a live demo, so I was able to test it out
|
||||
and see if it would be able to meet my (relatively low) requirements.
|
||||
|
||||
{{< figure src="listmonk-splash" >}}
|
||||
{{< figure src="listmonk-splash.webp" />}}
|
||||
|
||||
I also tried out [GNU Mailman 3](https://www.list.org/) about a year ago.
|
||||
However, I could not get it to integrate cleanly with my email
|
||||
@@ -71,7 +81,7 @@ I ended up writing my own template for listmonk from scratch, based on the CSS
|
||||
used in [bobatheme](https://github.com/BBaoVanC/bobatheme), the theme that my
|
||||
website uses. Here's a screenshot of how it currently looks:
|
||||
|
||||
{{< figure src="feature" >}}
|
||||
{{< figure src="feature" />}}
|
||||
|
||||
## Signing up
|
||||
|
||||
|
||||
@@ -21,14 +21,21 @@ tags:
|
||||
resources:
|
||||
- name: feature
|
||||
src: caddy.webp
|
||||
params:
|
||||
alt:
|
||||
Caddy's official logo
|
||||
title: >-
|
||||
Image source:
|
||||
[Caddy](https://caddyserver.com/resources/images/caddy-logo.svg)
|
||||
|
||||
- name: caddy-browse
|
||||
src: caddy-browse.webp
|
||||
title: >-
|
||||
Caddy's gorgeous directory list page.
|
||||
- src: caddy-browse.webp
|
||||
params:
|
||||
alt: >-
|
||||
Screenshot of a simple, dark-themed webpage showing a directory listing.
|
||||
There is a filter/search box available near the top left. There
|
||||
are five folders: "a", "epicdiscord", "md", "parkour", and "test". There
|
||||
is one file named "upload.html". There are additional columns for size
|
||||
and modification date. The footer says "Served with Caddy".
|
||||
|
||||
---
|
||||
|
||||
@@ -219,7 +226,7 @@ thousand times better.
|
||||
Coincidentally, it matches the theme of my website very well, so I have to put a
|
||||
border around the image.
|
||||
|
||||
{{< figure src="caddy-browse" >}}
|
||||
{{< figure src="caddy-browse.webp" caption="Caddy's gorgeous directory list page." />}}
|
||||
|
||||
|
||||
[^hostname-requirements]: For the rules on what domains have automatic HTTPS by
|
||||
|
||||
@@ -24,43 +24,32 @@ resources:
|
||||
src: example.webp
|
||||
title: Result after sending a GIF and then sending `s/e/x`.
|
||||
|
||||
- name: default-sex
|
||||
src: default-sex.webp
|
||||
- src: default-sex.webp
|
||||
title: Fallback image on `txnor.com`
|
||||
|
||||
- name: double-sex
|
||||
src: double-sex.webp
|
||||
- src: double-sex.webp
|
||||
title: Resulting image after typing `s/e/x` a second time.
|
||||
|
||||
- name: chess
|
||||
src: chess.webp
|
||||
- src: chess.webp
|
||||
title: This happens once you type `s/w/ag` after having done `s/e/x`.
|
||||
|
||||
- name: sword
|
||||
src: sword.webp
|
||||
- src: sword.webp
|
||||
title: This happens when you type `s/w/ord` after having done `s/e/x`.
|
||||
- name: sword-atk
|
||||
src: sword-atk.webp
|
||||
- src: sword-atk.webp
|
||||
title: This happens when you type `s/d/dATK`
|
||||
- name: sword-def
|
||||
src: sword-def.webp
|
||||
- src: sword-def.webp
|
||||
title: This happens when you type `s/d/dDEF`
|
||||
- name: sword-hug
|
||||
src: sword-hug.webp
|
||||
- src: sword-hug.webp
|
||||
title: This happens when you type `s/d/dHUG`
|
||||
- name: sword-win
|
||||
src: sword-win.webp
|
||||
- src: sword-win.webp
|
||||
title: Win screen on the `s/w/ord` game.
|
||||
- name: sword-lose
|
||||
src: sword-lose.webp
|
||||
- src: sword-lose.webp
|
||||
title: Lose screen on the `s/w/ord` game.
|
||||
|
||||
- name: 6969th
|
||||
src: 6969th.webp
|
||||
- src: 6969th.webp
|
||||
title: This happens on average (since it's randomized) every 6070th use.
|
||||
|
||||
- name: math-challenge
|
||||
src: math-challenge.webp
|
||||
- src: math-challenge.webp
|
||||
title: Math challenge example
|
||||
|
||||
---
|
||||
@@ -174,7 +163,7 @@ your user agent set to anything containing `Discord`
|
||||
If you go to any URL on `txnor.com` that doesn't fit one of the existing
|
||||
patterns/games, then it returns this fallback image:
|
||||
|
||||
{{< figure src="default-sex" >}}
|
||||
{{< figure src="default-sex.webp" />}}
|
||||
|
||||
## Extra features
|
||||
|
||||
@@ -182,7 +171,7 @@ patterns/games, then it returns this fallback image:
|
||||
|
||||
If you then run `s/e/x` a second time, then it changes to a different image:
|
||||
|
||||
{{< figure src="double-sex" >}}
|
||||
{{< figure src="double-sex.webp" />}}
|
||||
|
||||
This works in a simple way as well. The next `e` that appears in the URL is
|
||||
inside `/view/`. So, after typing `s/e/x` a second time, the URL becomes:
|
||||
@@ -196,7 +185,7 @@ inside `/view/`. So, after typing `s/e/x` a second time, the URL becomes:
|
||||
Another cool feature is that you can play chess by typing `s/w/ag` after typing
|
||||
the initial message of `s/e/x`.
|
||||
|
||||
{{< figure src="chess" >}}
|
||||
{{< figure src="chess.webp" />}}
|
||||
|
||||
### `s/w/ord`
|
||||
|
||||
@@ -208,34 +197,34 @@ Here are a few example images:
|
||||
|
||||
#### Main `s/w/ord` screen
|
||||
|
||||
{{< figure src="sword" >}}
|
||||
{{< figure src="sword.webp" />}}
|
||||
|
||||
#### ATK command
|
||||
|
||||
{{< figure src="sword-atk" >}}
|
||||
{{< figure src="sword-atk.webp" />}}
|
||||
|
||||
#### DEF command
|
||||
|
||||
{{< figure src="sword-def" >}}
|
||||
{{< figure src="sword-def.webp" />}}
|
||||
|
||||
#### HUG command
|
||||
|
||||
{{< figure src="sword-hug" >}}
|
||||
{{< figure src="sword-hug.webp" />}}
|
||||
|
||||
#### Win screen
|
||||
|
||||
{{< figure src="sword-win" >}}
|
||||
{{< figure src="sword-win.webp" />}}
|
||||
|
||||
#### Lose screen
|
||||
|
||||
{{< figure src="sword-lose" >}}
|
||||
{{< figure src="sword-lose.webp" />}}
|
||||
|
||||
### 6969th Discord Sexer
|
||||
|
||||
If you happen to get a one in 6970 chance, it will instead return
|
||||
a special image:
|
||||
|
||||
{{< figure src="6969th" >}}
|
||||
{{< figure src="6969th.webp" />}}
|
||||
|
||||
[6969th-source]: https://github.com/rebane2001/txnor-server/blob/26c7c279b0b4668c8a3b061692d83c507aeac7c5/sex.py#L130-L133
|
||||
|
||||
@@ -265,7 +254,7 @@ only letters, numbers, underscores or hyphens.
|
||||
|
||||
[math-challenge-regex]: https://regex101.com/r/ddEkML/1
|
||||
|
||||
{{< figure src="math-challenge" >}}
|
||||
{{< figure src="math-challenge.webp" />}}
|
||||
|
||||
What's special is that the math challenge is [set to not be
|
||||
cached][math-challenge-caching]. That means that it
|
||||
|
||||
@@ -21,6 +21,10 @@ resources:
|
||||
- name: feature
|
||||
src: example.webp
|
||||
title: Example image
|
||||
params:
|
||||
alt: >-
|
||||
Discord screenshot showing a message from "bbaovanc" at 4:11 PM, which
|
||||
says "example1 (edited) example2"
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -24,47 +24,31 @@ resources:
|
||||
src: boba-shop.webp
|
||||
title: GitHub Copilot tends to repeat stuff.
|
||||
|
||||
- name: rust-poem
|
||||
src: rust-poem.webp
|
||||
- src: rust-poem.webp
|
||||
|
||||
- name: python-twinkle-poem
|
||||
src: python-twinkle-poem.webp
|
||||
- src: python-twinkle-poem.webp
|
||||
|
||||
- name: horrible-code
|
||||
src: horrible-code.webp
|
||||
- src: horrible-code.webp
|
||||
|
||||
- name: dropdown-css
|
||||
src: dropdown-css.webp
|
||||
- src: dropdown-css.webp
|
||||
|
||||
- name: boba-shop # same as feature
|
||||
src: boba-shop.webp
|
||||
- src: boba-shop-size.webp
|
||||
|
||||
- name: boba-shop-size
|
||||
src: boba-shop-size.webp
|
||||
- src: boba-shop-color.webp
|
||||
|
||||
- name: boba-shop-color
|
||||
src: boba-shop-color.webp
|
||||
- src: girlfriend.webp
|
||||
|
||||
- name: girlfriend
|
||||
src: girlfriend.webp
|
||||
- src: cheese-burger-poem.webp
|
||||
|
||||
- name: cheese-burger-poem
|
||||
src: cheese-burger-poem.webp
|
||||
- src: sing.webp
|
||||
|
||||
- name: sing
|
||||
src: sing.webp
|
||||
- src: what-is-boba.webp
|
||||
|
||||
- name: what-is-boba
|
||||
src: what-is-boba.webp
|
||||
- src: what-is-github-copilot.webp
|
||||
|
||||
- name: what-is-github-copilot
|
||||
src: what-is-github-copilot.webp
|
||||
- src: what-is-the-purpose-of-this-file.webp
|
||||
|
||||
- name: what-is-the-purpose-of-this-file
|
||||
src: what-is-the-purpose-of-this-file.webp
|
||||
|
||||
- name: who-is-steve-jobs
|
||||
src: who-is-steve-jobs.webp
|
||||
- src: who-is-steve-jobs.webp
|
||||
|
||||
---
|
||||
|
||||
@@ -77,11 +61,11 @@ got as a result.
|
||||
|
||||
First, I tried to get Copilot to write me a poem in Rust. It didn't really work.
|
||||
|
||||
{{< figure src="rust-poem" >}}
|
||||
{{< figure src="rust-poem.webp" />}}
|
||||
|
||||
So, I tried Python instead.
|
||||
|
||||
{{< figure src="python-twinkle-poem" >}}
|
||||
{{< figure src="python-twinkle-poem.webp" />}}
|
||||
|
||||
This is where I realized that Copilot was doing a little more than just
|
||||
repeating code it had seen before verbatim.
|
||||
@@ -99,14 +83,14 @@ Anyways, back to more testing.
|
||||
I decided to ask it to generate some horrible code for me. Unfortunately, it
|
||||
didn't quite do what I wanted.
|
||||
|
||||
{{< figure src="horrible-code" >}}
|
||||
{{< figure src="horrible-code.webp" />}}
|
||||
|
||||
## Solving problems in bobatheme
|
||||
|
||||
I decided to consult Copilot on how to make a nice CSS dropdown, which I need
|
||||
for the language picker in bobatheme.
|
||||
|
||||
{{< figure src="dropdown-css" >}}
|
||||
{{< figure src="dropdown-css.webp" />}}
|
||||
|
||||
Maybe I'll have to test it out.
|
||||
|
||||
@@ -116,16 +100,16 @@ Now, I asked Copilot for help on creating a new
|
||||
[boba](https://en.wikipedia.org/wiki/Bubble_tea) shop, which got a little
|
||||
spammy.
|
||||
|
||||
{{< figure src="boba-shop" >}}
|
||||
{{< figure src="boba-shop.webp" />}}
|
||||
|
||||
{{< figure src="boba-shop-size" >}}
|
||||
{{< figure src="boba-shop-size.webp" />}}
|
||||
|
||||
## More random code
|
||||
|
||||
I got some ideas of important questions to ask Copilot thanks to the
|
||||
conversations going on in Discord.
|
||||
|
||||
{{< figure src="girlfriend" >}}
|
||||
{{< figure src="girlfriend.webp" />}}
|
||||
|
||||
Turns out the API endpoint in that code is real, and returns a (presumably)
|
||||
nonexistent person.
|
||||
@@ -135,7 +119,7 @@ nonexistent person.
|
||||
I decided to generate one more poem, this time naming the function something
|
||||
different in hopes of getting a different result.
|
||||
|
||||
{{< figure src="cheese-burger-poem" >}}
|
||||
{{< figure src="cheese-burger-poem.webp" />}}
|
||||
|
||||
It was a success! And the output of the program:
|
||||
|
||||
@@ -151,7 +135,7 @@ Cheese Burger
|
||||
|
||||
I decided to try and get it to sing a song.
|
||||
|
||||
{{< figure src="sing" >}}
|
||||
{{< figure src="sing.webp" />}}
|
||||
|
||||
According to Google Translate, here's what that says:
|
||||
|
||||
@@ -170,15 +154,15 @@ def sing():
|
||||
I decided to ask Copilot a few random questions to test its encyclopedia
|
||||
abilities.
|
||||
|
||||
{{< figure src="what-is-boba" >}}
|
||||
{{< figure src="what-is-boba.webp" />}}
|
||||
|
||||
{{< figure src="what-is-github-copilot" >}}
|
||||
{{< figure src="what-is-github-copilot.webp" />}}
|
||||
|
||||
{{< figure src="who-is-steve-jobs" >}}
|
||||
{{< figure src="who-is-steve-jobs.webp" />}}
|
||||
|
||||
I had run out of questions to ask, so I just started the comment with a generic
|
||||
"what is" and let Copilot finish the question and answer.
|
||||
|
||||
{{< figure src="what-is-the-purpose-of-this-file" >}}
|
||||
{{< figure src="what-is-the-purpose-of-this-file.webp" />}}
|
||||
|
||||
That last line came out of nowhere!
|
||||
|
||||
@@ -75,9 +75,9 @@ pull requests.
|
||||
Every pull request has its own preview built for it using GitHub Actions, which
|
||||
is linked in a comment, and shown as a deployment on the pull request.
|
||||
|
||||
{{< figure src="actions-comment" >}}
|
||||
{{< figure src="actions-comment" />}}
|
||||
|
||||
{{< figure src="deployment" >}}
|
||||
{{< figure src="deployment" />}}
|
||||
|
||||
## Translations
|
||||
|
||||
|
||||
@@ -48,13 +48,13 @@ That turned out to be a great idea, and led to the creation of this blog post.
|
||||
After using Copilot as an encyclopedia, I got an idea. What if I used GitHub
|
||||
Copilot to generate ideas?
|
||||
|
||||
{{< figure src="print-a-news-article" >}}
|
||||
{{< figure src="print-a-news-article" />}}
|
||||
|
||||
I decided to take it a step further and set the language to Markdown. I started
|
||||
writing out the basic structure of a blog post on my website and let it
|
||||
autocomplete.
|
||||
|
||||
{{< figure src="feature" >}}
|
||||
{{< figure src="feature" />}}
|
||||
|
||||
I'm not quite sure who Kurt A. Smith is, why Copilot chose April Fools 2020 for
|
||||
the date, or why it was so adamant on writing a blog post about itself. What I
|
||||
|
||||
@@ -19,17 +19,14 @@ tags:
|
||||
resources:
|
||||
- name: feature
|
||||
src: youtube-url.webp
|
||||
title: YouTube URL
|
||||
title: Example YouTube URL
|
||||
params:
|
||||
alt: >-
|
||||
Screenshot of a Firefox address bar. It contains the youtube.com link
|
||||
mentioned in the body of this article.
|
||||
|
||||
- name: mdn-url-parameters
|
||||
src: mdn-url-parameters@x2.png
|
||||
title: >-
|
||||
[What is a
|
||||
URL?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL#parameters)
|
||||
by [Mozilla
|
||||
Contributors](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/contributors.txt)
|
||||
is licensed under [CC-BY-SA
|
||||
2.5](https://creativecommons.org/licenses/by-sa/2.5/)
|
||||
|
||||
---
|
||||
|
||||
@@ -52,7 +49,15 @@ Query parameters can be added to a URL just by suffixing it with something like
|
||||
to `else`. Note how the first parameter is prefixed with `?`, and then the
|
||||
following parameters are separated with `&`.
|
||||
|
||||
{{< figure src="mdn-url-parameters" >}}
|
||||
{{< figure src="mdn-url-parameters" caption=`
|
||||
[What is a URL?][what-is-url] by [Mozilla Contributors][moz-contribs] is
|
||||
licensed under [CC-BY-SA 2.5][cc-by-sa-2.5]
|
||||
|
||||
[what-is-url]: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL#parameters
|
||||
[moz-contribs]: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/contributors.txt
|
||||
[cc-by-sa-2.5]: https://creativecommons.org/licenses/by-sa/2.5/
|
||||
`
|
||||
/>}}
|
||||
|
||||
See the [page on the Mozilla Developer
|
||||
Docs](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL)
|
||||
|
||||
Submodule themes/bobatheme updated: 1f82ad4f0b...8845272d4d
Reference in New Issue
Block a user