Terminology: file extension vs file type vs file format
I admit, as a computer user of over 27 years, I never really thought about the distinction of file extension VS file path VS file format. I had to do the adult thing: admit I didn’t know, and google the answer.
The file extension is the word after the “.”, like .jpeg, .png, or .pdf. we will define these and others soon, but know that each extension has a specific advantage, disadvantage and program that can open it.
Some people also call this the file type, and in my research file type and file extension both seem to mean the same thing. If anything, file extensions seem to determine file types. If you found a significant difference, leave it in the comments! If I end up using these terms interchangeably in this article, sorry in advance!
There are so many file extensions, and I simply can’t define them all. But I did want to go over some of the ones I have come across. I used fileinfo.com to define these extensions, and found it a helpful resource. Note, these extensions seem to be case sensitive, but I use OSX. While unlikely, perhaps your OS(operating system) has different rules!
.rtx
A rich text document(contains bold characters, underlining, and other text formatting). Can usually be opened by the system text editor or word processor.
.doc
Microsoft’s (legacy) file extension, created either created by Microsoft Word or another word processing program(like Apple pages). Just another text file really, although this format may also contain fancy text like tables, charts, and images.
.docx
Similar to .doc except a more modern format. The data is stored in the Open XML format. Unlike .doc which stores the document data in a single binary file, .docx files save data as separate files and folders in a compressed zip package.
.gif(graphical interchange format)
The .gif extension has an extensive color palette, allowing for up to 256 indexed colors. This palette can be predefined or adapted to the colors form the image.
What is cool about this format is that it is lossless, as compression does not degrade image clarity.
.png(portable network graphic)
Another lossless format, the .png format is similar to the .jpg(which is lossy!) but supports transparency. Along with jpeg, it is a raster graphic: a way to represent a 2D image as a rectangular matrix or grid of square pixels, viewed on some display medium. In our case, a computer screen.
.jpg/.jpeg
The variation in name exists for historical reasons that wont be discussed here, but .jpg is the modern spelling. This is a raster graphic used to store digital photos and other graphics created by image-editing software.
This format is lossy(some image quality is lost) but the upside is size reduction and support of up to 16,777,216 colors.
.pdf(portable document format)
Created by Adobe Acrobat (or another PDF application), this platform-independent document is used to save documents(usually from an existing document, like a web document for example) and publications.
This format is flexible and can be viewed from multiple platforms(iphone, desktop computer, smartwatch, whatever!)
.tiff(tagged image file format)
A graphics container that uses the tagged image file format to store raster images. It supports lossy and lossless compression.
.psp(PaintShop Pro Image File)
psp is a type of native Paint Shop Pro format. It is a type of color bitmap image(images are created by arranging a grid of differently colored pixels).
.bmp(bitmap image)
bmp is an uncompressed image that is saved as a bitmap raster image developed by Microsoft. Commonly used to save digital images, it contains info on metadata as well as support for monochrome and color images.
.eps(encapsulated postScript file)
This is a vector (an image that uses mathematical formulas to plot points on a grid) file saved in the EPS format. Used for the scaling of high-resolution images, the .eps file extension may contain bitmap, image data and text.
eps files also a low-resolution embedded bitmap version of the image for previewing purposes.
.ai(Adobe Illustrator Artwork)
ai is a vector graphic saved in the Adobe Illustrator Artwork (AI) format. it is either generated by Adobe Photoshop or Adobe illustrator. because they are in a vector format, they can be enlarged indefinitely without a loss in image quality.
.heic(High Efficiency Image Format)
Sometimes saved as .heif, this is a format commonly used by the Apple iPhone or iPad(as you’ll see discussed below) to save photos. It also contains metadata describing the image
Now that we got some file extensions out the way, let’s discuss the file format. The file format is more of a data structure. It determines how (permitted values, rules of syntax, just like a programming language) the data is stored in. Mp4 is the file type, but it is a video file format.
As Web developers, we come into many different types of files. On a good day, we recognize the file extension and have the proper program to open the file.
On a bad day(first-world problems), we need to download a program that can understand and manage the file. For example, if you have a .zip file and don’t have WinZip.
Or we may have to use a program to change the extension of the file into a familiar extension that our program can understand(example below). Let me give you an annoying scenario that I frequently find myself in.
Recently I decided to change my GitHub photo. Little did I know that the website only accepts a small range(3) of file types. Because I have an Iphone, a lot of the photos it takes seems to be in the .heic file type.
Since I had run into this problem numerous times before, I knew what the solution is. Just convert the .heic to .jpg or .png. To do this, I just import the file into iMazing HEIC converter.
That’s all it took! It is pretty normal for websites to restrict certain file types, usually due to security or file sizes. But there are ways around this, and the developer (or user) must adjust(or end up as a faceless avatar).
Google Docs: an intro to HTML?
Web applications like Google docs (and substack) have their own typography system. This allows for clear hierarchy(separation of heading from body copy), and text formatting, like lists, bold text, and links. What if I told you that this is just an abstraction of HTML and CSS?
As part of a PE assignment, we were tasked with creating a simple document. The content was just about our favorite places and food. I created a google docs, here it is
Are you seeing any visual patterns? I see large headings relative to smaller body content. I also see bold text, emphasized text, list items(ordered and unordered). Some of the list items are even nested. As I mentioned before, these are all abstractions of what HTML and CSS do. So let’s recreate this google doc using HTML
Us PE students were challenged to use textEdit(along with configuring the settings so HTML wont display as formatted text), the editor that comes with Mac. However, admit I cheated. I used sublime text, as I have a plugin that makes it easier to type out the HTML.
While we are discussing text content, it is worth noting that I didn’t just type all the words over again, instead opting to copy and paste (command + v). In certain environments(like substack) when you do this, some formatting code will get carried over into where you are pasting the text.
To avoid any confusion, to paste without any formatting just use either of the following shortcuts:
command+shift+option+Vcommand+shift+V(I prefer this one, but apparently it doesn’t always work. int hat case use the first one).
OK, back to the code. Here is the Google Doc as HTML:
<h2>My daily ritual</h2>
<ul>
<li>Go to bed
<ul>
<li>At a reasonable time!</li>
</ul>
</li>
<li>wake up
<ul>
<li>At a reasonable time!</li>
</ul>
</li>
<li>Get some exercise and sunlight
<ul>
<li>But eat before leaving the house</li>
<li>Call a friend</li>
<li>Walk for atleast an hour</li>
</ul>
</li>
<li>Post my standup</li>
</ul>
This code is in a text file called index.php in a folder called my-first-website. If this is your first time seeing HTML before, don’t worry. Just know that each <element></element> used here has an opening and closing tag.
Inside them are children elements. Elements get default styles applied to them by the browser, which is beyond the scope of this post but is important for you to understand. This is why it is possible for the text to look like this when opened in a browser.
Managing files when things go wrong
Whether you’re a Web Developer or regular mortal, sometimes your computer is just acting weird. It helps to understand why this happens and the steps to take to resolve it and bring the computer back to baseline functionality.
When your computer is slow, ask yourself
How many tabs are open
I can’t tell you how many is too many, as that varies with the capabilities of each computer(CPU, ram, and other factors). Just know with each open tab, your computer takes a performance hit, and that adds up.
Is your battery low?
Pretty self explanatory, and similar to above I can’t define low for you. My guess? less than 20-30%.
When is the last time you restarted your computer?
Just like how humans need rest, so do computers. You should restart or shut off your computer every once in a while. With the older Macbooks without the M1 chip, you should also reset your PRAM (a special type of non-volatile ram that remembers what is stored in your computer even if the battery dies.)
To reset your PRAM, when you restart your computer and the screen is still black, type the following shortcut:
⌘ + option + P + R. For best results, hold this for 2-3 seconds.
Halt the last process. Maybe the last program or other operation you did on your computer is taking too long. Halt the last process by typing
⌘ .Force quit applications
This brings up a window that lists all the applications you have open. If an application isn’t responding, you will see a message in red indicating that. To bring up this window, type
⌘ ⌥ ESC.
In conclusion
Can I offer a PNG in these trying times? It’s not often I’m at a loss for how to end a blog post, but well… This one took me waaaaaaay too long to write, mostly due to me getting lost in file extension hell! We certainly discussed a lot, from file formats, file extensions to different image types to basic HTML.
As always, let me know if I missed anything (or got something wrong, like that would ever happen, hah!) I know this was a long one, but I hope you learned something. Thanks for reading :)