DEV Community: Christian Heilmann

Abandonware of the web: did you know that there is an HTML tables API?

Christian Heilmann — Wed, 08 Oct 2025 14:20:09 +0000

When people turn data into HTML tables using JavaScript, they either use the DOM methods (createElement and the likes), but most of the time just append a huge string and use innerHTML, which always is a security concern. However, did you know that HTML tables also have an old, forgotten API? Using this one, you can loop over tables, create bodies, rows, cells, heads, footers, captions an summaries (yes, HTML tables have all of those) and access the table cells. Without having to re-render the whole table on each change. Check out the Codepen to see how you can create a table from a nested array:

let table = [
  ['one','two','three'],
  ['four','five','six']
];
let b = document.body;
let t = document.createElement('table');
b.appendChild(t);
table.forEach((row,ri) => {
  let r = t.insertRow(ri);
  row.forEach((l,i) => {
    let c = r.insertCell(i);
    c.innerText = l;  
  })
});

You can then access each table cell with an index (with t being a reference to the table):

console.log(t.rows[1].cells[1]);
// => <td>five</td>

You can also delete and create cells and rows, if you want to add a row to the end of the table with a cell, all you need to do is:

t.insertRow(-1);
t.rows[2].insertCell(0);
t.rows[2].cells[0].innerText = 'foo';

There are a few things here that are odd - adding a -1 to add a row at the end for example - and there seems to be no way to create a TH element instead of a TD. All table cells are just cells.

However, seeing how much of a pain it is to create tables, it would be fun to re-visit this API and add more functionality to it. We did add a lot of things to HTML forms, like formData and the change event, so why not add events and other features to tables. That way they'd finally get the status as data structures and not a hack to layout content on the web.

A CSS only time progress bar to use in markdown / GitHub Pages

Christian Heilmann — Fri, 05 Sep 2025 06:44:10 +0000

For our weekly WeAreDevelopers Live Show I wanted to have a way to include a time progress bar into the page we show. The problem there was that these are markdown files using GitHub Pages and whilst I do use some scripting in them, I wanted to make sure that I could have this functionality in pure CSS so that it can be used on GitHub without having to create an html template. And here we are.

You can check out the demo page to see the effect in action with the liquid source code or play with the few lines of CSS in this codepen. Fork this repo to use it in your pages or just copy the _includes folder.

Using the CSS time progress bar

You can use as many bars as you want to in a single page. The syntax to include a bar is the following:

{% include cssbar.html duration="2s" id="guesttopic" styleblock="yes" %}

The duration variable defines how long the progress should take
The id variable is necessary to and has to be unique to make the functionality work
If the styleblock is set, the include will add a style with the necessary css rules so you don't have to add them to the main site styles. You only need to do that in one of the includes.

Using the bar in HTML documents

You can of course also use the bar in pure HTML documents, as shown in the codepen. The syntax is:

<div class="progressbar" style="--duration: 2s;">
    <input type="checkbox" id="progress">
    <label for="progress">start</label>
</div>

Don't forget to set a unique id both in the checkbox and the label and define the duration in the inline style.

Drawbacks

This is a bit of a hack as it is not accessible to non-visual users and abuses checkboxes to keep it CSS only. It is keyboard accessible though.
In a better world, I'd have used an HTML progress element and styled that one…

Derpify.js – a tool for these trying times…

Christian Heilmann — Mon, 27 Jan 2025 13:59:51 +0000

As the times we live in demand it, I released Derpify.js. It is an npm package (3 line method) that turns strings into strings that are randomly mixed upper and lower case.

console.log(derpify('All he wanted to say was I love you all.'))

gives you:

ALL hE WANTed to SAY WAS I lOVe YoU AlL.

Get it:

Learning HTML is the best investment I ever did

Christian Heilmann — Wed, 15 Jan 2025 16:16:54 +0000

One of the running jokes and/or discussion I am sick and tired of is people belittling HTML. Yes, HTML is not a programming language. No, HTML should not just be a compilation target. Learning HTML is a solid investment and not hard to do.

I am not alone in this, Wired had a piece on HTML being a programming language and even for RAG training HTML makes a lot more sense than text.

HTML structures our content, makes it easier to index and gives us tons of accessible and easy to use interface elements. And it is straight forward to learn. The syntax is clear and the rules are only a few. And yet, nobody seems to even bother to look those up.

In last week's Bytes newsletter there was a "spot the bug" challenge that looked like this:

