SlideShare a Scribd company logo
1 of 168
Nicholas C. Zakas
@slicknet
@slicknet
1996
“The shroom”
winner
Dial-up 14.4 kbps
http://modyaraa.blogspot.com/2013/02/external-modem-definition-magazine.html
6:00Web page (500 KB)
1:00:00Song (5 MB)
160:00:00Movie (800 MB)
Downloading at 14.4 kbps
Access to Internet
0.00%
5.00%
10.00%
15.00%
20.00%
25.00%
30.00%
35.00%
40.00%
45.00%
0
500
1000
1500
2000
2500
3000
Millions of Internet Users % World Population
Dec ‘06
36m/0.9%
http://www.internetworldstats.com/emarketing.htm
Broadband and Dial-Up Adoption, 2000-2012
34%
41%
38% 37%
30%
28%
23%
15%
10%
7% 5%
3% 3% 4%
3%
6%
11%
16%
24%
33%
42%
47%
55%
63%
66%
62%
66% 65%
0%
10%
20%
30%
40%
50%
60%
70%
June
2000
April
2001
March
2002
March
2003
April
2004
March
2005
March
2006
March
2007
April
2008
April
2009
May
2010
Aug
2011
April
2012
Dec-12
% of American adults who access the internet via dial-up or broadband, over time
Dial-up
Broadband
http://pewinternet.org/Trend-Data-(Adults)/Home-Broadband-Adoption.aspx
1991
Gopher
• User IDs were numeric
– 73562,1023
• First to provide gateway
to “real” Internet (1989)
– 73562.1023@compuserve.com
• Loved for its forums
• Created GIF format
• Most users were geeks
• Consumer portal pioneer
• Graphical user interface
• ESPN’s first online presence
• Curated news and
information
• Relied on online shopping
and advertising to offset
costs
• First to provide gateway to
the World Wide Web
• Message boards galore
• Graphical user interface
• Made internet accessible
to consumers
• Lots of local numbers
• Interactive chat rooms
• Instant messaging
• Visually rich content
accessible by keyword
• Outpriced everyone
$14.95
$9.95
Base Price
(Month)
2
5
Included Hours*
(Month)
$4.80
$3.50
Additional
Hours
* Both Prodigy and AOL had “free” and “paid” sections. Time spent in “free” sections
did not count against the monthly hours.
1993
flickr.com/photos/madison_guy/28536066
Instant Messaging and Chatrooms
• Real-time, text-based
communication
• Buddy list
• Away message
• Avatars
• Font control
1993
http://www.flickr.com/photos/marc_smith/447183492/
1994
Access to the “real”
Internet is coming
Internet
WAIS
Gopher
• Cookies
• Secure Socket Layer
(SSL) – 40-bit
• Image Floating
<P><IMG SRC="foo.gif" ALIGN="left">
Some text</p>
<BR CLEAR="left">
BookLink
(no picture available)
http://www.flickr.com/photos/ktylerconk/2929812795/
Internet
WAIS
Gopher
Gopher
HTTP
1995
$48 million
Browser sales – Year 1
• LiveScript
• <font>
• <frameset>
• <embed>
• Java
•
window.navigator
window.setTimeout()
document.forms
document.links
document.cookie
document.location
document.title
alert()
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAMESET ROWS="100, 200">
<FRAME SRC="contents_of_frame1.html">
<FRAME SRC="contents_of_frame2.gif">
</FRAMESET>
<FRAME SRC="contents_of_frame3.html" NAME="main">
<NOFRAMES>
<P>Sucks to be you.</p>
</NOFRAMES>
</FRAMESET>
</HTML>
<A HREF="/contact" TARGET="frame1">Contact Me</A>
Needed to say
which frame to put
the page in
Special values:
_blank
_parent
_self
_top
<BODY BGCOLOR="gray" LINK="blue" VLINK="#ff0000"
BACKGROUND="image.gif” TEXT="#000000">
<FONT SIZE="1" COLOR="#008800">I’m blue</FONT>
<CENTER>Center me, please</CENTER>
<BIG>I am bigger</BIG>
<SMALL>I am smaller</SMALL>
<SCRIPT LANGUAGE="JavaScript">
<SCRIPT LANGUAGE="JavaScript"><!-- Hide from old browsers
// your script here
--></SCRIPT>
<A HREF="#" ONCLICK="alert('Hi'); return false">
Click Me
</a>
The only way to
assign event
handlers
Netscape has enjoyed a virtual monopoly of the
browser market (about 90% according to some
estimates), and this has allowed it to consolidate
its position still further by introducing unofficial or
'extended' HTML tags. As a result, the Web is
littered with pages that only work effectively if
viewed in Navigator. By the time other browsers
catch up, Netscape has made even more additions.
http://web.archive.org/web/20050325180847/http://www.macuser.co.uk/macuser/re
views/16110/microsoft-internet-explorer-21.html
“
Birth of the AOL
browser that
bridges Gopher and
WWW
• <BGSOUND>
• <FONT FACE>
• Newsgroups
• VRML
Mozilla/2.02 (WinNT; I)
Best viewed with
Mosaic/0.9
Mozilla/2.02 (WinNT; I)
Mosaic/0.9
Mozilla/1.22 (compatible; MSIE 2.0; Windows 3.1)
No seriously, I’m
Netscape
Internet
WAIS
Gopher
HTTP
Gopher
HTTP
<a>
<address>
<b>
<base>
<blockquote>
<body>
<br>
<cite>
<code>
<dd>
<dir>
<dl>
<dt>
<em>
<form>
<head>
<html>
<select>
<strong>
<title>
<tt>
<ul>
<var>
<xmp>
<hr>
<h1>…<h6>
<i>
<img>
<input>
<isindex>
<kbd>
<listing>
<link>
<menu>
<meta>
<nextid>
<ol>
<option>
<p>
<pre>
<samp>
December 7, 1995
“IE will be free”
Netscape (NSCP) -6%, -$340 million
1996
Internet
WAIS
Gopher
HTTP
Gopher
HTTP
28.8 to 56 Kbps
“Blazing fast!”
• JavaScript 1.1
• about:
• view-source:
• <blink>
<SCRIPT LANGUAGE="JavaScript" SRC="external.js"></SCRIPT>
document.write("<p>Hello world!</p>");
document.links[0].onclick = myHandler;
document.forms["formName"].elements[0].value;
typeof foo; // typeof null == "object"
// preload images so they’re in the cache
var img = new Image();
img.src = "smiley.gif";
function changeImage(url) {
document.images[0].src = url;
}
<A HREF="#" ONMOUSEOVER="changeImage(‘smiley.gif’)"
ONMOUSEOUT="changeImage(‘frown.gif’)">
<IMG SRC="frown.gif">
</A>
• JScript
• VBScript
• <frameset> <iframe>
• <marquee>
• CSS
• Java
•
1997
Cracks in the
foundation of AOL
Internet
WAIS
Gopher
HTTP
Gopher
HTTP
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
1996 Q2 1996 Q3 1996 Q4 1997 Q1 1997 Q2 1997 Q3
Netscape Navigator
Internet Explorer
Mosaic
Browser Market Share
Usage share data from:
EWS Web Server at UIUC
• JavaScript 1.2
• JavaScript Style Sheets
• CSS (ish)
• Layers
JavaScript 1.2
• Labelled statements
• continue
• do-while
• Array/Object literals
• switch
• delete
• RegExp
• Changed == and !=
<SCRIPT LANGUAGE="JavaScript1.2"><!-- Hide from old browsers
// your script here
--></SCRIPT>
JavaScript Style Sheets
<STYLE TYPE="text/javascript">
tags.H1.color="red";
tags.H1.fontStyle="bold";
classes.ugly.all.color = "purple";
classes.ugly.all.fontStyle = "italic";
contextual(tags.OL, tags.LI).listStyleType =
"upper-alpha";
</STYLE>
Layers
<LAYER ID="foo" TOP="5" LEFT="100">
<P>Absolutely positioned content.</p>
</LAYER>
<ILAYER ID="foo" TOP="5" LEFT="100">
<P>Relatively positioned content.</p>
</ILAYER>
<LAYER SRC="somepage.htm ONLOAD="doSomething()"></LAYER>
<NOLAYER>
<P>No layers for you.</P>
</NOLAYER>
Layers
var layer = document.layers[0];
var layer = document.layers["foo"];
var layerCount = documents.layers.length;
layer.top = 25; // move it!
layer.siblingAbove, layer.siblingBelow, layer.parentLayer
• Trident engine
• document.all
• innerHTML
• Favicons
• Updated JScript/VBScript
• Transitions/Filters
• Data Binding
• Integrated with Windows 95
<layer>
<ilayer>
<frame>
<div>
<span>
<iframe>
Event Propagation
<HTML>
<BODY>
<DIV>Click Me</DIV>
</BODY
</HTML>
Event Propagation
elem.onclick = function(event) {
// event object passed in
};
elem.onclick = function() {
// retrieve event object
var event = window.event;
};
event.type
event.target
event.which
event.modifiers
event.type
event.srcElement
event.keyCode
event.button
event.shiftKey
event.ctrlKey
event.altKey
Event Handling
function handleClick(event) {
event = event || window.event;
var target = event.target || event.srcElement;
// ready to go
}
// basis for preventDefault
event.returnValue = false;
// basis for stopPropagation
event.cancelBubble = true;
// basis for getElementById
var myElement = document.all.elementId;
// basis for getElementsByTagName
var paragraphs = document.all.tags("P");
// basis for parentNode
var parent = myElement.parentElement;
myElement.innerText = "Hi!";
// standardized
myElement.innerHTML = "<b>Hello!</b>";
var myChildren = myElement.children;
myElement.insertAdjacentHTML("<b>Hello!</b>", "beforeend");
document.body.contains(myElement);
Browser Sniffing (eek!)
if (document.layers) {
// must be Netscape!
} else if (document.all) {
// must be IE
}
Consolidation of
online service
providers begins
1998
$88 million
Net Loss – 1997 Q4
Internet
WAIS
Gopher
HTTP
Gopher
HTTP
Seriously, who
didn’t see this
coming?
• Bidirectional text
• Improved CSS support
• Ruby characters
• ECMAScript 1 support
• XML/XSLT in JavaScript
• XMLHttp object
var xhr = new ActiveXObject("MSXML2.XMLHttp");
xhr.open("get", "foo.htm", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
allDone();
}
};
xhr.send();
And Then
1999 – No major release
2000 – No major release
2001 – No major release
2002 – Version 6
2003 – Version 7
1999 – No major release
2000 – Version 5.5
2001 – Version 6
2002 – No major release
2003 – No major release
New-media
company buys old-
media company
Internet
HTTP
HTTP
Thank you
Etcetera
• My blog: nczonline.net
• Twitter: @slicknet
• These Slides: slideshare.net/nzakas

