You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/blog/anagram.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,11 +12,11 @@ An [Anagram](https://en.wikipedia.org/wiki/Anagram) is a word created by rearran
12
12
13
13
For example, my full name, 'Ethan Oliver Marks', is an anagram for 'Martin Kolver Shea'.
14
14
15
-
15
+
![GIF Ethan Oliver Marks ⇄ Martin Kolver Shea](~/example_anagram.webm"Ethan Oliver Marks ⇄ Martin Kolver Shea")
16
16
17
17
I generated the above animation using [Anagram Animator](https://colab.research.google.com/drive/1MqpogsUUTuzctVKgg8n8btD3WUuENPAK), a Colab Notebook I wrote in a few hours.
18
18
19
-
19
+
![A screenshot of Anagram Animator in Colab](~/anagramcolab.webp"Anagram Animator in Colab")
Copy file name to clipboardExpand all lines: content/blog/backgroundclip.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,13 +9,13 @@ Earlier today, I opened my [personal website](/blog/personalwebsite) in Google C
9
9
10
10
As a long-time Firefox user, I'd never even thought to test my site in another browser. The only reason I was using Chrome was because I was trying to work around *another* compatibility bug. It all started with my laptop. My laptop is fairly powerful, which means that it's heavy and has an abysmal battery life. Because of this, I use a [laptop dock](https://www.youtube.com/watch?v=Pc31L3zJiaU) to effectively turn it into a desktop with a built-in keyboard. I'd like to be able to code from places other than my desk, so I've been considering buying a cheap portable laptop with just barely enough processing power to run a browser, and using a [remote tunnel](https://code.visualstudio.com/docs/remote/tunnels) to puppeteer my main laptop that has all of my files on it. The best way to do this seems to be [vscode.dev](https://code.visualstudio.com/blogs/2021/10/20/vscode-dev), so I decided to try it out and see if it was viable. I booted up the webpage in Firefox, aaaaand it doesn't work.
11
11
12
-
12
+
![when vscode.dev runs in Firefox, all of the icons are replaced with empty boxes](~/vscode-dot-dev-icon-font.webp"Firefox is bad at icon fonts")
13
13
14
14
[Firefox has trouble with icon fonts](https://support.mozilla.org/en-US/questions/1016919), so all of the interface buttons were replaced with empty boxes. After an hour of trying to fix it, I just gave up and used another browser. Much as I dislike it, Google Chrome is less buggy than Firefox and has more support for new browser technologies (like [CSS carousels](https://chrome.dev/carousel/)), so I grudgingly conceded that it's fine for just running a web app. I installed Chrome, navigated to vscode.dev, and it worked perfectly. I'm still very impressed that Microsoft managed to make a browser port of an entire code editor.
15
15
16
16
I logged into my GitHub account, did some configuration, and started coding. I started up my personal website's [Hugo](/blog/hugoswitch)[server](https://gohugo.io/commands/hugo_server/) and opened it in a new Chrome tab. At that point, I discovered that portions of my website were invisible.
17
17
18
-
18
+
![The mint gradient is visible on Firefox but not on Chrome](~/background-clip-firefox-chrome.webm"Firefox (left) vs Chrome (right)")
19
19
20
20
I opened the page on Firefox, and it looked fine, so I deduced that the problem was browser-specific. I started troubleshooting. I disabled likely-looking CSS styles at random until something changed, and eventually realized that I could make the text visible by unchecking the `webkit-text-fill-color: transparent;` style. Although this made the text visible, the resulting text was pure white rather than my mint gradient. I eventually realized that the problem was in how the two browsers handled the `background-clip: text;` style.
21
21
@@ -30,7 +30,7 @@ In the end, I settled on just using a solid mint colour by default, and adding a
30
30
```css
31
31
h1 {
32
32
color: var(--color-h1);
33
-
33
+
34
34
@-moz-documenturl-prefix() {
35
35
/* Add a cool gradient on Firefox; other browsers don't support it :( */
36
36
background: var(--color-gradient-mint);
@@ -43,14 +43,14 @@ h1 {
43
43
44
44
The solid colour isn't too noticeable, but it definitely doesn't look quite as nice on Chrome or Edge as it does on Firefox.
45
45
46
-
46
+
![headings have the mint gradient on Firefox, but are solid teal on Chrome and Edge](~/mint-headings-firefox-chrome-edge.webp"Firefox (left) vs Chrome (top right) vs Edge (bottom right)")
47
47
48
-
Then I checked to see if anyone else had noticed this. I found a [Stack Overflow post](https://stackoverflow.com/questions/55198363/webkit-background-clip-text-working-on-mozilla-but-not-on-chrome). The author of the post, [Paul Stephen Davis](https://stackoverflow.com/users/5925418/paul-stephen-davis), noticed the background-clip inconsistency while working on his photography website and asked for help. A user named [Jason](https://stackoverflow.com/users/4243228/jason) suggested using `display: inline;` (which doesn't fix the bug) and then gave up.
48
+
Then I checked to see if anyone else had noticed this. I found a [Stack Overflow post](https://stackoverflow.com/questions/55198363/webkit-background-clip-text-working-on-mozilla-but-not-on-chrome). The author of the post, [Paul Stephen Davis](https://stackoverflow.com/users/5925418/paul-stephen-davis), noticed the background-clip inconsistency while working on his photography website and asked for help. A user named [Jason](https://stackoverflow.com/users/4243228/jason) suggested using `display: inline;` (which doesn't fix the bug) and then gave up.
49
49
50
50
This was over 6 years ago. `background-clip` was [first introduced by WebKit in 2008](https://www.css3.info/webkit-introduces-background-cliptext/), and has been supported by Chrome since 2010. It has been a standard CSS property for a decade and a half, and the Stack Overflow post proves that this bug has been known since at least 2019.
51
51
52
52
I think that Firefox's implementation of `background-clip` is much better, both in principle and in what it allows you to do. Chrome apparently doesn't agree, and has spent the last 15 years being wrong.
Copy file name to clipboardExpand all lines: content/blog/collectivenoun.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ A [collective noun](https://en.wikipedia.org/wiki/Collective_noun) is a word tha
9
9
10
10
For reasons unbeknownst to me, people really love coming up with ridiculous and silly collective nouns for animals. For example, a 'business' is the collective noun for ferrets.
11
11
12
-
12
+
![Five anthropomorphic ferrets wearing suits sitting around an office table in a meeting, generated with Imagen 3](~/business_of_ferrets.webp"The collective noun for ferrets is a business")
0 commit comments