After Angular, React.js and Vue, svelte is the new and cool kid on the block. I have to admit, the compile-to-plain-javascript philosophy is nice, and what is especially cool is the fact that with Rollup.js you can easily bundle a svelte app into easy-to-embed component.

I wanted to make a simple embeddable Svelte component for a friend of mine, that would be as simple as possible to include in a blog post, web site or similar with just:

<script src="https://mydomain.com/myscript.js"></script>

The script should ideally just put the component in the same place. Turns out this is really easy with Svelte. Let's dive in!

Setting up Svelte

You may want to read more about rollup-plugin-svelte and Making an app from excellent Svelte tutorial to get more familiar with the tools used here, as I'll only cover the bare essentials.

First you need to install the necessary plugins. We'll start with Rollup and install it globally so you can just use rollup command to do things. If you want, you can also install rollup locally.

user@server:~$ sudo npm install --global rollup
user@server:~$ rollup -v
rollup v2.40.0

I initially got an error saying something about imports and after a bit of googling found out that my Ubuntu version of node was very old (node -v outputted 8.x.x when 10+ was needed) – if you encounter the same issue, upgrade to a newer node (nvm is a great too to do this).

Next make a product directory and install svelte and rollup-plugin-svelte:

user@server:~$ mkdir embed-svelte
user@server:~$ cd embed-svelte/
user@server:~/embed-svelte$ npm init

[answering to npm prompts]

user@server:~/embed-svelte$ npm install --save-dev svelte
user@server:~/embed-svelte$ npm install --save-dev rollup-plugin-svelte
user@server:~/embed-svelte$ npm install --save-dev @rollup/plugin-node-resolve

Simple Svelte component

We'll go really barebones with this tutorial, just a simple heading and a paragraph. Create a Svelte component Embed.svelte:

<script>
export let name; // from props
</script>

<h1>Hello, {name}!</h1>

<p>This component was brought to you by <a href="https://codeandlife.com/">Code
  &amp; Life</a>.</p>

Then we'll need a simple .js script to import that our mini-component and inject it to the DOM of whatever page has included the resulting script. Let's call this embed.js:

Read post

