Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions pages/notes.html
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,64 @@ <h4>High-Performance Data Center Networking Design</h4>
</a>
</div>
</div>
<!-- Notes Card 5 -->
<div class="notes" style="position: relative;">
<h3>Code Courts and Copyleft</h3>
<h4>The history of UNIX, POSIX, BSD, and GNU/Linux</h4>

<p class="description">
<br>
<strong>The UNIX and Pre UNIX Era:</strong><br><br>
Before UNIX, IBM Mainframes dominated computing. Their operating systems were written in Assembly, locking software to specific hardware. In 1969, Ken Thompson and Dennis Ritchie at AT&T Bell Labs challenged this by developing UNIX on a discarded PDP-7. In 1972, Ritchie created the C programming language to solve the problem of hardware lock-in. Because UNIX was rewritten in C, developers could simply <strong>recompile</strong> the C code for other hardware. While they built the core kernel and file system, their manager, Doug McIlroy, also pushed them to include a feature that allowed programs to be coupled together. His vision inspired the UNIX philosophy: “Write programs that do one thing and do it well”</strong>. The result was that in 1972, Thompson implemented the <strong>pipe() system call</strong> and the famous <strong>'|' symbol</strong>, which is still used today. Before pipes, developers manually passed data between programs using disk. Pipes were revolutionary since they kept results in memory.
<br><br>
While the technology was impressive, due to a <strong>1956 antitrust ruling</strong>, AT&T was legally classified as a telecommunications monopoly and as such was prohibited from operating in other businesses like computers or software. Since AT&T could not sell UNIX, they distributed it to places like academic institutions under a license. They shared the compiled software (UNIX OS), and the <strong>source code (C files)</strong> that built it. This allowed a generation of people to not just use the OS, but to open it up, study it, and modify it.
<br><br>
<span class="sidenote">You might think, if it were under a license, then weren't they in the software business? To stay legal, AT&T charged what they called <strong>"Nominal Fees."</strong> They told the government that they weren't selling UNIX, they were simply charging the universities for the cost of the physical tape, the box it comes in, and the postage to mail it. Because they weren't making a "profit", they weren't technically "in the business".</span>
<br><br>
<strong>The Introduction of the Berkley Standard Distribution:</strong><br><br>
One university that had access to this software and its source code was UC Berkeley. A graduate student named <strong>Bill Joy</strong> (who later co-founded Sun Microsystems) took this code and started adding new features like the <strong>“vi” text editor</strong> and the <strong>“cshell”</strong>.
<br>
<br>
<span class="sidenote">At the time, UNIX ran on the Thompson shell 'sh'. The Thompson shell didn't have scripting features like if statements or loops; these were added in the cshell. </span>
<br>
Under a contract from <strong>DARPA</strong> - the government agency that created the TCP/IP standard - Bill Joy and those he worked with were tasked with building the TCP/IP networking standards directly into the UNIX operating system. Their work created the <strong>socket() API</strong>. Historically, if you wanted computers to talk to one another, you needed to pay for proprietary software, which oftentimes only worked with communicating between that specific companies machines. This new "fork" of the UNIX Operating System became known as the <strong>Berkeley Software Distribution (386BSD)</strong>. Its portability, no cost for entry, and ability to connect to other machines made it immensely popular.
<br><br>
In 1982, the era of open collaboration abruptly came to a halt, however. In an effort to crack down on monopolies, the government broke up AT&T into 7 parts. The original AT&T company, having been broken up, was now finally allowed to enter the computer and software businesses. Seeing the value of what had been built with UNIX, AT&T declared it a <strong>"trade secret"</strong>. Consumers now needed to purchase <strong>System V</strong> in order to use UNIX and they were no longer able to share it with others. In response to AT&T, the Bil Joy and the Berkeley team began a coordinated effort to remove proprietary AT&T Unix code from BSD by rewriting each component with their own original implementation.
<br><br>
<span class="sidenote">This rewrite became the foundation for three major BSD derivatives: FreeBSD (1993) for PC stability, NetBSD (1993) for extreme portability, and OpenBSD (1996) for a "security-first" focus. </span>
<br>
While different BSD versions were gaining traction, it was soon met with litigation. AT&T sued the University of California, claiming that parts of BSD contained stolen "trade secrets". As part of the lawsuit, BSD suffered slower development and widespread hesitation from companies and developers who feared legal risk.
<br><br>
<strong>POSIX and GNU:</strong><br><br>
While the Berkeley Team was working on BSD and its derivatives, <strong>Richard Stallman</strong>, a staff Programmer at the MIT Artificial Intelligence Laboratory, began building the <strong>GNU Project</strong>. GNU, which stands for <strong>GNU's Not UNIX</strong> was focused on making proprietary software obsolete.
<br><br>
When Stallman started the GNU Project in 1983, he didn't have a free operating system yet. To write code for a new system, you need an editor, a compiler, and a debugger. Since he didn't have free versions of these yet, he had to use the proprietary UNIX systems available at MIT to write the GNU tools. GNU tools were written to be Unix-compatible and later aligned with the emerging <strong>POSIX standard</strong>. POSIX is a set of formal standards created by IEEE in the 1980s to define how "UNIX-like" Operating Systems should behave. It specifies the system calls, process model, file, and directory semantics. The idea of permissions, signals, pipes, and the command line utility was a behavior a compliant OS would also need to provide. A good example is an OS that follows the POSIX standards must have a function call that implements <strong>fork()</strong>.
<br><br>
The biggest contribution the GNU Project made was the <strong>GPL (General Public License)</strong>. The license uses copyright law in reverse (which he called <strong>Copyleft</strong>). If you purchase a product containing GPL-licensed software, you are essentially buying a <strong>"bill of rights"</strong> that grants you the freedom to run, study, modify, and redistribute the code. You have a legal right to access the source code, and once you have it, you can even give it away or sell your own modified version to others without the original seller's permission. Conversely, if you sell something that includes GPL software, your rights are balanced by strict obligations: you must provide the source code to your customers and you cannot legally prevent them from sharing or changing that code. While you can keep purely internal modifications secret, the moment you distribute the software to someone else, the "Copyleft" rule triggers, requiring you to pass on the same freedoms you received and preventing you from locking away the software.
<br><br>
Not only did the GNU Project contribute this license, but it also contributed the <strong>GCC Compiler</strong>. GCC initially stood for the GNU C Compiler. Its only purpose at the time was to compile C code for a future GNU operating system (which did not yet exist). It was meant to replace proprietary UNIX compilers. Since its creation, the GCC name has changed because it now supports multiple languages like C++, Fortran, Ada, Java (later-removed), Go (later-removed), and Rust (in progress in some branches). GCC was the first major success of the GNU Project, but Stallman's goal was never just to build a compiler - it was to create a completely free replacement for the Unix operating system. After GCC, the GNU team developed the <strong>Bourne Again SHell (Bash)</strong> and the <strong>GNU Coreutils</strong>, re-implementing classic UNIX commands like ls, cp, mv, rm, cat, grep, and chmod. The <strong>GNU C library (glibc)</strong> was also an important tool developed by the GNU Project. It provided the POSIX API that user programs rely on.
<br><br>
All of these tools were written from scratch to behave like their Unix counterparts, but without using any proprietary UNIX source code. In effect, GNU was building a free Unix-compatible userland on top of existing UNIX systems (they used UNIX to build the UNIX replacement), with the long-term goal of replacing UNIX entirely. In many ways, this endeavor was similar to that of the Berkley group. The major difference was that Berkeley wanted to improve and share UNIX software, while Stallman wanted to liberate software by guaranteeing user freedom through copyleft licensing. By 1990, GNU had built almost the entire userland of a UNIX system, but it was still missing a kernel. The GNU project did attempt to build its own kernel (the <strong>Hurd</strong>), which was based on top of the MACH design from Carnegie Mellon, but development was slow, and the OS was unstable. This gap created a growing need for a free, UNIX-like kernel, and that need set the stage for another project that emerged for an entirely different purpose…
<br><br>
<strong>The Introduction of Linux:</strong><br><br>
<strong>Andrew Tanenbaum</strong>, a professor in Amsterdam who taught operating systems, was struggling to find an alternative to UNIX. He needed a system that students could read and modify. UNIX licenses were now too expensive, which meant they could no longer fulfill that role. So Tanembaum decided if he couldn't legally give students UNIX, he would write a small UNIX-like OS they could study. This OS was called <strong>MINIX (Mini UNIX)</strong>. He published it and its sources without using a single line of AT&T's code in the textbook <em>Operating Systems: Design and Implementation</em>. MINIX used a <strong>microkernel design</strong>, which meant the kernel was kept small, and most services like the file system, drivers, and memory management ran in user space. Even though MINIX source code was available, it was not free in the GNU sense. Tanenbaum required students to buy the textbook to get the code, and redistribution was restricted; these qualities made it unsuitable for the GNU project. These limitations left many developers wanting more from MINIX, and one of them was a young Finnish student who decided to build the system he wished MINIX could be.
<br><br>
In 1991, a 21 year old computer scientist named <strong>Linus Torvalds</strong> inspired by MINIX decided to develop a free Operating System kernel as a personal project from scratch called <strong>LINUX</strong>. When people soon realized that they could take the GNU tools and run them on the LINUX kernel, it grew in popularity. At first, LINUX had a license forbidding commercial redistribution. Eventually, however, in 1992, it was changed to be under the <strong>GPL license</strong>. After this point LINUX became the first kernel amongst a sea of other educational and proprietary kernels that was free, GPL licensed, designed for PCs, actively developed, and did not use AT&T's source code.
<br><br>
<span class="sidenote">Most users and developers think of LINUX as shorthand for the whole ecosystem, but some, including Richard Stallman, believe that since GNU built almost the entire operating system: the compiler, shell, core utilities, libraries, and more, it should be included in the name: <strong>GNU/Linux</strong>.</span>
<br>
Over time, development of GNU and LINUX accelerated. Thousands of contributors refined the kernel, expanded the GNU tools, and built distributions that made the system easier to use and adapt. What began as a handful of student and research projects evolved into one of the most actively developed software ecosystems in the world.
</p>
<button class="read-more" style="margin-top: 1em;">
Read more <span class="arrow">▼</span>
</button>

