forked from BloombergGraphics/whatiscode
/
index.html
3123 lines (2134 loc) · 306 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!--
Copyright 2015 Bloomberg Finance L.P.
The contents of this file are licensed under the Creative Commons
Attribution-NonCommercial-NoDerivatives 4.0 International
license. For the full text of the license, please see:
https://creativecommons.org/licenses/by-nc-nd/4.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="utf-8">
<title>Paul Ford: What is Code? | Bloomberg</title>
<meta name="viewport" content="width=device-width">
<meta name="author" content="Paul Ford" />
<meta name="description" content="What do you need to know about code to survive in a suspicious world?"/>
<meta property="og:site_name" content="Bloomberg.com"/>
<meta property="og:title" content="What Is Code? If You Don't Know, You Need to Read This">
<meta property="og:longTitle" content="What is code? If you don't know, you need to read this:">
<meta property="og:image" content="http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/images/promo.jpg"/>
<meta property="og:description" content="The world belongs to people who code. Those who don’t understand will be left behind."/>
<meta name="keywords" content="Bloomberg Graphics, BusinessWeek, code"/>
<meta property="og:url" content="http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/"/>
<meta name="parsely-type" content="post" data-ephemeral="true">
<meta name="parsely-section" content="graphics" data-ephemeral="true">
<meta property="og:type" content="article"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@business"/>
<link rel="stylesheet" type="text/css" href="http://www.bloomberg.com/graphics/assets/css/fonts.css"/>
<script src='http://www.bloomberg.com/graphics/assets/js/lib/head.js?'></script>
<script>
var isBrokenIE = /MSIE\s/.test(navigator.userAgent) && parseFloat(navigator.appVersion.split("MSIE")[1]) < 10;
if (isBrokenIE) document.documentElement.className += ' b-ie'
if (!console.log) console.log = function(){}
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
document.documentElement.className += " safari";
// alert('safari')
}
</script>
<link rel="shortcut icon" href="images/favicon.png?v=1" />
<!-- build:css head.css -->
<link href="styles/background.css" rel="stylesheet"/>
<link href="styles/business.css" rel="stylesheet"/>
<link href="styles/main.css" rel="stylesheet"/>
<!-- endbuild -->
<link href='http://fonts.googleapis.com/css?family=Roboto+Mono:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="background-canvas"></div>
<div class="top-banner">
<div class="center">
<ul>
<li>
<a target="_blank" href="http://www.bloomberg.com/company/?tophat=open">Bloomberg the Company
<span class="banner-icon external-link">
<svg id="Layer_1" x="0px" y="0px" width="13px" height="12px">
<g>
<path fill="#FFFFFF" d="M9.929,7.071v2.144c0,0.531-0.189,0.985-0.566,1.362C8.985,10.954,8.531,11.143,8,11.143H2.429 c-0.531,0-0.986-0.189-1.363-0.566C0.688,10.2,0.5,9.746,0.5,9.214V3.643c0-0.531,0.188-0.985,0.566-1.363 c0.377-0.377,0.832-0.565,1.363-0.565h4.714c0.062,0,0.114,0.02,0.154,0.06c0.04,0.041,0.061,0.092,0.061,0.154v0.429 c0,0.062-0.021,0.114-0.061,0.154c-0.04,0.04-0.092,0.06-0.154,0.06H2.429c-0.295,0-0.547,0.105-0.757,0.315 c-0.21,0.209-0.314,0.462-0.314,0.756v5.572c0,0.294,0.104,0.547,0.314,0.757c0.21,0.209,0.462,0.314,0.757,0.314H8 c0.295,0,0.547-0.105,0.757-0.314c0.209-0.21,0.314-0.463,0.314-0.757V7.071c0-0.062,0.021-0.113,0.061-0.153 c0.04-0.041,0.091-0.061,0.154-0.061h0.429c0.062,0,0.114,0.02,0.154,0.061C9.908,6.958,9.929,7.009,9.929,7.071z M12.5,1.286 v3.429c0,0.116-0.042,0.216-0.127,0.301c-0.085,0.085-0.186,0.127-0.302,0.127S11.854,5.1,11.771,5.015l-1.179-1.179L6.226,8.203 C6.181,8.248,6.129,8.27,6.071,8.27S5.962,8.248,5.917,8.203L5.154,7.439C5.109,7.395,5.087,7.343,5.087,7.286 c0-0.058,0.022-0.109,0.067-0.154L9.52,2.765L8.342,1.586C8.257,1.502,8.214,1.402,8.214,1.286s0.042-0.217,0.127-0.302 c0.084-0.084,0.185-0.127,0.301-0.127h3.429c0.116,0,0.217,0.042,0.302,0.127C12.458,1.069,12.5,1.169,12.5,1.286z"></path>
</g>
</svg>
</span>
</a>
</li>
<li>
<a target="_blank" href="https://bba.bloomberg.net/">Bloomberg Anywhere Login
<span class="banner-icon terminal">
<svg id="Layer_2" x="0px" y="0px" width="23px" height="13px" viewBox="0 0 22.708 14.833" enable-background="new 0 0 22.708 14.833">
<g>
<path fill="none" stroke="#FFFFFF" stroke-width="0.75" stroke-miterlimit="10" d="M10.94,8.877c0,0.226-0.183,0.408-0.408,0.408 H1.126c-0.226,0-0.408-0.183-0.408-0.408V1.175c0-0.226,0.183-0.408,0.408-0.408h9.405c0.226,0,0.408,0.183,0.408,0.408V8.877z"></path>
<path fill="none" stroke="#FFFFFF" stroke-width="0.75" stroke-miterlimit="10" d="M22.014,8.877c0,0.226-0.183,0.408-0.408,0.408 H12.2c-0.226,0-0.408-0.183-0.408-0.408V1.175c0-0.226,0.183-0.408,0.408-0.408h9.405c0.226,0,0.408,0.183,0.408,0.408V8.877z"></path>
<path fill="none" stroke="#FFFFFF" stroke-width="0.75" stroke-miterlimit="10" d="M10.088,11.08v0.689 c0,0.256,0.287,0.464,0.852,0.464c0.565,0,0.852-0.208,0.852-0.464V11.08l0.22,0.004c1.593,0.177,2.79,0.754,2.79,1.46 c0,0.845-1.636,1.529-3.708,1.529s-3.729-0.685-3.729-1.529c0-0.693,1.14-1.279,2.691-1.466L10.088,11.08z"></path>
</g>
</svg>
</span>
</a>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div id='top-space' ></div>
<div id="full-header" class='sticky-header'>
<a href="http://bloomberg.com/"><img id="header-logo" class='white' src="http://www.bloomberg.com/graphics/assets/img/BB-Logo-2line-wb.svg"></a>
<div id="hidden-banner-ad">
<div id='top-ad-container' class="container bannerad"></div>
</div>
<div id="header-sharing">
<div class="header-icon" id="header-icon-twitter"><img class="blue" src="http://www.bloomberg.com/graphics/assets/img/twitter.png"><img class="white" src="http://www.bloomberg.com/graphics/assets/img/twitter_w.png"></div>
<div class="header-icon" id="header-icon-fb"><img class="blue" src="http://www.bloomberg.com/graphics/assets/img/facebook.png"><img class="white" src="http://www.bloomberg.com/graphics/assets/img/facebook_w.png"></div>
</div>
<div id='sharing-space' style='width: 100px;'></div>
</div>
<div class="bot overlay" id="paulbot" data-mode="off"></div>
<div style='display: none' id="toc" data-module="toc">
<div id="toc-toggle"></div>
</div>
<div id="headerArt">
<div class="vertCenter">
<h1 id="fit">WHAT <em>IS</em></h1>
<div class="byline">
<h2 class="bylineDate"><span class="hide-mobile">BUSINESSWEEK </span>JUNE 11, 2015</h2>
<h2 class="bylinePaul">BY PAUL FORD</h2>
</div>
<h1 id="fit2">CODE?<span class="blinking-cursor">|</span></h1>
</div>
</div>
<div class="clear" id='background-hook'></div>
<article id="code">
<section class="code-section" data-section="1">
<div class="code-content">
<div class='bannerad-inline'></div>
<p> </p>
<div class="letter"><a href="#" class="clickme"><img src="images/letter.jpg"> A message from Josh Tyrangiel</a></div>
<div class="josh" style="display: none"><p>Software has been around since the 1940s. Which means that people have been faking their way through meetings about software, and the code that builds it, for generations. Now that software lives in our pockets, runs our cars and homes, and dominates our waking lives, ignorance is no longer acceptable. The world belongs to people who code. Those who don’t understand will be left behind.</p>
<p>This issue comprises a single story devoted to demystifying code and the culture of the people who make it. There’s some technical language along with a few pretty basic mathematical concepts. There are also lots of solid jokes and lasting insights. It may take a few hours to read, but that’s a small price to pay for adding decades to your career.</p>
<p><em>—Josh Tyrangiel</em></p></div>
<div class="sectionNum sectionNum1">1</div>
<h2 id="sec-1">The Man in the Taupe Blazer</h2>
<div class="outline-text-2" id="text-1">
<p class="introText">You are an educated, successful person capable of abstract thought. A VP doing an SVP’s job. Your office, appointed with decent furniture and a healthy amount of natural light filtered through vertical blinds, is commensurate with nearly two decades of service to the craft of management.
</p>
<p>Copper plaques on the wall attest to your various leadership abilities inside and outside the organization: One, the Partner in Innovation Banquet Award 2011, is from the sales team for your support of its 18-month effort to reduce cycle friction—net sales increased 6.5 percent; another, the Civic Guidelight 2008, is for overseeing a volunteer team that repainted a troubled public school top to bottom. </p>
<p>You have a reputation throughout the organization as a careful person, bordering on penny-pinching. The way you’d put it is, you are loath to pay for things that can’t be explained. You expect your staff to speak in plain language. This policy has served you well in many facets of operations, but it hasn’t worked at all when it comes to overseeing software development.</p>
<p>For your entire working memory, <em>some Internet thing</em> has come along every two years and suddenly hundreds of thousands of dollars (inevitably millions) must be poured into amorphous projects with variable deadlines. Content management projects, customer relationship management integration projects, mobile apps, paperless office things, global enterprise resource planning initiatives—no matter how tightly you clutch the purse strings, software finds a way to pry open your fingers.</p>
<p>Here we go again. On the other side of your (well-organized) desk sits <em>this guy</em> in his mid-30s with a computer in his lap. He’s wearing a taupe blazer. He’s come to discuss spending large sums to create intangible abstractions on a “website re-architecture project.” He needs money, support for his team, new hires, external resources. It’s preordained that you’ll give these things to him, because the CEO signed off on the initiative—and yet should it all go pear-shaped, you will be responsible. Coders are insanely expensive, and projects that start with uncomfortably large budgets have an ugly tendency to grow from there. You need to understand where the hours will go.</p>
<div class="imageLeft"><img src="images/sec1_taupe.jpg"><div class="photoCaption">Photographer: Corey Olsen for Bloomberg Businessweek</div></div>
<p>He says: “We’re basically at the limits with WordPress.”</p>
<p>Who wears a taupe blazer?</p>
<p>The CTO was fired six months ago. That CTO has three kids in college and a mustache. It was a bad exit. The man in the taupe blazer (TMitTB) works for the new CTO. She comes from Adobe and has short hair and no mustache. </p>
<p>Here is what you’ve been told: All of the computer code that keeps the website running must be replaced. At one time, it was very valuable and was keeping the company running, but the new CTO thinks it’s garbage. She tells you the old code is spaghetti and your systems are straining as a result. That the third-party services you use, and pay for monthly, are old and busted. Your competitor has an animated shopping cart that drives across the top of the screen at checkout. That cart remembers everything customers have ever purchased and generates invoices on demand. Your cart has no memory at all. </p>
<p>Salespeople stomp around your office, sighing like theater students, telling you how embarrassed they are by the site. Nothing works right on mobile. Orders are cutting off halfway. People are logged out with no warning. Something must be done.</p>
<p>Which is why TMitTB is here. </p>
<p>Who’s he, anyway? Webmaster? IT? No, he’s a “Scrum Master.”</p>
<p>“My people are split on platform,” he continues. “Some want to use Drupal 7 and make it work with Magento—which is still PHP.” He frowns. “The other option is just doing the back end in Node.js with Backbone in front.”</p>
<p>You’ve furrowed your brow; he eyes you sympathetically and explains: “With that option it’s all JavaScript, front and back.” </p>
<p>Those are all terms you’ve heard. You’ve read the first parts of the Wikipedia pages and a book on software project estimation. It made some sense at the time.</p>
<p>You ask the universal framing question: “Did you cost these options?”</p>
<p>He gives you a number and a date. You know in your soul that the number is half of what it should be and that the project will go a year over schedule. He promises long-term efficiencies: The $85,000 in Oracle licenses will no longer be needed; engineering is moving to a free, open-sourced database. “We probably should have done that back when we did the Magento migration,” he says. Meaning, of course, that his predecessor probably should have done that. </p>
<p>You consult a spreadsheet and remind him that the Oracle contract was renewed a few months ago. So, no, actually, at least for now, you’ll keep eating that cost. Sigh.</p>
<p>This man makes a third less than you, and his education ended with a B.S. from a large, perfectly fine state university. But he has 500+ connections on LinkedIn. That plus sign after the “500” bothers you. How many more than 500 people does he know? Five? Five thousand?</p>
<div class="videoWrapper">
<div class="videoWrapper2">
<script src='//cdn.gotraffic.net/projector/latest/bplayer.js'>BPlayer(null, {"id":"P4_i7PihRGiWcPh3gdNMhg","htmlChildId":"bbg-video-player-P4_i7PihRGiWcPh3gdNMhg","serverUrl":"http://www.bloomberg.com/api/embed","idType":"BMMR","autoplay":false,"video_autoplay_on_page":false,"log_debug":false,"ui_controls_popout":false,"use_js_ads":true,"ad_code_prefix":"","ad_tag_gpt_preroll":true,"ad_tag_gpt_midroll":true,"ad_tag_sz_preroll":"1x7","ad_tag_sz_midroll":"1x7","ad_tag_sz_overlay":"1x7","ad_network_id_preroll":"5262","ad_network_id_midroll":"5262","ad_network_id_overlay":"5262","ad_tag_cust_params_preroll":"","ads_vast_timeout":10000,"ads_playback_timeout":10000,"wmode":"opaque","use_comscore":true,"comscore_ns_site":"bloomberg","comscore_page_level_tags":{"bb_brand":"bbiz","bss_cont_play":0,"bb_region":"US"},"use_chartbeat":true,"chartbeat_uid":"15087","chartbeat_domain":"bloomberg.com","use_share_overlay":true,"share_metadata":{"canonical_url":"http://bloom.bg/1GzwRDU"},"vertical":"business","ad_tag_overlay":"business/videooverlay","zone":"video","source":"BBIZweb","module_conviva_insights":"enabled","conviva_account":"c3.Bloomberg","width":640,"height":360,"ad_tag":"","ad_tag_midroll":"","offsite_embed":false});</script>
</div>
</div>
<p>In some mysterious way, he outranks you. Not within the company, not in restaurant reservations, not around lawyers. Still: He strokes his short beard; his hands are tanned; he hikes; his socks are embroidered with little ninja. </p>
<p>“Don’t forget,” he says, “we’ve got to budget for apps.”</p>
<p>This is real. A Scrum Master in ninja socks has come into your office and said, “We’ve got to budget for apps.” Should it all go pear-shaped, his career will be just fine.</p>
<p>You keep your work in perspective by thinking about barrels of cash. You once heard that a U.S. dry barrel can hold about $100,000 worth of singles. Next year, you’ll burn a little under a barrel of cash on Oracle. One barrel isn’t that bad. But it’s never one barrel. Is this a 5-barrel project or a 10-barreler? More? Too soon to tell. But you can definitely smell money burning.</p>
<p>At this stage in the meeting, you like to look supplicants in the eye and say, <em>OK, you’ve given me a date and a budget</em>. But when will it be done? Really, truly, top-line-revenue-reporting finished? Come to confession; unburden your soul. </p>
<p>This time you stop yourself. You don’t want your inquiry to be met by a patronizing sigh of impatience or another explanation about ship dates, Agile cycles, and continuous delivery. Better for now to hide your ignorance. <em>When will it be done?</em> You are learning to accept that the answer for software projects is <em>never</em>.</p>
<img class="centered" src="images/emotes/taupe.gif">
</div>
<h3 id="sec-1-1"><span class="section">1.1</span> Why Are We Here?</h3>
<div class="outline-text-3" id="text-1-1">
<p>We are here because the editor of this magazine asked me, “Can you tell me what code is?”</p>
<p>“No,” I said. “First of all, I’m not good at the math. I’m a programmer, yes, but I’m an East Coast programmer, not one of these serious platform people from the Bay Area.” </p>
<p>I began to program nearly 20 years ago, learning via <code>oraperl</code>, a special version of the Perl language modified to work with the Oracle database. A month into the work, I damaged the accounts of 30,000 fantasy basketball players. They sent some angry e-mails. After that, I decided to get better.</p>
<p>Which is to say I’m not a natural. I love computers, but they never made any sense to me. And yet, after two decades of jamming information into my code-resistant brain, I’ve amassed enough knowledge that the computer has revealed itself. Its magic has been stripped away. I can talk to someone who used to work at Amazon.com or Microsoft about his or her work without feeling a burning shame. I’d happily talk to people from Google and Apple, too, but they so rarely reenter the general population. </p>
<p>The World Wide Web is what I know best (I’ve coded for money in the programming languages Java, JavaScript, Python, Perl, PHP, Clojure, and XSLT), but the Web is only one small part of the larger world of software development. There are 11 million professional software developers on earth, according to the research firm IDC. (An additional 7 million are hobbyists.) That’s roughly the population of the greater Los Angeles metro area. Imagine all of L.A. programming. East Hollywood would be for Mac programmers, West L.A. for mobile, Beverly Hills for finance programmers, and all of Orange County for Windows.</p>
<p>There are lots of other neighborhoods, too: There are people who write code for embedded computers smaller than your thumb. There are people who write the code that runs your TV. There are programmers for everything. They have different cultures, different tribal folklores, that they use to organize their working life. If you told me a systems administrator was taking a juggling class, that would make sense, and I’d expect a product manager to take a trapeze class. I’ve met information architects who list and rank their friendships in spreadsheets. Security research specialists love to party.</p>
<p>What I’m saying is, I’m one of 18 million. So that’s what I’m writing: my view of software development, as an individual among millions. Code has been my life, and it has been your life, too. It is time to understand how it all works.</p>
<p>Every month it becomes easier to do things that have never been done before, to create new kinds of chaos and find new kinds of order. Even though my math skills will never catch up, I love the work. Every month, code changes the world in some </p>
<div id="interestingWrap">
<div class="interesting1">
interesting,
<img class="centered" src="images/sec1_interesting.jpg" alt="">
</div>
<div class="interesting2">
wonderful,
<img class="centered" src="images/sec1_wonderful.jpg" alt="">
</div>
<div class="interesting3">
or disturbing way.
<img class="centered" src="images/sec1_horrible.jpg" alt="">
</div>
</div>
</div></section>
<div class='banner-container'><div class='bannerad'></div></div>
<section class="code-section" data-section="2">
<div class="code-content">
<div class="sectionNum sectionNum2">2</div>
<h2>Let’s Begin</h2>
<p>A computer is a clock with benefits. They all work the same, doing second-grade math, one step at a time: Tick, take a number and put it in box one. Tick, take another number, put it in box two. Tick, <em>operate</em> (an operation might be addition or subtraction) on those two numbers and put the resulting number in box one. Tick, check if the result is zero, and if it is, go to some other box and follow a new set of instructions. </p>
<div id='circuit' class="interactive-feature" data-module="circuit">
</div>
<div id="share-circuit" class="innershare">
<div class="innertw" data-mname='circuit'><img src="images/twitter-blk.png" width="20"></div>
</div>
<p>You, using a pen and paper, can do anything a computer can; you just can’t do those things billions of times per second. And those billions of tiny operations add up. They can cause a phone to boop, elevate an elevator, or redirect a missile. That raw speed makes it possible to pull off not one but multiple sleights of hand, card tricks on top of card tricks. Take a bunch of pulses of light reflected from an optical disc, apply some math to unsqueeze them, and copy the resulting pile of expanded impulses into some memory cells—then read from those cells to paint light on the screen. Millions of pulses, 60 times a second. That’s how you make the rubes believe they’re watching a movie.
</p>
<p>Apple has always made computers; Microsoft used to make only software (and occasional accessory hardware, such as mice and keyboards), but now it’s in the hardware business, with Xbox game consoles, Surface tablets, and Lumia phones. Facebook assembles its own computers for its massive data centers.</p>
<p>So many things are computers, or will be. That includes watches, cameras, air conditioners, cash registers, toilets, toys, airplanes, and movie projectors. Samsung makes computers that look like TVs, and Tesla makes computers with wheels and engines. Some things that aren’t yet computers—dental floss, flashlights—will fall eventually.</p>
<p>When you “batch” process a thousand images in Photoshop or sum numbers in Excel, you’re programming, at least a little. When you use computers too much—which is to say a typical amount—they start to change you. I’ve had Photoshop dreams, Visio dreams, spreadsheet dreams, and Web browser dreams. The dreamscape becomes fluid and can be sorted and restructured. I’ve had programming dreams where I move text around the screen. </p>
<p>You can make computers do wonderful things, but you need to understand their limits. They’re not all-powerful, not conscious in the least. They’re fast, but some parts—the processor, the RAM—are faster than others—like the hard drive or the network connection. Making them seem infinite takes a great deal of work from a lot of programmers and a lot of marketers.</p>
<p>The turn-of-last-century British artist William Morris once said you can’t have art without resistance in the materials. The computer and its multifarious peripherals are the materials. The code is the art.</p>
<h3><span class="section">2.1</span> How Do You Type an “A”?</h3>
<p>Consider what happens when you strike a key on your keyboard. Say a lowercase “a.” The keyboard is waiting for you to press a key, or release one; it’s constantly scanning to see what keys are pressed down. Hitting the key sends a scancode.</p>
<div id="keyboard" class="interactive-feature" data-module="keyboard">
</div>
<div class="innershare">
<div class="innertw" data-mname='keyboard'><img src="images/twitter-blk.png" width="20"></div>
</div>
<p>Just as the keyboard is waiting for a key to be pressed, the computer is waiting for a signal from the keyboard. When one comes down the pike, the computer interprets it and passes it farther into its own interior. “Here’s what the keyboard just received—do with this what you will.”</p>
<p>It’s simple now, right? The computer just goes to some table, figures out that the signal corresponds to the letter “a,” and puts it on screen. Of course not—too easy. Computers are machines. They don’t know what a screen or an “a” are. To put the “a” on the screen, your computer has to pull the image of the “a” out of its memory as part of a font, an “a” made up of lines and circles. It has to take these lines and circles and render them in a little box of pixels in the part of its memory that manages the screen. So far we have at least three representations of one letter: the signal from the keyboard; the version in memory; and the lines-and-circles version sketched on the screen. We haven’t even considered how to store it, or what happens to the letters to the left and the right when you insert an “a” in the middle of a sentence. Or what “lines and circles” mean when reduced to binary data. There are surprisingly many ways to represent a simple “a.” It’s amazing any of it works at all. </p>
<p>Coders are people who are willing to work backward to that key press. It takes a certain temperament to page through standards documents, manuals, and documentation and read things like “data fields are transmitted least significant bit first” in the interest of understanding why, when you expected “ü,” you keep getting “�.”</p>
<h3><span class="section">2.2</span> From Hardware to Software</h3>
<p>Hardware is a tricky business. For decades the work of integrating, building, and shipping computers was a way to build fortunes. But margins tightened. Look at Dell, now back in private hands, or Gateway, acquired by Acer. Dell and Gateway, two world-beating companies, stayed out of software, typically building PCs that came preinstalled with Microsoft Windows—plus various subscription-based services to increase profits. </p>
<p>This led to much cursing from individuals who’d spent $1,000 or more on a computer and now had to figure out how to stop the antivirus software from nagging them to pay up.</p>
<div class="listR" style="color:#3c3c3c">
<img src="images/ballmer.gif" alt="Steve Ballmer">
<div class="caption">Ballmer chants “Developers!”</div>
<div class="photoCaption">Source: Youtube</div>
</div>
<p>Years ago, when Microsoft was king, Steve Ballmer, sweating through his blue button-down, jumped up and down in front of a stadium full of people and chanted, “Developers! Developers! Developers! Developers!” </p>
<p>He yelled until he was hoarse: “I love this company!” Of course he did. If you can sell the software, if you can light up the screen, you’re selling infinitely reproducible nothings. The margins on nothing are great—until other people start selling even cheaper nothings or giving them away. Which is what happened, as free software-based systems such as Linux began to nibble, then devour, the server market, and free-to-use Web-based applications such as Google Apps began to serve as viable replacements for desktop software.</p>
<p>Expectations around software have changed over time. IBM unbundled software from hardware in the 1960s and got to charge more; Microsoft rebundled Internet Explorer with Windows in 1998 and got sued; Apple initially refused anyone else the ability to write software for the iPhone when it came out in 2007, and then opened the App Store, which expanded into a vast commercial territory—and soon the world had Angry Birds. Today, much hardware comes with some software—a PC comes with an operating system, for example, and that OS includes hundreds of subprograms, from mail apps to solitaire. Then you download or buy more.</p>
<p>There have been countless attempts to make software easier to write, promising that you could code in plain English, or manipulate a set of icons, or make a list of rules—software development so simple that a bright senior executive or an average child could do it. Decades of efforts have gone into helping civilians write code as they might use a calculator or write an e-mail. Nothing yet has done away with <em>developers, developers, developers, developers.</em> </p>
<p>Thus a craft, and a professional class that lives that craft, emerged. Beginning in the 1950s, but catching fire in the 1980s, a proportionally small number of people became adept at inventing ways to satisfy basic human desires (know the time, schedule a flight, send a letter, kill a zombie) by controlling the machine. Coders, starting with concepts such as “signals from a keyboard” and “numbers in memory,” created infinitely reproducible units of digital execution that we call software, hoping to meet the needs of the marketplace. Man, did they. The systems they built are used to manage the global economic infrastructure.<sup>
<a id="fnr.1" name="fnr.1" class="footref" href="#fn.1">1</a>
</sup> If coders don’t run the world, they run the things that run the world.</p>
<p>Most programmers aren’t working on building a widely recognized application like Microsoft Word. Software is everywhere. It’s gone from a craft of fragile, built-from-scratch custom projects to an industry of standardized parts, where coders absorb and improve upon the labors of their forebears (even if those forebears are one cubicle over). Software is there when you switch channels and your cable box shows you what else is on. You get money from an ATM—software. An elevator takes you up five stories—the same. Facebook releases software every day to something like a billion people, and that software runs inside Web browsers and mobile applications. Facebook looks like it’s just pictures of your mom’s crocuses or your son’s school play—but no, it’s software.</p>
<div class="bigimgWrap">
<img src="images/sec1_rubegoldberg.jpg" alt="">
<div class="photoCaption">Photographer: Boru O’Brien O’Connell for Bloomberg Businessweek; Set design: Dave Bryant </div>
</div>
<h3><span class="section">2.3</span> How Does Code Become Software?</h3>
<p>We know that a computer is a clock with benefits, and that software starts as code, but how?</p>
<p>We know that someone, somehow, enters a program into the computer and the program is made of code. In the old days, that meant putting holes in punch cards. Then you’d put the cards into a box and give them to an operator who would load them, and the computer would flip through the cards, identify where the holes were, and update parts of its memory, and then it would—OK, that’s a little too far back. Let’s talk about modern typing-into-a-keyboard code. It might look like this:</p>
<pre><code class="k">ispal: {x~|x}</code></pre>
<p>That’s in a language called, simply, K, famous for its brevity. <sup><a id="fnr.2" name="fnr.2" class="footref" href="#fn.2">2</a></sup>
That code will test if something is a palindrome. If you next typed in <code>ispal "able was i ere i saw elba"</code>, K will confirm that yes, this is a palindrome. </p>
<p>So how else might your code look? Maybe like so, in Excel (with all the formulas hidden away under the numbers they produce, and a check box that you can check): </p>
<img class="centered" src="images/sec1_excel.jpg" alt="Excel">
<p>But Excel spreadsheets are tricky, because they can hide all kinds of things under their numbers. This opacity causes risks. One study by a researcher at the University of Hawaii found that 88 percent of spreadsheets <a href="http://panko.shidler.hawaii.edu/SSR/Mypapers/whatknow.htm" target="_blank">contain errors</a>.</p>
<p>Programming can also look like Scratch, a language for kids:</p>
<img class="centered" src="images/sec1_excel2.jpg" alt="Scratch">
<p>That’s definitely programming right there—the computer is waiting for a click, for some input, just as it waits for you to type an “a,” and then it’s doing something repetitive, and it involves hilarious animals. </p>
<p>Or maybe:</p>
<pre><code class="fortran"> PRINT *, "WHY WON'T IT WORK
END
</code>
</pre>
<p>That’s in Fortran. The reason it’s not working is that you forgot to put a quotation mark at the end of the first line. Try a little harder, thanks.</p>
<p>All of these things are coding of one kind or another, but the last bit is what most programmers would readily identify as code. A sequence of symbols (using typical keyboard characters, saved to a file of some kind) that someone typed in, or copied, or pasted from elsewhere. That doesn’t mean the other kinds of coding aren’t valid or won’t help you achieve your goals. Coding is a broad human activity, like sport, or writing. When software developers think of coding, most of them are thinking about lines of code in files. They’re handed a problem, think about the problem, write code that will solve the problem, and then expect the computer to turn word into deed.</p>
<p>Code is inert. How do you make it ert? You run software that transforms it into machine language. The word “language” is a little ambitious here, given that you can make a computing device with wood and marbles. Your goal is to turn your code into an explicit list of instructions that can be carried out by interconnected logic gates,
thus turning your code into something that can be executed—software.</p>
<p>A compiler is software that takes the symbols you typed into a file and transforms them into lower-level instructions. Imagine a programming language called Business Operating Language United System, or Bolus. It’s a terrible language that will have to suffice for a few awkward paragraphs. It has one real command, <code>PRINT</code>. We want it to print <code>HELLO NERDS</code> on our screen. To that end, we write a line of code in a text file that says:</p>
<pre><code class="c">PRINT {HELLO NERDS}</code></pre>
<p>And we save that as <code>nerds.bol</code>. Now we run <code>gnubolus nerds.bol</code>, our imaginary compiler program. How does it start? The only way it can: by doing lexical analysis, going character by character, starting with the “p,” grouping characters into tokens, saving them into our one-dimensional tree boxes. Let’s be the computer.</p>
<table align="center" class="tokens">
<tr class="white">
<th>Character</th> <th>Meaning</th>
</tr>
<tr>
<td class="roboto">P</td>
<td><em>Hmmmm...?</em></td>
</tr>
<tr>
<td class="roboto">R</td>
<td><em>Someone say something?</em></td>
</tr>
<tr>
<td class="roboto">I</td>
<td><em>I’m waiting...</em></td>
</tr>
<tr>
<td class="roboto">N</td>
<td>[drums fingers]</td>
</tr>
<tr>
<td class="roboto">T</td>
<td><em>Any time now...</em></td>
</tr>
<tr>
<td class="roboto">Space</td>
<td><em>Ah, "PRINT"</em></td>
</tr>
<tr>
<td class="roboto">{</td>
<td><em>String coming!</em></td>
</tr>
<tr>
<td class="roboto">H</td>
<td><em>These</em></td>
</tr>
<tr>
<td class="roboto">E</td>
<td><em>letters</em></em></td>
</tr>
<tr>
<td class="roboto">L</td>
<td><em>don’t</em></td>
</tr>
<tr>
<td class="roboto">L</td>
<td><em>matter</em></td>
</tr>
<tr>
<td class="roboto">O</td>
<td><em>la</em></td>
</tr>
<tr>
<td class="roboto">Space</td>
<td><em>la</em></td>
</tr>
<tr>
<td class="roboto">N</td>
<td><em>just</em></td>
</tr>
<tr>
<td class="roboto">E</td>
<td><em>saving</em></td>
</tr>
<tr>
<td class="roboto">R</td>
<td><em>them</em></td>
</tr>
<tr>
<td class="roboto">D</td>
<td><em>for</em></td>
</tr>
<tr>
<td class="roboto">S</td>
<td><em>later</em></td>
</tr>
<tr>
<td class="roboto">}</td>
<td><em>Stringtime is over!</em></td>
</tr>
<tr>
<td class="roboto">End of file</td>
<td><em>Time to get to work.</em></td>
</tr>
</table>
<p>The reason I’m showing it to you is so you can see how every character matters. Computers usually “understand” things by going character by character, bit by bit, transforming the code into other kinds of code as they go. The Bolus compiler now organizes the tokens into a little tree. Kind of like a sentence diagram. Except instead of nouns, verbs, and adjectives, the computer is looking for functions and arguments. Our program above, inside the computer, becomes this: </p>
<img class="centered" src="images/sec1_tree.jpg">
<p>Trees are a really pleasant way of thinking of the world. Your memo at work has sections that have paragraphs? Tree. Your e-mail program contains messages that contain subject lines and addresses? Tree. Your favorite software program that has a menu bar with individual items that have subitems? Tree. Every day is Arbor Day in Codeville. </p>
<div id="tree" class="interactive-feature" data-module="tree">
</div>
<div class="innershare">
<div class="innertw" data-mname='tree'><img src="images/twitter-blk.png" width="20"></div>
</div>
<p>Of course, it’s all a trick. If you cut open a computer, you’ll find countless little boxes in rows, places where you can put and retrieve bytes. Everything ultimately has to get down to things in little boxes pointing to each other. That’s just how things work. So that tree is actually more like this:</p>
<img class="centered" src="images/sec1_tree2.jpg" alt="">
<p>Every character truly, truly matters. Every single stupid misplaced semicolon, space where you meant tab, bracket instead of a parenthesis—mistakes can leave the computer in a state of panic. The trees don’t know where to put their leaves. Their roots decay. The boxes don’t stack neatly. For not only are computers as dumb as a billion marbles, they’re also positively Stradivarian in their delicacy.</p>
<p>That process of going character by character can be wrapped up into a routine—also called a function, a method, a subroutine, or component. (Little in computing has a single, reliable name, which means everyone is always arguing over semantics.) And that routine can be run as often as you need. Second, you can print anything you wish, not just one phrase. Third, you can repeat the process forever, and nothing will stop you until the machine breaks or, barring that, heat death of the universe. Obviously no one besides Jack Nicholson in <em>The Shining</em> really needs to keep typing the same phrase over and over, and even then it turned out to be a bad idea.</p>
<p>Instead of worrying about where the words are stored in memory and having to go character by character, programming languages let you think of things like strings, arrays, and trees. That’s what programming gives you. You may look over a programmer’s shoulder and think the code looks complex and boring, but it’s covering up repetitive boredom that’s unimaginably vast.<sup>
<a id="fnr.3" name="fnr.3" class="footref" href="#fn.3">3</a>
</sup>
</p>
<p>This thing we just did with individual characters, compiling a program down into a fake assembly language so that the nonexistent computer can print each character one at a time? The same principle applies to every pixel on your screen, every frequency encoded in your MP3 files, and every imaginary cube in Minecraft. Computing treats human language as an arbitrary set of symbols in sequences. It treats music, imagery, and film that way, too.</p>
<p>It’s a good and healthy exercise to ponder what your computer is doing right now. Maybe you’re reading this on a laptop: What are the steps and layers between what you’re doing and the Lilliputian mechanisms within? When you double-click an icon to open a program such as a word processor, the computer must know where that program is on the disk. It has some sort of accounting process to do that. And then it loads that program into its memory—which means that it loads an enormous to-do list into its memory and starts to step through it. What does that list look like? </p>
<p>Maybe you’re reading this in print. No shame in that. In fact, thank you. The paper is the artifact of digital processes. Remember how we put that “a” on screen? See if you can get from some sleepy writer typing that letter on a keyboard in Brooklyn, N.Y., to the paper under your thumb. What framed that fearful symmetry? </p>
<p>Thinking this way will teach you two things about computers: One, there’s no magic, no matter how much it looks like there is. There’s just work to make things look like magic. And two, it’s crazy in there.</p>
<div class="bigimgWrap"><img src="images/sec3_magic.jpg" alt="Magic"><div class="photoCaption">Photographer: Asger Carlsen for Bloomberg Businessweek; Set Design: Dave Bryant</div></div>
<h3><span class="section">2.4</span> What Is an Algorithm?</h3>
<p>“Algorithm” is a word writers invoke to sound smart about technology. Journalists tend to talk about “Facebook’s algorithm” or a “Google algorithm,” which is usually inaccurate. They mean “software.”</p>
<p>Algorithms don’t require computers any more than geometry does. An algorithm solves a problem, and a great algorithm gets a name. Dijkstra’s algorithm, after the famed computer scientist Edsger Dijkstra, finds the shortest path in a graph. By the way, “graph” here doesn’t mean <img class="inlineImg" src="images/sec1_graph1.jpg" style="width:30px; height:auto"> but rather <img class="inlineImg" src="images/sec1_graph2.jpg"></p>
<p>Think of a map; streets connect to streets at intersections. It’s a graph! There are graphs all around you. Plumbing, electricity, code compilation, social networks, the Internet, all can be represented as graphs! (Now to monetize …)</p>
<p>Many algorithms have their own pages on Wikipedia. You can spend days poking around them in wonder. <a href="https://en.wikipedia.org/wiki/Euclidean_algorithm" target="_blank">Euclid’s algorithm</a>, for example, is the go-to specimen that shows up whenever anyone wants to wax on about algorithms, so why buck the trend? It’s a simple way of determining the greatest common divisor for two numbers. Take two numbers, like 16 and 12. Divide the first by the second. If there’s a remainder (in this case there is, 4), divide the smaller number, 12, by that remainder, 4, which gives you 3 and no remainder, so we’re done—and 4 is the greatest common divisor.<span class="footwrapper" style="position: relative;"><a class="footref correx">Δ</a><span class="fn-popup" style="opacity: 0; display: none;">
The original version of this story divided the larger number by the remainder, instead of the smaller. <em><a href="https://github.com/BloombergMedia/whatiscode/pull/7" target="_blank">Thanks to @kuro5hin on GitHub</a></em>
</span></span> (Now translate that into machine code, and we can get out of here.)</p>
<p>There’s a site called Rosetta Code that shows you different algorithms in different languages. The <a href="http://rosettacode.org/wiki/Greatest_common_divisor" target="_blank">Euclid’s algorithm page</a> is great. Some of the examples are suspiciously long and laborious, and some are tiny nonsense poetry, like this one, in the language Forth:<sup><a id="fnr.4" name="fnr.4" class="footref" href="#fn.4">4</a></sup></p>
<pre><code class="nohighlight forth">: gcd ( a b -- n )
begin dup while tuck mod repeat drop ;</code></pre>
<p>Read it out loud, preferably to friends. Forth is based on the concept of a stack, which is a special data structure. You make “words” that do things on the stack, building up a little language of your own. PostScript,<sup>
<a id="fnr.5" name="fnr.5" class="footref" href="#fn.5">5</a>
</sup> the language of laser printers, came after Forth but is much like it. Look at how similar the code is, give or take some squiggles:</p>
<pre><code class="nohighlight postscript">/gcd {
{
{0 gt} {dup rup mod} {pop exit} ifte
} loop
}.</code></pre>
<p>And that’s Euclid’s algorithm in PostScript. I admit, this might be fun only for me. Here it is in Python (all credit to Rosetta Code):</p>
<pre><code class="python">def gcd(u, v):
return gcd(v, u % v) if v else abs(u)</code></pre>
<div id="gcd" class="interactive-feature" data-module="gcd"></div>
<p>A programming language is a system for encoding, naming, and organizing algorithms for reuse and application. It’s an algorithm management system. This is why, despite the hype, it’s silly to say Facebook has an algorithm. An algorithm can be translated into a function, and that function can be called (run) when software is executed. There are algorithms that relate to image processing and for storing data efficiently and for rapidly running through the elements of a list. Most algorithms come for free, already built into a programming language, or are available, organized into libraries, for download from the Internet in a moment. You can do a ton of programming without actually thinking about algorithms—you can save something into a database or print a Web page by cutting and pasting code. But if you want the computer to, say, identify whether it’s reading Spanish or Italian, you’ll need to write a language-matching function. So in that sense, algorithms can be pure, mathematical entities as well as practical expressions of ideas on which you can place your grubby hands.</p>
<div class="ephemeraL">
<img src="images/sec1_edward.jpg">
<p>Dijkstra distributed a remarkable and challenging set of 18 memos to the global computer science
community, starting in the 1960s and continuing up until his death in 2002, known as “EWDs,” many of them <a href="http://www.cs.utexas.edu/~EWD/" target="_blank">handwritten</a>.</p>
</div>
<p>One thing that took me forever to understand is that computers aren’t actually “good at math.” They can be programmed to execute certain operations to certain degrees of precision, so much so that it looks like “doing math” to humans.<sup>
<a id="fnr.6" name="fnr.6" class="footref" href="#fn.6">6</a>
</sup> Dijkstra said: “Computer science is no more about computers than astronomy is about telescopes.”<sup>
<a id="fnr.7" name="fnr.7" class="footref" href="#fn.7">7</a>
</sup> A huge part of computer science is about understanding the efficiency of algorithms—how long they will take to run. Computers are fast, but they can get bogged down—for example, when trying to find the shortest path between two points on a large map. Companies such as Google, Facebook, and Twitter are built on top of fundamental computer science<sup>
<a id="fnr.8" name="fnr.8" class="footref" href="#fn.8">8</a>
</sup> and pay great attention to efficiency, because their users do things (searches, status updates, tweets) an extraordinary number of times. Thus it’s absolutely worth their time to find excellent computer scientists, many with doctorates, who know where all the efficiencies are buried. </p>
<p>It takes a good mathematician to be a computer scientist, but a middling one to be an effective programmer. Until you start dealing with millions of people on a network or you need to blur or sharpen a million photos quickly, you can just use the work of other people. When it gets real, break out the comp sci. When you’re doing anything a hundred trillion times, nanosecond delays add up. Systems slow down, users get cranky, money burns by the barrel.<sup>
<a id="fnr.9" name="fnr.9" class="footref" href="#fn.9">9</a>
</sup>
</p>
<p>The hardest work in programming is getting around things that aren’t computable, in finding ways to break impossible tasks into small, possible components, and then creating the impression that the computer is doing something it actually isn’t, like having a human conversation. This used to be known as “artificial intelligence research,” but now it’s more likely to go under the name “machine learning” or “data mining.” When you speak to Siri or Cortana and they respond, it’s not because these services understand you; they convert your words into text, break that text into symbols, then match those symbols against the symbols in their database of terms, and produce an answer. Tons of algorithms, bundled up and applied, mean that computers can fake listening.
</p>
<p>A programming language has at least two jobs, then. It needs to wrap up lots of algorithms so they can be reused. Then you don’t need to go looking for a square-root algorithm (or a genius programmer) every time you need a square root. And it has to make it easy for programmers to wrap up new algorithms and routines into functions for reuse. The DRY principle, for Don’t Repeat Yourself, is one of the colloquial tenets of programming. That is, you should name things once, do things once, create a function once, and let the computer repeat itself. This doesn’t always work. Programmers repeat themselves constantly. I’ve written certain kinds of code a hundred times. This is why DRY is a principle.</p>
<p>Enough talk. Let’s code!</p>
<h3><span class="section">2.5</span> The Sprint</h3>
<p>After a few months the budget is freed up, and the Web re-architecture project is under way. They give it a name: Project Excelsior. Fine. TMitTB (who, to be fair, has other clothes and often dresses like he’s in Weezer) checks in with you every week. </p>
<p>He brings documents. Every document has its own name. The functional specification is a set of at least a thousand statements about users clicking buttons. “Upon accessing the Web page the user if logged in will be identified by name and welcomed and if not logged in will be encouraged to log in or create an account. (See user registration workflow.)” </p>
<p><em>God have mercy on our souls</em>. From there it lists various error messages. It’s a sort of blueprint in that it describes—in words, with occasional diagrams—a program that doesn’t exist.</p>
<p>Some parts of the functional specification refer to “user stories,” tiny hypothetical narratives about people using the site, e.g., “As a visitor to the website, I want to search for products so I can quickly purchase what I want.” <sup>
<a id="fnr.10" name="fnr.10" class="footref" href="#fn.10">10</a>
</sup>
</p>
<p>Then there’s something TMitTB calls wireframe mock-ups, which are pictures of how the website will look, created in a program that makes everything seem as if it were sketched by hand, all a little squiggly—even though it was produced on a computer. This is so no one gets the wrong idea about these ideas-in-progress and takes them too seriously. Patronizing, but point taken.</p>
<p>You rarely see TMitTB in person, because he’s often at conferences where he presents on panels. He then tweets about the panels and notes them on his well-populated LinkedIn page. Often he takes a picture of the audience from the stage, and what you see is an assembly of mostly men, many with beards, the majority of whom seem to be peering into their laptop instead of up at the stage. Nonetheless the tweet that accompanies that photo says something like, “AMAZING audience! @ the panel on #microservice architecture at #ArchiCon2015.” </p>
<p>He often tells you just how important this panel-speaking is for purposes of recruiting. Who’s to say he is wrong? It costs as much to hire a senior programmer as it does to hire a midlevel executive, so maybe going to conferences is his job, and in the two months he’s been here he’s hired four people. His two most recent hires have been in Boston and Hungary, neither of which is a place where you have an office.</p>
<p>But what does it matter? Every day he does a 15-minute “standup” meeting via something called Slack, which is essentially like Google Chat but with some sort of plaid visual theme, and the programmers seem to agree that this is a wonderful and fruitful way to work.</p>
<p>“I watch the commits,” TMitTB says. Meaning that every day he reviews the code that his team writes to make sure that it’s well-organized. “No one is pushing to production without the tests passing. We’re good.”</p>
<p>Your meetings, by comparison, go for hours, with people arranged around a table—sitting down. You wonder how he gets his programmers to stand up, but then some of them already use standing desks. Perhaps that’s the ticket.</p>
<p>Honestly, you would like to go to conferences sometimes and be on panels. You could drink bottled water and hold forth just fine.</p>
<h3><span class="section">2.6</span> What’s With All These Conferences, Anyway?</h3>
<p>Conferences! The website Lanyrd lists hundreds of technology conferences for June 2015. There’s an event for software testers in Chicago, a Twitter conference in São Paulo, and one on enterprise content management in Amsterdam. In New York alone there’s the Big Apple Scrum Day, the Razorfish Tech Summit, an entrepreneurship boot camp for veterans, a conference dedicated to digital mapping, many conferences for digital marketers, one dedicated to Node.js, one for Ruby, and one for Scala (these are programming languages), a couple of breakfasts, a conference for cascading style sheets, one for text analytics, and something called the Employee Engagement Awards.</p>
<p>Tech conferences look like you’d expect. Tons of people at a Sheraton, keynote in Ballroom D. Or enormous streams of people wandering through South by Southwest in Austin. People come together in the dozens or thousands and attend panels, ostensibly to learn; they attend presentations and brush up their skills, but there’s a secondary conference function, one of acculturation. You go to a technology conference to affirm your tribal identity, to transfer out of the throng of dilettantes and into the zone of the professional. You pick up swag and talk to vendors, if that’s your thing.</p>
<div class="bigimgWrap">
<img class="conference" src="images/sec1_conference04.jpg"><img class="conference" src="images/sec1_conference02.jpg"><img class="conference" src="images/sec1_conference06.jpg"><img class="conference" src="images/sec1_conference11.jpg"><img class="conference" src="images/sec1_conference09.jpg"><img class="conference" src="images/sec1_conference03.jpg"><img class="conference" src="images/sec1_conference07.jpg"><img class="conference" src="images/sec1_conference08.jpg"><img class="conference" src="images/sec1_conference05.jpg"><img class="conference" src="images/sec1_conference10.jpg"><img class="conference" src="images/sec1_conference01.jpg"><img class="conference" src="images/sec1_conference12.jpg">
<div class="caption">
<strong>First row:</strong> TechCrunch Disrupt NYC, May 2011; Google I/O developers conference, San Francisco, May 2013; Global Mobile Internet Conference, Beijing, April 2015<br>
<strong>Second row:</strong>Nvidia GPU, San Jose, September 2010; South by Southwest (SXSW) Interactive Festival, Austin, March 2013; Apple Worldwide Developers Conference (WWDC), San Francisco, June 2008<br>
<strong>Third row:</strong> TechCrunch Disrupt NYC, May 2012; Re:publica conference, Berlin, May 2015; TechCrunch Disrupt NYC, May 2015 <br>
<strong>Fourth row:</strong> SXSW Interactive Festival, Austin, March 2014; WWDC, San Francisco, June 2015; Bloomberg Technology Conference!, San Francisco, June 15-16
</div>
</div>
<p>Technology conferences are where primate dynamics can be fully displayed, where relationships of power and hierarchy can be established. There are keynote speakers—often the people who created the technology at hand or crafted a given language. There are the regular speakers, often paid not at all or in airfare, who present some idea or technique or approach. Then there are the panels, where a group of people are lined up in a row and forced into some semblance of interaction while the audience checks its e-mail.</p>
<p>I’m a little down on panels. They tend to drift. I’m not sure why they exist.</p>
<p>Here’s the other thing about technology conferences: There has been much sexual harassment and much sexist content in conferences. Which is stupid, because computers are dumb rocks lacking genitalia, but there you have it.</p>
<p>Women in software, having had enough, started to write it up, post to blogs. Other women did the same. The problem is pervasive: There are a lot of conferences, and there have been many reports of harassing behavior. The language Ruby, the preferred language for startup bros, developed the worst reputation. At a Ruby conference in 2009, someone gave a talk subtitled “Perform Like a Pr0n Star,” with sexy slides. That was dispiriting. There have been criminal incidents, too. </p>
<p>Conferences began to develop codes of conduct, rules and algorithms for people (men, really) to follow. </p>
<p class="indent">If you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer as soon as possible …
<br/>—<em><a target="_blank" href="http://www.burlingtonrubyconference.com/conduct">Burlington Ruby Conference</a></em></p>
<p class="indent">php[architect] is dedicated to providing a harassment-free event experience for everyone and will not tolerate harassment or offensive behavior in any form.
<br/>—<em><a target="_blank" href="http://www.phparch.com/policies/code-of-conduct/">php[architect]</a></em></p>
<p class="indent">The Atlanta Java Users Group (AJUG) is dedicated to providing an outstanding conference experience for all attendees, speakers, sponsors, volunteers, and organizers involved in DevNexus (GeekyNerds) regardless of gender, sexual orientation, disability, physical appearance, body size, race, religion, financial status, hair color (or hair amount), platform preference, or text editor of choice.
<br/>—<em><a target="_blank" href="https://www.devnexus.com/s/code-of-conduct">devnexus</a></em></p>
<p>When people started talking about conference behavior, they also began to talk about the larger problems of programming culture. This was always an issue, but the conference issues gave people a point of common reference. Why were there so many men in this field? Why do they behave so strangely? Why is it so hard for them to be in groups with female programmers and behave in a typical, adult way?</p>
<div class="thirty"><img class="centered" src="images/emotes/swagbot.gif"></div><div class="thirty"><img class="centered" src="images/emotes/conferencebot.gif"></div><div class="thirty"><img class="centered" src="images/emotes/drinkbot.gif"></div>
<p>“I go to work and I stick out like a sore thumb. I have been mistaken for an administrative assistant more than once. I have been asked if I was physical security (despite security wearing very distinctive uniforms),” wrote Erica Joy Baker on <a href="https://medium.com/thelist/the-other-side-of-diversity-1bb3de2f053e" target="_blank">Medium.com</a> who has worked, among other places, at Google.<span class="footwrapper" style="position: relative;"><a class="footref correx">Δ</a><span class="fn-popup" style="opacity: 0; display: none;">
The original version of this story did not name Baker or link to her post. <em><a href="https://github.com/BloombergMedia/whatiscode/pull/36" target="_blank">Thanks to @EricaJoy on GitHub</a></em>
</span></span></p>
<div class="ephemeraR">
<h4>Famous women in coding history</h4><br>
Ada Lovelace: The first programmer. She devised algorithms for Charles Babbage’s “analytical engine,” which he never built.<br>
<img class="padT" src="images/sec1_lovelace.jpg" alt="Ada Lovelace">
Grace Murray Hopper: World War II hero and inventor of the compiler.<br>
<img class="padT" src="images/sec1_hopper.jpg" alt="Grace Murray">
</div>
<p>“Always the only woman in the meeting, often the first—the first female R&D engineer, first female project lead, first female software team lead—in the companies I worked for,” wrote another woman in <em><a href="http://www.fastcompany.com/3008216/tracking/minding-gap-how-your-company-can-woo-female-coders" target="_blank">Fast Company</a></em> magazine.</p>
<p>Fewer than a fifth of undergraduate degrees in computer science awarded in 2012 went to women, according to the National Center for Women & Information Technology. Less than 30 percent of the people in computing are women. And the number of women in computing has fallen since the 1980s, even as the market for their skills has expanded. The pipeline is a huge problem. And yet it’s not unsolvable. I’ve met managers who have built perfectly functional large teams that are more than half female coders. Places such as the handicrafts e-commerce site Etsy have made a particular effort to develop educational programs and mentorship programs. Organizations such as the not-for-profit Girl Develop It teach women, and just women, how to create software.</p>
<p>It’s all happening very late in the boom, though. In 2014 some companies began to release diversity reports for their programming teams. It wasn’t a popular practice, but it was revealing. Intel is 23 percent female; Yahoo! is 37 percent. Apple, Facebook, Google, Twitter, and Microsoft are all around 30 percent. These numbers are for the whole companies, not only programmers. That’s a lot of women who didn’t get stock options. The numbers of people who aren’t white or Asian are worse yet. Apple just gave $50 million to fund diversity initiatives, equivalent to 0.007 percent of its market cap. Intel has a $300 million diversity project. </p>
<p>The average programmer is moderately diligent, capable of basic mathematics, has a working knowledge of one or more programming languages, and can communicate what he or she is doing to management and his or her peers. Given that a significant number of women work as journalists and editors, perform surgery, run companies, manage small businesses, and use spreadsheets, that a few even serve on the Supreme Court, and that we are no longer surprised to find women working as accountants, professors, statisticians, or project managers, it’s hard to imagine that they can’t write JavaScript. Programming, despite the hype and the self-serving fantasies of programmers the world over, isn’t the most intellectually demanding task imaginable.</p>
<p>Which leads one to the inescapable conclusion: The problem with women in technology isn’t the women.</p>
<div class="bigimgWrap" id="demographics">
<div style='font-size: 13px'>Some demographics taken from Stack Overlow's 2015 developer survey:</div>
<img class="centered" src="images/sec1_demographics.jpg"></img>
</div>
</div></section>
<div class='banner-container'><div class='bannerad'></div></div>
<section class="code-section" data-section="3">
<div class="code-content">
<div class="sectionNum sectionNum3">3</div>
<h2 id="sec-1">Why Are Programmers So Intense About Languages?</h2>
<p>Many conferences are organized around specific programming languages or specific communities (PyCon for Python programmers; the Strata conference for big data; Oscon for open-source coders); these are ritual events for the people in those communities. Attendees gather, talk, and post the videos on YouTube. Language matters.</p>
<p>Programmers track the success of computer languages the way other people track sports rankings, commenting on Web forums such as Reddit (where many languages get their own “subreddit,” and <a href="http://www.reddit.com/r/programming" target="_blank">reddit.com/r/programming</a> currently has 620,202 readers), or <a href="https://news.ycombinator.com/" target="_blank">Hacker News</a>, run by the venture capital firm Y Combinator (a company named after a special kind of function that operates on other functions), or <a href="http://lambda-the-ultimate.org/" target="_blank">Lambda the Ultimate</a> (named after a series of papers written mostly in the 1970s about the influential programming language Scheme—the more inside-baseball the name, the nerdier the subject matter).</p>
<p>There are hundreds of programming blogs. Many large corporations let their engineers blog (a generous gift, given how many recruiters are hovering). Discussions about programming go on everywhere, in public, at all times, about hundreds of languages. There is a keen sense of what’s coming up and what’s fading out.</p>
<p>It’s not simply fashion; one’s career as a programmer depends on demonstrating capacity in one or more languages. So there are rankings, frequently updated, rarely shocking. As of April 15, the world’s most-used computer languages, according to the Tiobe index (which uses a variety of indicators to generate a single ranking for the world of programming), are Java, C, C++, Objective-C, and C#, followed by JavaScript, PHP, and Python. The rankings are necessarily inexact; another list, by a consulting firm called RedMonk, gives JavaScript the top spot, followed by Java. There are many possible conclusions here, but the obvious one is that, all things being equal, a very good Java programmer who performs well in interviews will have more career options than a similar candidate using a more obscure language.</p>
<p>If you code, by the time a language breaks through to the top 10 or 20, you’ve heard of it, read blog posts about it, heard people lament how terrible or wonderful or misguided it is, possibly watched a few video tutorials, or played with it a little. Taking new languages out for a spin is a good thing for a programmer to do. Often all you have to do is download some files and write a couple lines of code, then decide if you want to go further. Most languages are free to download and use.</p>
<p>Why do people construct and then give away free languages? Well, the creation of a good computer language is the work of an apex programmer. To have produced a successful language is acknowledged as a monumental effort, akin to publishing a multivolume history of a war, or fighting in one. The reward is glory.</p>
<p>Changing a language is like fighting that war all over again, and some languages have at times been trapped in a liminal state between their old, busted selves, and their new, promised version. Perl 5, released in the mid-1990s, was a language uniquely suited to the World Wide Web, and it grew as the Web grew; Perl 6 was supposed to be better in every way, and a redesign began with grand pronouncements in 2000. But after 15 years of people working continually and often for free on a project they consider in the public interest, there’s still no official Perl 6. (Latest ETA: Christmas 2015.)</p>
<p>The Python language community, keenly aware of the Perl community’s problems, decided to make necessary but difficult changes to the language as part of the transition from Version 2 to Version 3. They would modernize, clean up rough edges—but avoid grand reinventions. Development of Python 3.0 started in 2006; the first working version came out in 2008; and in 2015, the transition is ongoing.</p>
<p>Making a new language is hard. Making a popular language is much harder still and requires the smile of fortune. And changing the way a popular language works appears to be one of the most difficult things humans can do, requiring years of coordination to make the standards align. Languages are large, complex, dynamic expressions of human culture. </p>
<!-- map needs to be static pls dont delete -->
<div class="interactive-feature" data-module="maps" id='code-atlas'>
<div class="maps-intro"></div>
<div id='g-map-box' class='ai2html'>
<!-- Generated by ai2html v0.54 - 2015-06-09 - 12:29 -->
<!-- ai file: map -->
<!-- Artboard: Artboard_1 -->
<div id='g-map-Artboard_1' class='g-artboard '>
<div id='g-map-Artboard_1-graphic'>
<div class="globies"></div>
<div class="maps-text-layer" style='display: none'>
<div id='g-ai0-1' class='g-Layer_1 g-aiAbs' style='top:1.9928%;left:62.9146%;'>
<p class='g-aiPstyle0'>P</p>
</div>
<div id='g-ai0-2' class='g-Layer_1 g-aiAbs' style='top:1.9928%;left:64.2197%;'>
<p class='g-aiPstyle0'>y</p>
</div>
<div id='g-ai0-3' class='g-Layer_1 g-aiAbs' style='top:1.9928%;left:65.3015%;'>
<p class='g-aiPstyle0'>thon</p>
</div>
<div id='g-ai0-4' class='g-Layer_1 g-aiAbs' style='top:2.8986%;left:72.4611%;'>
<p class='g-aiPstyle0'>Visual</p>
</div>
<div id='g-ai0-5' class='g-Layer_1 g-aiAbs' style='top:2.8986%;left:77.9622%;'>
<p class='g-aiPstyle0'> </p>
</div>
<div id='g-ai0-6' class='g-Layer_1 g-aiAbs' style='top:2.8986%;left:78.3560%;'>
<p class='g-aiPstyle0'>B</p>
</div>
<div id='g-ai0-7' class='g-Layer_1 g-aiAbs' style='top:2.8986%;left:79.6965%;'>
<p class='g-aiPstyle0'>asic</p>
</div>
<div id='g-ai0-8' class='g-Layer_1 g-aiAbs' style='top:7.6087%;left:64.0771%;'>
<p class='g-aiPstyle1'>Uni</p>
</div>
<div id='g-ai0-9' class='g-Layer_1 g-aiAbs' style='top:7.6087%;left:65.6356%;'>
<p class='g-aiPstyle1'>t</p>
</div>
<div id='g-ai0-10' class='g-Layer_1 g-aiAbs' style='top:7.6087%;left:65.9970%;'>
<p class='g-aiPstyle1'>ed </p>
</div>
<div id='g-ai0-11' class='g-Layer_1 g-aiAbs' style='top:9.2391%;left:50.6420%;'>
<p class='g-aiPstyle0'>C+</p>
</div>
<div id='g-ai0-12' class='g-Layer_1 g-aiAbs' style='top:9.2391%;left:53.1826%;'>
<p class='g-aiPstyle0'>+</p>
</div>
<div id='g-ai0-13' class='g-Layer_1 g-aiAbs' style='top:9.2391%;left:54.3113%;'>
<p class='g-aiPstyle0'>11</p>
</div>
<div id='g-ai0-14' class='g-Layer_1 g-aiAbs' style='top:9.4203%;left:29.4826%;'>
<p class='g-aiPstyle0'>C</p>
</div>
<div id='g-ai0-15' class='g-Layer_1 g-aiAbs' style='top:12.1377%;left:86.7649%;'>
<p class='g-aiPstyle2'>WordPress</p>
</div>
<div id='g-ai0-16' class='g-Layer_1 g-aiAbs' style='top:15.9420%;left:73.8719%;'>
<p class='g-aiPstyle1'>M</p>
</div>
<div id='g-ai0-17' class='g-Layer_1 g-aiAbs' style='top:15.9420%;left:74.7895%;'>
<p class='g-aiPstyle1'>e</p>
</div>
<div id='g-ai0-18' class='g-Layer_1 g-aiAbs' style='top:15.9420%;left:75.3646%;'>
<p class='g-aiPstyle1'>xico</p>
</div>
<div id='g-ai0-19' class='g-Layer_1 g-aiAbs' style='top:16.1232%;left:86.7649%;'>
<p class='g-aiPstyle2'>(PHP)</p>
</div>
<div id='g-ai0-20' class='g-Layer_1 g-aiAbs' style='top:16.4855%;left:64.0771%;'>
<p class='g-aiPstyle1'>St</p>
</div>
<div id='g-ai0-21' class='g-Layer_1 g-aiAbs' style='top:16.4855%;left:65.1428%;'>
<p class='g-aiPstyle1'>a</p>
</div>
<div id='g-ai0-22' class='g-Layer_1 g-aiAbs' style='top:16.4855%;left:65.7189%;'>
<p class='g-aiPstyle1'>t</p>
</div>
<div id='g-ai0-23' class='g-Layer_1 g-aiAbs' style='top:16.4855%;left:66.0793%;'>
<p class='g-aiPstyle1'>es</p>
</div>
<div id='g-ai0-24' class='g-Layer_1 g-aiAbs' style='top:16.8478%;left:13.7895%;'>
<p class='g-aiPstyle0'>And</p>
</div>
<div id='g-ai0-25' class='g-Layer_1 g-aiAbs' style='top:16.8478%;left:17.4682%;'>
<p class='g-aiPstyle0'>r</p>
</div>
<div id='g-ai0-26' class='g-Layer_1 g-aiAbs' style='top:16.8478%;left:18.2201%;'>
<p class='g-aiPstyle0'>oid</p>
</div>
<div id='g-ai0-27' class='g-Layer_1 g-aiAbs' style='top:21.0145%;left:32.9761%;'>
<p class='g-aiPstyle1'>G</p>
</div>
<div id='g-ai0-28' class='g-Layer_1 g-aiAbs' style='top:21.0145%;left:33.7897%;'>
<p class='g-aiPstyle1'>r</p>
</div>
<div id='g-ai0-29' class='g-Layer_1 g-aiAbs' style='top:21.0145%;left:34.1647%;'>
<p class='g-aiPstyle1'>eece</p>
</div>
<div id='g-ai0-30' class='g-Layer_1 g-aiAbs' style='top:21.5580%;left:80.4354%;'>
<p class='g-aiPstyle1'>Indonesia</p>
</div>
<div id='g-ai0-31' class='g-Layer_1 g-aiAbs' style='top:21.5580%;left:88.2691%;'>
<p class='g-aiPstyle1'>P</p>
</div>
<div id='g-ai0-32' class='g-Layer_1 g-aiAbs' style='top:21.5580%;left:88.9233%;'>
<p class='g-aiPstyle1'>aki</p>
</div>
<div id='g-ai0-33' class='g-Layer_1 g-aiAbs' style='top:21.5580%;left:90.3033%;'>
<p class='g-aiPstyle1'>s</p>
</div>
<div id='g-ai0-34' class='g-Layer_1 g-aiAbs' style='top:21.5580%;left:90.8378%;'>
<p class='g-aiPstyle1'>tan</p>
</div>
<div id='g-ai0-35' class='g-Layer_1 g-aiAbs' style='top:23.5507%;left:27.1384%;'>
<p class='g-aiPstyle1'>F</p>
</div>
<div id='g-ai0-36' class='g-Layer_1 g-aiAbs' style='top:23.5507%;left:27.7509%;'>
<p class='g-aiPstyle1'>r</p>
</div>
<div id='g-ai0-37' class='g-Layer_1 g-aiAbs' style='top:23.5507%;left:28.1249%;'>
<p class='g-aiPstyle1'>ance</p>
</div>
<div id='g-ai0-38' class='g-Layer_1 g-aiAbs' style='top:25.9058%;left:16.0090%;'>
<p class='g-aiPstyle1'>Spain</p>
</div>
<div id='g-ai0-39' class='g-Layer_1 g-aiAbs' style='top:28.2609%;left:89.8678%;'>
<p class='g-aiPstyle1'>South </p>
</div>
<div id='g-ai0-40' class='g-Layer_1 g-aiAbs' style='top:30.0725%;left:89.8661%;'>
<p class='g-aiPstyle1'>A</p>
</div>
<div id='g-ai0-41' class='g-Layer_1 g-aiAbs' style='top:30.0725%;left:90.5802%;'>
<p class='g-aiPstyle1'>fri</p>
</div>
<div id='g-ai0-42' class='g-Layer_1 g-aiAbs' style='top:30.0725%;left:91.5698%;'>
<p class='g-aiPstyle1'>c</p>
</div>
<div id='g-ai0-43' class='g-Layer_1 g-aiAbs' style='top:30.0725%;left:92.1636%;'>
<p class='g-aiPstyle1'>a</p>
</div>
<div id='g-ai0-44' class='g-Layer_1 g-aiAbs' style='top:32.6087%;left:39.1234%;'>
<p class='g-aiPstyle1'>Nor</p>
</div>
<div id='g-ai0-45' class='g-Layer_1 g-aiAbs' style='top:32.6087%;left:40.9088%;'>
<p class='g-aiPstyle1'>w</p>
</div>
<div id='g-ai0-46' class='g-Layer_1 g-aiAbs' style='top:32.6087%;left:41.7078%;'>
<p class='g-aiPstyle1'>a</p>
</div>
<div id='g-ai0-47' class='g-Layer_1 g-aiAbs' style='top:32.6087%;left:42.2890%;'>
<p class='g-aiPstyle1'>y</p>
</div>
<div id='g-ai0-48' class='g-Layer_1 g-aiAbs' style='top:34.0580%;left:25.2159%;'>
<p class='g-aiPstyle1'>P</p>
</div>
<div id='g-ai0-49' class='g-Layer_1 g-aiAbs' style='top:34.0580%;left:25.8753%;'>
<p class='g-aiPstyle1'>ortugal</p>
</div>
<div id='g-ai0-50' class='g-Layer_1 g-aiAbs' style='top:41.1232%;left:44.9034%;'>
<p class='g-aiPstyle1'>R</p>
</div>
<div id='g-ai0-51' class='g-Layer_1 g-aiAbs' style='top:41.1232%;left:45.6180%;'>
<p class='g-aiPstyle1'>ussia</p>
</div>
<div id='g-ai0-52' class='g-Layer_1 g-aiAbs' style='top:42.7536%;left:13.6994%;'>
<p class='g-aiPstyle1'>Sw</p>
</div>
<div id='g-ai0-53' class='g-Layer_1 g-aiAbs' style='top:42.7536%;left:15.1942%;'>
<p class='g-aiPstyle1'>eden</p>
</div>
<div id='g-ai0-54' class='g-Layer_1 g-aiAbs' style='top:47.8261%;left:48.4186%;'>
<p class='g-aiPstyle1'>P</p>
</div>
<div id='g-ai0-55' class='g-Layer_1 g-aiAbs' style='top:47.8261%;left:49.0780%;'>
<p class='g-aiPstyle1'>oland</p>
</div>
<div id='g-ai0-56' class='g-Layer_1 g-aiAbs' style='top:50.0000%;left:75.9760%;'>
<p class='g-aiPstyle1'>Canada</p>
</div>
<div id='g-ai0-57' class='g-Layer_1 g-aiAbs' style='top:50.5435%;left:47.2957%;'>
<p class='g-aiPstyle1'>C</p>
</div>
<div id='g-ai0-58' class='g-Layer_1 g-aiAbs' style='top:50.5435%;left:48.0686%;'>
<p class='g-aiPstyle1'>z</p>
</div>
<div id='g-ai0-59' class='g-Layer_1 g-aiAbs' style='top:50.5435%;left:48.5811%;'>
<p class='g-aiPstyle1'>ech </p>
</div>
<div id='g-ai0-60' class='g-Layer_1 g-aiAbs' style='top:50.7246%;left:42.4940%;'>
<p class='g-aiPstyle1'>Germa</p>
</div>
<div id='g-ai0-61' class='g-Layer_1 g-aiAbs' style='top:50.7246%;left:45.7764%;'>
<p class='g-aiPstyle1'>n</p>
</div>
<div id='g-ai0-62' class='g-Layer_1 g-aiAbs' style='top:50.7246%;left:46.3607%;'>
<p class='g-aiPstyle1'>y</p>
</div>
<div id='g-ai0-63' class='g-Layer_1 g-aiAbs' style='top:52.7174%;left:47.2957%;'>
<p class='g-aiPstyle1'>R</p>
</div>
<div id='g-ai0-64' class='g-Layer_1 g-aiAbs' style='top:52.7174%;left:47.9999%;'>
<p class='g-aiPstyle1'>epublic</p>
</div>
<div id='g-ai0-65' class='g-Layer_1 g-aiAbs' style='top:55.6159%;left:10.9384%;'>
<p class='g-aiPstyle1'>A</p>
</div>
<div id='g-ai0-66' class='g-Layer_1 g-aiAbs' style='top:55.6159%;left:11.6515%;'>
<p class='g-aiPstyle1'>u</p>
</div>
<div id='g-ai0-67' class='g-Layer_1 g-aiAbs' style='top:55.6159%;left:12.2390%;'>
<p class='g-aiPstyle1'>s</p>
</div>
<div id='g-ai0-68' class='g-Layer_1 g-aiAbs' style='top:55.6159%;left:12.7733%;'>
<p class='g-aiPstyle1'>tria</p>
</div>
<div id='g-ai0-69' class='g-Layer_1 g-aiAbs' style='top:58.8768%;left:95.2557%;'>
<p class='g-aiPstyle1'>I</p>
</div>
<div id='g-ai0-70' class='g-Layer_1 g-aiAbs' style='top:58.8768%;left:95.5265%;'>
<p class='g-aiPstyle1'>r</p>
</div>
<div id='g-ai0-71' class='g-Layer_1 g-aiAbs' style='top:58.8768%;left:95.9005%;'>
<p class='g-aiPstyle1'>eland</p>
</div>
<div id='g-ai0-72' class='g-Layer_1 g-aiAbs' style='top:62.6812%;left:4.5444%;'>
<p class='g-aiPstyle1'>T</p>
</div>
<div id='g-ai0-73' class='g-Layer_1 g-aiAbs' style='top:62.6812%;left:5.1434%;'>
<p class='g-aiPstyle1'>ur</p>
</div>
<div id='g-ai0-74' class='g-Layer_1 g-aiAbs' style='top:62.6812%;left:6.1257%;'>
<p class='g-aiPstyle1'>k</p>
</div>
<div id='g-ai0-75' class='g-Layer_1 g-aiAbs' style='top:62.6812%;left:6.6601%;'>
<p class='g-aiPstyle1'>e</p>
</div>
<div id='g-ai0-76' class='g-Layer_1 g-aiAbs' style='top:62.6812%;left:7.2506%;'>
<p class='g-aiPstyle1'>y</p>
</div>
<div id='g-ai0-77' class='g-Layer_1 g-aiAbs' style='top:66.3043%;left:17.8175%;'>
<p class='g-aiPstyle1'>China</p>
</div>
<div id='g-ai0-78' class='g-Layer_1 g-aiAbs' style='top:68.6594%;left:39.3019%;'>
<p class='g-aiPstyle1'>N</p>
</div>
<div id='g-ai0-79' class='g-Layer_1 g-aiAbs' style='top:68.6594%;left:40.0738%;'>
<p class='g-aiPstyle1'>e</p>
</div>
<div id='g-ai0-80' class='g-Layer_1 g-aiAbs' style='top:68.6594%;left:40.6644%;'>
<p class='g-aiPstyle1'>w</p>
</div>
<div id='g-ai0-81' class='g-Layer_1 g-aiAbs' style='top:68.6594%;left:41.4779%;'>
<p class='g-aiPstyle1'> </p>
</div>
<div id='g-ai0-82' class='g-Layer_1 g-aiAbs' style='top:68.6594%;left:41.7279%;'>
<p class='g-aiPstyle1'>Z</p>
</div>