DEV Community: Eli

Supporting Apple Devices on the Web...

Eli — Thu, 10 Jun 2021 00:12:51 +0000

I'm a System Admin by trade and Software Developer by heart. I've primarily been focused on system side development and automation. Primarily Python, some Java and a lot of scripting. About a year or two ago I decided to foray into Web Development. Why? It was completely different for me, and why not? All the cool kids are doing it. So I tried React, I did NOT have any Javascript experience and the learning curve was wayyy to steep. I almost stopped doing web side projects because of React (No, I'm not blaming React). React has it's uses but it's not for me (At least right now). By happenstance I stumbled upon Svelte. I felt at home. Everything just made sense for me using the framework. After working with Svelte and actually moving the needle on a side web project or two, at this point I have a much tighter grasp on the front end environment and the entire framework of frameworks. But this post isn't about React or Svelte..... this is much bigger than that.

One of my side projects was trying to conduct webcam capture and making a video stream all client side. Turns out prior to the MediaRecorder API this was done primarily server side? Before full client side support everything was done using WebRTC which from my research requires server side. Which would not fit my requirements. So anywho, I'm an adventurous person, lets go. I develop a sample app using the MediaRecorder API. I primarily use Chrome as a browser so I did all my development based upon Chrome. As soon as I get a prototype I figure it's time to make sure there's cross-browser compatibility. Edge (because it's now based on Chrome engine) worked well, no problems. Then using Safari on my iMac nothing works. So I launch the developer tools and there is no MediaRecorder API, it's undefined. Now mind you, I'm new to web development but I've known there's been some cross-compatability issues, which is why there are polyfills. But this is different. After some research I found this blog post from the WebKit website. Cool hopefully it'll be supported soon? It says that it's in the iOS 14.3 Beta... Wait I didn't even think about mobile.

Now, I borrowed my parents android tablet to test my prototype... it worked. The MediaRecorder API was supported in Chrome on Android. Cool lets try Apple. I tried Safari though I knew it wasn't going to work. It didn't. Though I can turn it on in the Technology Preview Section.... but I wouldn't want my users to have to do that. Then I used Chrome on iOS..... naively I expected this to work. It also didn't. I was taken aback. Time to research again. Turns out Apple forces all browsers on their platform to use the same underlying engine, of which is also based upon WebKit. Great.

Now here's the kicker for me, I have a side project and prototype that I wanted to release and now I'm faced with either dropping support entirely for Apple Safari on desktop and all.. yes all! iOS devices, or at least waiting until the MediaRecorder API is supported and established. Which is who knows when. I can implement a server side capability to bypass this issue, but I don't want to do that and have to manage another thing. I did find an audio polyfill for this, but it didn't support video....

All in all, why does it take so long for Apple to support API's that seem like they should be standard? I already know a lot of the answers....

But, if anyone has any suggestions on being able to accomplish MediaRecorder capabilities without the API please let me know. Or else my side project will just gather dust thanks to Apple.

P.S. I'm an avid Apple user.... and an avid Linux User. I used both my iMac and a laptop running Arch Linux. This blog was written on my Arch machine...

From Ghost Blog to Static Site

Eli — Fri, 21 May 2021 11:07:16 +0000

I've always liked the Ghost Blogging platform since it was released years ago. I like it's editor, CMS, among other things. However, I don't like that I can't host it as a static site (SS). I want to be able to use the like of Netlify, Github/Gitlab pages or any other static hosting provider. I started googling and found Ned's blog post. He explained his requirements which was exactly what I was looking for. He didn't explain everything, but did a good job at the overview, and so I did some of my own edits.

Note: SS version of ghost does remove some features, so check Ned's list to make sure you don't need them. I didn't because I was going for simple, and I mean really simple.

Basically the pipeline for doing a Static Site from Ghost is as follows