More Related Content

Similar to Browser Wars Episode 1: The Phantom Menace

AppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App PerformanceAppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App Performancerobgalvinjr
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't CodeChristopher Schmitt
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on MobileAdam Lu
 
DSLing your System For Scalability Testing Using Gatling - Dublin Scala User ...
DSLing your System For Scalability Testing Using Gatling - Dublin Scala User ...DSLing your System For Scalability Testing Using Gatling - Dublin Scala User ...
DSLing your System For Scalability Testing Using Gatling - Dublin Scala User ...Aman Kohli
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup EvolvedBilly Hylton
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Adam Dunford
 
HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo
HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao PauloHTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo
HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao PauloRobert Nyman
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptbrucelawson
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API Nick DeNardis
 

Similar to Browser Wars Episode 1: The Phantom Menace (20)

[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5
 
AppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App PerformanceAppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App Performance
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
 
Responsive design
Responsive designResponsive design
Responsive design
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
DSLing your System For Scalability Testing Using Gatling - Dublin Scala User ...
DSLing your System For Scalability Testing Using Gatling - Dublin Scala User ...DSLing your System For Scalability Testing Using Gatling - Dublin Scala User ...
DSLing your System For Scalability Testing Using Gatling - Dublin Scala User ...
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
Upload[1]
Upload[1]Upload[1]
Upload[1]
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup Evolved
 
Html5
Html5Html5
Html5
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 
HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo
HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao PauloHTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo
HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo
 
Adobe & HTML5
Adobe & HTML5Adobe & HTML5
Adobe & HTML5
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API
 

More from Nicholas Zakas

Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!Nicholas Zakas
 
JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)Nicholas Zakas
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceNicholas Zakas
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Nicholas Zakas
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012Nicholas Zakas
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011Nicholas Zakas
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011Nicholas Zakas
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)Nicholas Zakas
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010Nicholas Zakas
 
Nicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas Zakas
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! HomepageNicholas Zakas
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010Nicholas Zakas
 

More from Nicholas Zakas (20)

Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
 
The Pointerless Web
The Pointerless WebThe Pointerless Web
The Pointerless Web
 
JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
 
Nicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at Google
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
 

Recently uploaded

New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditSkynet Technologies
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 

Recently uploaded (20)

New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 

Browser Wars Episode 1: The Phantom Menace

Editor's Notes

  1. 133 MHz, 16 MB RAM, 1.2 GB Hard drive
  2. You might have thought from the first slide that this would be a story about Internet Explorer. It is, but moreso it’s about the two companies that came beforehand: America Online and Netscape. At one point in time these two companies basically controlled the Internet. The story of how that changed is really the story of how the Internet itself changed.
  3. To understand how those two companies became so powerful, we need to go back even further in time to 1991.
  4. In 1991, CompuServe was the most popular online service, followed by Prodigy, followed by a AOL
  5. Gopher was released from researchers at the University of Minnesota. This was the first nearly consumer-friendly way of accessing the internet.
  6. Gopher was basically a glorified file system browser. You could have folders and documents, and it created a nice click-through interface for you. Gopher looked a lot like a very early version of the web.
  7. Real Internet wasn’t much then. Gopher wasn’t even available. Mostly just email.
  8. This is what the welcome screen for AOL looked like. Prior to this, you would have chosen your local dialup numbers. You select your username from the dropdown, enter your password, and then click Sign On.
  9. This was the fun part, AOL showed a three-part status update while waiting to connect. The first part was for dialing, the second was for establishing the connection, and the third for when your session was ready. If the number was busy or someone in your house picked up the phone, the process was broken and would start over.
  10. Once you signed in, you were greeted with a very visual welcome page. This was a forerunner to modern web portals like the Yahoo homepage. This was AOL 3.0.
  11. Over time, they jacked up the content and visuals to keep users interested. It was very pretty.
  12. Another thing AOL figured out was the idea of unique identifiers for different pieces of content. Most other services made you navigate through menus to find what you were looking for. Every AOL screen had a keyword that, when entered, allowed you to jump right to that content. If you were a content provider on AOL, you could buy a keyword. It was common to see advertisements saying, “Visit us on AOL keyword foo”.
  13. AOL had the content, and this was considered pretty graphical at that point in time. It was easy to use and more importantly, easy for content providers to create.
  14. Over time, these destinations became more graphical in nature as that’s what consumers demanded. AOL had a pretty good thing going, they were both collecting money on both ends: from users to access the system and from content providers to create these screens. Prodigy and Compuserve were slow to improve their visuals and AOL took advantage.
  15. What really made AOL popular was the chat capabilities. They more or less invented instant messaging as we know it today and became the go-to place for chatrooms. They invented things like the away message and buddy list and over time gave everyone a lot of control over the chat experience. I can tell you from personal experience, this was incredibly addictive.
  16. At this point, AOL decided to start allowing access through them to the regular internet. For most people, that meant dialing into AOL and then doing something in AOL to get to the “real” Internet. At the time, there were no big pure ISPs – you have AOL, Prodigy, and Compuserve – cable and telephone providers hadn’t yet started selling direct plans.
  17. By this time, AOL had leapfrogged the competition and was the #1 online service provider. It was a mammoth in the industry with deep pockets and a ruthless approach to the competition.
  18. Keep in mind that the “real” Internet wasn’t what it is today. In fact, in the early days of AOL, you weren’t ever really on the Internet. It was a closed network of members who primarily communicated with each other and the parties who were in AOL. You email outside of the network by using the @ in someone’s address, and people could email to you by using @aol.com, but most time was spent in the AOL network.
  19. At this point, AOL decided to start allowing access through them to the regular internet. For most people, that meant dialing into AOL and then doing something in AOL to get to the “real” Internet. At the time, there were no big pure ISPs – you have AOL, Prodigy, and Compuserve – cable and telephone providers hadn’t yet started selling direct plans.WAIS = Wide Area Information Servers
  20. For AOL, this wasn’t a big gamble. The Internet was really just FTP, email, and Gopher, none of which could challenge the GUI that AOL slapped onto online content. For all intents and purposes, AOL was throwing the Internet a bone by making access to Gopher easier. They knew damn well that consumers would choose the GUI-based AOL over the text-based Internet every day of the week. Plus, all of the content people wanted was on AOL, so chances are many people wouldn’t explore via Gopher anyway.
  21. However, this was the year Netscape came about, co-founded by a guy you might remember, Marc Andreesen. The goal was to commercialize the Internet web browser and would change the fate of the Internet.
  22. This was Mosaic Netscape 0.9. Originally, they thought “Mosaic” was important to include so that people would know it was a web browser. Eventually, the University of Illinois was unhappy enough that they dropped it from the name. The code name of the project was “Mozilla”, which is short for “Mosaic Killa”, believing that commercial success waiting.
  23. This was Netscape 1.0. Initially they planned to make Netscape free, and version 1.0 was available free for download for everyone. What you see here is pretty much what the web was at that point in time: gray background, black text, with some images thrown in for fun. This was clearly not competition for the AOL content, and so AOL didn’t flinch as other companies started making web browsers. They had the content people wanted, the web was really just a place for random stuff that no one could really find.
  24. Some of the things that were new: cookies, which were first created for an online shopping cart, were created by Netscape and included in the first version. They also invented SSL and shipped 1.0 with the first browser in response to concerns. Image floating was created as a way to offset images inside of text, this was the ancestor of CSS floats.
  25. It was in 1994 that a forgotten part of the Internet puzzle fell into place. A company called Spyglass that was initially setup in 1990 to help commercialize the work of the NCSA officially licensed the Mosaic technology. However, in its efforts to create its own web browser, Spyglass ended up writing its own from scratch without using the licensed technology at all. In effect, Spyglass Mosaic wasn’t Mosaic in anything but its name. Spyglass then started licensing its own technology as part of its business. Keep this in mind, we’ll see them again.
  26. Spyglass and Netscape weren’t the only companies interested in web browsing. BookLink was founded in 1994 and created its own web browser. For a company you’ve probably never heard of, they were quite the hot commodity. They were approached that same year by Microsoft wanting to buy them for $2 million. Microsoft wanted to get into the web browser business and was gearing up for a push in Windows 95. AOL offered the equivalent of $30 million in stock to acquire BookLink later that year, leaving Microsoft behind in the game.
  27. If you were to look back in time as AOL and pinpoint a moment where your demise began, this would be it. They failed to see the warning signs. The fact that they had to outbid Microsoft for BookLink should have been an indicator. Here’s why.
  28. Up until this point, AOL was the dominant online provider and ISP provider. They had all the interesting content and the content on the web was mostly academic stuff. It wasn’t pretty to look at and inhabited by geeks. People came to AOL for the good stuff and then maybe went to the Internet for other stuff, but they still did that through AOL. Now Netscape and other browsers allowed you to access the Internet without going through AOL. So you could get to the subpar Internet content through a web browser. However, you’d still need an Internet connection, and AOL was the most obvious solution. That’s why AOL didn’t care. You still needed them to get to the Internet from your home one way or another. What they failed to realize is that this created an obvious vacuum that was begging to be filled: if you could have an ISP allow you to connect directly to the Internet, you’d no longer need to go through AOL. But once again, the compelling content, the chats, the instant messaging, was all one AOL at this point, so they thought they were safe.Nevermind the fact that Microsoft clearly wanted to get into the Internet business. They had a ton of money and were ready to spend it, clearly betting on the Internet to dethrone AOL.
  29. Towards the end of 1994, Microsoft tried to buy Netscape outright. After having lost out on the BookLink deal, they were desperate to get involved with the Internet. Netscape turned them down because the offer was too low (a common theme from Microsoft, it appears) and the stage was now set.
  30. 1995 was a big year for Microsoft. They were planning on releasing Windows 95, the most significant update to Windows they had ever made. It completely changed the paradigm for using Windows computers and most of the aspects in it remained through Windows 7, including the task bar and start button. They wanted to have an Internet browser (not Netscape) to ship with the operating system, which is why they had contacted BookLink about acquiring their software. When that failed, they were forced to take another route.
  31. That other route took them back to Spyglass. You may remember Spyglass had licensed Mosaic from NCSA but then wrote their own browser. Microsoft struck a deal with Spyglass to pay them a fixed quarterly amount plus a percentage of revenues resulting from sales of the Microsoft browser.
  32. Internet Explorer 1 was released quietly with Windows 95 Plus. It was a bit hidden in the release and so didn’t amount to anything. It didn’t have a separate logo from the Windows 95 logo, basically making it the “Windows Browser”. Internet Explorer 2 had the same design and was released later that year for both Windows and Mac, integrated more features such as cookies (debuted in Netscape 1), SSL, VRML, JavaScript, HTML 3 (tables, frames, bgsound, text font tag), RSA, PPP network stack.
  33. Meanwhile, Netscape put out it’s first beta of version 2.0.
  34. One of the objects created by Netscape was window.navigator. Since “Navigator” was the name of the browser, this object was prescribed to tell you more about the browser. There was no other browser supporting JavaScript at the time, so why not name it Navigator?Early on, you couldn’t reference just any elements in the page, it was only specific elements. Specifically, you could reference forms and links. One of the big early uses for LiveScript was to validate forms before being sent back to the server. Additionally, this is where the cookie, location, and title properties originated.
  35. At this point, you couldn’t have anonymous functions even though event handlers did work.
  36. This is also where alert, confirm, and prompt came from.
  37. Adding the elements for frames wasn’t all, though. Netscape also needed a way to say which frame should display the result of clicking a link. To do that, they created the target attribute on links and forms. The target attribute gave the name of the frame or one of several predefined names that Netscape came up with. Also note that the convention at the time was to write HTML tags in all uppercase.
  38. Netscape also added some additional attributes to &lt;BODY&gt;, allowing you to specify background, foreground, and link color options. The &lt;FONT&gt; tag was added to allow you to set the size and color of specific areas of text. The same color names and hex codes are used in CSS today. Then there was the &lt;CENTER&gt; tag, which introduced us to the idea of aligning text in the middle of the page.
  39. Since Netscape was the only browser that supported JavaScript, it had to worry about compatibility with older browsers. Mosaic, for instance, would render the HTML code into the page. To prevent that from happening, this pattern was created. Netscape (and every browser since) ignores the first comment tag inside of a &lt;SCRIPT&gt; .
  40. There were basic events in Netscape 2, but you had to attach them inline. They added the onclick, onmouseover, and onmouseout attributes and allowed you to cancel the default behavior by returning false. There was no event object. You could only add click events to links and buttons, and onmouseover/mouseout only worked for links. You could also use onsubmit for forms so that you could validate before submitting the form.That was it, you couldn’t attach event handlers using JavaScript and there was no event bubbling or capturing.
  41. AOL released the BookLink-based browser in mid-1995. The browser supported both Gopher and WWW.
  42. Internet Explorer 2 had the same design and was released later that year for both Windows and Mac, integrated more features such as cookies (debuted in Netscape 1), SSL, VRML, HTML 3 (tables, frames, bgsound, text font tag), RSA, PPP network stack. The really important part of IE 2 is that it was available on a lot of platforms: Windows 95, Windows 3.1, Macintosh, even Unix.
  43. The goal of Internet Explorer 2.0 was to make it as compatible with Netscape as possible. Why? Because we had entered the age of browser sniffing. Since Netscape had added proprietary features, the web was no longer compatible across browsers. Sites were broken when using Mosaic and people started putting this “best viewed with” badge on their pages. Servers started looking at the user-agent string and only letting the browser in if it was Netscape. For Internet Explorer to have a chance, they had to jump through hoops to make sure sites would serve their browser the same great content as Netscape.
  44. And so the great user-agent string conflation began. Internet Explorer decided to start their user-agent string with “Mozilla” to trick servers into treating the browser as Netscape. Most server sniffing was that dumb, just looking for the word “Mozilla”. Practically every other browser since that time has taken the “Mozilla” moniker to the point where it’s just a convention and completely useless. That practice started here.
  45. Now the picture is getting a bit clearer. AOL knew that Microsoft wanted in on the Internet space thanks to the BookLink deal. The Windows browser was released without much fanfare so that didn’t seem like a big deal, however you now had three was to get to the Internet, only one of which was AOL. The market was starting to get crowded.
  46. On December 7, 1995, Bill Gates announced internally that Internet Explorer would be given away for free. He basically declared open war on the Internet and Netscape, causing Netscape’s stock to plunge 6% or $340 million. Netscape’s stock price would never recover. This also angered Spyglass, who you may remember licensed their technology to Microsoft for a share of any revenues generated from Internet Explorer. Since it would now be free, there would be no revenues and Spyglass would get nothing other than the flat fee Microsoft agreed to give them. This would eventually lead to a lawsuit that Microsoft settled for $8 million.
  47. Now we’re back to 1996. Yes, that’s when I was in college. 1996 turned out to be a very important year in the Internet.
  48. There was a really significant turf war building on the Internet. Microsoft and Netscape were locked in a duel where only one would survive, and America Online was going blissfully along as the #1 online service provider, almost laughing at the two dueling around them. What AOL failed to recognize was that the browser arms race was rapidly improving the quality of content available on the Web.
  49. The fact was that AOL was rapidly losing the quality content that made it the destination of choice for online customers. Now, the content providers were free to setup their own websites and share their own news without paying AOL for the right to do so.
  50. The amount of content on the Internet was growing, outpacing the content on AOL, and because of Netscape those experiences were becoming prettier and more graphical. Yet, AOL wasn’t really panicking. They continue to plug along.
  51. The speed of Internet access was increasing, meaning that the time AOL spent optimizing its delivery was starting to not matter as much. With speeds reaching 56 Kbps, the Internet was much faster than it was just two years ago. AOL raced to ensure it could take advantage of this technology and setup new data centers capable of sending data across at those speeds.We weren’t quite at broadband yet, but the days of snail-crawl Internet connections were coming to an end.
  52. No one knew it at the time, but Netscape was reaching its peak usage. It would top out at around 80% before starting a steady decrease. But we’ll get to that.
  53. Netscape Navigator 3 was released. It was mostly an upgrade to 2.0 without many major changes. The biggest change, however, was with JavaScript.
  54. Netscape 3 introduced the ability to load external JavaScript into the page. The way it works today is as it was then, more or less. You could also dynamically include content using document.write(), assign event handlers in JavaScript (still not anonymous functions) and access form elements by name instead of just ordering number.
  55. Later that year, the big blue e would debut.
  56. Introduced hover effects for their buttons.
  57. Internet Explorer 3 was the first real competitor for Netscape. It was fast, it was pretty, it was compatible with all Netscape sites, and had a ton of new features. It was the first commercial browser to support basic CSS for fonts, colors, backgrounds, and some spacing. IE released IE3 with both Jscript, a reverse-engineered version of JavaScript, and VBScript, their own entry into the web scripting world. Last, they created their own button to put on web sites, where “Best viewed with” became a battleground for the browser wars.Jscript was mostly like JavaScript, except that it added getFullYear() and setFullYear() to the Date object to deal with Y2K issues.
  58. In November 1996, Netscape submitted a JavaScript standard to ECMA for review.
  59. By liberating Instant Messenger from AOL, AOL effectively put one of its differentiators out into the Internet. The Internet pretty much was on par with the content and capabilities of AOL at that point in time.
  60. Over in the browser world, Internet Explorer 3 had made some waves but wasn’t necessarily a powerhouse. It had basically subsumed the Mosaic market share and was now starting to eat into Netscape. But Netscape was still the most used web browser in the world and the small gains being made by IE didn’t seem like that big of a deal. There was a #1 and a distant #2. As it turned out, late 1997 was going to be a major war as both browsers introduced new versions.
  61. Netscape renamed the fourth version “Communicator”, as it set it’s site on corporate users who would need more than just a web browser. The idea was that the browser became the center of a communications suite.
  62. JavaScript 1.2 added a bunch of stuff we’re used to, but also made a breaking change. The double equals and not equals operators were changed to take into account type. So this version has no type-coercing, and you would get that behavior if you specified JavaScript 1.2 in the language attribute of &lt;script&gt; only. The bummer was that ECMAScript 1 hadn’t yet been finalized and Netscape didn’t want to wait. It just plowed ahead. Consequently, 4.0 wasn’t ECMAScript 1 compliant.
  63. Since Netscape was the only browser that supported JavaScript, it had to worry about compatibility with older browsers. Mosaic, for instance, would render the HTML code into the page. To prevent that from happening, this pattern was created. Netscape (and every browser since) ignores the first comment tag inside of a &lt;SCRIPT&gt; .
  64. Layers were the main method of dynamic HTML in Netscape. They could be interacted with any had support for most events at a time when many elements didn’t support events. You could specify where the layer should be on the page and even clipping and visibility.
  65. Internet Explorer did one very important thing here: unlike Netscape, they decided that all elements on the page should be accesible by JavaScript. Netscape had merely expanded this list from form fields, images, and links to include layers. Internet Explorer said that it didn’t matter what element it was, you could access it with JavaScript. This was a precursor to the modern DOM.
  66. In this fourth generation of browsers, the DHTML battleground took place between sets of tags. In Netscape, you’d use &lt;layer&gt;, &lt;ilayer&gt;, and &lt;frame&gt;. In IE, you’d use &lt;div&gt;, &lt;span&gt;, and &lt;iframe&gt;. Even know Netscape supported &lt;div&gt; and &lt;span&gt;, they were little-used and not as well supported as in IE.
  67. Netscape decided that the click event happens at the document level first, and then is delegated down into the document, in this case to the div. They labeled this “event capturing” as the document captures the click and then moves it along to other spots. Internet Explorer, on the other hand, decided that the target of the event should receive the event first, and then the event should bubble up its parents, going all the way up the tree structure. They called this event bubbling. Ultimately, no one could decide who was right, so both got implemented in the DOM.
  68. In this fourth generation of browsers, the DHTML battleground took place between sets of tags. In Netscape, you’d use &lt;layer&gt;, &lt;ilayer&gt;, and &lt;frame&gt;. In IE, you’d use &lt;div&gt;, &lt;span&gt;, and &lt;iframe&gt;. Even know Netscape supported &lt;div&gt; and &lt;span&gt;, they were little-used and not as well supported as in IE.
  69. Dynamic HTML opened the door for better, more dynamic UIs on the web. Programming cross-browser was a big pain, but the experience was so much better that it rivaled what AOL was doing with proprietary technology.
  70. Netscape 4 would be the last major revision of the Netscape browser. After that, they focused on small releases to improve stability and performance. They did release 4.06 to get ECMAScript 1 support, then 4.5 through 4.8. Netscape had decided that their codebase was too slow and too hard to develop upon. It hadn’t changed much since Netscape 1.0 and couldn’t keep up with the rapid changes Microsoft was making. A radical decision was made to start rewriting the browser from scratch, starting with the rendering engine. The development of the Gecko rendering engine, which was to be the engine behind Netscape 5, started development alongside development on the old Netscape engine. The new Gecko engine would fix all of the ills of the old engine, including arduous cross-platform development, to setup Netscape for the future.
  71. In 1998, Netscape officially gave up trying to sell their browser. Instead, they decided to open source Gecko in the hopes that it would speed up development of Netscape 5.
  72. The content on the Internet was getting better, and was now a serious competitor to AOL’s content dominance. After successfully acquiring BookLink away from Microsoft, the AOL browser was far behind the times.
  73. In the end, this probably had to happen for AOL to compete on the Internet. They obviously couldn’t buy Internet Explorer, and the BookLink deal amounted to a crappy browser that couldn’t compete in the marketplace.
  74. Mozilla.org was launched as part of the open source efforts. That’s where the Gecko source code would live and be freely available to anyone who wanted it.
  75. Microsoft had over 1,000 people working on IE5 with a $100 million fund for development. This was primarily a security and performance release. The blue E was removed as the throbber, replaced by the Windows logo. This was the last version that was available on Mac and Unix.
  76. Netscape stagnated for the next few years without a major release as they continued to fix bugs on the old codebase and work on Gecko. In the meantime, Internet Explorer two significant releases: 5.5, which introduced ECMAScript 3 support (the first browser to do so), 128-bit encryption for SSL, as well as rudimentary DOM support, and then 6. Version 6 was a big improvement, introducing DOCTYPE mode switching and fixing the box model bug in standards mode. It also introduced ECMAScript 3 support, the first browser to do so. The gopher protocol was disabled in version 6, marking the end of an era. With Netscape stagnating, Internet Explorer continued gaining market share.Netscape would try to release another browser in 2002, dubbed Netscape 6 it was built on the new Gecko engine. Unfortunately, it was incredibly buggy and even though it had taken three years to write, this version was considered not even fit for a beta version. Netscape 7 tried to fix those bugs, and for their efforts, AOL laid off the browser team.
  77. The turning point for this battle with 1998 and Internet Explorer 5. IE’s market share growth accelerated considerably between the end of 1998 and 2000, when Internet Explorer 5.5 was released.
  78. AOL looked like it was on a different trajectory when it bought Netscape, trying to inject life into the dying company. It effectively bought Time Warner in a huge deal that seemed to solidify AOL as the leader in the new world of media. However, things weren’t all that rosey.
  79. A few things happened at this point. First, AOL actually was embedding IE as their browser despite owning Netscape. The fact was that all the best content was built for IE since Netscape sucked, so in order to give their customers what they wanted, it had to be IE. At the same time, the phone companies began getting into the ISP business. They sold direct access to the Internet and let people use the browser they already had to access the content.Also, cable companies started offering internet access as well. Where AOL once was the primary way people got online, they were now completely cut out of the loop. The best content was on the Internet now, not in AOL. There was no reason for people to go to AOL anymore. The web had liberated control of content from AOL and AOL was feeling it.
  80. After becoming a behemoth, AOL started to follow the path of Netscape. From being worth an estimated $161 billion in 2000, AOL was valued at $4 billion in 2009. AOL Time Warner became a symbol for the dot-com failures, they would drop “AOL” from the company name, and AOL would later be spun off back into a separate company.
  81. And then we were left with one browser: IE6. With Netscape effectively dead and no other browsers to compete with, Microsoft disbanded the IE team. They had “won” the Internet, there was no reason to keep competing, to keep pushing and innovating. There would be no major updates to Internet Explorer for five years, causing browser lock-in and a surplus of sites designed to work specifically with Internet Explorer. The browser that saved us from a web that was defined by Netscape ended up creating a web designed by itself. After all was said and done, it was the only one left standing. AOL and Netscape both fell by the wayside, casualties of a company that had a plan for grabbing control of the Internet out of their hands.