Let's be friends

File types, image types, and turning your docs into HTML

Last updated: November 30, 2024

We’ve talked ALL ABOUT how the “Finder” works, and the file-system – and some files – but now that you are an insider (a real text-file interpreter): take a second look at the file-types we’ll be using.

There are a few different image types that all have their own pros and cons.

What are those extensions for? One of them is .html

 

The goals

  1. Loosely discuss the various file types

    .txt, .rtxt, .doc, .gif, .png, .etc There are a lot of file types. Let’s break down why that might be important to the computer.

  2. Go over some trouble-shooting steps

    Sometimes, the Finder gets grumpy. So, if you don’t want to also get grumpy… here are some steps you can take to resolve the problem.

  3. Differentiate the different image types

    Some are made with little squares, and others are made with math. Some can have transparent backgrounds, and some can’t.

  4. Briefly talk about character encoding

    It’s not the most fun subject, but just to mention it a little.

  5. Download a text editor with homebrew

    TextEdit is a brat. But we also don’t want you getting a really fancy, annoyingly visually busy editor yet. So, let’s use BBEdit to start! (and have an excuse to talk about Homebrew)

  6. Build a really really simple website.

    A few HTML elements – and a .html extension, and – here we go! Baby steps.

So many types of files

These days (if it’s not your job) – you can get by without really thinking about “files.”

Chromebooks (Computers running a simplified Google OS – and focused on Google’s “Chrome” web browser) – can really take care of business. The interfaces let you store “Docs,” and other data / and edit them – all while storing all the files on remote servers (the “cloud”) – and you don’t have to think about it. You pay a bill, sign a contract, update your social media, post a blog, and all sorts of stuff – without thinking about “Files.”

BUT – when you are a professional computer person – you’re going to deal with a bunch of different file types.

File extensions

What are file extensions for?

What would the parser/interpreter say?

“chomp chomp… looks like we’re opening a file… says .txt  – must be a text file —

I’ll use the rules for .txt (If I have them) while I parse this file.”

Character encoding

When you hit a key on your keyboard – the key doesn’t know what “letter” or “number” it is. The input goes into the computer, hits the OS, and based on what is mapped to it (based on what program/application is in focus), – it will generate some special identifier – that the computer can understand. Spacebar isn’t a visual  “glyph,” – but it has a special code too.

If you were just starting a computing company… you might think –

So, we’ve got 10 numbers or so… 26 letters… maybe 20 punctuation keys… nowhere near 100. Let’s make the special codes for the keys short – so it will be concise – and easier to reason about.

Let’s make 1 = 1, 2 = 2, and then maybe… A = 11, B = 12

But wait… we also have uppercase A and Lowercase a.

but 99 is enough…

Let’s go with 2-digit codes to represent each character on our computer / and its applications use.

Well, that seems pretty great. But, there was another company that was a little ahead of you and realized they needed more than 99 key codes.

And – at the same time… someone in Japan thought that prefixing the codes with j-001 was even better.

There are also a LOT of characters/letters/numbers and punctuation – if you add up all of them – from all the languages… (because you may want to internationalize your website)

Making your own software is great. You don’t really have to worry about other people…. or rules… but The Web – is a giant “web” of technologies. If you want your code to work everywhere — then you’d better encode your text in a format that is the most widely accepted.

For us, that will almost always be Unicode (UTF-8). But you won’t need to think about it too much.

Finder's corner

You can zoom in a little on the finder list view.

You can also drag the columns around and resize them to create your own view.

Bonus: Get straight on how the various clouds work. What do you want locally only (Desktop/documents/etc.)? What do you want in Drive? What do you want in iCloud? and why?

When the computer doesn't seem to be working right: Troubleshooting

Sometimes the computer gets cranky.

Maybe you have too many applications or tabs open? When was the last time you restarted? Is the battery really low?

Sometimes things just get weird.

Troubleshooting steps

Don’t panic.

  1. Stop the last process

    ⌘  + .

    Might stop the last process – which might be where it’s stuck. It won’t hurt anything, so – just try it. “Halt” operation.

  2. Open up the force-quit window

    ⌘ + ⌥ + ESC

    Will bring up a little window showing the currently open application. One might be stalled out – and needs to be forced to quit.

    But first – try restarting the finder!

  3. Restart the computer

    Try shutting everything down. Quit each application (calmly) one by one – starting with the ones you need open least. (save your work if possible)

    Restart the computer. Maybe it was just cranky. We do make it do a lot of work.

  4. Reset the PRAM

    Restart – and while the screen is black (right away), press and hold this

    ⌘ + option + P + R

    The Mac will make that “Bong” startup sound. Optionally, hold it for 2-3 sounds.

    This will clear out some of the core memory that might have become confused.

    (M1+ Macs do this by default on every restart – so no need to manually do it)

  5. Other situations, ideas?

    Sometimes it just freezes… and you have to hold the power button to make it turn off by force.

    What else? Scenario? Solutions?

