Browser Wars Episode 1: The Phantom Menace

Nicholas Zakas
Nicholas ZakasFront End Guy at Box
Nicholas C. Zakas
@slicknet
Browser Wars Episode 1: The Phantom Menace
@slicknet
Browser Wars Episode 1: The Phantom Menace
1996
“The shroom”
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
winner
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Dial-up 14.4 kbps
Browser Wars Episode 1: The Phantom Menace
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
Browser Wars Episode 1: The Phantom Menace
1991
Browser Wars Episode 1: The Phantom Menace
Gopher
Browser Wars Episode 1: The Phantom Menace
• 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
Browser Wars Episode 1: The Phantom Menace
• 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
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
• 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
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
$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
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Instant Messaging and Chatrooms
• Real-time, text-based
communication
• Buddy list
• Away message
• Avatars
• Font control
Browser Wars Episode 1: The Phantom Menace
1993
http://www.flickr.com/photos/marc_smith/447183492/
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
1994
Browser Wars Episode 1: The Phantom Menace
Access to the “real”
Internet is coming
Internet
WAIS
Gopher
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
• Cookies
• Secure Socket Layer
(SSL) – 40-bit
• Image Floating
<P><IMG SRC="foo.gif" ALIGN="left">
Some text</p>
<BR CLEAR="left">
Browser Wars Episode 1: The Phantom Menace
BookLink
(no picture available)
http://www.flickr.com/photos/ktylerconk/2929812795/
Internet
WAIS
Gopher
Gopher
HTTP
Browser Wars Episode 1: The Phantom Menace
1995
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
$48 million
Browser sales – Year 1
Browser Wars Episode 1: The Phantom Menace
• LiveScript
• <font>
• <frameset>
• <embed>
• Java
•
window.navigator
window.setTimeout()
document.forms
document.links
document.cookie
document.location
document.title
Browser Wars Episode 1: The Phantom Menace
alert()
Browser Wars Episode 1: The Phantom Menace
<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
Browser Wars Episode 1: The Phantom Menace
• <BGSOUND>
• <FONT FACE>
• Newsgroups
• VRML
Browser Wars Episode 1: The Phantom Menace
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
Browser Wars Episode 1: The Phantom Menace
<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>
Browser Wars Episode 1: The Phantom Menace
December 7, 1995
“IE will be free”
Netscape (NSCP) -6%, -$340 million
1996
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Internet
WAIS
Gopher
HTTP
Gopher
HTTP
28.8 to 56 Kbps
“Blazing fast!”
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
• 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>
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
• JScript
• VBScript
• <frameset> <iframe>
• <marquee>
• CSS
• Java
•
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
1997
Cracks in the
foundation of AOL
Browser Wars Episode 1: The Phantom Menace
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
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
• 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
Browser Wars Episode 1: The Phantom Menace
• 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
}
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Consolidation of
online service
providers begins
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
1998
Browser Wars Episode 1: The Phantom Menace
$88 million
Net Loss – 1997 Q4
Internet
WAIS
Gopher
HTTP
Gopher
HTTP
Seriously, who
didn’t see this
coming?
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
• 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
Browser Wars Episode 1: The Phantom Menace
New-media
company buys old-
media company
Internet
HTTP
HTTP
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Thank you
Etcetera
• My blog: nczonline.net
• Twitter: @slicknet
• These Slides: slideshare.net/nzakas
1 of 168

Recommended

Web Server by
Web ServerWeb Server
Web ServerRokibul Roni
3.3K views12 slides
XML by
XMLXML
XMLMukesh Tekwani
4.9K views57 slides
Introduction to xml by
Introduction to xmlIntroduction to xml
Introduction to xmlGtu Booker
10.9K views27 slides
Data mart by
Data martData mart
Data martPrachi Agarwal
19.7K views12 slides
SSIS control flow by
SSIS control flowSSIS control flow
SSIS control flowSlava Kokaev
6.9K views11 slides
Sql by
SqlSql
Sqlnavsissuk
138 views37 slides

More Related Content

What's hot

Web servers by
Web serversWeb servers
Web serversKuldeep Kulkarni
13.3K views15 slides
Xml ppt by
Xml pptXml ppt
Xml pptseemadav1
22K views5 slides
world wide web by
world wide webworld wide web
world wide webJesbin James
6.8K views16 slides
Web Servers (ppt) by
Web Servers (ppt)Web Servers (ppt)
Web Servers (ppt)webhostingguy
65.6K views30 slides
Web Pages by
Web PagesWeb Pages
Web PagesForrester High School
1.7K views18 slides
Markup Languages by
Markup Languages Markup Languages
Markup Languages Senthil Kanth
4.3K views33 slides

What's hot(20)

