DEV Community: Sean Brunnock

EPubbing

Sean Brunnock — Mon, 29 Aug 2022 15:24:00 +0000

I've been an avid reader for as long as I can remember. When I bought my first house, I made sure there would be a dedicated library with lots of bookshelves.

Since then, I've become addicted to ebooks and can't abide paper books.

I feel terrible confessing this. Paper books have been a part of my life for so long and I thought the idea of reading a book on a smartphone was ridiculous. But my eyesight is deteriorating and ebooks make it so easy to set a comfortable font. Another advantage, since my phone only displays a paragraph at a time, it's forced me to slow down and savor the words. I can also look up any words I'm unfamiliar with instantly.

But, I've got a lot of books in my library that aren't available as ebooks. Time to learn to create them.

So, the EPUB format is an open format that is supported by almost all ereaders. It was started by the Open eBook Forum, but it's now maintained by the W3C.

EPUB is over 10 years old, and there have been some changes over time, so there's a lot of outdated docs out there. But of course, nobody ever points out that their docs are outdated. It's left as an exercise for the reader.

Most of the docs that I've read insist that you should use existing software to convert text to EPUB, but I found that Apple's Page app injects useless Javascript. So I decided to use my own technique.

I created a simple guide to EPUB's structure. It doesn't go into excessive detail. It just shows how to create a very simple ebook that complies with EPUB v3.2.

To create an ebook, I use the "Scan Text" feature on my iPhone's Notes app to convert the page to ASCII text. The Notes app syncs with my Apple account, so the text shows up on my desktop as well.

Next, I use my own software to convert the raw text into XHTML. I copy the text to my app and compare it to the original book and insert a mark (three backticks) at the start of each paragraph. My app can delete all of the existing newlines and then replace the backticks with newlines. I can then triple-click entire paragraphs and mark them up.

Notes is great at scanning words, but not so great with punctuation. All em dashes get turned into hyphens, for example. My app can highlight all of the puncuation so you can hopefully eyeball any mistakes.

My app removes hyphens from the ends of lines and combines word parts into single words. Sometimes, the hyphen at the end of a line was meant to be part of a hyphenated word. Chrome's textarea has a spellcheck feature that can highlight those mistakes.

My app doesn't create an entire XHTML file. It just marks up the raw text and I copy that into a template.

So far, I'e managed to turn Weaving the Web into an ebook which I'm now finally reading comfortably. Very strange that a book by the guy who invented the Web isn't available in electronic format.

Cookies, I hardy knew ye.

Sean Brunnock — Wed, 27 Jul 2022 11:03:00 +0000

Even though, I've been a developer for over 25 years, I've never really dealt with cookies. Back in my Perl days, I used hidden fields to manage sessions. Now that I'm using express-session, I figured it would be a good idea to get more familiar with cookies. That turned out to be tougher than I thought it would be.

Normally, cookies are created by the server and, if the server enables the HttpOnly flag, then your browser's JS code won't even be able to see the cookies. But, I like making demos that work in your browser.

Cookies are represented in JS by the document.cookie object. Running console.log(typeof document.cookie) returns string, but it's not a string. It's an object with getters and setters.

It's very easy to add a cookie in your browser- document.cookie = 'cookie1=New Cookie!'. And it's very easy to change it- document.cookie = 'cookie1=New value.'. Deleting it is a different matter.

You don't actually delete cookies, you expire them. Most examples that I've found state that you should use some variation of

let date = new Date(0);
document.cookie = 'cookie1=; expires='+date.toUTCString();

But I find that setting max-age is easier-

document.cookie = 'cookie1=; max-age=0';

Something fun I learned is that you can have multiple cookies with the same name and different values.

document.cookie = 'cookie1=root; path=/';
document.cookie = 'cookie1=parent; path=/Parent';
document.cookie = 'cookie1=cwd;';
console.log(document.cookie);

If you serve the preceding code to a browser with the pathname /Parent, then the output should be cookie1=cwd; cookie1=parent; cookie1=root.

There are a few tricky points here. One, you can't use any arbitrary value for path. It has to be an actual path in document.location.pathname. Second, while document.cookie will return all of the cookies, it won't tell you which one is associated with which path. The cookies are in ascending order from the longest to the shortest path. You can do something like let cookies = document.cookie.split('; ') and the array will be in ascending order (tested on Chrome, Firefox, and Safari).

In order to alter or delete a specific cookie, you need to specify its corresponding path.

document.cookie = `cookie1=NewValue; path=/;`;
document.cookie = `cookie1=; path=/; max-age=0;`;

You can't alter a cookie's path.

I should point out that running document.cookie = 'cookie1=New Cookie!' is bad form. You should encode the data like so- document.cookie = 'goodCookie=' +encodeURIComponent('data to encode'). This will allow you to use semicolons in your data.

Well, that's enough to get started. I've got a bunch more working examples at https://sean.brunnock.com/Javascript/Cookies/. I hope you find it helpful.

Express devs and WHATWG editors have very different ideas about accessing headers.

Sean Brunnock — Sun, 10 Jul 2022 15:34:00 +0000

I did what I thought would be an easy project. Oh, how wrong I was.

I had an ERN (Express/React/Node) app that simply printed the HTTP headers that your browser sent to my server. I thought it would be a simple matter to also show the HTTP headers that your browser received from my server. It turns out that this list of headers is a very different data structure.

To access the headers on an express server, just use req.headers. It's a simple object with the expected keys and values.

The Fetch API allows your browser to access HTTP headers via response.headers. For example, you could run fetch('http://example.com/').then(response=>console.log(response.headers)). The problem is that the Fetch API returns an iterable which is very different from Express's simple object.

To render the iterable, I have to use let headersARR=[]; for (let header of [...response.headers.entries()]) { headersArr.push(header); }.

I'm sure that the Express folks and the WHATWG folks have their reasons for handling HTTP headers differently. It just makes things more difficult for us mere developers.

Anyways, you can try my demo at sean.brunnock.com and view the source to see the nuts and bolts and you can visit https://developer.mozilla.org/en-US/docs/Web/API/Headers for lots more info about accessing headers with fetch.

4 examples of fetching with React and useEffect

Sean Brunnock — Tue, 05 Jul 2022 15:45:00 +0000

Here are 4 simple examples of React using the useEffect hook and the Fetch API- getting plain text; getting JSON; posting JSON; and handling errors. All four examples are running live code, so you can play around with it and hopefully get a feel for it. At least it worked for me.

https://sean.brunnock.com/React/Examples/ReactFetchDemos/

Baby steps

Sean Brunnock — Tue, 05 Jul 2022 12:24:00 +0000

So, in my quest to switch from LAMP to PERN, I'm going to update my old MySQL DB manager and turn it into a modern Postgres DB manager. This time, I'm going to use modern authentication techniques rather than my old basic HTTP authentication.

So, how do we do this? The Passport library seems to be the most popular. Great, let's use that. Passport uses sessions. Which library should I use? The Express team maintains express-session and cookie-session. Cookie-session looks simpler. Let's use that. Nope. It's not compatible with Passport currently.

Fine, we'll use express-session. express-session creates a session id and stores it in a cookie. How do I manipulate cookies in JS? I have to use something called encodeURIComponent. I've never used it. How does it differ from encodeURI? Time to do some research.

OK. I've updated my encodeURI demo so it now includes examples of encodeURIComponent and decodeURIComponent. That'll do for today.

Baby steps.