<div class="tech-icons" style="margin-top: auto;">
<a href="https://www.cisco.com/c/en/us/solutions/data-center-virtualization/leaf-spine-architecture.html" target="_blank" rel="noopener noreferrer" title="Learn Leaf-Spine Architecture">
<i class="fas fa-network-wired"></i> <!-- represents networking / leaf-spine -->
</a>
</div>
</div>
<!-- Notes Card End -->
<div class="notes" style="display: flex;justify-content: center;align-items: center;max-width: unset;max-height: fit-content; min-height: unset; ">
<a href="../index.html"
Expand Down
120 changes: 84 additions & 36 deletions script.js
Original file line number Diff line number Diff line change
@@ -1,65 +1,113 @@
document.querySelectorAll(".read-more").forEach(button => {
let lastScrollPos = 0; // store position before expand
let lastScrollPos = 0;

button.addEventListener("click", () => {
const project = button.closest(".project");
const description = project.querySelector(".description");
const arrow = button.querySelector(".arrow");
const container = button.closest(".project");
if (!container) return;

if (project.classList.contains("expanded")) {
// Collapse
const description = container.querySelector(".description");

if (container.classList.contains("expanded")) {
// --- SMOOTH COLLAPSE ---
// 1. Lock to current height so it doesn't 'snap' to 0
description.style.maxHeight = description.scrollHeight + 'px';

// 2. Trigger a reflow (The 'Secret Sauce' for smoothness)
description.offsetHeight;

// 3. Animate to 0
description.style.maxHeight = '0';

setTimeout(() => {
description.style.display = 'none';
// scroll back to original position
window.scrollTo({ top: lastScrollPos, behavior: 'smooth' });
}, 50); // wait for transition to finish
project.classList.remove('expanded');
}, 400);

container.classList.remove('expanded');
button.childNodes[0].textContent = 'Read more ';
} else {
// Save scroll position before expanding
// --- SMOOTH EXPAND ---
lastScrollPos = window.scrollY;

// Expand
// 1. Show it but keep it invisible/collapsed
description.style.display = 'block';
const scrollHeight = description.scrollHeight;
description.style.maxHeight = scrollHeight + 'px';
project.classList.add('expanded');
description.style.maxHeight = '0';

// 2. Wait for the browser to register 'display: block'
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const fullHeight = description.scrollHeight;
description.style.maxHeight = fullHeight + 'px';
});
});