Setup a local instance of Ghost (I'm using a container w/ podman
Create the site per your wants
Create a Static Site from the local ghost installation
Host the static site (We'll go over using Github pages, but you could use anything else)

Setting up local Ghost installation

I'm using podman so.... I can get up and running with one command....

podman run -d --name ghost -e url=https://localhost:8080 -p 8080:2368 ghost

Now I can point my browser to https://localhost:8080

Creating your site

Checkout the Ghost docs to set up your site. I'm doing a simple blog using the Attila Theme, modified of course.

Creating the static site

Now this is the bread and butter. There's a nifty npm package called ghost-static-site-generator

(sudo) npm install -g ghost-static-site-generator

That command will install a utility called gssg.

Now gssg will basically go to our local ghost installation and pull down a static version of the site.

Hosting + Git

I'm using github, follow their guide to create a Github pages repo.

git clone <your_pages_repo>

** Edit the Settings for your repo to deploy the /docs folder from your repo

Now we're going to get a static site into /docs.

gssg ---domain "https://localhost:8080" --url "https://eli-xciv.github.io" --dest docs

Now all you need to do is to commit and push the repo to Github and it will publish your static site.

git add . ; git commit -m "First commit of Ghost Static Site"; git push -u origin master

Voila! in a second or so, your static site is hosted on github.io!

Extras

In my repo I've created a script under bin/migrate.sh that will run the migration, and commit it to github in on fell swoop.

#!/bin/bash
printf -v date '%(%Y-%m-%d %H:%M:%S)T\n' -1

gssg ---domain "https://localhost:8080" --url "https://eli-xciv.github.io" --dest docs

git add .

git commit -m "Blog Update: $date"

git push

Finding an Archinstall Bug

Eli — Thu, 20 May 2021 17:05:53 +0000

I had an older laptop that I've been neglecting to reinstall Arch Linux on, and I came across the new Arch Installer (archinstall). So I decided to try it out.

I used the ArchLinux liveCD (About 2-3 months old) and booted it up. Since my LiveCD was not a newer one, archinstall was not available at default. So I updated the repo's with pacman -Sy and lo-and-behold I could install it with pacman -S archinstall.

I ran archinstall guided to get a feel for it and I made it to the partitioning scheme. At which point, archinstall quit stating...

ArchInstall currently only supports machines booted with UEFI. MBR & GRUB support is coming in version 2.2.0!

Great....

So I decided to checkout their Github project to see where they're at and I found

Legacy Support was closed! Okay, wait. Lets go look at it....

Whoooooo, it's in master and should be completed. Lets check it out (literally w/ git).

git clone https://github.com/archlinux/archinstall
cd archlinux

cool we got master, now lets install the requirements.....

python install

Now we can run this with python. python -m archinstall guided

I followed the prompt and this time it didn't complain about MBR. So cool lets select the default partitioning scheme.

...

Great, all config items are set, now let it rip,

Error: New partition never showed up after adding new partition on /dev/sda (timeout 10 seconds).

What!? - Okay maybe it's a fluke, lets run it again.

Same error....

Okay.... well lets look at /dev/sda. There's a partition there but that's from the OS I'm trying to write over.... well lets remove it since it'll be overwritten anyway.. and verify it's removed

$lsblk
/dev/sda
|-> /dev/sda1
$
$parted /dev/sda rm 1
$
$lsblk
/dev/sda

Now lets run python -m archinstall guided again...

Everything completes. Yay! Time to go report this to the archinstall folks.

And I did. Here

So, if there is a will, there's a way!
Thanks for reading!

Dynamic DNS with Netlify

Eli — Sat, 29 Jun 2019 15:56:42 +0000

I purchased a domain for remote access to my home a while ago, but it was just sitting there for about a year. So I decided to do something about it.

Looking at the different dynamic DNS providers, I didn't really like what they offered, or it cost $$. And I'm sort of a cheap-skate. I had used Netlify for a side project and liked what they offer. So I looked into housing my DNS with them. Turns out, most, if not everything they do is available over API. Unfortunately their API spec (https://open-api.netlify.com) didn't have what I wanted. So I went digging

I opened up the Chrome debugger and looked at the network requests that the page was doing to update DNS records, turns out it's pretty simple. The End point for DNS's is

https://api.netlify.com/api/v1/dns_zones/example_com/dns_records

At this end point you can add new records following this convention

{
    dns_zone_id: "11111111111111111",
     errors: [],
     flag: null,
     hostname: "example.com",
     id: "1111111111111111111",
     managed: false
     port: null
     priority: null
     site_id: null
     tag: null
     ttl: 3600
     type: "A"
     value: "1.1.1.1"
}

And to delete a record all you have to do is to send a DELETE request to

https://api.netlify.com/api/v1/dns_zones/example_com/dns_records/<id>

So with this new found knowledge, I wrote some python running as a cron job on my raspberrypi to update my DNS with my home IP. If you want you can check out the code here.

eli-xciv / netlify-dns-client

Netlify DNS Updater

netlify-dns-client

Netlify DNS updater

This is a simple script that you can use to update the 'A' record on Netlify's DNS service.

The primary use for this is running on a raspberry pi (Debian Stretch). It's also only really used for dynamic home IP's. I may try to expand it into a full-fledged client.

Usage

export NETLIFY_API_TOKEN="<YOUR_TOKEN>"
export NETLIFY_URL="www.example.com"
Run the script. You can also run it as cron job.

Future

Expand the client to support more domains other than .com
Add ability for CNAME, MX records etc.
Better usability

Contributions

Fork it
Make changes
Submit Pull Request
I will merge

View on GitHub

P.S. I've been a lurker on dev.to for about a year, and finally decided to write. Hopefully everyone will enjoy this information!