summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--Makefile2
-rw-r--r--index.html1
-rw-r--r--posts/programming/2021-01-28-undefined-javasript-is-undefined-.html161
-rw-r--r--robots.txt3
-rw-r--r--rss.xml1
5 files changed, 166 insertions, 2 deletions
diff --git a/Makefile b/Makefile
index 3c9b909..4813683 100644
--- a/Makefile
+++ b/Makefile
@@ -24,4 +24,4 @@ post:
sed -i '' "s#<ul id=\"index\">#<ul id=\"index\">\n<li> <a href=\"/$$FILENAME\">$$TITLE <code>$$LONG_DATE</code> </a> </li>#" index.html
live:
- rsync -r ./* atc@192.168.1.104:/var/www/
+ rsync --recursive --update --exclude=Makefile --exclude=.git/ ./* atc@192.168.1.104:/zroot/www/
diff --git a/index.html b/index.html
index e75d294..7f0ccf7 100644
--- a/index.html
+++ b/index.html
@@ -67,6 +67,7 @@
</h1>
<ul id="index">
+<li> <a href="/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html">Undefined? JavaSript Is Undefined. <code>Thu, 28 Jan 2021</code> </a> </li>
<li> <a href="/posts/life/2021-01-15-adam-s-2020-reading-list.html">Adam's 2020 Reading List <code>Fri, 15 Jan 2021</code> </a> </li>
<li>
<a
diff --git a/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html b/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html
new file mode 100644
index 0000000..8ff3e7c
--- /dev/null
+++ b/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" href="/includes/stylesheet.css" />
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta
+ property="og:description"
+ content="The World Wide Web pages of Adam Carpenter"
+ />
+ <meta
+ property="og:image"
+ content="https://nextcloud.53hor.net/s/iBGxB7P3BKRbj9P/preview"
+ />
+ <meta property="og:site_name" content="53hor.net" />
+ <meta property="og:title" content="Undefined? JavaSript Is Undefined." />
+ <meta property="og:type" content="website" />
+ <meta property="og:url" content="https://www.53hor.net" />
+ <title>53hornet ➙ Undefined? JavaSript Is Undefined.</title>
+ </head>
+
+ <body>
+ <nav>
+ <ul>
+ <li>
+ <a href="/">
+ <img src="/includes/icons/home-roof.svg" />
+ Home
+ </a>
+ </li>
+ <li>
+ <a href="/info.html">
+ <img src="/includes/icons/information-variant.svg" />
+ Info
+ </a>
+ </li>
+ <li>
+ <a href="https://git.53hor.net">
+ <img src="/includes/icons/git.svg" />
+ Repos
+ </a>
+ </li>
+ <li>
+ <a href="/hosted.html">
+ <img src="/includes/icons/desktop-tower.svg" />
+ Hosted
+ </a>
+ </li>
+ <li>
+ <a type="application/rss+xml" href="/rss.xml">
+ <img src="/includes/icons/rss.svg" />
+ RSS
+ </a>
+ </li>
+ </ul>
+ </nav>
+
+ <article>
+ <h1>Undefined? JavaSript Is Undefined.</h1>
+
+ <p class="description">
+ So I've been working on a web app for my mom. Nothing too fancy, but
+ it's a store front for her glass art. It's an easy way for her to keep
+ track of inventory, update photos of her products, and for people to
+ shop and search and sort and browse through it. This backend is an HTTP
+ service written in Rust. The frontend is a Vue.js app. I've used Vue and
+ JavaScript many times before but I recently ran into an incredibly
+ strange bug. One that I would have hoped JavaScript would have some
+ guard against. But JavaScript is an undefined language.
+ </p>
+
+ <p>
+ I have a small component that uses a file input to collect an image from
+ the user. Then I append that file to a FormData and set that FormData as
+ a Fetch API request body. So I've got fetch API sending
+ multipart/form-data across the network to my backend. Awesome! The
+ backend is supposed to take each field of the request, turn the chunks
+ into a single stream of binary data, and write them out to an image.
+ Everything on the front seems like it's working great, it fires off the
+ request and throws no errors. But then the backend only sees a few bytes
+ of this multi-megabyte image. Not awesome! short chunks on the back-end.
+ The array of data in the API is less than ten bytes long, when this is a
+ many-kilobyte file I'm trying to upload.
+ </p>
+
+ <p>
+ At this point I'm relentlessly debugging, trying to find out what's
+ wrong with the API. Why is it truncating the request down to a few
+ bytes, where's the rest of the data? It took me forever to actually
+ inspect what those few bytes are and, lo and behold they're ASCII for
+ <code>undefined</code> The request happily stringified an
+ <code>undefined</code> object, instead of maybe throwing a null
+ reference or undefined error during request creation because that's just
+ what JavaScript does. <em>The linter didn't even catch it.</em>
+ </p>
+
+ <p>
+ You can see what the debugging logs looked like on the backend below.
+ Note that the <code>&data</code> is the field that spells out
+ "undefined".
+ </p>
+
+ <pre>
+ <code>
+[src/handlers.rs:114] &field =
+Field: application/octet-stream
+ boundary: ---------------------------175314640631070190963311652907
+ headers:
+ "content-disposition": "form-data; name=\"clu.jpg\""
+
+[src/handlers.rs:119] &chunk = Ok(
+ b"undefined",
+)
+[src/handlers.rs:123] &data = [
+ 117,
+ 110,
+ 100,
+ 101,
+ 102,
+ 105,
+ 110,
+ 101,
+ 100,
+]
+ImageWrite("The image format could not be determined")
+ </code>
+ </pre>
+
+ <p>
+ The <em>working</em> JS is here (it was late at night and I was so
+ donion rings I just fixed it and pushed it without saving the errors for
+ posterity):
+ </p>
+
+ <pre>
+ <code>
+let file = event.target.files[0];
+if (!file) {
+return;
+}
+
+const fd = new FormData();
+fd.append(file.name, file);
+
+const response = await fetch("http://localhost:8000/photos", {
+method: "POST",
+body: fd
+});
+console.log(response);
+ </code>
+ </pre>
+ <p>
+ I've gotten frustrated by JS before but not like this. I don't know if
+ TypeScript would have solved this issue but writing in a language that
+ gets transpiled back into the language I'm trying to avoid doesn't seem
+ like the way forward. I'm looking forward to Web Assembly as a way of
+ using more type-safe languages in the browser.
+ </p>
+ </article>
+ </body>
+</html>
diff --git a/robots.txt b/robots.txt
index e7d8000..850787f 100644
--- a/robots.txt
+++ b/robots.txt
@@ -1,6 +1,7 @@
User-agent: *
Crawl-delay: 120
+Disallow: /.git/
+Disallow: /drafts/
Disallow: /includes/
Disallow: /rss.xml
Disallow: /templates/
-Disallow: /drafts/
diff --git a/rss.xml b/rss.xml
index fab8944..5c9ab45 100644
--- a/rss.xml
+++ b/rss.xml
@@ -138,5 +138,6 @@
<guid>https://www.53hor.net/posts/unix/2021-01-15-root-on-zfs-a-zpool-of-mirror-vdevs-the-easy-way.html</guid>
</item>
<item> <title>Adam's 2020 Reading List</title> <pubDate>Fri, 15 Jan 2021</pubDate> <link>https://www.53hor.net/posts/life/2021-01-15-adam-s-2020-reading-list.html</link> <guid>https://www.53hor.net/posts/life/2021-01-15-adam-s-2020-reading-list.html</guid> </item>
+<item> <title>Undefined? JavaSript Is Undefined.</title> <pubDate>Thu, 28 Jan 2021</pubDate> <link>https://www.53hor.net/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html</link> <guid>https://www.53hor.net/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html</guid> </item>
</channel>
</rss>