# File management Folders, names, cloud and zips. Where your files live and what they are called decides how fast you work for the next four years. Multimedia & Creative Technology · 0.0 General · Self-study · version 1.0.2 · 2026-09-30 Tags: productivity Slides: Speaker notes: ## Agenda 1. Why structure: What chaos costs you 2. Files and paths: Extensions, folders, sizes 3. Names: Six rules that hold everywhere 4. Folders: A tree you keep using 5. Cloud: Drive, sync, sharing, backup 6. Zipping: A whole folder in one file ## Self-study: How to work through this *45 minutes, On your own* Count on three quarters of an hour. Half of that goes into the labs, the drill and cleaning up your own drive. 1. Keep your own Finder or File Explorer next to this and apply what you read 2. The name lab and the zip lab are there to play with until you see what happens 3. The sorting drill is at the end, together with two jobs on your own drive 4. Finish with an empty Downloads folder and an empty desktop ## 1. Why structure *You work four years on the same laptop. The first month decides how that feels.* **You put it away once, properly.** Yourself three months from now, with a deadline in an hour. That person has no memory of you dropping the file on the desktop for a second. ### What goes wrong - You spend ten minutes looking for the file you had open yesterday - You hand in report-v3, while v4 was the one that was finished - Your laptop dies and everything was in Downloads - Your teammate gets a folder nobody else understands - Your upload is refused, because 340 MB - The lecturer cannot open your file, it is called something.pages > **Sound familiar?** > > Every year again, and always in the week of the deadline. ### Two ways of working #### Everything in one pile - Downloads grows to 40 GB and never gets emptied - The desktop is covered in icons you stopped reading - Three copies of the same file, no idea which one is current - Search is the only way to find anything back #### One place per thing - Downloads is a waiting room, not an archive - Every file has one place, and you know it - The name says what it is and when it is from - Search gets faster, because your names make sense ### Search does not replace structure *Spotlight and Everything are fast, but they can only find what carries a name that says something.* - **Search by name**: Works straight away when your files are called what they are. Nobody ever finds `Document1.docx` back. - **Search by content**: Finds text in pdfs and documents, but not in your videos, your zips or your exports. - **Knowing where it is**: Zero seconds. You open the folder and there it is, no search box involved. > [!TIP] > Structure and search feed each other. Good names make your results usable, a good folder makes searching unnecessary. ## 2. Files and paths *What your operating system is actually keeping track of for you.* ### A file name taken apart *The name is for you. The extension is for your computer, which picks the program with it.* web-development-report-2026-09-20.pdf The name. What it is, for which course, from when. You pick it, so say something useful. The extension. Three or four letters after the last dot. That decides which program opens, not the icon. ### Turn your extensions on *macOS and Windows both hide them by default. That is the first setting you change.* - **macOS**: Finder, then `Settings`, tab `Advanced`, and switch on `Show all filename extensions`. - **Windows**: File Explorer, the `View` tab, then `Show` and tick `File name extensions`. > [!WARNING] > With extensions hidden you see `invoice.pdf`, while the file is called `invoice.pdf.exe`. That is how half the phishing in your mailbox works. ### A path is a route *Every folder sits inside a folder. The path is the way from the drive to your file, with a separator in between.* ```bash # macOS and Linux /Users/sam/School/2526-sem1/web-development/assignments/exercise-03.html # Windows C:\Users\sam\School\2526-sem1\web-development\assignments\exercise-03.html # Shorter: ~ is your home, the folder with your name on it ~/School/2526-sem1/web-development/assignments/exercise-03.html ``` > [!NOTE] > That path comes back in your terminal, in your code (`src="../img/logo.png"`) and in every error that says a file was not found. ### Absolute and relative *An absolute path starts at the drive. A relative path starts where you are standing.* ```console $ pwd /Users/sam/School/2526-sem1/web-development $ ls assignments notes sources $ cd assignments relative: from where you are $ cd .. two dots: one folder up $ cd ~/Code/portfolio absolute: starts at your home $ open . one dot: the folder you are in, opened in Finder ``` ### Hidden files *Anything starting with a dot gets left out by your system. Inside a project they hold what you need.* | What | Where it lives | What it does | | --- | --- | --- | | `.git` | In every repo | The full history of your project | | `.gitignore` | In every repo | What git leaves alone | | `.env` | In your project | Passwords and keys, never online | | `.DS_Store` | Every folder a Mac ever opened | Icon positions, nothing else | > [!TIP] > Show them in Finder with Cmd Shift ., in File Explorer through `Show` and `Hidden items`. ### How big is big *A thousand times bigger every step. People without a feel for it mail a 2 GB folder to a lecturer.* | Order | Example | Fits in | | --- | --- | --- | | 50 KB | An html page or a cv in text | Just about anywhere | | 2 MB | A photo from your phone | Mail, Discord, any upload field | | 25 MB | A report with a lot of images | The ceiling of Gmail and Outlook | | 500 MB | Ten minutes of 1080p video | A link to Drive, not an attachment | | 20 GB | A folder of raw footage | An external drive | > [!WARNING] > GitHub refuses files over 100 MB. Discord allows 10 MB without Nitro. Big things get shared with a link, not as an attachment. ### What does `..` mean in a path? - A. The folder above - B. The folder you are in - C. Your home - D. A hidden folder **Answer:** A. The folder above Two dots go one level up, one dot is the folder you are standing in. That is why ../img/logo.png works in your HTML: up first, then into img. ## 3. Names *The cheapest investment in your whole degree, and it costs you ten seconds per file.* ### Six rules - Lowercase, always - No spaces, put a hyphen in between: `my-report.pdf` - Only a to z, 0 to 9, a hyphen and the dot before the extension - Dates as `2026-09-20`, year first, always - Say what it is: course, subject, version - Never `final`, `definitive` or `new2` > [!TIP] > **Why this holds** > > These rules work just as well for folders, repos, branches, css classes and urls. You learn them once and use them everywhere. ### Before and after *The same files, once as they arrive and once as they should sit on your drive.* | As you find it | As it should be | | --- | --- | | `Report Web Development FINAL (2).docx` | `web-development-report-v02.docx` | | `IMG_2043 copy.JPG` | `2026-09-20-facade-antwerp.jpg` | | `notes 12-09-2026.txt` | `2026-09-12-notes-git.md` | | `Café menu été.pdf` | `cafe-menu-summer.pdf` | | `Document1` | `programming-principles-exercise-03.md` | ### Why no spaces *To a terminal a space is the end of your argument. To a browser it is a character that is not allowed.* ```console $ cd My Folder cd: string not in pwd: My $ cd "My Folder" with quotes it does work $ cd my-folder no fuss ``` > [!NOTE] > Online every space turns into `%20`. A link to `my cv.pdf` reads as `my%20cv.pdf`, and in a mail it breaks on the space. ### Why year first *Your file browser sorts on text, not on dates. With ISO that sorting lines up with time.* #### The way we write it #### The way it sorts ### Name lab *A name the way it arrives, the rules it breaks, and what it should have been.* ### Keeping versions *Three ways, each for something else. Pick one per kind of work and stick to it.* 1. **Git**: For everything that is code. Every commit is a version with a message, and your drive keeps one folder. 2. **Version history**: For documents in Drive, OneDrive or Docs. The cloud keeps old versions and you can put one back. 3. **v01, v02, v03**: For what you hand in or send on. Numbers with a leading zero, so v10 does not land next to v01. > [!WARNING] > `final` is never final. There is always a `final-really` coming. A number or a date does not lie. ### Which name lasts the longest? - A. 2026-09-20-web-dev-report-v02.pdf - B. Report WebDev definitive.pdf - C. report_final_NEW(1).pdf - D. Document1.pdf **Answer:** A. 2026-09-20-web-dev-report-v02.pdf Lowercase, no spaces, a date that sorts along, and a version number that still holds when another round comes in. ## 4. Folders *A tree you are still using three weeks from now.* ### Same student, two drives #### Downloads as archive #### One place per thing ### Rules for your tree - Three levels deep is enough. Deeper and you lose track - One place per project. No second copy on your desktop - Folders follow the same naming rules as files - A folder per semester, with a folder per course under it - What is over goes to archive, not to the bin - Code sits apart, in a path without spaces and without sync > [!NOTE] > **Why per semester** > > In January you start with an empty folder. Your previous semester stays, but stops getting in the way. ### A structure that works *Three branches on your home: school, code and downloads as the waiting room.* ### Downloads and desktop *These two folders are waiting rooms. Anything sitting there for over a week is in the wrong place.* #### Downloads - Sort by date, newest on top - Whatever you keep gets renamed and moved right away - The rest goes, every Friday - Installers and zips from last month can safely be deleted #### Desktop - Keep it empty apart from what you need today - On a Mac your desktop syncs to iCloud by default - A hundred icons slow you down, also literally at startup - What you put there for a second is still there in June ### Searching without a mouse *Four shortcuts that make opening a file faster than looking for it.* - **Spotlight and Raycast**: Cmd Space on a Mac, type the name, enter. Raycast does the same and remembers what you open often. - **Everything**: On Windows. Searches your whole drive while you type, where the built in search takes a minute. - **VS Code**: Windows Ctrl+P, Mac Cmd+P jumps to any file in your project, even when you forgot the path. - **Terminal**: `find . -name "*.pdf"` searches the folder you are in and everything under it. ### Task: Set up your drive *20 minutes, On your own* Build the structure you will work in for the rest of the year. Starting later costs you twice the work. 1. Make a School folder with a folder per semester, and a folder per course under that 2. Make a Code folder, one folder per project and no spaces in the path 3. Move what you already have out of Downloads and off your desktop into the right place 4. Rename anything that breaks the six rules while you are at it ## 5. Cloud *Google Drive, OneDrive and iCloud all do the same thing. Knowing what, saves your work.* **Sync is not a backup.** Sync keeps two places identical. Delete something here and it goes there too, which is exactly what you do not want from a backup. ### What sync does *A folder on your laptop, the same folder on a server, and a program that keeps ironing out the difference.* 1. **You change**: You save a file in the folder that gets synced. Locally, in your own editor. 2. **The client sends**: The program in the background notices and uploads the change to the server. 3. **Everything else gets it**: Your phone, your second laptop and everyone you share with end up with the same version. > [!WARNING] > That works for deleting too. A file you bin on your laptop is gone everywhere a minute later. It sits in the Drive bin for thirty days, then it is gone for good. ### Sharing without the mess *Most Drive problems are permission problems. Three things tend to be wrong.* | What you pick | What it means | When | | --- | --- | --- | | Viewer | Read and download, nothing else | Sending on something that is finished | | Commenter | Leave comments, change nothing | Asking for feedback on a text | | Editor | Everything, deleting included | Group work | | Anyone with the link | Every person holding the link, forwarded ones too | A submission or a portfolio | | Specific people | Only those accounts, after signing in | Anything that cannot be public | > [!TIP] > Share from your school account with somebody's private gmail and they hit a request screen. Ask for the address they sign in with, that saves three mails. ### A Doc is not a file *Google Docs, Sheets and Slides are not files on your drive. They only exist in Drive.* #### What you have - A link to something that lives in the browser - A 1 KB shortcut if you download it without exporting - Permissions that travel with the link - A version history that keeps everything #### What you need - For handing in: `File`, `Download`, `PDF` - A pdf looks the same for the lecturer as it does for you - A docx when somebody still has to work in it - Check the name of the download, it is rarely right ### What does not belong in a sync folder *Drive and OneDrive were built for documents. For these four things it goes wrong.* - **Git repos**: The `.git` folder changes with every commit. Two machines syncing at once make a mess of it, and git cannot repair that. - **node_modules**: Tens of thousands of small files. Your sync client works for hours and your quota is gone. Leave it out and run `npm install`. - **Databases**: A file that is open all the time gets synced halfway through a write. You end up with a copy that opens nowhere. - **Big video projects**: Premiere and Resolve write to cache files constantly. Keep those local and sync the final export only. ### Files on demand *Drive and OneDrive show everything, but keep only part of it on your drive. Handy, until you are offline.* - A little cloud next to a file means it lives online only - Double clicking downloads it first, which takes a while for a big folder - With "Available offline" you pin something to your drive - On a train without signal that is the difference between working and waiting > [!TIP] > Make the folder of the course you are working on that day available offline. That is one click the evening before. ### Three copies, two media, one elsewhere *The rule of everybody who ever watched a drive die. Cloud on its own does not count as a backup.* 1. **Three copies**: The original and two copies. One copy is no copy the moment something goes wrong while copying. 2. **Two media**: Your laptop and an external drive, or your laptop and the cloud. Not two folders on the same disk. 3. **One elsewhere**: Outside your room. After a fire, a burglary or a stolen backpack that is the one left. > [!NOTE] > Time Machine on a Mac, File History on Windows, and a 2 TB external drive costs less than one resit costs you in time. ### You delete a file from your Drive folder on your laptop. What happens on your phone? - A. It disappears there too - B. It stays, sync only works one way - C. It moves to a backup folder - D. Nothing, until you sync again **Answer:** A. It disappears there too Sync mirrors everything, your mistakes included. The file lands in the Drive bin and sits there for thirty days. After that it is really gone. ## 6. Zipping *One file holding a whole folder, and why that sometimes saves nothing at all.* **A zip is a folder in one file.** Phil Katz came up with it in 1989. The format is older than the web and still sits baked into every operating system. ### What happens when you zip *Three things at once, and all three are the reason you do it.* 1. **All in one**: A hundred files become one file you can mail, upload or send on. 2. **Structure holds**: Folders, subfolders and the paths between them travel along. Unpacking puts everything back where it was. 3. **Usually smaller**: Repetition inside your files gets summarised. Text and code shrink a lot, images and video rarely do. ### Why you zip *Four moments where you need one this month already.* - **Handing something in**: An upload field takes one file, not a folder. Your whole project in one zip, structure included. - **Sending a folder**: Mail cannot send folders. Neither can Discord. Zipping is the only way to keep the layout intact. - **Putting old work away**: Last semester's project as one zip in your archive folder. Takes less room and stops cluttering your tree. - **Making it smaller**: A folder of code and text gets four or five times smaller. Handy for anything just over an upload limit. ### Not everything shrinks *Compression looks for repetition. What is already compressed has none left.* | Kind of file | What it becomes | Why | | --- | --- | --- | | Code, html, css, json | Four to five times smaller | Text is full of repetition | | csv and log files | Up to ten times smaller | The same patterns, thousands of times | | docx, xlsx, pptx | Barely smaller | Those files are zips themselves | | jpg, png, mp3, mp4 | Barely smaller | Already compressed while exporting | | wav, bmp, raw exports | A lot smaller | Untouched data without compression | > [!NOTE] > Zipping a folder of videos gains you nothing in size. You only do it to end up with one file. ### Zip lab *The same folder, a different archive every time. What you take along decides everything.* ### How to make one *A right click is enough. Anyone doing it often uses the terminal and keeps control over what goes in.* #### macOS - Select the folder or the files - Right click, then Compress - You get Archive.zip or the folder name - Rename it to something useful right away #### Windows - Select the folder or the files - Right click, then Compress to zip file - On older versions: Send to, Compressed folder - The name is in edit mode straight away #### Terminal - `zip -r site.zip site` - The r stands for everything underneath - On Windows: `Compress-Archive` - Repeatable, and you see what you take along ### Only what belongs in it *The zip you hand in holds your work, not your working folder. Excluding happens while you make it.* ```console $ du -sh portfolio 312M portfolio $ zip -r portfolio.zip portfolio adding: portfolio/node_modules/... (18400 files) portfolio.zip is 94 MB $ zip -r portfolio.zip portfolio -x "*/node_modules/*" "*/.git/*" "*.DS_Store" portfolio.zip is 2.1 MB $ unzip -l portfolio.zip | head a quick look at what is really in there ``` ### Unpacking *On a Mac a double click is enough. On Windows there is a trap people fall into every year.* #### macOS - Double clicking makes a folder next to the zip - The original zip file stays, that one can go - Check whether it all sits in one folder, or your Downloads fills with loose files #### Windows - Double clicking opens the zip like a folder, but unpacks nothing - Whatever you edit and save in there is lost - Always Extract all first, and only then open > [!WARNING] > A project started from inside the zip cannot find its own files. ### Other formats *Zip is the standard. The rest turns up in downloads, in game mods and in the world of Linux.* | Format | Where you meet it | What you need | | --- | --- | --- | | `.zip` | Everywhere | Nothing, every system has it | | `.rar` | Downloads, mods | Windows 11 handles it, on a Mac The Unarchiver | | `.7z` | Big downloads | 7-Zip or The Unarchiver, compresses hardest | | `.tar.gz` | Linux, servers, releases | `tar -xzf file.tar.gz` | | `.dmg` | Mac installers | A disk image, not an archive | > [!WARNING] > A zip is not private. Without a password anyone reads along, and even with one the file names stay visible. So never put a `.env` in there. ### You zip a folder with 200 MB of video. How big does the zip get? - A. About 200 MB - B. About 50 MB - C. About 20 MB - D. That depends on your internet connection **Answer:** A. About 200 MB Video is already compressed, there is nothing left to squeeze out. You zip it only to end up with one file. To make it genuinely smaller you export again at a lower resolution or bitrate. ### Task: Hand it in properly *15 minutes, On your own* Make a zip of a project you already have, as if you had to submit it today. 1. Give the folder a name that follows the six rules first 2. Leave node_modules, .git and loose video files out 3. Unpack the zip in an empty folder and check that everything is there 4. Check the size, and whether it gets through the upload field of your course ## 7. Practice *One drill, one quiz and twenty minutes on your own drive.* ### Where does this go *Four folders from the structure earlier on. Every file belongs in exactly one of them.* ### Why is `node_modules` better left out of your zip? - A. It is hundreds of MB and npm install brings it all back - B. The code in it is not yours - C. Zips cannot hold folders - D. It breaks the structure of your project **Answer:** A. It is hundreds of MB and npm install brings it all back Everything in node_modules is described in package.json. Whoever opens your project runs npm install and has the same thing in thirty seconds. Sending it along only costs room and time. ### Cheat sheet *The rules of this deck on one screen.* - **Names**: lowercase, no spaces, hyphens in between, date as `2026-09-20`, version as `v02`, never `final`. - **Folders**: Three levels deep, a folder per semester and per course, code apart, archive per year. - **Downloads**: Inbox. Rename and move, or delete. Empty every Friday. - **Cloud**: Sync mirrors your mistakes too. No repos in a sync folder, version history has your back. - **Backup**: Three copies, two media, one outside your room. - **Zipping**: `zip -r folder.zip folder`, without node_modules, checked with `unzip -l`. ### Task: Twenty minutes of cleaning *20 minutes, On your own* Right now, with this deck next to you. The one assignment in this course that pays you back the same day. 1. Downloads empty: everything renamed and moved, or gone 2. Desktop empty, apart from what you have open today 3. Make extensions visible in Finder or File Explorer 4. Check whether your School folder sits outside a sync folder, or inside one on purpose 5. Set up one external drive or a second cloud folder as a backup ### Further *Four things worth the trouble if you take this seriously.* - **Raycast or Everything**: Opening without searching. After a week you will not go back. - **Hazel or Power Automate**: Rules that clean your Downloads folder while you work. - **7-Zip and The Unarchiver**: Opens every archive you run into, free and without ads. - **[johnnydecimal.com](https://johnnydecimal.com/)**: A numbered system for anyone who wants their folders down to the last detail. ## Glossary - **Extension**: The three or four letters after the last dot of a file name, like .pdf. They decide which program opens the file, not the icon. Make them visible, because with hidden extensions invoice.pdf.exe looks like invoice.pdf. (slide 10) - **Path**: The route from the drive to a file, folder by folder, with a separator in between: / on macOS and Linux, \\ on Windows. You meet it in your terminal, in your code and in every error about a file that was not found. (slide 12) - **Hidden file**: A file or folder whose name starts with a dot, like .git, .gitignore or .env. Your system leaves them out. In Finder you show them with Cmd Shift dot. (slide 14) - **.DS_Store**: A hidden file macOS puts in every folder it opens. It holds icon positions and nothing else, so it does not belong in a zip you hand in. (slide 14) - **KB, MB and GB**: Every step is a thousand times bigger. A photo from your phone is a few MB, mail stops around 25 MB and GitHub refuses files over 100 MB. Big things get shared with a link. (slide 15) - **Naming rules**: Lowercase, hyphens instead of spaces, only a to z and 0 to 9, dates with the year first, say what it is, and never final. They hold for folders, repos, branches and urls too. (slide 18) - **%20**: A space inside a url. A link to my cv.pdf turns into my%20cv.pdf, and in a mail it breaks on the space. (slide 20) - **ISO date**: A date with the year first: 2026-09-20. Your file browser sorts on text, and with the year in front that sorting lines up with time. (slide 21) - **Version number**: v01, v02, v03 in the name of what you hand in or send on. With a leading zero, so v10 does not land next to v01. A number does not lie, final does. (slide 23) - **Version history**: The old versions Drive, OneDrive or Docs keep of a document by themselves. You can put one back. (slide 23) - **Sync**: A program in the background that keeps a folder on your laptop and the same folder on a server identical. Deleting gets synced too, which is why sync is not a backup. (slide 34) - **Backup**: A copy that survives when the original is gone. The rule: three copies, on two media, one of them outside your room. Cloud on its own does not count. (slide 39) - **Files on demand**: Drive and OneDrive show all your files, but a little cloud means a file lives online only. With "Available offline" you pin it to your drive. (slide 38) - **Sharing permissions**: What someone may do with a shared file in Drive. A viewer reads and downloads, a commenter leaves comments, an editor can do everything, deleting included. On top of that you pick between anyone with the link and specific people. (slide 35) - **Google Doc**: A document that only exists in Drive, not as a file on your drive. Download it without exporting and you get a 1 KB shortcut, so for handing in you pick File, Download, PDF. (slide 36) - **node_modules**: A folder with tens of thousands of small files, all described in package.json, so npm install brings them back. It does not belong in a sync folder or in a zip. (slide 37) - **Zip**: An archive: a whole folder in one file, structure included. Handy for handing something in or sending it on, and text and code usually get a lot smaller. (slide 43) - **Compression**: Summarising repetition inside files so they get smaller. What is already compressed, like jpg, mp4 or docx, barely shrinks. (slide 45) - **zip -r**: Makes a zip of a folder and everything underneath it in the terminal: zip -r site.zip site. With -x you leave folders like node_modules and .git out. (slide 47) - **unzip -l**: Shows what is inside a zip without unpacking it. Do that before you hand it in. (slide 48) - **Unpacking**: Turning a zip back into a normal folder. On Windows a double click only opens the zip like a folder: pick Extract all first, or you lose whatever you edit in there. (slide 49) - **.tar.gz**: The archive format of Linux, servers and releases. You unpack it with tar -xzf file.tar.gz. (slide 50) ## Links and sources ### In the deck - [johnnydecimal.com](https://johnnydecimal.com/) (slide 58)