<main>
  <form onsubmit="handleSubmit(event)">
    <fieldset>
      <label for="name">Name:</label>
      <input type="text" name="name" value="Tyler"  />
      <label for="age">Age:</label>
      <input type="number" name="age" value="33" />
      <button>Submit</button>
    </fieldset>

  <hr />

  <form onsubmit="handleSubmit(event)">
    <fieldset>
      <label for="company">Company:</label>
      <input type="text" name="company" value="ui.dev"  />
      <label for="employees">Employees:</label>
      <input type="number" name="employees" value="33" />
      <button>Submit</button>
    </fieldset>
  </form>

  <script>
    function handleSubmit(event) {
      event.preventDefault();
      const formData = new FormData(event.target);
      alert([...formData.entries()]);
    }
  </script>
</main>

The bug described was that as the first form wasn't closed, the script got the wrong content. But there is so much more in this small amount of HTML that is wrong, it made me flinch.

Fieldsets need legends

It uses fieldsets without legends - why? The idea of a fieldset is to to group form elements and give that group a name. If you omit the name, all you did was paint a hard to style border around them.

Pointless labels

It uses labels, which is a happy surprise, but fails to connect them to the right form elements. For a label to describe a form element, you need the element to connect to an ID, not a name. A name attribute is not unique, instead it clusters form elements together. So, you could have a few elements with the same name, but you need to have an ID on each to connect it to the label. When the form gets submitted, the names become form data (or URL parameters), the IDs are there for HTML parser internal use. And more. IDs are the few multi-dimensional things on the web, as they can be accessed via the browser (hash at the end of the URL), they connect HTML elements together (a link pointing to it, or a label with for), they are easy to use in CSS and in DOM scripting. One weird thing is that every element with an ID also becomes a global JavaScript hook on the window. This is a convenience method of browsers, not a standard though.

A great example of this is a radio group. I hardly see those in use, but they are a great way to offer a "pick one of many" interface without needing any JavaScript.

Check this Codepen to see a radio group in action.

<fieldset>
    <legend>Record Label</legend>
    <p><input name="recordlabel" type="radio" value="Trojan" id="company1">
    <label for="company1">Trojan</label></p>
    <p><input name="recordlabel" type="radio" value="Epitaph" id="company2">
    <label for="company2">Epitaph</label></p>
    <p><input name="recordlabel" type="radio" value="Hellcat" id="company3">
    <label for="company3">Hellcat</label></p>
    <!-- … -->
</fieldset>

Notice that the name of the ID can be random, but needs to be unique, whereas the name makes sense to be human readable. This is even part of the specification:

Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.

As an extra, activate the Toggle checkbox/radio button to see that simply by changing the type attribute of an HTML input, you can allow users to either submit one or several values. By using properly connected labels, we also allow users to click/tap/hit space on the whole text to select instead of having to hit the small radio control.

HTML was and is fun!

HTML is - dare I say it - fun to me. The reason is that I started a long time ago. Building my first web site instead of creating things with Visual Basic or C builder was amazing. HTML appeared to me all powerful. I didn't have to spend any money, install and understand a development environment. All it needed was an index.html file and writing the code using a text editor that came with the OS. I went to htmlhelp.com and downloaded the HTML spec as a zip and put it on a floppy to look things up. I was only online at work, my home internet connection came a lot later.

Unforgiving browsers

In the early days, making HTML mistakes was a problem as browsers would punish you for it. Netscape would not render tables that weren't closed. And back then tables was the only way to create complex layouts. This was a bad use of HTML as it was non-semantic, but we had nothing else.

Later, when CSS became a thing there was still a lot of interference of HTML in the final product. Whitespace should not make a difference in HTML but it caused a lot of extra space in table cells and with images. The best advice I would give to designers back then that banged their head on the desk was to validate their HTML. The HTML Validator became my power tool to fixing issues for clients.

These days, HTML gathers less interest as with the HTML5 parser, things became a lot more lenient.

A lack of HTML interest and respect

As browsers bend over backwards to fix broken HTML, developers stopped caring about it. If it doesn't break the build, it's less important than getting those JavaScript packages bundled. But this, to me, is lazy development. Why rely on a platform to fix bugs that we could avoid if we put in a tiny bit of effort?

HTML has some exciting new features for us in 2025. A single element could replace a whole component library. Sure, the component might give us more predictable styling and more control. But it also is one more dependency, and could be a security, performance and maintenance issue. An issue we can't fix as we don't control it.

