Skip to content

Instantly share code, notes, and snippets.

@LNA
Created January 29, 2015 16:59
Show Gist options
  • Save LNA/9ae606571160f1635ed4 to your computer and use it in GitHub Desktop.
Save LNA/9ae606571160f1635ed4 to your computer and use it in GitHub Desktop.
Headers Vrs. Body
[~] curl -v http://justinjackson.ca/words.html
* Adding handle: conn: 0x7fe4a2004000
* Adding handle: send: 0
* Adding handle: recv: 0
* Curl_addHandleToPipeline: length: 1
* - Conn 0 (0x7fe4a2004000) send_pipe: 1, recv_pipe: 0
* About to connect() to justinjackson.ca port 80 (#0)
* Trying 104.130.236.182...
* Connected to justinjackson.ca (104.130.236.182) port 80 (#0)
> GET /words.html HTTP/1.1
> User-Agent: curl/7.30.0
> Host: justinjackson.ca
> Accept: */*
>
< HTTP/1.1 200 OK
* Server nginx is not blacklisted
< Server: nginx
< Vary: Accept-Encoding,Cookie
< X-Cacheable: SHORT
< Cache-Control: max-age=600, must-revalidate
< X-Cache: HIT: 4
< Content-Type: text/html
< X-Cache-Group: normal
< Date: Thu, 29 Jan 2015 16:35:15 GMT
< Keep-Alive: timeout=20
< X-Type: default
< Transfer-Encoding: chunked
< ETag: "1a11ad-1946-50bc76dde5686"
< Connection: keep-alive
< X-Pass-Why:
< Set-Cookie: X-Mapping-fjhppofk=4843DFFDB6FE19C5C39BD3D33977FCF2; path=/
< Last-Modified: Sat, 03 Jan 2015 23:00:53 GMT
<
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Words</title>
<link href="words.css" rel="stylesheet">
<link href="https://plus.google.com/u/0/115056462967470089501" rel="author">
</head>
<body>
<h1>This is a web page.</h1>
<p>There's not much here.</p>
<p>Just words.</p>
<p><strong>And you're reading them.</strong></p>
<p>We've become obsessed with fancy designs, responsive layouts, and scripts that do magical things.</p>
<p><strong>But the most powerful tool on the web is still words.</strong></p>
<p>I wrote these words, and you're reading them: <em>that's</em> magical.</p>
<p>I'm in a little city in British Columbia; you're probably somewhere else. I wrote this early in the morning, June 20th, 2013; you're probably reading it at a different time. I wrote this on my laptop; you could be reading this on your phone, a tablet or a desktop.</p>
<p>You and I have been able to connect because<em> I wrote this </em>and <em>you're reading it.</em> <strong>That's the web</strong>. Despite our different locations, devices, and time-zones we can connect <em>here, </em>on a simple HTML page.</p>
<p>I wrote this in a text editor. It's 6&nbsp;kB. I didn't need a Content Management System, a graphic designer, or a software developer. There's not much code on this page at all, just simple markup for paragraphs, hierarchy, and emphasis.</p>
<p>I remember teaching my daughter to code HTML when she was 8. The first thing she wrote was <a href="http://bizbox.ca/kidlet/">a story about a squirrel</a>. She wasn't &quot;writing HTML&quot;; <strong>she was sharing something with the world</strong>. She couldn't believe that she could write a story on our home computer, and then publish it for the world to see. She didn't really care about HTML, she cared about sharing her stories.</p>
<p><strong>You are still reading.</strong></p>
<p>Think about all the things you could communicate with a simple page like this. If you're a businessperson, you could sell something. If you're a teacher, you could teach something. If you're an artist, you could show something you've made. <strong>And if your words are good, people will read them.</strong></p>
<p>If you're a web designer, or a client who is working with one, I'd like to challenge you to think about words first. Instead of starting with a style guide or a Photoshop mockup, <em>start with words on a page</em>.</p>
<p>What do you have to say? If you don't know, there's not much use in adding all that other cruft. <strong>Just start with one page</strong>, with a single focus. Write it and publish it, and then <em>iterate on that</em>. Every time you're about to add something, ask yourself: does this help me communicate better? Will that additional styling, image, or hyperlink give my audience more understanding? If the answer's &quot;no&quot;, don't add it.</p>
<p><strong>At its heart, web design should be about words</strong>. Words don't come <em>after</em> the design is done. Words are the beginning, the core, the focus.</p>
<p>Start with words.</p>
<p>
Cheers,<br>
Justin Jackson<br>
<a href="http://twitter.com/mijustin">@mijustin</a><br>
<a href="https://plus.google.com/u/0/115056462967470089501?rel=author">On Google+</a>
</p>
<p class="note">Want to build and launch your own products on the web? Looking to build an audience online? <a href="http://justinjackson.ca/newsletter">Subscribe to my newsletter</a>.</p>
<p class="note">This post was originally inspired by Jason Fried's design of <a href="https://knowyourcompany.com/">Know Your Company</a>.</p>
<h2>Translations</h2>
<ul>
<li><a href="words_af.html" hreflang="af">Afrikaans</a> – thanks to <a href="https://twitter.com/LeoGopal">Leo Gopal</a></li>
<li><a href="words_cs.html" hreflang="cs">Czech</a> – thanks to <a href="https://twitter.com/jenahajek">Jan Hajek</a></li>
<li><a href="words_de.html" hreflang="de">German</a> – thanks to <a href="http://yannickihmels.de">Yannick Ihmels</a> and <a href="https://twitter.com/david_l991">David Lucas</a></li>
<li><a href="words_el.html" hreflang="el">Greek</a> – thanks to <a href="https://twitter.com/yiannis_k">Yiannis Konstantakopoulos</a></li>
<li><a href="words_es.html" hreflang="es">Spanish</a> – thanks to <a href="https://twitter.com/_ramgp">Ramón García-Pérez</a></li>
<li><a href="words_fa.html" hreflang="fa">Persian</a> – thanks to <a href="https://twitter.com/kamyarns">Kamyar</a></li>
<li><a href="words_fr.html" hreflang="fr">French</a> – thanks to <a href="https://twitter.com/plmd">PLMD</a> and <a href="https://twitter.com/framaka">Alexis Kauffmann</a></li>
<li><a href="words_hu.html" hreflang="hu">Hungarian</a> – thanks to Hüperión Fordítói Műhely</li>
<li><a href="words_it.html" hreflang="it">Italian</a> – thanks to <a href="https://twitter.com/pixline">Pixline</a></li>
<li><a href="words_ja.html" hreflang="ja">Japanese</a> – thanks to <span>Elle Kasai</span></li>
<li><a href="words_ko.html" hreflang="ko">Korean</a> – thanks to <a href="https://twitter.com/hongminhee">Hong Minhee</a></li>
<li><a href="words_mt.html" hreflang="mt">Maltese</a> – thanks to <a href="http://mangionlightfoot.com">Vanessa Galea</a></li>
<li><a href="words_nl.html" hreflang="nl">Dutch</a> – thanks to <a href="https://twitter.com/fschaap">Frank Schaap</a></li>
<li><a href="words_pl.html" hreflang="pl">Polish</a> – thanks to <a href="https://twitter.com/_wolanski">Gregory Wolanski</a></li>
<li><a href="words_pt-BR.html" hreflang="pt-BR">Brazilian Portuguese</a> – thanks to <a href="https://twitter.com/heitorbelloni">Heitor Belloni</a></li>
<li><a href="words_ro.html" hreflang="ro">Romanian</a> – thanks to <a href="http://fr.linkedin.com/in/lucianpricop">Lucian Pricop</a></li>
<li><a href="words_ru.html" hreflang="ru">Russian</a> – thanks to <a href="https://twitter.com/artw_dev">Ярослав Wебком</a></li>
<li><a href="words_sv.html" hreflang="sv">Swedish</a> – thanks to <a href="https://twitter.com/mymarkup">Erik Stattin</a></li>
<li><a href="words_tr.html" hreflang="tr">Turkish</a> – thanks to <a href="https://twitter.com/opereysin">Opereyşın</a></li>
<li><a href="words_zh.html" hreflang="zh">Chinese</a> – thanks to <a href="https://twitter.com/ZhuangdaZhu">Zhuangda Zhu</a></li>
</ul>
<script src="words.js"></script>
</body>
</html>
* Connection #0 to host justinjackson.ca left intact
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment