8. Korg and the Art of Web Design

Piss off, ghost!

YouTube still of Korg combined with a screenshot of code.
YouTube video of the might Korg combined with a photo by Markus Spiske on Unsplash

Matt is working his way through HTML & CSS, by Jon Ducket (no affiliation). He learned HTML days back in the early days of the web (around 1999). He wants to give himself a refresher and then learn programming. Want to learn with him? Join our tribe!

Today we look at inserting audio and video into a web page. This is the first time that the book has started to show its’ age. It was very heavy of “flash” as the technology that should be used.

Flash is dead.

It’s been dead for a few years. I wouldn’t develop a page with Flash on it. It would make me look dated. There’s another reason not to use Flash. Your browser might throw an error (if it’s a new browser).

Bunny Trail: Did Apple kill Flash?

When the iPhone came out in 2007 and the iPad came out in 2010, they did not support Flash. I thought it was very odd at the time. I had worked for an advertising agency that built entire websites using Flash. What would they do now?

Apple had a huge share of the market.

When a huge share of the market decides not to use your technology, that’s kind of the end of your technology. In a weirdo alternate reality, Internet Explorer could have been wildly popular. We could all be basing our designs on the whims of Bill Gates.

Is HTML5 a thing?

Up to this point, I had largely glossed over the discussion of HTML5 tags. I didn’t want to break any of my code.

There was a lot of talk in the book about the “new” video tag introduced in HTML5. After the long sections on incorporating Flash into your designs, I started to wonder.

If this book was still going on and on about the wonders of Flash, it might be a little out of date. Up to this point, I didn’t worry about it. HTML is built to be very backward-compatible.

Then I did some more Google searches (Google is becoming my friend). There are ways to use HTML5 in your code while still being friendly to older browsers (I’m looking at you, IE8). You can add some style and some JavaScript for those crunchy people who don’t update things.

Plus, HTML5 is now supported by all modern browsers.

Ok, I’m in. I figured out how to install the required CSS and JavaScript. The JavaScript is an entire folder of code! I thought it would be one snippet and we’re good to go.

File compression? I need to lie down for a moment…

I figured out how to use the GitHub website! I have avoided it all these years because I didn’t git it 🤣 You can download the code you want as a zip file. I just never saw the right button.

I unzipped the file andtried to upload it using File Manager through the Cpanel of my website.

Oh… I guess this is the first time I’ve tried to upload multiple files. File Manager only allows you to upload one file at a time.

No worries. I’m sure someone else has had this issue. I ran back over to Google. There was a lengthy discussion there. When they said “file compression” my eyes glazed over.

Not there yet. Baby steps, y’all.

I understand FTP. I made an FTP account. I downloaded an FTP client for windows (FileZilla) I put the folder on the root level of my sandbox. I changed the code on my page to reference the right URL.

Oooooooh. I see that this could get really messy really quickly. Now I understand why folks put their JavaScripts in a “js” directory. It’s like how I filed everything in an “assets” folder at my old job. I’ll probably store the “js” folder inside my “assets” folder. It’s just another type of asset, after all.

Back to the “video” tag

I started to read the discussion of the HTML5 “video” tag. It was so Flash-heavy that I eventually gave up. I don’t want to waste my time on code I’m not going to end up using.

I also don’t want to host my own video. All of the video I will want to host on a web page will be hosted on another service (YouTube, at the time of this writing). Anyplace I am going to host video will provide the code I need to insert it on my page, right?

I love skipping pages in manuals. Love it. It makes me feel smart.

I went to YouTube, picked a random video, and looked at the “embed” code. I was expecting an expertly-written “video” tag. Instead, it’s an “iframe” tag. Ew.

Remember, I learned HTML in an age that was trying to stomp out the “iframe” tag. It was taken out in the time of HTML4 and put back in for HTML5. As I discussed in my last lesson, there is a time and place for the “iframe” tag if you know what you are doing. I assume the fine folks over at Google know what they are doing.

Feel free the marvel at the hilarity that is Korg over on my sandbox.

If there ever comes a time where I would like to self-host a video on a website, I will revisit the “video” tag for HTML5.

I did skim over how the “object” tag works in case I see it in other code. It looks like this could be important for the future JavaScript lessons. It uses JavaScript to load stuff and swap out stuff.

It will all make sense in the future. I don’t have to know the answer now.

The CSS lessons start tomorrow! Squee!

Thermometer showing the various levels of web developer. My current level is marked (Supreme Kitty)
Image found at
Thermometer Vectors by Vecteezy (customized by author)

Matt is on a noble quest to grow into the next level of web developer. He will be documenting his battles along the way. There will be pain. There will be tears. There may be blisters.

He doesn’t know what he is doing, so he would welcome brave knights on his journey.

You may be a wise, old knight. You already know the ways of the web developer. You won’t be going on my dangerous journey, but you can certainly warn about the pitfalls and the venomous code we will encounter.

You might be a brave, young knight. You don’t know what you’re doing, either. We will learn together.

Join our tribe! Leave me a comment or send me an email.

Let the battle begin! Sign up for the M.W. McCabe newsletter.

Sally forth!

2 thoughts on “8. Korg and the Art of Web Design

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.