https://byfat.xxx/deep-emo-shit

1<!doctype html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <title>deep emo shit</title>
6  

6<script>(function(d) {var config = {kitId: 'vxr6hox',scriptTimeout: 1000,async: true},h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)})(document);</script>

6
7  <meta name="viewport" content="width=device-width, initial-scale=1">
8  <link rel="shortcut icon" href="https://lightning.svbtle.com/cargo/favicon-3686f5990e669ad2a1684f0ac250c4d9ddc03e2ef6f3c980f17b7aae786833ef.ico">
9  <link rel="icon" sizes="196x196" href="https://lightning.svbtle.com/cargo/apple-touch-icon-8ed2bd858a30400ead0535543ffb8ad2ab3e036a2f0adb797dc641458d00a41a.png">
10  <link rel="mask-icon" href="https://lightning.svbtle.com/cargo/default-b7e7b5361ab4c50a9ceb6dc296e0f157e2ec9c2f2c6f30832d991dc361d69512.svg" color="black">
11  <meta name="generator" content="Svbtle.com" />
12  <meta name="description" content="The other day in IRC my good friend Divya brought up Dustin Curtis’s recent blog posts by saying “it seems like he’s so sad.” I agreed. To be sure, Dustin’s more recent writing covers topics that his blog has been more or less focusing on since it... | @ fat | Star trek flow, so they klingon me"/>
13  <link rel="canonical" href="http://byfat.xxx/deep-emo-shit" />
14  <meta property="og:url" content="http://byfat.xxx/deep-emo-shit" />
15  <meta property="twitter:site" content="@svbtle" />
16  <meta property="twitter:title" content="deep emo shit" />
17  <meta property="twitter:description" content="The other day in IRC my good friend Divya brought up Dustin Curtis’s recent blog posts by saying “it seems like he’s so sad.” I agreed. To be sure, Dustin’s more recent writing covers topics that his blog has been more or less focusing on since it..." />
18  <meta property="twitter:creator" content="@fat" />
19  <meta name="twitter:card" content="summary_large_image" />
20  <meta name="twitter:image" content="https://svbtleusercontent.com/inline_fat_24345323970966_raw.jpg" />
21  <meta property="twitter:domain" content="http://byfat.xxx" />
22  <meta property="og:title" content="deep emo shit &bull; @ fat" />
23  <meta property="og:type" content="article" />
24  <meta property="og:description" content="The other day in IRC my good friend Divya brought up Dustin Curtis’s recent blog posts by saying “it seems like he’s so sad.” I agreed. To be sure, Dustin’s more recent writing covers topics that his blog has been more or less focusing on since it... | @ fat | Star trek flow, so they klingon me" />
25  <meta property="og:image" content="https://svbtleusercontent.com/inline_fat_24345323970966_raw.jpg" />
26  <meta property="og:site_name" content="@ fat on Svbtle" />
27  <meta property="fb:app_id" content="346346195413177" />
28  <link rel="alternate" type="application/rss+xml" href="http://byfat.xxx/feed" />
29  <link rel="stylesheet" href="https://lightning.svbtle.com/cargo/legacy/build.blog-120c367e4cc2cdf2d031c71f795ecea0ef4033f8b24d12d8e147c86e08e2ed2a.css" media="all" data-turbolinks-track="reload" />
30  

30<script src="https://lightning.svbtle.com/cargo/build.blog-b198d2a5100fafb3283da7f26c83fd6304e8643e39535b2c46d930a9690fad48.js" data-turbolinks-track="reload"></script>

30
31  <script async src="https://www.googletagmanager.com/gtag/js?id=

31G-VGMRYDBB5R

31"></script>

32<script>
33  window.dataLayer = window.dataLayer || [];
34  function gtag(){dataLayer.push(arguments);}
35  gtag('js', new Date());
36  gtag('set', 'linker', {
37    'accept_incoming': true
38  });
39  gtag('config', 'G-VGMRYDBB5R');
40  gtag('config', 'UA-33088259-1');
41</script>