So, I started writing a file database and toolset called fileson to take advantage of AWS S3 Glacier Deep Archive (let's just call it GDA from now on). With 1 €/mo/TB storage cost, it is essentially a dirt cheap option to store very infrequently accessed data like offsite backups.

Why not just use rclone? Well, I disliked the fact that all tools do a ton of (paid) queries against S3 when syncing. I thought a simple JSON file database should work to keep track what to copy and delete. Well, that work is progressing, but as a part of that...

Encrypting on the fly with Python and Pycrypto(dome)

I started thinking that client side encryption would be useful as well. AES is tried and tested, and it's easy to find sample code to do it. But it seems wasteful to first create encrypted files on your hard drive, then upload them to AWS and finally delete everything.

Luckily, the Python AWS SDK boto3 has a great example on how to upload a file to S3 with upload_fileobj that accepts "a readable file-like object". What does that mean? Let's find out!

Read post

I was cleaning up my code folder today and came across my JUnzip library. I realized that I added zipping to the "popular" (40 stars makes it my second most starred repo at the moment) library.

It supports "deflate" method is zlib is present, and "store" if not. You can take a look at the zipping demo code to take a deeper dive.

Additional thanks to Björn Samuelsson for his compact CRC32 routines that were used in case there's no zlib.

Read post

I've had an iPad Pro 12.9" for some time, and been happily using it for sheet music when playing the piano. However, having to interrupt your playing to swipe to the next page does get annoying. You can get a $100 commercial AirTurn pedal, but since one can get a microcontroller from Ebay/Aliexpress for $4 and a simple foot pedal switch for $2, I thought it would be a fun one evening hacking project. It turned out quite nice:

Getting started: ESP32 devkit

The sheet music applications on iPad (and Android) usually have bluetooth keyboard support, turning the page when user presses an arrow key or spacebar. So the minimum viable product is just a bluetooth-enabled microcontroller that can pair with the iPad and send a single key upon request.

The ESP32 chip has both WiFi and Bluetooth, and I chose it for this project, as it is readily available in a compact form factor, and it's easy to program with Arduino. Searching [AliExpress](https://www.aliexpress.com for ESP32 should give you plenty of options.

I had a ESP32 board labelled with "ESP32 DEVKITV1" in my parts box, and it was quite easy to set up with this ESP32 tutorial:

1. Install the driver for USB-UART bridge
2. Add source URLs for ESP32 to Arduino and install ESP32 support
3. Select "DOIT ESP32 DEVKIT" from the board menu
4. Hold down "Boot" button on the board while selecting "Upload", release when the console says "Connecting..."

Before you proceed with the tutorial, check that you can get the lights blinking or flash some other example code successfully for the board. There are plenty of resources around if you hit into any issues! I had to google the step 4 myself, although it would have sufficed to read the linked tutorial carefully...

Read post

A while ago I updated my site to Eleventy.js. This improved my blogging process considerably, as Markdown is quick to write, and especially code samples are easy to copy-paste without any escaping.

I put all my posts into one Github repository. Using Visual Studio Code, I get nice realtime preview, and once I'm done, I just git commit, git push on my computer, and git pull on the server, and regenerate the site with Eleventy.

Now only issue is that one usually finds 5-10 things to change after every post, and while VS Code has great git support built in, even the simple update process gets a bit tedious with commands being run on SSH side. So I started wondering if I could use the Github webhooks to automate the regeneration. Turns out: YES.

Simple Script to Pull Markdown from Github and Regenerate

First component is of course a small shell script to automate the git pull and regeneration. One could do a more elaborate one, but this worked for me server-side:

#!/bin/sh

cd ~/myblog_post # here are the .md files
git pull
cd ~/myblog_eleventy # here's the 11ty site generator
npx @11ty/eleventy --input=. --output=../apps/myblog_static # hosting dir

Node.js Mini-Server for Github Webhooks

Next, I needed to set up a web server that would get the HTTP POST from Github whenever I push changes. Here your configuration will depend on hosting you have, but Opalstack for example has simple installation of a Node.js application. I usually disable the automatic restarting (crontab -e etc.), use ./stop script and run my server manually for a while to see everything works, before restoring the crontab.

If you choose to forego Github webhook security mechanisms, the code is really simple, but in that case, anyone knowing the addess of your server can flood you with fake push requests. So let's take the high road and use this gist to verify Github hooks! I chose to use Polka so I needed to modify the headers part of the code just a bit:

const { exec } = require("child_process");
const polka = require('polka');
const { json } = require('body-parser');
const crypto = require('crypto')

const port = 12345;
const secret = 'ohreally :)';
const sigHeaderName = 'x-hub-signature-256';
const sigHashAlg = 'sha256';

// Middleware to verify Github "signed" POST request
function verifyPostData(req, res, next) {
  console.log('Verifying signature', req.headers[sigHeaderName]);

  if (!req.rawBody) {
    console.log('Request body empty');
    return next('Request body empty');
  }
  
  const sig = Buffer.from(req.headers[sigHeaderName] || '', 'utf8');
  const hmac = crypto.createHmac(sigHashAlg, secret);
  const digest = Buffer.from(sigHashAlg + '=' +
    hmac.update(req.rawBody).digest('hex'), 'utf8');

  if (sig.length !== digest.length || !crypto.timingSafeEqual(digest, sig)) {
    console.log('Got request with invalid body digest');
    return next(`Request body digest (${digest}) did not match
      ${sigHeaderName} (${sig})`);
  }
  
  console.log('Verification done.');
  return next()
}

polka()
  .use(json({ verify: (req, res, buf, encoding) => {
    // Store raw body data in req rawBody variable
    if(buf && buf.length) req.rawBody = buf.toString(encoding || 'utf8');
  }
  }))
  .get('/', (req, res) => { res.end('Hello, polka!'); }) // just for testing
  .post('/myblog', verifyPostData, (req, res) => {
    console.log('Article repo updated, generating site...');
    exec('~/blog_eleventy/gen.sh', (error, stdout, stderr) => {
      if(error) console.log(`error: ${error.message}`);
      if(stderr) console.log(`stderr: ${stderr}`);
      console.log(`stdout: ${stdout}`);
    });
    res.end(`Hello, Github!`);
  })
  .listen(port, () => {
    console.log(`> Running on localhost:${port}`);
  });

For some reason, my particular configuration had the Github authorization header in req.headers['x-hub-signature-256'] instead of the capitalized X-Hub-Signature-256. Go figure.

Read post

I’ve been occasionally doing backups of critical files to an external hard drive (in addition to cloud of course :). However, my nice portable drive was only 500 GB and lately I’ve pushed over 600 GB with my Nikon D7200 RAW files. Time for a new drive! Instead of boring mechanical, I noticed that the very nice NVME SSD with Adata XPG SX8200 Pro with 1 TB capacity was available nearby for just 140€ (ca. $150)!

Commercial alternatives like Samsung T5 cost around 230€ here, so I thought I’d get one of those M.2 enclosures. Unfortunately, the ones with NVME support started from 50€ up in Finnish web stores.

Ugreen to the rescue

When you have something like M.2 enclosure, you know every manufacturer actually puts Chinese electronics inside. Thus, AliExpress seemed like an obvious destination to check out. I’m bit doubtful to order actual NVME drive (there were some cheap flash drives in the past that did not actually have the reported capacity), the enclosure should be fine.

Enter Ugreen, my favorite in AliExpress store. I’ve purchased several chargers from them, many having QuickCharge functionality, and the packaging, quality and everything are always top notch. Therefore I was more than happy to find a range of NVME enclosures from them for just $15-30:

Ugreen M.2 SSD USB enclosures (from Ugreen product page)

Time to order one! Fast forward 2½ weeks of anxious wait…

Unpacking and installing SSD to M.2 enclosure

I got the NVME model which promised up to 10 Gbit/s data rates, and chose the option with extra USB cable as I don’t have USB-C ports on my MB. The package arrived a bit faster than the promised 21-25 days. See the gallery below for glorious images of various stages of setup.

Read post