// 3. Remove the cap after animation
setTimeout(() => {
if (container.classList.contains("expanded")) {
description.style.maxHeight = 'none';
}
}, 450);

container.classList.add('expanded');
button.childNodes[0].textContent = 'Read less ';
}
});
});


document.querySelectorAll(".read-more").forEach(button => {
let lastScrollPos = 0; // store position before expand
let lastScrollPos = 0;

button.addEventListener("click", () => {
const project = button.closest(".notes");
const description = project.querySelector(".description");
const arrow = button.querySelector(".arrow");
const container = button.closest(".notes");
if (!container) return;
const description = container.querySelector(".description");

if (project.classList.contains("expanded")) {
// Collapse
if (container.classList.contains("expanded")) {
// --- COLLAPSE (CLOSING) ---

// 1. Start scrolling back IMMEDIATELY (Removes the 'reset' delay)
window.scrollTo({ top: lastScrollPos, behavior: 'smooth' });

// 2. Set height to current pixels so it has a starting point to animate from
description.style.maxHeight = description.scrollHeight + 'px';
description.offsetHeight; // Force reflow so the browser 'feels' the height

// 3. Shrink to 0
description.style.maxHeight = '0';
setTimeout(() => {
description.style.display = 'none';
// scroll back to original position
window.scrollTo({ top: lastScrollPos, behavior: 'smooth' });
}, 50); // wait for transition to finish
project.classList.remove('expanded');

// 4. Reset UI text and class right away
container.classList.remove('expanded');
button.childNodes[0].textContent = 'Read more ';

// 5. Cleanup: Hide element only AFTER the fast 0.2s animation
setTimeout(() => {
if (!container.classList.contains("expanded")) {
description.style.display = 'none';
}
}, 0);

} else {
// Save scroll position before expanding
// --- EXPAND (OPENING) ---

lastScrollPos = window.scrollY;

// Expand
description.style.display = 'block';
const scrollHeight = description.scrollHeight;
description.style.maxHeight = scrollHeight + 'px';
project.classList.add('expanded');

// Double frame wait ensures the 'display: block' is rendered before animating
requestAnimationFrame(() => {
requestAnimationFrame(() => {
description.style.maxHeight = description.scrollHeight + 'px';
});
});

// 6. Remove the 'cap' after opening (The 'None' cleanup)
setTimeout(() => {
if (container.classList.contains("expanded")) {
description.style.maxHeight = 'none';
}
}, 450);

container.classList.add('expanded');
button.childNodes[0].textContent = 'Read less ';
}
});
});

});
19 changes: 18 additions & 1 deletion styles.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
/* This makes your sidenotes stand out */
.sidenote {
display: block;
border-left: 5px solid #c9b49e;
padding-left: 20px;
margin: auto 10px;
font-style: italic;
border-radius: 0 5px 5px 0;
}
.project-chart {

width: 100%;
max-width: 500px;
margin: 2em auto;
Expand Down Expand Up @@ -141,6 +149,15 @@ color: white; /* Light text */
text-decoration: underline;
/* text-decoration-color: #4da3ff; underline only */
}
.description {
display: none;
overflow: hidden;
/* transition: max-height 0.3s cubic-bezier(0.4, 0, 0, 0); */
/* transition: max-height 0.3s cubic-bezier(0.9, 0.9, 0.9, 0.9); */
/* transition: max-height 0.8s cubic-bezier(0.4, 0.4, 0.7, 0.9); */
/* transition: max-height 0.8s cubic-bezier(0.7, 0.7, 0.7, 0.7); */
/* This curve starts fast and slows down gently */
}

.description a:hover {
text-decoration-thickness: 2px;
Expand Down
10 changes: 10 additions & 0 deletions styless-projects.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
.description {
display: none;
overflow: hidden;
/* transition: max-height 0.3s cubic-bezier(0.4, 0, 0, 0); */
/* transition: max-height 0.3s cubic-bezier(0.9, 0.9, 0.9, 0.9); */
transition: max-height 0.8s cubic-bezier(0.4, 0.4, 0.7, 0.9);
/* transition: max-height 0.8s cubic-bezier(0.7, 0.7, 0.7, 0.7); */
/* This curve starts fast and slows down gently */
}

.project-chart {

width: 100%;
Expand Down
Loading