41</head>
42<body class="overlord blog">
43<style scoped>
44figure.avatar a,
45figure#user_logo a,
46figure#user_foot a,
47nav#overlord.user_top figure#logo_top a,
48figure.kudo.complete div.filling {
49  background-image: url('https://svbtleusercontent.com/b7nkPG7EpCauxLRfHQky7g02380xsuap_medium.png')
50}
51
52figure.kudo.activated div.filling,
53figure.kudo.complete div.filling {
54  background-color: #F3A500;
55}
56
57figure.kudo.activated a,
58figure.kudo.complete a {
59  border-color: #F3A500;
60}
61
62blockquote,
63a blockquote,
64div#readnext:hover span.flank_title,
65div#foot_more:hover a,
66div#foot_userbar a#bottom_tagline span:hover,
67article.linked h1.article_title a:hover,
68a.continue_button:hover,
69article p a:hover,
70ul#lightning_drop,
71figure#user_foot,
72ul#user_links li a:hover,
73ul#foot_links li a:hover,
74a.buttonize:hover,
75button.buttonize:hover,
76a.buttonize.outline:hover,
77button.buttonize.outline:hover,
78nav.pagination span.next a:hover,
79nav.pagination span.prev a:hover,
80section#readnext:hover p span,
81nav#overlord.user_top figure#logo_top {
82  border-color: #F3A500;
83}
84/*figure#user_logo,*/
85
86figure.avatar,
87nav#overlord.user_top figure#logo_top a,
88ul#user_links li a:hover,
89ul#foot_links li a:hover,
90a.buttonize:hover,
91button.buttonize:hover,
92a.buttonize.outline:hover,
93button.buttonize.outline:hover,
94nav.pagination span.next a:hover,
95nav.pagination span.prev a:hover,
96figure#user_logo a,
97figure#user_foot a  {
98	background-color: #F3A500;
99}
100
101h6.separator_title.read_first,
102header#user_top h2 a,
103footer#blog_foot h5 a,
104article.post h1 a:hover,
105div.preview strong,
106nav#overlord h2#nav_title.user_top a,
107section#readnext:hover h3,
108section#readnext:hover p span {
109  color: #F3A500;
110}
111
112@keyframes titlePulse
113  {
114  0% {
115    color: #000000;
116  }
117  50% {
118    color: #F3A500;
119  }
120  100% {
121    color: #000000;
122  }
123}
124
125@-moz-keyframes titlePulse
126  {
127  0% {
128    color: #000000;
129  }
130  50% {
131    color: #F3A500;
132  }
133  100% {
134    color: #000000;
135  }
136}
137
138@-webkit-keyframes titlePulse
139  {
140  0% {
141    color: #000000;
142  }
143  50% {
144    color: #F3A500;
145  }
146  100% {
147    color: #000000;
148  }
149}
150
151
152</style>
153
154<figure id="loading">&nbsp;</figure>
155<nav id="overlord" class="user_top">
156  <div id="lockup" class="">
157    <figure id="logo_top" class=" user_top">
158      <a href="/">Svbtle</a>
159    </figure>
160    <h2 id="nav_title" class="user_top"><a href="http://byfat.xxx">@ fat</a></h2>
161  </div>
162  <figure id="hamburger">
163    <a href="#menu" id="hamburger_button">Menu</a>
164  </figure>
165  <ul id="dropdown" class="onblog">
166    <li class="dropdown_message">
167     <a href="https://svbtle.com">@ fat is writing on the <span class="logoize">Svbtle</span> network.</a>
168    </li>
169    <li><a href="https://code.byfat.xxx"  target="_blank">code.byfat.xxx</a></li>
170    <li><a href="https://x.com/fat" class="xdotcom" target="_blank">@fat</a></li>
171    <li><a href="/feed">rss feed</a></li>
172    <li style="margin: 0; padding: 0;"><hr class="overlord_nav" /></li>
173    <li><a href="https://svbtle.com/about">about svbtle</a></li>
174    <li><a href="https://svbtle.com/signup">sign up</a></li>
175  </ul>
176</nav>
177<div id="whiteout"></div>
178
179<section id="container" class="blog user_post">
180  <article id="bQHSYJizErjv68uGBYD9me" class="post  historical">
181	<time datetime="2012-11-12" class="article_time">November 12, 2012</time>
182  <h1 class="article_title">
183    <a href="http://byfat.xxx/deep-emo-shit">deep emo shit</a>
184  </h1>
185	<p>The other day in IRC my good friend Divya brought up <a href="http://dcurt.is">Dustin Curtis’s</a> recent blog posts by saying “it seems like he’s so sad.”</p>
186
187<p>I agreed.</p>
188
189<p><a href="https://svbtleusercontent.com/fat_24345323970966_raw.jpg"><img src="https://svbtleusercontent.com/inline_fat_24345323970966_raw.jpg" alt="document.jpg"></a></p>
190
191<p>To be sure, Dustin’s more recent writing covers topics that his blog has been more or less focusing on since it’s inception (largely tech),&nbsp;but this undertone of “sadness” seems more explicit than in the past. </p>
192
193<p>And it was precisely this explicitness&nbsp;– and perhaps my proximity to <a href="http://dcurt.is/the-fight">this particular story</a> – which served as a reminder of the <em>transparency</em> and <em>vulnerability</em> inherent in writing. </p>
194
195<hr>
196
197<p>After leaving my job at Twitter, I decided to take a break from writing here. But I didn’t stop writing code (perhaps i even wrote more of it).</p>
198
199<p>Sigmund Freud has this line:</p>
200<blockquote class="short"><p>Unexpressed emotions will never die. They are buried alive and will come forth later in uglier ways.</p>
201</blockquote>
202<p>What I hadn’t anticipated, was that the “uglier way” Freud was talking about would be for me javascript.</p>
203
204<hr>
205
206<p>Its been over a year since Mark and I released [Bootstrap](twitter.github.com/bootstrap), and over the last few months the codebase has seemed largely insufferable. I’m just too impatient for it.</p>
207
208<p>For me, Bootstrap is very fun, not serious&nbsp;– nearly every line is a joke. It’s trying to provoke you. Taking shortcuts. Demanding that you reread it. Reread it again. It’s very pop. Very optimistic, yung. Forward. Playful. </p>
209
210<p>I love it for that. And I wouldn’t dream of changing it. But I just haven’t had the mood for it lately.</p>
211
212<p>The code for my latest project <a href="http://maker.github.com/ratchet/">Ratchet</a> is very different. It’s very conservative. It’s not meant to draw attention to itself. It’s very explicit. Assertive, necessary. It’s easy to approach. It’s a vanilla milkshake. </p>
213
214<p>Functionally, the content of both Bootstrap and Ratchet is as it should be. But what’s really interesting to me are the undertones&nbsp;–&nbsp;or rather the potential for the same sort of undertones you would expect to find in literature, or blogs, or any other creative writing form…&nbsp;and I’m finding them in my javascript.</p>
215
216<p>The differences in style between these two projects aren’t just arbitrary preferences. They’re very definite, derived expressions, representative of my mood over time.</p>
217
218<p>For me, these expressions serve as a sort of testament to javascript as a creative language&nbsp;(and perhaps a formal articulation of my discomfort with the idea of something like idiomatic.js).</p>
219
220<p>It’s precisely this potential for expression which makes it not only bearable, but actually exciting to face the implementation of yet another modal or yet another button. Like an artist painting a bowl of fruit, if I had to express each work the same way&nbsp;–&nbsp;with the only variety being in the fruits themselves – I’d surely have gone mad by now.</p>
221
222  <figure class="postend kudo able clearfix" id="kudo_bQHSYJizErjv68uGBYD9me">
223    <a href="#kudo">
224      <div class="filling">&nbsp;</div>
225    </a>
226    <div class="num">2,534</div>
227    <div class="txt">Kudos</div>
228  </figure>
229  <figure class="side kudo able clearfix" id="kudo_side_bQHSYJizErjv68uGBYD9me">
230    <a href="#kudo">
231      <div class="filling">&nbsp;</div>
232    </a>
233    <div class="num">2,534</div>
234    <div class="txt">Kudos</div>
235  </figure>
236</article>
237
238</section>
239<section id="readnext">
240  <a href="http://byfat.xxx/deleuze-on-working-together">
241    <h4 class="readnext_header">Now read this</h4>
242    <h3 class="readnext_title">in·ti·mate</h3>
243    <p class="readnext_content">i think there’s something to intimacy. even though it’s almost certainly the wrong word for what i’m talking about (i really mean something closer to a gender-inclusive-bromance). nonetheless, i want to make a case for it. and i want to... <span class="continue_btn">Continue&nbsp;&rarr;</span></p>
244  </a>
245</section>
246<footer id="blog_foot" class="cf">
247  <ul id="foot_links">
248    <li><a href="https://x.com/fat">@fat</a></li>
249    <li><a href="https://code.byfat.xxx" >code.byfat.xxx</a></li>
250  </ul>
251  <figure id="user_foot"><a href="/">Svbtle</a></figure>
252  <h5><a href="http://byfat.xxx">@ fat</a></h5>
253</footer>
254<footer id="foot">
255  <figure id="logo_foot"><a href="https://svbtle.com">Svbtle</a></figure>
256  <a href="https://svbtle.com/terms" style="color: #ccc; margin-left: 25px;">Terms</a> <span style="color: #ccc;">•</span> <a href="https://svbtle.com/privacy" style="color: #ccc;">Privacy</a>
257  <span style="color: #ccc;">•</span> <a href="https://svbtle.com/promise" style="color: #ccc; margin-right: 15px;">Promise</a>
258  <br/><br/>
259</footer>
260
261<div id="lights">&nbsp;</div>
262<div id="app-data" data-name="svbtle" data-version="8.5-legible" data-magicNum="2572031820.15"></div><div id="px-data" data-ax="posts" data-sx="show"></div><div id="user-data" data-here="false" data-state="logged-out"></div><div id="blog-data" data-title="@ fat" data-blogname="fat" data-extid="ihnV5V64BTsuw3nHHu9qHx" data-color="F3A500" data-color-rgb="243,165,0" data-color-rgba="(243,165,0,0.5)" data-blog-tracker="UA-33088259-1"></div></body>
263</html>