An Introduction to Semantic Web Technology by Ankur Biswas
An Introduction to Semantic Web TechnologyAn Introduction to Semantic Web Technology
An Introduction to Semantic Web Technology
Ankur Biswas1.1K views
Evolution of www ppt by sequels
Evolution of www pptEvolution of www ppt
Evolution of www ppt
sequels20.1K views
Basic Introduction of Data Warehousing from Adiva Consulting by adivasoft
Basic Introduction of  Data Warehousing from Adiva ConsultingBasic Introduction of  Data Warehousing from Adiva Consulting
Basic Introduction of Data Warehousing from Adiva Consulting
adivasoft1.7K views
Asp Net Advance Topics by Ali Taki
Asp Net Advance TopicsAsp Net Advance Topics
Asp Net Advance Topics
Ali Taki7.1K views
Introduction to Data Abstraction by Dennis Gajo
Introduction to Data AbstractionIntroduction to Data Abstraction
Introduction to Data Abstraction
Dennis Gajo2K views
An Introduction to Microsoft Edge by Chris Love
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft Edge
Chris Love2.3K views
DBMS-chap 2-Concurrency Control by Mukesh Tekwani
DBMS-chap 2-Concurrency ControlDBMS-chap 2-Concurrency Control
DBMS-chap 2-Concurrency Control
Mukesh Tekwani28.4K views
Role of Data Cleaning in Data Warehouse by Ramakant Soni
Role of Data Cleaning in Data WarehouseRole of Data Cleaning in Data Warehouse
Role of Data Cleaning in Data Warehouse
Ramakant Soni6.7K views
Topic 10: Taxonomy of Data and Storage by Zubair Nabi
Topic 10: Taxonomy of Data and StorageTopic 10: Taxonomy of Data and Storage
Topic 10: Taxonomy of Data and Storage
Zubair Nabi3.7K views

Similar to Browser Wars Episode 1: The Phantom Menace

Taking your Web App for a walk by
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walkJens-Christian Fischer
3.5K views93 slides
Attractive HTML5~開発者の視点から~ by
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Sho Ito
1.3K views69 slides
Web Performance Optimierung - DWX13 by
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Walter Ebert
7.9K views71 slides
[O'Reilly] HTML5 Design by
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 DesignChristopher Schmitt
13.7K views228 slides
HTML5 by
HTML5HTML5
HTML5Brad Touesnard
1.1K views80 slides
ApacheCon 2005 by
ApacheCon 2005ApacheCon 2005
ApacheCon 2005Adam Trachtenberg
649 views43 slides

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

Attractive HTML5~開発者の視点から~ by Sho Ito
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
Sho Ito1.3K views
Web Performance Optimierung - DWX13 by Walter Ebert
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Walter Ebert7.9K views
AppForum 2014 Boost Hybrid App Performance by robgalvinjr
AppForum 2014 Boost Hybrid App PerformanceAppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App Performance
robgalvinjr465 views
Responsive design by John Doxaras
Responsive designResponsive design
Responsive design
John Doxaras3.9K views
HTML5 on Mobile by Adam Lu
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
Adam Lu8.4K views
DSLing your System For Scalability Testing Using Gatling - Dublin Scala User ... by Aman Kohli
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 Kohli4.6K views
HTML5: Markup Evolved by Billy Hylton
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup Evolved
Billy Hylton485 views
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013) by Adam Dunford
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 Dunford1.6K views

More from Nicholas Zakas

Enough with the JavaScript already! by
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!Nicholas Zakas
260K views84 slides
The Pointerless Web by
The Pointerless WebThe Pointerless Web
The Pointerless WebNicholas Zakas
7K views64 slides
JavaScript APIs you’ve never heard of (and some you have) by
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
51.4K views67 slides
JavaScript Timers, Power Consumption, and Performance by
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceNicholas Zakas
54.4K views128 slides
Scalable JavaScript Application Architecture 2012 by
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Nicholas Zakas
94K views114 slides
Maintainable JavaScript 2012 by
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012Nicholas Zakas
90.8K views85 slides

More from Nicholas Zakas(20)

Enough with the JavaScript already! by Nicholas Zakas
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
Nicholas Zakas260K views
JavaScript APIs you’ve never heard of (and some you have) by 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)
Nicholas Zakas51.4K views
JavaScript Timers, Power Consumption, and Performance by Nicholas Zakas
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Nicholas Zakas54.4K views
Scalable JavaScript Application Architecture 2012 by Nicholas Zakas
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
Nicholas Zakas94K views
Maintainable JavaScript 2012 by Nicholas Zakas
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
Nicholas Zakas90.8K views
High Performance JavaScript (CapitolJS 2011) by Nicholas Zakas
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas57.5K views
Maintainable JavaScript 2011 by Nicholas Zakas
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
Nicholas Zakas12.1K views
High Performance JavaScript 2011 by Nicholas Zakas
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
Nicholas Zakas10.1K views
Mobile Web Speed Bumps by Nicholas Zakas
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas13.4K views
High Performance JavaScript (Amazon DevCon 2011) by Nicholas Zakas
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas4.6K views
Progressive Enhancement 2.0 (Conference Agnostic) by Nicholas Zakas
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas42.5K views
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011) by 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)
Nicholas Zakas10.1K views
YUI Test The Next Generation (YUIConf 2010) by Nicholas Zakas
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)
Nicholas Zakas3.7K views
High Performance JavaScript (YUIConf 2010) by Nicholas Zakas
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
Nicholas Zakas61.8K views
High Performance JavaScript - Fronteers 2010 by Nicholas Zakas
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
Nicholas Zakas4.2K views
Nicholas' Performance Talk at Google by Nicholas Zakas
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at Google
Nicholas Zakas4.6K views
High Performance JavaScript - WebDirections USA 2010 by Nicholas Zakas
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas59.7K views
Performance on the Yahoo! Homepage by Nicholas Zakas
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas7.9K views
High Performance JavaScript - jQuery Conference SF Bay Area 2010 by Nicholas Zakas
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
Nicholas Zakas47.7K views