No matter how you create things for the web, the end product will be HTML. Either HTML generated on the server or with JavaScript. With AI search bots not rendering JavaScript yet maybe this is a good time to re-learn what HTML can do for you. It has not let me down in over 25 years, whereas lots of other "magical solutions" did.

trimMiddle() - the missing String trim method

Christian Heilmann — Fri, 03 Jan 2025 15:37:01 +0000

One of the cool features of MacOS' Finder app is that it does not trim file names that don't fit the space at the end, but in the middle of the file name. This does make a lot more sense, as it also shows what format the file is.

Neither JavaScript nor CSS have a method for that kind of functionality at the moment (although there is a CSS discussion on the matter), so I thought I write one. I give you trimMiddle() as an addition to trimStart and trimEnd.

You can find it:

On NPM: https://www.npmjs.com/package/trimmiddle
On GitHub: https://github.com/codepo8/trimMiddle

and you can play with the demo page to see it in action:

To use it in your own products, either use npm -i trimmiddle or use the client-side version via unpkg.

<script src="https://unpkg.com/trimmiddle@0.1.0/clientside.js"></script>

The method allows you to define the amount of letters you want to show and what the character in between the parts should be. Default is 16 characters and the ellipsis character. The script uses the Intl.Segmenter API when the string is longer than the character limit, which means that it also works with strings containing compound Emoji. The normal split or substring methods fail in this case.

What’s your excuse for not using the web share API?

Christian Heilmann — Sat, 16 Nov 2024 11:48:45 +0000

The WebShare API is so easy to use, it is a crime people don't use it more. Instead, we have tons of dead "share on $thing" buttons on the web. Many of which spy on your users and lots of them that started as Wordpress plugins but now are security concerns. Instead of guessing how your visitors want to share the current URL or a file you provide, you can call the API and they can pick their favourite:

This is the code and you can also check it on codepen:

let shareButton = document.querySelector('button');
shareButton.addEventListener("click", async () => {
  try {
    await navigator.share({ title: "Example Page", url: "" });
    console.log("Data was shared successfully");
  } catch (err) {
    console.error("Share failed:", err.message);
  }
});

An empty url means the current document is shared. You can also add a different title, which makes more sense than "Example page".

httpstat.us is a great service to test your APIs and scripts

Christian Heilmann — Fri, 15 Nov 2024 13:30:06 +0000

Just discovered https://httpstat.us which returns a HTTP response you request. You can request by number, like:

https://httpstat.us/404

Randomly from a range and/or list:

https://httpstat.us/random/400-410,202,200

And you can set a timeout in ms:

https://httpstat.us/200?sleep=3000

Movie industry facts

Christian Heilmann — Sat, 05 Oct 2024 17:51:20 +0000

const Marvel = ['Lights','Camera','Action'];
const DC = Marvel.slice(1);

Quick tip: using flatMap() to extract data from a huge set without having to write a loop

Christian Heilmann — Fri, 06 Sep 2024 12:00:34 +0000

I just created a massive dataset of all the AI generated metadata of the videos of the WeAreDeveloper World Congress" and I wanted to extract only the tags.

The dataset is a huge array with each item containing a description, generated title, an array of tags, the original and their title, like this:

{
  "description": "The talk begins with an introduction to Twilio…", 
  "generatedtitle: "Enhancing Developer Experience: Strategies… ",
  "tags": ["Twilio", "DeveloperExperience", "CognitiveJourney"],
  "title": "Diving into Developer Experience"
}

What I wanted was an alphabetical lost of all the tags in the whole dataset, and this is a one-liner if you use flatMap():

data.flatMap(d => d.tags);

You can sort them alphabetically with sort():

data.flatMap(d => d.tags).sort();

And you can de-dupe the data and only get unique tags when you use Set():

new Set(data.flatMap(d => d.tags).sort());

You can try this in this codepen.

No more "Expert, Intermediate, Beginner": Classifying talks in Call for Papers/Conference agendas

Christian Heilmann — Fri, 06 Sep 2024 05:55:08 +0000

I am currently working on creating the new Call for Papers for the next WeAreDevelopers World Congress and one of the feedback items we got was that levels like "Expert, Intermediate and Beginner" don't make much sense. First of all, speakers do not choose the right level as they are worried that a beginner or expert talk will not attract enough audience. Secondly, attendees might feel peer pressure to not watch the "beginner" talk, as that might be more suited to be a workshop.

So I thought that instead of levels, I ask speakers for classifications:

Case Study - "How we use Kololores.js in company Blumentopferde and how it made us 30% more effective"
Deep Dive - "Looking under the hood of Kokolores.js and why it works so well"
Technology Introduction - "How Databaserandomising will change the way you think about structured databases"
Tool Explanation - "Taking the pain out of Kokolores.js with Pillepalle - a visual interface and API to get you started quicker"
Thought Piece - "Kokolores.js isn't the answer - we need to approach this in a different way"
Expert Advice - "How we scaled Kokolores.js to 231242 users and what to look out for"
Level Up - "So you started using Kokolores.js - here is how to become more efficient with it"
Learnings - "How we got rid of Kokolores.js and what it meant for our users"
Creative - "Did you know you can use Kokolores.js to do Pillepalle?"

This should make it easier for audiences to pick a talk without having to value themselves. What do you think?

The best carb.js

Christian Heilmann — Tue, 03 Sep 2024 13:03:29 +0000

Array.from(+{}+'')
    .map((_,$)=>$>=1?_.repeat(2):_.toLowerCase())
    .reverse().join('')
.slice(1,5);

How we edited 175 conference videos in 5 hours

Christian Heilmann — Mon, 19 Aug 2024 07:40:49 +0000

Every year after the WeAreDevelopers World Congress is over, we have a ton of video footage to edit and release. Most of it is in raw format and needs editing by hand, but a lot of our sessions are also streamed live on YouTube and thus easier to re-use. This year, these were 175 talks, panels and keynotes. My job was it to find a way to edit their start and end times, add an intro and outro video and extract the audio for caption generation.

Last year this took a few months. This year, the conversion bit was done in about 5 hours. How? By using the power of … PHP!

For the impatient: here is the script you can also run. But let's step back a bit into what the task was and how we approached it.

The Setup

Here are the things we used to batch convert the videos in that amount of time:

1 Mac Mini M2 16 GB
Google Sheets
PHP / HTML / CSS / JavaScript
Terminal
Google Drive
yt-dlp
ffmpeg

Step 1: Get and clean the data

The first step was to take a look at what we have. The third party tool we use to track all sessions at the event is Swapcard, and whilst they provide an API, it seemed faster to do a full export of the data into a spreadsheet. Alas, that wasn't that easy as there had to be two separate sheets. Information about all the sessions and information about all the people (including speakers). The data was a lot more than we needed for this purpose, and it was messy, mixing upper and lower case and having HTML in the descriptions.

The items I needed was:

The Title of the talk
The Description of the talk
The Time and Date to cross-refernce with the conference schedule
The YouTube ID of the stream
The Unique ID of Swapcard of the item to cross-reference with the speaker sheet.

Also, I am terrible with Excel, so the first thing I did was import the sheet into Google Sheets. There I deleted all the cruft I didn't need by column and all the sessions that did not have a YouTube ID. This gave me a much smaller dataset and what's really cool about Google Sheets is that you can share a sheet in TSV format as a URL. Go to File > Share > Publish to Web, select "Tab separated values" and you get a URL you can use.

Tab separated values, makes more sense than CSV (comma separated values) in my book. With CSV exports, you always have the issue that values that do contain commas (like the title and description) will have quotes around them and each quote inside them needs to be proceeded by a backslash. With tabs, you do not have those issues.

That way I could cut down the dataset and use it in my own scripts. You can try this yourself, in this Reading Google Sheet as TSV CodePen. The sheet itself is available here.

In JavaScript:

// TSV to JSON
let url = 'https://docs.google.com/spreadsheets/d/'+
          '1DCOd7LLkYxW7VOzjvxuovMCKElB4g_233h7WIvAuuxM/'+
          'pub?output=tsv';
// get the sheet as TSV          
fetch(url).then(response => response.text()).then(text => {
    // split at line breaks
    let lines = text.split('\n');
    // get header data of first line and split at tab
    let headers = lines[0].split('\t'); 
    // delete first entry (headers)
    lines.shift();
    // replace each line with the data stored in it
    lines = lines.map(line => line.split('\t'));
    // start dataset
    let dataset = [];
    // iterate over lines and assemble named objects
    lines.forEach(data => {
        let dummyobj = {}
        data.forEach((item, i) => {
            dummyobj[headers[i].trim()] = item.trim();
        });
        dataset.push(dummyobj);
    })
    // get glorious JSON
    console.log(JSON.stringify(dataset));
});

In PHP:

<?php
$url = 'https://docs.google.com/spreadsheets/d/'.
'1DCOd7LLkYxW7VOzjvxuovMCKElB4g_233h7WIvAuuxM/'.
'pub?output=tsv';
$data = file_get_contents($url);
$list = explode("\n", $data);
$keys = explode("\t", $list[0]);
array_shift($list);
$dataset = array();
foreach($list as $l) {
    $row = explode("\t", $l);
    $n = array();
    for($i=0; $i<count($keys); $i++) {
        $n[trim($keys[$i])] = trim($row[$i]);
    }
    array_push($dataset, $n);
}
echo json_encode($dataset);
?>

This gave me almost all data, but I had one thing that was missing: the correct start and end times of the videos. The streaming recordings had all kind of introductory videos, sometimes started in the middle of a break and showed the recorded Q&A after the talks. All of which I didn't want. What to do?

Step 2: Build a crowd-sourcing interface (of sorts)

Easy, use the power of having access to colleagues. Using the above live data from the Google Sheet, I embedded the sheet in an HTML document and offered links to the videos. I then asked colleagues to put their names next to the video and check it. Once they found the start and the end of the video, they entered it into the sheet and that would remove it from the list. Here is what that looked like (slightly sped up):

The main stumbling block I found is that you can't just embed a YouTube video by changing the src of an iframe but you need to use the youtube embed API instead. You can see this in action in this demo codepen.

My colleagues came through like troopers, and two hours later I had all the start and end times in the spreadsheet. Once I had that, I could move on to the batch conversion.

Step 3: Pull in the timing data and batch convert the videos

In order to get the videos from YouTube, I am using yt-dlp, basically YouTube-DL with a few more features.

Once installed, you can go to the Terminal and call yt-dlp with a valid YouTube ID. For example:

$ yt-dlp pOVduya8ytU

This is a pretty chatty experience, as yt-dlp tends to over-report:

This gave me the full video on my hard drive. There is also a feature in yt-dlp to download a certain time segment of a video but it seemed unreliable and I also have to use ffmpeg to add intro and outro videos in any case.

There were a few other niggles with this. First of all, the file name is terrible, often full of special characters and contains the YouTube ID. You can work around that by asking yt-dlp to use another file name:

yt-dlp --output simpler.mp4 pOVduya8ytU

As I wanted the original file name though to clean it up, I asked to return that one:

yt-dlp --print filename pOVduya8ytU

The next issue was that YouTube are clever clogs and always give the best format in terms of speed, size and performance. So quite a few of the videos were MKV with WebM video and Opus Audio. For the cleanup of the audio and to add my own intro and outro videos I did need MP4 and M4A files though. There is an option to force that, so I used this one:

yt-dlp --output cleanedname.mp4 --merge-output-format mp4

That got me something to work with. Next I had to cut out the video segment I wanted. Using ffmpeg, this is pretty straight forward. For example, to get the video between second one and second two, it is:

$ ffmpeg -ss 00:00:01 -to 00:00:02 -i myvideo.mp4 -c copy partvideo.mp4

However, if yt-dlp was too chatty and flooded the terminal with messages, ffmpeg is a whole other level of screaming. You can make it be less annoying by setting the log level to only show errors:

$ ffmpeg -hide_banner -loglevel error

Now it came to adding the intro and outro files. The niggle I found was that some of the videos were 1920 × 1080 and others 1280 × 720 which meant I had to use different intro and outro videos. To get the size of a video file, you can use ffprobe which is part of the ffmpeg install.

ffprobe -v error -select_streams v -show_entries stream=width,height -of csv=p=0:s=x video.mp4

OK, I forced the mp4 format and I know the video size. Adding intro and outro video was the next step. This is a tad more involved ffmpeg sourcery and I am big enough to admit that I just looked that up on the web:

$ ffmpeg -i intro.mp4 -i video.mp4 -i outro.mp4 -filter_complex "[0:v] [0:a] [1:v] [1:a] [2:v] [2:a] concat=n=3:v=1:a=1 [v] [a]" -map "[v]" -map "[a]" " final.mp4

The last bit then was to get the audio stream of the video, which is a lot more straight forward:

