A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 46KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>The History of the URL: Domain, Protocol, and Port (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="https://eager.io/blog/the-history-of-the-url-domain-and-protocol/">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. The History of the URL: Domain, Protocol, and Port (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="https://eager.io/blog/the-history-of-the-url-domain-and-protocol/">Source originale du contenu</a></h3>
  445. <p class="teaser">
  446. On the <a href="https://www.rfc-editor.org/rfc/rfc805.txt">11th of January 1982</a> twenty two computer scientists
  447. met to discuss an issue with ‘computer mail’ (now known as email).
  448. Attendees included <a href="https://en.wikipedia.org/wiki/Bill_Joy">the
  449. guy who would create Sun Microsystems</a>,
  450. <a href="https://en.wikipedia.org/wiki/Dave_Lebling">the guy who made Zork</a>, <a href="https://en.wikipedia.org/wiki/David_L._Mills">the NTP
  451. guy</a>, and <a href="https://en.wikipedia.org/wiki/Bob_Fabry">the guy who convinced
  452. the government to pay for Unix</a>. The
  453. problem was simple: there were 455 hosts on the ARPANET and the situation was
  454. getting out of control.
  455. </p>
  456. <p><img src="images/arpanet-1969.gif" alt="ARPANET circa 1969"/></p>
  457. <p>This issue was occuring now because the ARPANET was on the verge of
  458. <a href="https://www.rfc-editor.org/rfc/rfc801.txt">switching</a> from its original <a href="https://en.wikipedia.org/wiki/Network_Control_Program">NCP
  459. protocol</a>, to the TCP/IP
  460. protocol which powers what we now call the Internet. With that switch
  461. suddenly there would be a multitude of interconnected networks (an ‘Inter...
  462. net’) requiring a more ‘hierarchical’ domain system where ARPANET could
  463. resolve its own domains while the other networks resolved theirs.</p>
  464. <p>Other
  465. networks at the time had great names like “COMSAT”, “CHAOSNET”,
  466. “UCLNET” and “INTELPOSTNET” and were maintained by groups of universities
  467. and companies all around the US who wanted to be able to communicate, and
  468. could afford to lease 56k lines from the phone company and buy
  469. the requisite <a href="https://en.wikipedia.org/wiki/PDP-11">PDP-11s</a> to handle routing.</p>
  470. <p><a href="http://www.saccade.com/writing/projects/PDP11/PDP-11.html"><img src="images/pdp11.jpg" alt="PDP-11"/></a></p>
  471. <p>In the original ARPANET design, a central Network Information Center (NIC) was
  472. responsible for maintaining a file listing every host on the network. The file
  473. was known as the <a href="https://tools.ietf.org/html/rfc952"><code>HOSTS.TXT</code></a> file, similar to the <code>/etc/hosts</code> file on a Linux
  474. or OS X system today. Every network change would
  475. <a href="https://www.rfc-editor.org/rfc/rfc952.txt">require</a> the NIC to FTP (a protocol
  476. invented in <a href="https://tools.ietf.org/html/rfc114">1971</a>) to every host on the
  477. network, a significant load on their infrastructure.</p>
  478. <p>Having a single file list every host on the Internet would, of course, not
  479. scale indefinitely. The priority was email, however, as it
  480. was the predominant addressing challenge of the day. Their ultimate conclusion
  481. was to create a hierarchical system in which you could query an external system
  482. for just the domain or set of domains you needed. In their words: “The
  483. conclusion in this area was that the current ‘user@host’ mailbox identifier
  484. should be extended to ‘user@host.domain’ where ‘domain’ could be a hierarchy of
  485. domains.” And the domain was born.</p>
  486. <p><a href="https://personalpages.manchester.ac.uk/staff/m.dodge/cybergeography/atlas/"><img src="images/arpanet.gif" alt="ARPANET map"/></a></p>
  487. <p>It’s important to dispel any illusion that these decisions were made with
  488. prescience for the future the domain name would have. In fact, their elected
  489. solution was primarily decided because it was the “one causing least difficulty
  490. for existing systems.” For example, <a href="https://www.rfc-editor.org/rfc/rfc799.txt">one
  491. proposal</a> was for email addresses to
  492. be of the form <code>&lt;user&gt;.&lt;host&gt;@&lt;domain&gt;</code>. If email usernames of the day hadn’t
  493. already had ‘.’ characters you might be emailing me at ‘zack.eager@io’ today.</p>
  494. <p><a href="https://personalpages.manchester.ac.uk/staff/m.dodge/cybergeography/atlas/"><img src="images/arpanet-1987.gif" alt="ARPANET circa 1987"/></a></p>
  495. <h3 id="uucp-and-the-bang-path">UUCP and the Bang Path</h3>
  496. <blockquote>
  497. <p>
  498. It has been said that the principal function of an operating system is to
  499. define a number of different names for the same object, so that it can busy
  500. itself keeping track of the relationship between all of the different names.
  501. Network protocols seem to have somewhat the same characteristic.
  502. </p>
  503. <p>-- David D. Clark, <a href="https://www.rfc-editor.org/rfc/rfc814.txt"><code>1982</code></a>
  504. </p>
  505. </blockquote>
  506. <p>Another <a href="https://www.rfc-editor.org/ien/ien116.txt">failed proposal</a> involved
  507. separating domain components with the exclamation mark (<code>!</code>). For example, to
  508. connect to the <code>ISIA</code> host on <code>ARPANET</code>, you would connect to <code>!ARPA!ISIA</code>.
  509. You could then query for hosts using wildcards, so <code>!ARPA!*</code> would return to
  510. you every <code>ARPANET</code> host.</p>
  511. <p>This method of addressing wasn’t a crazy divergence from the standard, it was
  512. an attempt to maintain it. The system of exclamation separated hosts dates to
  513. a data transfer tool called <a href="https://en.wikipedia.org/wiki/UUCP">UUCP</a>
  514. <a href="http://www.cs.dartmouth.edu/~doug/reader.pdf">created</a> in 1976. If you’re
  515. reading this on an OS X or Linux computer, <code>uucp</code> is likely still installed and
  516. available at the terminal.</p>
  517. <p>ARPANET was introduced in 1969, and quickly became a powerful communication tool...
  518. amoung the handful of universities and government institutions which had access
  519. to it. The Internet as we know it wouldn’t become publically available outside
  520. of research insitutions until <a href="http://www.cybertelecom.org/notes/nsfnet.htm">1991</a>,
  521. twenty one years later. But that didn’t mean computer users weren’t communicating.</p>
  522. <p><img src="images/coupler.jpg" alt="Acoustic Coupler"/></p>
  523. <p>In the era before the Internet, the general method of communication between
  524. computers was with a direct point-to-point dial up connection. For example, if
  525. you wanted to send me a file, you would have your modem call my modem, and we
  526. would transfer the file. To craft this into a network of sorts, UUCP was born.</p>
  527. <p>In this system, each computer has a file which lists the hosts its aware of,
  528. their phone number, and a username and password on that host. You then craft a
  529. ‘path’, from your current machine to your destination, through hosts which each
  530. know how to connect to the next:</p>
  531. <pre><code>sw-hosts!digital-lobby!zack
  532. </code></pre>
  533. <p><img src="images/uucp.jpg" alt="Business card featuring UUCP address"/></p>
  534. <p>This address would form not just a method of sending me files or connecting
  535. with my computer directly, but also would be my email address. In this era
  536. before ‘mail servers’, if my computer was off you weren’t sending me an email.</p>
  537. <p>While use of ARPANET was restricted to top-tier universities, UUCP created a
  538. bootleg Internet for the rest of us. It formed the basis for both
  539. <a href="https://en.wikipedia.org/wiki/Usenet">Usenet</a> and the
  540. <a href="https://en.wikipedia.org/wiki/Bulletin_board_system">BBS</a> system.</p>
  541. <h3 id="dns">DNS</h3>
  542. <p>Ultimately, the DNS system we still use today would be
  543. <a href="https://www.rfc-editor.org/rfc/rfc882.txt">proposed</a> in 1983. If you run a
  544. DNS query today, for example using the <code>dig</code> tool, you’ll likely see a response
  545. which looks like this:</p>
  546. <pre><code>;; ANSWER SECTION:
  547. google.com. 299 IN A 172.217.4.206
  548. </code></pre>
  549. <p>This is informing us that google.com is reachable at <code>172.217.4.206</code>. As you
  550. might know, the <code>A</code> is informing us that this is an ‘address’ record, mapping a
  551. domain to an IPv4 address. The <code>299</code> is the ‘time to live’, letting us know
  552. how many more seconds this value will be valid for, before it should be queried
  553. again. But what does the <code>IN</code> mean?</p>
  554. <p><code>IN</code> stands for ‘Internet’. Like so much of this, the field dates back to an
  555. era when there were several competing computer networks which needed to
  556. interoperate. Other potential values were <code>CH</code> for the
  557. <a href="https://en.wikipedia.org/wiki/Chaosnet">CHAOSNET</a> or <code>HS</code> for Hesiod which was
  558. the name service of the <a href="https://en.wikipedia.org/wiki/Project_Athena">Athena
  559. system</a>. CHAOSNET is long dead,
  560. but a much evolved version of Athena is still used by students at MIT to this
  561. day. You can find the list of <a href="http://www.iana.org/assignments/dns-parameters/dns-parameters.xhtml">DNS
  562. classes</a>
  563. on the IANA website, but it’s no surprise only one potential value is in common
  564. use today.</p>
  565. <h3 id="tlds">TLDs</h3>
  566. <blockquote>
  567. <p>
  568. It is extremely unlikely that any other TLDs will be created.
  569. </p>
  570. <p>
  571. — John Postel, <a href="https://tools.ietf.org/html/rfc1591"><code class="year">1994</code></a>
  572. </p>
  573. </blockquote>
  574. <p>Once it was decided that domain names should be arranged hierarchically, it
  575. became necessary to decide what sits at the root of that hierarchy. That root
  576. is traditionally signified with a single ‘.’. In fact, ending all of your
  577. domain names with a ‘.’ is semantically correct, and will absolutely work in
  578. your web browser: <a href="http://google.com."><code>google.com.</code></a></p>
  579. <p>The first TLD was <code>.arpa</code>. It allowed users to address their old
  580. traditional ARPANET hostnames during the transition. For example, if
  581. my machine was previously registered as <code>hfnet</code>, my new address would be
  582. <code>hfnet.arpa</code>. That was only temporary, during the transition,
  583. server administrators had a very important choice to make: which of the five
  584. TLDs would they assume? “.com”, “.gov”, “.org”, “.edu” or “.mil”.</p>
  585. <p>When we say DNS is hierarchical, what we mean is there is a set of root DNS
  586. servers which are responsible for, for example, turning <code>.com</code> into the <code>.com</code>
  587. nameservers, who will in turn answer how to get to <code>google.com</code>. The root DNS
  588. zone of the internet is composed of thirteen DNS server clusters. There are
  589. only <a href="https://www.internic.net/zones/named.cache">13 server clusters</a>, because
  590. that’s all we can fit in a single UDP packet. Historically, DNS has operated
  591. through UDP packets, meaning the response to a request can never be more than
  592. 512 bytes.</p>
  593. <pre><code>
  594. ; This file holds the information on root name servers needed to
  595. ; initialize cache of Internet domain name servers
  596. ; (e.g. reference this file in the "cache . <file>"
  597. ; configuration file of BIND domain name servers).
  598. ;
  599. ; This file is made available by InterNIC
  600. ; under anonymous FTP as
  601. ; file /domain/named.cache
  602. ; on server FTP.INTERNIC.NET
  603. ; -OR- RS.INTERNIC.NET
  604. ;
  605. ; last update: March 23, 2016
  606. ; related version of root zone: 2016032301
  607. ;
  608. ; formerly NS.INTERNIC.NET
  609. ;
  610. . 3600000 NS A.ROOT-SERVERS.NET.
  611. A.ROOT-SERVERS.NET. 3600000 A 198.41.0.4
  612. A.ROOT-SERVERS.NET. 3600000 AAAA 2001:503:ba3e::2:30
  613. ;
  614. ; FORMERLY NS1.ISI.EDU
  615. ;
  616. . 3600000 NS B.ROOT-SERVERS.NET.
  617. B.ROOT-SERVERS.NET. 3600000 A 192.228.79.201
  618. B.ROOT-SERVERS.NET. 3600000 AAAA 2001:500:84::b
  619. ;
  620. ; FORMERLY C.PSI.NET
  621. ;
  622. . 3600000 NS C.ROOT-SERVERS.NET.
  623. C.ROOT-SERVERS.NET. 3600000 A 192.33.4.12
  624. C.ROOT-SERVERS.NET. 3600000 AAAA 2001:500:2::c
  625. ;
  626. ; FORMERLY TERP.UMD.EDU
  627. ;
  628. . 3600000 NS D.ROOT-SERVERS.NET.
  629. D.ROOT-SERVERS.NET. 3600000 A 199.7.91.13
  630. D.ROOT-SERVERS.NET. 3600000 AAAA 2001:500:2d::d
  631. ;
  632. ; FORMERLY NS.NASA.GOV
  633. ;
  634. . 3600000 NS E.ROOT-SERVERS.NET.
  635. E.ROOT-SERVERS.NET. 3600000 A 192.203.230.10
  636. ;
  637. ; FORMERLY NS.ISC.ORG
  638. ;
  639. . 3600000 NS F.ROOT-SERVERS.NET.
  640. F.ROOT-SERVERS.NET. 3600000 A 192.5.5.241
  641. F.ROOT-SERVERS.NET. 3600000 AAAA 2001:500:2f::f
  642. ;
  643. ; FORMERLY NS.NIC.DDN.MIL
  644. ;
  645. . 3600000 NS G.ROOT-SERVERS.NET.
  646. G.ROOT-SERVERS.NET. 3600000 A 192.112.36.4
  647. ;
  648. ; FORMERLY AOS.ARL.ARMY.MIL
  649. ;
  650. . 3600000 NS H.ROOT-SERVERS.NET.
  651. H.ROOT-SERVERS.NET. 3600000 A 198.97.190.53
  652. H.ROOT-SERVERS.NET. 3600000 AAAA 2001:500:1::53
  653. ;
  654. ; FORMERLY NIC.NORDU.NET
  655. ;
  656. . 3600000 NS I.ROOT-SERVERS.NET.
  657. I.ROOT-SERVERS.NET. 3600000 A 192.36.148.17
  658. I.ROOT-SERVERS.NET. 3600000 AAAA 2001:7fe::53
  659. ;
  660. ; OPERATED BY VERISIGN, INC.
  661. ;
  662. . 3600000 NS J.ROOT-SERVERS.NET.
  663. J.ROOT-SERVERS.NET. 3600000 A 192.58.128.30
  664. J.ROOT-SERVERS.NET. 3600000 AAAA 2001:503:c27::2:30
  665. ;
  666. ; OPERATED BY RIPE NCC
  667. ;
  668. . 3600000 NS K.ROOT-SERVERS.NET.
  669. K.ROOT-SERVERS.NET. 3600000 A 193.0.14.129
  670. K.ROOT-SERVERS.NET. 3600000 AAAA 2001:7fd::1
  671. ;
  672. ; OPERATED BY ICANN
  673. ;
  674. . 3600000 NS L.ROOT-SERVERS.NET.
  675. L.ROOT-SERVERS.NET. 3600000 A 199.7.83.42
  676. L.ROOT-SERVERS.NET. 3600000 AAAA 2001:500:9f::42
  677. ;
  678. ; OPERATED BY WIDE
  679. ;
  680. . 3600000 NS M.ROOT-SERVERS.NET.
  681. M.ROOT-SERVERS.NET. 3600000 A 202.12.27.33
  682. M.ROOT-SERVERS.NET. 3600000 AAAA 2001:dc3::35
  683. ; End of file
  684. </file></code></pre>
  685. <p>Root DNS servers operate in safes, inside locked cages. A clock sits on the
  686. safe to ensure the camera feed hasn’t been looped. Particularily given how
  687. slow <a href="https://en.wikipedia.org/wiki/Domain_Name_System_Security_Extensions">DNSSEC</a>
  688. implementation has been, an attack on one of those servers could
  689. allow an attacker to redirect all of the Internet traffic for a portion of
  690. Internet users. This, of course, makes for the most fantastic heist movie to
  691. have never been made.</p>
  692. <p>Unsurprisingly, the nameservers for top-level TLDs don’t actually change all
  693. that often.
  694. <a href="http://dns.measurement-factory.com/writings/wessels-pam2003-paper.pdf">98%</a> of
  695. the requests root DNS servers receive are in error, most often because of
  696. broken and toy clients which don’t properly cache their results. This became
  697. such a problem that several root DNS operators had to <a href="https://www.as112.net/">spin
  698. up</a> special servers just to return ‘go away’ to all the
  699. people asking for reverse DNS lookups on their local IP addresses.</p>
  700. <p>The TLD nameservers are administered by different companies and governments all
  701. around the world (<a href="https://www.verisign.com/">Verisign</a> manages <code>.com</code>). When you purchase a <code>.com</code> domain,
  702. about $0.18 goes to the ICANN, and $7.85 <a href="http://webmasters.stackexchange.com/questions/61467/if-icann-only-charges-18%C2%A2-per-domain-name-why-am-i-paying-10">goes
  703. to</a>
  704. Verisign.</p>
  705. <h3 id="punycode">Punycode</h3>
  706. <p>It is rare in this world that the silly name us developers think up for a new
  707. project makes it into the final, public, product. We might name the company
  708. database Delaware (because that’s where all the companies are registered), but
  709. you can be sure by the time it hits production it will be
  710. CompanyMetadataDatastore. But rarely, when all the stars align and the boss is
  711. on vacation, one slips through the cracks.</p>
  712. <p>Punycode is the system we use to encode unicode into domain names. The problem
  713. it is solving is simple, how do you write 比薩.com when the entire internet
  714. system was built around using the <a href="https://en.wikipedia.org/wiki/ASCII">ASCII</a>
  715. alphabet whose most foreign character is the tilde?</p>
  716. <p>It’s not a simple matter of switching domains to use
  717. <a href="https://en.wikipedia.org/wiki/Unicode">unicode</a>. The <a href="https://tools.ietf.org/html/rfc1035">original
  718. documents</a> which govern domains specify
  719. they are to be encoded in ASCII. Every piece of internet hardware from the
  720. last fourty years, including the
  721. <a href="http://www.cisco.com/c/en/us/support/routers/crs-1-multishelf-system/model.html">Cisco</a>
  722. and
  723. <a href="http://www.juniper.net/techpubs/en_US/release-independent/junos/information-products/pathway-pages/t-series/t1600/">Juniper</a>
  724. routers used to deliver this page to you make that assumption.</p>
  725. <p>The web itself was <a href="http://1997.webhistory.org/www.lists/www-talk.1994q3/1085.html">never
  726. ASCII-only</a>.
  727. It was actually originally concieved to speak <a href="https://en.wikipedia.org/wiki/ISO/IEC_8859-1">ISO
  728. 8859-1</a> which includes all of the
  729. ASCII characters, but adds an additional set of special characters like ¼ and
  730. letters with special marks like ä. It does not, however, contain any non-Latin
  731. characters.</p>
  732. <p>This restriction on HTML was ultimately removed in
  733. <a href="https://tools.ietf.org/html/rfc2070">2007</a> and that same year Unicode
  734. <a href="https://googleblog.blogspot.com/2008/05/moving-to-unicode-51.html">became</a> the
  735. most popular character set on the web. But domains were still confined to ASCII.</p>
  736. <p><a href="http://www.alanwood.net/unicode/"><img src="images/ie-hebrew.gif" alt="Hebrew in IE 5"/></a></p>
  737. <p>As you might guess, Punycode was not the first proposal to solve this problem.
  738. You most likely have heard of UTF-8, which is a popular way of encoding Unicode
  739. into bytes (the 8 is for the eight bits in a byte). In the year
  740. <a href="https://tools.ietf.org/html/draft-jseng-utf5-01">2000</a> several members of the
  741. Internet Engineering Task Force came up with UTF-5. The idea was to encode
  742. Unicode into five bit chunks. You could then map each five bits into a
  743. character allowed (A-V &amp; 0-9) in domain names. So if I had a website for
  744. Japanese language learning, my site 日本語.com would become the cryptic
  745. M5E5M72COA9E.com.</p>
  746. <p>This encoding method has several disadvantages. For one, A-V and 0-9 are used
  747. in the output encoding, meaning if you wanted to actually include one of those
  748. characters in your doman, it had to be encoded like everything else. This made
  749. for some very long domains, which is a serious problem when each segment of a
  750. domain is restricted to 63 characters. A domain in the Myanmar language would
  751. be restricted to no more than 15 characters. The proposal does make the very
  752. interesting suggestion of using UTF-5 to allow Unicode to be transmitted by
  753. Morse code and telegram though.</p>
  754. <p>There was also the question of how to let clients know that this domain was
  755. encoded so they could display them in the appropriate Unicode characters,
  756. rather than showing M5E5M72COA9E.com in my address bar. There were <a href="https://tools.ietf.org/html/draft-ietf-idn-compare-01">several
  757. suggestions</a>, one of
  758. which was to use an unused bit in the DNS response. It was the “last unused
  759. bit in the header”, and the DNS folks were “very hesitant to give it up”
  760. however.</p>
  761. <p>Another suggestion was to start every domain using this encoding method with
  762. <code>ra--</code>. At <a href="https://tools.ietf.org/html/draft-ietf-idn-race-00">the time</a>
  763. (mid-April 2000), there were no domains which happened to start with those
  764. particular characters. If I know anything about the Internet, someone
  765. registered an <code>ra--</code> domain out of spite immediately after the
  766. proposal was published.</p>
  767. <p>The <a href="https://tools.ietf.org/html/rfc3492">ultimate conclusion</a>, reached in
  768. 2003, was to adopt a format called Punycode which included a form of delta
  769. compression which could dramatically shorten encoded domain names. Delta
  770. compression is a particularily good idea because the odds are all of the
  771. characters in your domain are in the same general area within Unicode. For
  772. example, two characters in Farsi are going to be much closer together than a
  773. Farsi character and another in Hindi. To give an example of how this works, if
  774. we take the nonsense phrase:</p>
  775. <p>يذؽ</p>
  776. <p>In an uncompressed format, that would be stored as the three characters <code>[1610,
  777. 1584, 1597]</code> (based on their Unicode code points). To compress this we first
  778. sort it numerically (keeping track of where the original characters were):
  779. <code>[1584, 1597, 1610]</code>. Then we can store the lowest value (<code>1584</code>), and the
  780. delta between that value and the next character (<code>13</code>), and again for the
  781. following character (<code>23</code>), which is significantly less to transmit and store.</p>
  782. <p>Punycode then (very) efficiently encodes those integers into characters allowed
  783. in domain names, and inserts an <code>xn--</code> at the beginning to let consumers know
  784. this is an encoded domain. You’ll notice that all the Unicode characters end
  785. up together at the end of the domain. They don’t just encode their value, they
  786. also encode where they should be inserted into the ASCII portion of the domain.
  787. To provide an example, the website 熱狗sales.com becomes
  788. <code>xn--sales-r65lm0e.com</code>. Anytime you type a Unicode-based domain name into
  789. your browser’s address bar, it is encoded in this way.</p>
  790. <p>This transformation could be transparent, but that introduces a major security
  791. problem. All sorts of Unicode characters print identically to existing ASCII
  792. characters. For example, you likely can’t see the difference between Cyrillic
  793. small letter a (“а”) and Latin small letter a (“a”). If I register Cyrillic
  794. аmazon.com (xn--mazon-3ve.com), and manage to trick you into visiting it, it’s
  795. gonna be hard to know you’re on the wrong site. For that reason, when you
  796. visit <a href="http://🍕💩.ws">🍕💩.ws</a>, your browser somewhat lamely shows you
  797. <code>xn--vi8hiv.ws</code> in the address bar.</p>
  798. <h3 id="protocol">Protocol</h3>
  799. <p>The first portion of the URL is the protocol which should be used to access it.
  800. The most common protocol is <code>http</code>, which is the simple document transfer
  801. protocol Tim Berners-Lee invented specifically to power the web. It was not
  802. the only option. <a href="http://1997.webhistory.org/www.lists/www-talk.1993q2/0339.html">Some
  803. people</a>
  804. believed we should just use Gopher. Rather than being general-purpose, Gopher
  805. is specifically designed to send structured data similar to how a file tree is
  806. structured.</p>
  807. <p>For example, if you request the <code>/Cars</code> endpoint, it might return:</p>
  808. <pre><code>1Chevy Camaro /Archives/cars/cc gopher.cars.com 70
  809. iThe Camero is a classic fake (NULL) 0
  810. iAmerican Muscle car fake (NULL) 0
  811. 1Ferrari 451 /Factbook/ferrari/451 gopher.ferrari.net 70
  812. </code></pre>
  813. <p>which identifies two cars, along with some metadata about them and where you
  814. can connect to for more information. The understanding was your client would
  815. parse this information into a usable form which linked the entries with the
  816. destination pages.</p>
  817. <p><a href="http://www.yale.edu/pclt/WINWORLD/GOPHER.HTM"><img src="images/gopher.gif" alt="Gopher"/></a></p>
  818. <p>The first popular protocol was FTP, which was created in 1971, as a way of
  819. listing and downloading files on remote computers. Gopher was a logical
  820. extension of this, in that it provided a similar listing, but included
  821. facilities for also reading the metadata about entries. This meant it could
  822. be used for more liberal purposes like a news feed or a simple database. It
  823. did not have, however, the freedom and simplicity which characterizes HTTP and HTML.</p>
  824. <p>HTTP is a very simple protocol, particularily when compared to alternatives like
  825. FTP or even the <a href="https://http2.github.io/">HTTP/2</a> protocol which is rising in popularity today. First off,
  826. HTTP is entirely text based, rather than being composed of bespoke binary
  827. incantations (which would have made it significantly more efficient). Tim
  828. Berners-Lee correctly intuited that using a text-based format would make it
  829. easier for generations of programmers to develop and debug HTTP-based
  830. applications.</p>
  831. <p>HTTP also makes almost no assumptions about what you’re transmitting. Despite
  832. the fact that it was invented expliticly to accompany the HTML language, it
  833. allows you to specify that your content is of any type (using the MIME <code>Content-Type</code>,
  834. which was a new invention at the time). The protocol itself is rather simple:</p>
  835. <p>A request:</p>
  836. <pre><code class="lang-http">GET /index.html HTTP/1.1
  837. Host: www.example.com
  838. </code></pre>
  839. <p>Might respond:</p>
  840. <pre><code class="lang-http">HTTP/1.1 200 OK
  841. Date: Mon, 23 May 2005 22:38:34 GMT
  842. Content-Type: text/html; charset=UTF-8
  843. Content-Encoding: UTF-8
  844. Content-Length: 138
  845. Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
  846. Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
  847. ETag: "3f80f-1b6-3e1cb03b"
  848. Accept-Ranges: bytes
  849. Connection: close
  850. &lt;html&gt;
  851. &lt;head&gt;
  852. &lt;title&gt;An Example Page&lt;/title&gt;
  853. &lt;/head&gt;
  854. &lt;body&gt;
  855. Hello World, this is a very simple HTML document.
  856. &lt;/body&gt;
  857. &lt;/html&gt;
  858. </code></pre>
  859. <p>To put this in context, you can think of the networking system the Internet
  860. uses as starting with IP, the Internet Protocol. IP is responsible for
  861. getting a small packet of data (around 1500 bytes) from one computer
  862. to another. On top of that we have TCP, which is responsible for taking
  863. larger blocks of data like entire documents and files and sending them
  864. via many IP packets reliably. On top of that, we then implement a protocol
  865. like HTTP or FTP, which specifies what format should be used to make
  866. the data we send via TCP (or UDP, etc.) understandable and meaningful.</p>
  867. <p>In other words, TCP/IP sends a whole bunch of bytes to another computer,
  868. the protocol says what those bytes should be and what they mean.</p>
  869. <p>You can make your own protocol if you like, assemblying the bytes in your
  870. TCP messages however you like. The only requirement is that whoever you
  871. are talking to speaks the same language. For this reason, it’s common
  872. to standardize these protocols.</p>
  873. <p>There are, of course, many less important protocols to play with. For example
  874. there is a <a href="https://www.rfc-editor.org/rfc/rfc865.txt">Quote of The Day</a>
  875. protocol (port 17), and a <a href="https://www.rfc-editor.org/rfc/rfc864.txt">Random
  876. Characters</a> protocol (port 19).
  877. They may seem silly today, but they also showcase just how important that a
  878. general-purpose document transmission format like HTTP was.</p>
  879. <h3 id="port">Port</h3>
  880. <p>The timeline of Gopher and HTTP can be evidenced by their default port numbers.
  881. Gopher is 70, HTTP 80. The HTTP port was assigned (likely by <a href="https://en.wikipedia.org/wiki/Jon_Postel">Jon
  882. Postel</a> at the IANA) at the request
  883. of Tim Berners-Lee sometime between <a href="https://tools.ietf.org/html/rfc1060">1990</a>
  884. and <a href="https://tools.ietf.org/html/rfc1340">1992</a>.</p>
  885. <p>This concept, of registering ‘port numbers’ predates even the Internet.
  886. In the original NCP protocol which powered the ARPANET remote
  887. addresses were identified by 40 bits. The first 32 identified the remote
  888. host, similar to how an IP address works today. The last eight were known as
  889. the <a href="https://tools.ietf.org/html/rfc433">AEN</a> (it stood for “Another Eight-bit Number”),
  890. and were used by the remote machine in the way we use a port number, to separate
  891. messages destined for different processes. In other words, the address
  892. specifies which machine the message should go to, and the AEN (or port number)
  893. tells that remote machine which application should get the message.</p>
  894. <p>They quickly <a href="https://tools.ietf.org/html/rfc322">requested</a> that users register
  895. these ‘socket numbers’ to limit potential collisions. When port numbers were
  896. expanded to 16 bits by TCP/IP, that registration process was continued.</p>
  897. <p>While protocols have a default port, it makes sense to allow ports to also be
  898. specified manually to allow for local development and the hosting of multiple
  899. services on the same machine. That same logic was the
  900. <a href="http://1997.webhistory.org/www.lists/www-talk.1992/0335.html">basis</a> for
  901. prefixing websites with <code>www.</code>. At the time, it was unlikely anyone was
  902. getting access to the root of their domain, just for hosting an ‘experimental’
  903. website. But if you give users the hostname of your specific machine
  904. (<code>dx3.cern.ch</code>), you’re in trouble when you need to replace that machine. By
  905. using a common subdomain (<code>www.cern.ch</code>) you can change what it points to as
  906. needed.</p>
  907. <h3 id="the-bit-in-between">The Bit In-between</h3>
  908. <p>As you probably know, the URL syntax places a double slash (<code>//</code>) between
  909. the protocol and the rest of the URL:</p>
  910. <pre><code>http://eager.io
  911. </code></pre>
  912. <p>That double slash was inherited from the <a href="https://en.wikipedia.org/wiki/Apollo/Domain">Apollo</a>
  913. computer system which was one of the first networked workstations. The Apollo
  914. team had a similar problem to Tim Berners-Lee: they needed a way to separate
  915. a path from the machine that path is on. Their solution was to create a
  916. special path format:</p>
  917. <pre><code>//computername/file/path/as/usual
  918. </code></pre>
  919. <p>And TBL copied that scheme. Incidentally, he now <a href="https://www.w3.org/People/Berners-Lee/FAQ.html#etc">regrets</a>
  920. that decision, wishing the domain (in this case <code>example.com</code>) was the first portion of the path:</p>
  921. <pre><code>http:com/example/foo/bar/baz
  922. </code></pre>
  923. <h3 id="the-rest">The Rest</h3>
  924. <p>So far, we have covered the components of a URL which allow you to connect
  925. to a specific application on a remote server somewhere on the Internet. The second,
  926. and final, post of this series will cover those components of the URL which
  927. are processed by that remote application to return to you a specific piece of content,
  928. the Path, Fragment, Query and Auth.</p>
  929. <p>I would have liked to include all of the content in a single post, but its length
  930. was proving intimidating to readers. The second post is absolutely worth your
  931. time however. It includes things like the alternative forms for URLs Tim Berners-Lee
  932. considered, the history of forms and how the GET parameter syntax was decided, and the fifteen
  933. year argument over how to make URLs which won’t change. If you’d like, you can
  934. subscribe below to be notified when that post is released.</p>
  935. </article>
  936. </section>
  937. <nav id="jumpto">
  938. <p>
  939. <a href="/david/blog/">Accueil du blog</a> |
  940. <a href="https://eager.io/blog/the-history-of-the-url-domain-and-protocol/">Source originale</a> |
  941. <a href="/david/stream/2019/">Accueil du flux</a>
  942. </p>
  943. </nav>
  944. <footer>
  945. <div>
  946. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  947. <p>
  948. Bonjour/Hi!
  949. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  950. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  951. </p>
  952. <p>
  953. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  954. </p>
  955. <p>
  956. Voici quelques articles choisis :
  957. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  958. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  959. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  960. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  961. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  962. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  963. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  964. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  965. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  966. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  967. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  968. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  969. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  970. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  971. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  972. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  973. </p>
  974. <p>
  975. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  976. </p>
  977. <p>
  978. Je ne traque pas ta navigation mais mon
  979. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  980. conserve des logs d’accès.
  981. </p>
  982. </div>
  983. </footer>
  984. <script type="text/javascript">
  985. ;(_ => {
  986. const jumper = document.getElementById('jumper')
  987. jumper.addEventListener('click', e => {
  988. e.preventDefault()
  989. const anchor = e.target.getAttribute('href')
  990. const targetEl = document.getElementById(anchor.substring(1))
  991. targetEl.scrollIntoView({behavior: 'smooth'})
  992. })
  993. })()
  994. </script>