Recently uploaded

How the World's Leading Independent Automotive Distributor is Reinventing Its... by
How the World's Leading Independent Automotive Distributor is Reinventing Its...How the World's Leading Independent Automotive Distributor is Reinventing Its...
How the World's Leading Independent Automotive Distributor is Reinventing Its...NUS-ISS
15 views25 slides
Perth MeetUp November 2023 by
Perth MeetUp November 2023 Perth MeetUp November 2023
Perth MeetUp November 2023 Michael Price
12 views44 slides
Melek BEN MAHMOUD.pdf by
Melek BEN MAHMOUD.pdfMelek BEN MAHMOUD.pdf
Melek BEN MAHMOUD.pdfMelekBenMahmoud
14 views1 slide
ChatGPT and AI for Web Developers by
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersMaximiliano Firtman
174 views82 slides
20231123_Camunda Meetup Vienna.pdf by
20231123_Camunda Meetup Vienna.pdf20231123_Camunda Meetup Vienna.pdf
20231123_Camunda Meetup Vienna.pdfPhactum Softwareentwicklung GmbH
23 views73 slides
Special_edition_innovator_2023.pdf by
Special_edition_innovator_2023.pdfSpecial_edition_innovator_2023.pdf
Special_edition_innovator_2023.pdfWillDavies22
14 views6 slides

Recently uploaded(20)

How the World's Leading Independent Automotive Distributor is Reinventing Its... by NUS-ISS
How the World's Leading Independent Automotive Distributor is Reinventing Its...How the World's Leading Independent Automotive Distributor is Reinventing Its...
How the World's Leading Independent Automotive Distributor is Reinventing Its...
NUS-ISS15 views
Perth MeetUp November 2023 by Michael Price
Perth MeetUp November 2023 Perth MeetUp November 2023
Perth MeetUp November 2023
Michael Price12 views
Special_edition_innovator_2023.pdf by WillDavies22
Special_edition_innovator_2023.pdfSpecial_edition_innovator_2023.pdf
Special_edition_innovator_2023.pdf
WillDavies2214 views
Understanding GenAI/LLM and What is Google Offering - Felix Goh by NUS-ISS
Understanding GenAI/LLM and What is Google Offering - Felix GohUnderstanding GenAI/LLM and What is Google Offering - Felix Goh
Understanding GenAI/LLM and What is Google Offering - Felix Goh
NUS-ISS39 views
Data-centric AI and the convergence of data and model engineering: opportunit... by Paolo Missier
Data-centric AI and the convergence of data and model engineering:opportunit...Data-centric AI and the convergence of data and model engineering:opportunit...
Data-centric AI and the convergence of data and model engineering: opportunit...
Paolo Missier29 views
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors by sugiuralab
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors
sugiuralab11 views
AMAZON PRODUCT RESEARCH.pdf by JerikkLaureta
AMAZON PRODUCT RESEARCH.pdfAMAZON PRODUCT RESEARCH.pdf
AMAZON PRODUCT RESEARCH.pdf
JerikkLaureta14 views
How to reduce cold starts for Java Serverless applications in AWS at JCON Wor... by Vadym Kazulkin
How to reduce cold starts for Java Serverless applications in AWS at JCON Wor...How to reduce cold starts for Java Serverless applications in AWS at JCON Wor...
How to reduce cold starts for Java Serverless applications in AWS at JCON Wor...
Vadym Kazulkin70 views
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum... by NUS-ISS
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...
NUS-ISS28 views
Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen... by NUS-ISS
Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen...Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen...
Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen...
NUS-ISS23 views
Emerging & Future Technology - How to Prepare for the Next 10 Years of Radica... by NUS-ISS
Emerging & Future Technology - How to Prepare for the Next 10 Years of Radica...Emerging & Future Technology - How to Prepare for the Next 10 Years of Radica...
Emerging & Future Technology - How to Prepare for the Next 10 Years of Radica...
NUS-ISS15 views
handbook for web 3 adoption.pdf by Liveplex
handbook for web 3 adoption.pdfhandbook for web 3 adoption.pdf
handbook for web 3 adoption.pdf
Liveplex19 views
Black and White Modern Science Presentation.pptx by maryamkhalid2916
Black and White Modern Science Presentation.pptxBlack and White Modern Science Presentation.pptx
Black and White Modern Science Presentation.pptx
maryamkhalid291614 views

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.