$ ffmpeg -i movie.mp4 -vn -acodec copy audio.mp4

The wonderful thing about PHP is that you can run any other shell tool using the exec() command. Which brings me to the final script I ran in a folder to get all the videos and convert them:

<?php

// replaces non-valid chararacters in filenames
// converts spaces to hyphens
// removes leading and trailing hyphens
// and capitalizes the first letter of each word
function converfilename($name) {
    $name = str_replace([
         "?", "[", "]", "/", "\\", "=", "<", ">", 
         ":", ";", ",", "'", '"', "&", "$", "#",
          "*", "(", ")", "|", "~" 
    ], "", $name);
    $name = preg_replace("/[\s-]+/", "-", $name);
    $name = trim($name, ".-_");
    return ucwords($name);
}

function convert($id,$start,$end,$uid){
    // Get the YouTube ID and remove share links.
    $id = preg_replace("/\?share.*/","",$id);
    $uid = str_replace('==','',$uid);
    // Set the ffmpeg log level.
    $tool = 'ffmpeg -hide_banner -loglevel error ';

    // Get the video file name.
    $cmd = "yt-dlp --print filename '$id'";
    $name = exec($cmd);
    $name = preg_replace("/\..*$/",".mp4",$name);

    // Convert the filename to a valid format.
    // Create a folder for the video 
    // and move into it.
    $dirname = converfilename(
               str_replace('.mp4','',$name)).
               '---'.$uid;
    $name = converfilename($name);
    mkdir($dirname);
    chdir($dirname);

    // Get the video from YouTube.
    echo "\n\n*** Getting ".$name." *** \n\n";
    $cmd = "yt-dlp --output '$name' "
           "--merge-output-format mp4 '$yt$id'";
    $x = exec($cmd);

    // Check if the video is small or big and define
    // intro and outro video names accordingly.
    $cmd = "ffprobe -v error -select_streams v ".
           "-show_entries stream=width,height -of "
           ".csv=p=0:s=x '$name'";
    $size = exec($cmd);
    echo '*'.$size.'*'."\n";
    $small = strstr($size, '1280') ? '-small' : '';
    $intro = "../Intro$small.mp4";
    $outro = "../Outro$small.mp4";

    // Get the part of the video from start to end. 
    echo "\n\n*** Getting clip from $start to $end *** \n\n";
    $chunkname = preg_replace("/\.mp4$/","-clip.mp4",$name);
    $cmd = $tool."-ss $start -to $end -i '$name' -c copy '$chunkname'";
    exec($cmd);

    // Add intro and outro videos
    echo "\n\n*** Adding intro and outro *** \n\n";
    $introname = str_replace('-clip.mp4','---'.$uid.'.mp4',$chunkname);
    $cmd = $tool."-i '$introname' -vn -acodec copy '".
           str_replace(".mp4",".m4a",$introname)."'";
    exec($cmd);
    // Delete old part of the video.
    unlink($chunkname);

    // Extract audio from the video.
    echo "*** Extracting audio from ".$name." *** \n";
    $cmd = $tool."-i '$introname' -vn -acodec copy '".str_replace(".mp4",".m4a",$introname)."'";
    exec($cmd);
    // Go back up one level.
    chdir('..');
}

// Get all the timings.
$timings = file_get_contents('timings.tsv');
$lines = explode("\n",$timings);

// If you only want to convert a few
// videos at a time, you can slice the 
// array like this:
// $lines = array_slice($lines,148,10);

// Loop through all timings and convert
// each video to a clip.
foreach($lines as $i => $l){
    echo ($i+1)." of ".sizeof($lines)."\n";
    $chunks = explode("\t",$l);
    $id = $chunks[6];
    $start = '0'.$chunks[1];
    $end = '0'.$chunks[2];
    $uid = $chunks[7];
    echo $chunks[3]."\n";
    echo ($id.'-'.$start.'-'.$end.'-'.$uid)."\n";
    convert($id, $start, $end, $uid);
}
?>

It's not pretty, it's not clever or suave. But it really did the job. I ended up with a folder full of videos all having the unique ID as part of the folder name.

The biggest time spent was the re-encoding with intro and outro. The rest is almost instantenous as ffmpeg makes copies for the other actions. One thing I also really like is that yt-dlp recognises when a video has already been downloaded and will skip the new download.

Using more PHP script work, I merged the two TSV files and created a dataset of all the talk information. But that's the topic of another post - if you want.