Image types

Bitmaps/Rasters: .jpg  –   and .png

Vectors: SVG

Read all about them.

Key
concept

Plain text

A plain text file stores data that represents only characters of readable material but no metadata about the file itself or its formatting (like bold or italics). These files are typically identified by a .txt extension, although other file types (like .html or .css) also effectively contain plain text. The simplicity of plain text files makes them versatile and essential in web development, allowing developers to write and edit code directly. Unlike rich-text formats, plain text files do not include font and color information, making them universally readable by both humans and software across different platforms and environments.

Wikipedia

Key
concept

Rich Text Format

Rich Text Format, commonly abbreviated as RTF, is a file format that allows text formatting such as bold, italics, fonts, and color within documents. Unlike plain text files, RTF files preserve a document’s styling details and can include images and diagrams. RTF files are denoted by an .rtf extension and are supported by many word processors. This format is useful for documents that require more complex formatting than what plain text can offer while still being less feature-heavy and generally more portable than formats like Microsoft Word’s .docx. In web development, RTF files might be used to draft content with basic styling before converting or integrating it into web-friendly formats like HTML.

Wikipedia

Let’s make an HTML page

Skip the formalities for this one.

Also, we’ll be using a few different text-editors throughout the course – but start with good-ol’ TextEdit: the “Notepad” of Mac.

(well… you can give it a shot, but it gave us a lot of trouble) (instead, get a copy of the BBEdit text editor and do it through Homebrew for fun)

A few key settings

TextEdit used to be dead simple.. but now it has rich-text capabilities and it makes writing the standard HTML file page quite a pain!

Since you have a million places to write text – like the “notes” app, for example: let’s remove the bells and whistles.

Set it to just do “plain” text by default.

Remember: ⌘ + comma almost always opens ‘preferences’ for whatever app you are in. :wink

Make sure it stays out of the way!

We’re writing HTML files here, buddy. Stay in your lane!

(Like we said, you can give it a shot, but it gave us a lot of trouble) (instead, get a copy of the BBEdit text editor and do it through Homebrew for fun)

OK LET’S DO THIS

You’re going to take that content you made for your last Google doc about your favorite places and food.

Looks like you’ll need an h1, h2, h3, some paragraphs, an unordered list, and an ordered list.

You can do it!

Either drag the my-thing.html file into the browser or right-click “open with” and choose a browser.

You can save as you go, but you’ll need to refresh the browser to see your updates.

Make sure to empathize with the interpreter/parser’s role!

Newly introduced language features

The Mozilla Developer Network (MDN) is really great. But it’s WAY TOO MUCH information. So, we’re building our own simplified internal glossary. Learning how to read documentation is going to be really important, but you can build up to it. Our collection of language features will seek to collect everything you need to know in the most simple terms and examples. Help us improve it as we go by pointing out anything we’re missing. It’s a work in progress.

  1. HTML element

    Paragraph

    <p>This is a paragraph.</p>

    If you could only have one element, we’d argue that it should be for paragraphs. They’ll break your thoughts up into manageable chunks.

    But what are “paragraphs,” really? It’s contentious.

  2. HTML element

    Headings

    <h1>Heading text</h1>

    You’ll need to organize the text into some formal hierarchy. What is the most important thing? What are the second most important things? Try your best to divorce these from their applied visual styles. They are more of a data structure than a typeface or font weight.

    You’ve got: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> – but if you’re getting to h6, you might be doing something wrong.

  3. HTML element

    Unordered list

    <ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

    This will describe a list of no particular order. By default, it will be displayed as a bulleted list.

    Only <li> can be direct children. Lists and list items are one of the few elements with a direct connection like this. They must work together.

  4. HTML element

    List item

    <ol>
	<li>List item</li>
</ol>

    A list item is the child element of an ordered or unordered list. It can contain anything you like but must be the only direct child element inside a parent list.

  5. HTML element

    Ordered list

    <ol>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ol>

    This will describe a list of meaningful order. By default, it will be displayed as a numbered list.

    Only <li> can be direct children. Lists and list items are one of the few elements with a direct connection like this. They must work together.

Checklist

  1. You know what steps to take if the spinning beach ball comes to town / or an application is no longer responding.

  2. You know the differences between .jpg, .png, and .svg image files.

  3. You built your first website / and if you ran into trouble — you reached out and got help.

Paste without formatting

Universal

⌘+shift+V

When you copy text from rich text or web pages, sometimes formatting code will get carried over with it! This is not awesome (unless you want that). It’s also tricky because you might not know it’s there and then be confused about why it’s behaving strangely.

Also: in many cases, you need to use command + shift + option + V  instead.

Nerd alert

If you want to know a lot more about UTF-8 …

Check out this Computerphile video.
Let's be friends