SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html class="wf-effra-i4-active wf-effra-n4-active wf-sourcecodepro-n4-active wf-effra-n5-active wf-effra-i5-active wf-active">3 <head>4 <style>5 .highlight .c { color: #586E75 } /* Comment */6.highlight .err { color: #93A1A1 } /* Error */7.highlight .g { color: #93A1A1 } /* Generic */8.highlight .k { color: #859900 } /* Keyword */9.highlight .l { color: #93A1A1 } /* Literal */10.highlight .n { color: #93A1A1 } /* Name */11.highlight .o { color: #859900 } /* Operator */12.highlight .x { color: #CB4B16 } /* Other */13.highlight .p { color: #93A1A1 } /* Punctuation */14.highlight .cm { color: #586E75 } /* Comment.Multiline */15.highlight .cp { color: #859900 } /* Comment.Preproc */16.highlight .c1 { color: #586E75 } /* Comment.Single */17.highlight .cs { color: #859900 } /* Comment.Special */18.highlight .gd { color: #2AA198 } /* Generic.Deleted */19.highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */20.highlight .gr { color: #DC322F } /* Generic.Error */21.highlight .gh { color: #CB4B16 } /* Generic.Heading */22.highlight .gi { color: #859900 } /* Generic.Inserted */23.highlight .go { color: #93A1A1 } /* Generic.Output */24.highlight .gp { color: #93A1A1 } /* Generic.Prompt */25.highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */26.highlight .gu { color: #CB4B16 } /* Generic.Subheading */27.highlight .gt { color: #93A1A1 } /* Generic.Traceback */28.highlight .kc { color: #CB4B16 } /* Keyword.Constant */29.highlight .kd { color: #268BD2 } /* Keyword.Declaration */30.highlight .kn { color: #859900 } /* Keyword.Namespace */31.highlight .kp { color: #859900 } /* Keyword.Pseudo */32.highlight .kr { color: #268BD2 } /* Keyword.Reserved */33.highlight .kt { color: #DC322F } /* Keyword.Type */34.highlight .ld { color: #93A1A1 } /* Literal.Date */35.highlight .m { color: #2AA198 } /* Literal.Number */36.highlight .s { color: #2AA198 } /* Literal.String */37.highlight .na { color: #93A1A1 } /* Name.Attribute */38.highlight .nb { color: #B58900 } /* Name.Builtin */39.highlight .nc { color: #268BD2 } /* Name.Class */40.highlight .no { color: #CB4B16 } /* Name.Constant */41.highlight .nd { color: #268BD2 } /* Name.Decorator */42.highlight .ni { color: #CB4B16 } /* Name.Entity */43.highlight .ne { color: #CB4B16 } /* Name.Exception */44.highlight .nf { color: #268BD2 } /* Name.Function */45.highlight .nl { color: #93A1A1 } /* Name.Label */46.highlight .nn { color: #93A1A1 } /* Name.Namespace */47.highlight .nx { color: #555 } /* Name.Other */48.highlight .py { color: #93A1A1 } /* Name.Property */49.highlight .nt { color: #268BD2 } /* Name.Tag */50.highlight .nv { color: #268BD2 } /* Name.Variable */51.highlight .ow { color: #859900 } /* Operator.Word */52.highlight .w { color: #93A1A1 } /* Text.Whitespace */53.highlight .mf { color: #2AA198 } /* Literal.Number.Float */54.highlight .mh { color: #2AA198 } /* Literal.Number.Hex */55.highlight .mi { color: #2AA198 } /* Literal.Number.Integer */56.highlight .mo { color: #2AA198 } /* Literal.Number.Oct */57.highlight .sb { color: #586E75 } /* Literal.String.Backtick */58.highlight .sc { color: #2AA198 } /* Literal.String.Char */59.highlight .sd { color: #93A1A1 } /* Literal.String.Doc */60.highlight .s2 { color: #2AA198 } /* Literal.String.Double */61.highlight .se { color: #CB4B16 } /* Literal.String.Escape */62.highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */63.highlight .si { color: #2AA198 } /* Literal.String.Interpol */64.highlight .sx { color: #2AA198 } /* Literal.String.Other */65.highlight .sr { color: #DC322F } /* Literal.String.Regex */66.highlight .s1 { color: #2AA198 } /* Literal.String.Single */67.highlight .ss { color: #2AA198 } /* Literal.String.Symbol */68.highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */69.highlight .vc { color: #268BD2 } /* Name.Variable.Class */70.highlight .vg { color: #268BD2 } /* Name.Variable.Global */71.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */72.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */73 74 75@charset "UTF-8";76/* http://meyerweb.com/eric/tools/css/reset/ 77 v2.0 | 2011012678 License: none (public domain)79*/80html, body, div, span, applet, object, iframe,81h1, h2, h3, h4, h5, h6, p, blockquote, pre,82a, abbr, acronym, address, big, cite, code,83del, dfn, em, img, ins, kbd, q, s, samp,84small, strike, strong, sub, sup, tt, var,85b, u, i, center,86dl, dt, dd, ol, ul, li,87fieldset, form, label, legend,88table, caption, tbody, tfoot, thead, tr, th, td,89article, aside, canvas, details, embed,90figure, figcaption, footer, header, hgroup,91menu, nav, output, ruby, section, summary,92time, mark, audio, video {93 margin: 0;94 padding: 0;95 border: 0;96 font-size: 100%;97 font: inherit;98 vertical-align: baseline; }99 100/* HTML5 display-role reset for older browsers */101article, aside, details, figcaption, figure,102footer, header, hgroup, menu, nav, section {103 display: block; }104 105body {106 line-height: 1; }107 108ol, ul {109 list-style: none; }110 111blockquote, q {112 quotes: none; }113 114blockquote:before, blockquote:after,115q:before, q:after {116 content: '';117 content: none; }118 119table {120 border-collapse: collapse;121 border-spacing: 0; }122 123/*124 Icon Font: fontcustom125*/126@font-face {127 font-family: "fontcustom";128 src: url("./fontcustom_0835e426621a94313da8bd0ca7be371f.eot");129 src: url("./fontcustom_0835e426621a94313da8bd0ca7be371f.eot?#iefix") format("embedded-opentype"), url("./fontcustom_0835e426621a94313da8bd0ca7be371f.woff") format("woff"), url("./fontcustom_0835e426621a94313da8bd0ca7be371f.ttf") format("truetype"), url("./fontcustom_0835e426621a94313da8bd0ca7be371f.svg#fontcustom") format("svg");130 font-weight: normal;131 font-style: normal; }132@media screen and (-webkit-min-device-pixel-ratio: 0) {133 @font-face {134 font-family: "fontcustom";135 src: url("./fontcustom_0835e426621a94313da8bd0ca7be371f.svg#fontcustom") format("svg"); } }136[data-icon]:before {137 content: attr(data-icon); }138 139[data-icon]:before,140.icon-book:before,141.icon-fg:before,142.icon-head:before,143.icon-list:before,144.icon-note:before,145.icon-tinaja:before {146 display: inline-block;147 font-family: "fontcustom";148 font-style: normal;149 font-weight: normal;150 font-variant: normal;151 line-height: 1;152 text-decoration: inherit;153 text-rendering: optimizeLegibility;154 text-transform: none;155 -moz-osx-font-smoothing: grayscale;156 -webkit-font-smoothing: antialiased;157 font-smoothing: antialiased; }158 159.icon-book:before {160 content: "\f100"; }161 162.icon-fg:before {163 content: "\f104"; }164 165.icon-head:before {166 content: "\f103"; }167 168.icon-list:before {169 content: "\f101"; }170 171.icon-note:before {172 content: "\f102"; }173 174.icon-tinaja:before {175 content: "\f105"; }176 177body {178 background-color: #fffdf2;179 color: #333;180 font-family: "effra", sans-serif;181 font-size: 18px;182 font-weight: 400; }183 184span.invisible-text {185 display: none; }186 187i, em, cite {188 font-style: italic; }189 i > i, i em, i cite, em > i, em em, em cite, cite > i, cite em, cite cite {190 font-style: normal; }191 192b, strong {193 font-weight: 500; }194 195a {196 color: #0CB3B0; }197 a:hover {198 color: #333; }199 a:visited {200 color: #C00080; }201 a.footnote {202 font-size: .75em;203 line-height: 100%;204 margin-right: .5em;205 text-decoration: none;206 vertical-align: super; }207 208b {209 font-weight: 500; }210 211h2 {212 font-size: 1.25em;213 font-weight: 500;214 margin-bottom: 1em; }215 216h3 {217 font-size: 1em;218 font-weight: 500;219 margin-top: 1.5em;220 margin-bottom: .5em; }221 222p {223 margin-bottom: 1em; }224 225ol {226 list-style-type: decimal; }227 228span.indicator {229 display: inline-block;230 float: left;231 margin-left: -1.5em; }232 233span.small {234 font-size: .8em; }235 236div.youtube-video {237 margin: 2em 0;238 max-width: 100%;239 padding-bottom: 56.25%;240 position: relative;241 width: 100%; }242 div.youtube-video iframe {243 height: 100%;244 position: absolute;245 top: 0;246 right: 0;247 bottom: 0;248 left: 0;249 width: 100%; }250 251img {252 max-width: 100%;253 width: 100%; }254 255.clear-block {256 clear: both; }257 258.posts {259 list-style-type: none;260 margin: 0 2em 4em 2em; }261 262.posts li {263 line-height: 1.25em;264 margin: 1.5em 0;265 position: relative; }266 .posts li.long-post {267 background-color: #fffffc;268 border-color: #FCC884;269 border-style: solid;270 border-width: 0 0 1px 0;271 margin: 0 -2em .1em -2em;272 padding: 1em 2em 1.5em 2em; }273 .posts li.long-post a.list-title {274 font-weight: 500; }275 .posts li a.list-title {276 text-decoration: none; }277 .posts li a.list-title:hover {278 text-decoration: underline; }279 .posts li p {280 line-height: 167%;281 margin-top: .5em; }282 .posts li p span.excerpt {283 margin-right: .5em; }284 .posts li p span.details {285 white-space: nowrap; }286 .posts li p span.details a.detail {287 color: #FCC884;288 font-size: 80%;289 margin-right: .5em;290 text-decoration: none; }291 .posts li p span.details a.detail:hover {292 text-decoration: underline; }293 .posts li blockquote {294 border-color: #FCC884;295 border-style: dotted;296 border-width: 0 0 0 2px;297 padding-left: 1em; }298 299.site {300 max-width: 42em;301 margin: 3em auto 2em;302 line-height: 1.5em;303 width: 95%; }304 305.header {306 border-bottom: 4px solid #FFF7C9;307 margin-bottom: 2em; }308 309.header a {310 font-weight: bold;311 text-decoration: none;312 vertical-align: middle; }313 314.title {315 display: inline-block;316 margin-bottom: 1em; }317 .title span.logo {318 font-size: 2.5em;319 margin-right: .125em; }320 321.header div.links {322 display: inline-block; }323 324.header div.buttons {325 display: inline-block;326 float: right;327 padding-top: .66667em; }328 329.title a {330 color: #0CB3B0; }331 332.header a.extra {333 color: #C00080;334 margin-left: 1em; }335 336.header a.button {337 font-size: 1.5em;338 margin-left: .5em; }339 340.meta {341 color: #F89C68; }342 343.pagination {344 text-align: center; }345 .pagination .page-number {346 margin: 0 1em; }347 .pagination a {348 margin: 0 1em;349 text-decoration: none; }350 .pagination a:hover {351 text-decoration: underline; }352 353.footer {354 border-top: 4px solid #FFF7C9;355 clear: both;356 font-size: 80%;357 margin-top: 4em;358 padding-top: 1em;359 overflow: hidden; }360 .footer p.credits {361 font-size: .75em;362 clear: both;363 padding-top: 2em;364 text-align: center; }365 .footer p.credits a {366 background: #FFF7C9;367 border-radius: .25em;368 color: #F89C68;369 margin-right: .25em;370 padding: .125em .5em;371 text-decoration: none; }372 .footer p.credits a:hover {373 color: #C00080;374 text-decoration: none; }375 376.footer .contact {377 float: left;378 margin-right: 3em; }379 380.footer .contact a {381 color: #F89C68;382 text-decoration: none; }383 .footer .contact a:hover {384 text-decoration: underline; }385 386.footer .rss {387 margin-top: 1.1em;388 margin-right: -.2em;389 float: right; }390 391.footer .rss img {392 border: 0; }393 394hr {395 border-width: 0;396 margin: 1.5em 0 3em 0;397 text-align: center; }398 hr:after {399 border-width: 0;400 color: #FCC884;401 content: "❊ ❊ ❊"; }402 403/* standard */404.post p {405 line-height: 167%; }406 407.post img.book-cover {408 border: 1px solid #FFF7C9;409 float: right;410 margin: 1em 0 1em 1em;411 max-width: 40%; }412 413.post pre {414 border-radius: .4em;415 border: 1px solid #FCC884;416 background-color: #FFF7C9;417 font-family: "source-code-pro", monospace;418 margin: 1.5em 0;419 overflow-x: scroll;420 padding: 0 .4em; }421 422.post blockquote {423 border-color: #FCC884;424 border-style: dotted;425 border-width: 0 0 0 2px;426 margin-top: 1.5em;427 margin-bottom: 1.5em;428 padding-left: 1em; }429 430.post ul, .post ol {431 margin: 2em 0 2em 1.35em; }432 433.post ul {434 list-style-type: circle; }435 436.post li ul, .post li ol {437 margin-top: .25em;438 margin-bottom: .25em; }439 440.post.reading_list ul {441 margin-bottom: 3em; }442 443.post.reading_list li {444 line-height: 167%;445 margin-bottom: 1.5em; }446 .post.reading_list li:after {447 border-width: 0;448 color: #FCC884;449 content: "❊ ❊ ❊";450 display: block;451 margin-top: 1em;452 text-align: center; }453 .post.reading_list li:last-child:after {454 content: ""; }455 456div.adjacent-posts {457 border-top: 4px solid #FFF7C9;458 padding-top: 1em;459 padding-bottom: 1em; }460 div.adjacent-posts div.link {461 float: left;462 width: 50%; }463 div.adjacent-posts div.link.next {464 text-align: right; }465 466div.other-posts {467 border-top: 4px solid #FFF7C9;468 padding-top: 1em;469 padding-bottom: 1em; }470 div.other-posts h3 {471 margin-top: 0; }472 473table.books tr {474 border-color: #FFF7C9;475 border-style: solid;476 border-width: 0 0 1px 0; }477 table.books tr:last-child {478 border-width: 0; }479table.books ul.filters {480 display: inline-block; }481 table.books ul.filters li {482 display: inline-block;483 margin-left: 1em; }484 table.books ul.filters li a {485 display: inline-block;486 text-decoration: none; }487 table.books ul.filters li a.here {488 background-color: #FFF7C9; }489table.books th {490 font-weight: bold;491 padding: .5em .25em;492 text-align: left;493 text-transform: uppercase; }494 table.books th.notes {495 text-align: center; }496table.books td {497 padding: .5em .25em; }498 table.books td.citation {499 vertical-align: top;500 width: 80%; }501 table.books td.citation p {502 margin: 0;503 padding-left: 1em;504 text-indent: -1em; }505 table.books td.notes {506 text-align: center;507 vertical-align: middle;508 width: 20%; }509 table.books td.notes a {510 white-space: nowrap; }511 512.post ul.reading-list span.citation {513 display: block;514 font-weight: 500;515 margin-bottom: .5em; }516 .post ul.reading-list span.citation a {517 text-decoration: none; }518 .post ul.reading-list span.citation a:hover {519 text-decoration: underline; }520.post ul.reading-list span.note {521 display: block;522 margin-bottom: .25em; }523.post ul.reading-list span.links {524 display: block;525 font-size: .75em;526 text-align: right; }527 .post ul.reading-list span.links a {528 background-color: #FFF7C9;529 border-radius: .25em;530 color: #F89C68;531 margin-right: .25em;532 padding: .125em .5em;533 text-decoration: none; }534 .post ul.reading-list span.links a:hover {535 color: #C00080;536 text-decoration: none; }537 538.post code {539 background-color: #FFF7C9;540 font-family: "source-code-pro", monospace;541 font-size: 0.875em;542 padding: 0 .25em; }543 544.post pre code {545 border: none; }546 547/* terminal */548.post pre.terminal {549 border: 1px solid #000;550 background-color: #333;551 color: #FFF; }552 553.post pre.terminal code {554 background-color: #333; }555 556.footnotes {557 border-top: 4px solid #FFF7C9;558 margin-top: 3em;559 padding-top: 1em; }560 .footnotes ol {561 list-style-type: decimal; }562 563@media all and (max-width: 550px) {564 body {565 font-size: 16px; }566 567 .site {568 margin-top: 1em; }569 570 .posts li.long-post {571 padding: 1em .5em .5em .5em; }572 573 .post img.book-cover {574 display: block;575 float: none;576 margin: 1em auto;577 max-width: 80%; }578 579 .header div.links {580 display: block; }581 .header div.links a.extra:first-child {582 margin-left: 0; }583 584 .header div.buttons {585 display: block;586 float: none;587 padding-bottom: .5em; }588 .header div.buttons a.button:first-child {589 margin-left: 0; }590 591 div.adjacent-posts div.link {592 float: none;593 margin-bottom: 1em;594 width: 100%; }595 div.adjacent-posts div.link.previous {596 text-align: center; }597 div.adjacent-posts div.link.next {598 text-align: center; }599 600 div.other-posts {601 text-align: center; }602 div.other-posts li {603 margin-bottom: 1em; } }604 </style>605 <meta charset="utf-8">606 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">607 <title>608 Weekly Reading: March 22, 2015 ≫ La Tinaja609 </title>610 <meta content="width=device-width" name="viewport">611 <style type="text/css">612 .tk-effra{font-family:"effra",sans-serif;}.tk-source-code-pro{font-family:"source-code-pro",sans-serif;}613 </style>614 <style type="text/css">615 @font-face{font-family:effra;src:url(https://use.typekit.net/af/bc8918/0000000000000000000142e5/23/l?subset_id=2&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/bc8918/0000000000000000000142e5/23/d?subset_id=2&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/bc8918/0000000000000000000142e5/23/a?subset_id=2&fvd=n4&v=3) format("opentype");font-weight:400;font-style:normal;font-stretch:normal;font-display:auto;}@font-face{font-family:effra;src:url(https://use.typekit.net/af/d736c6/0000000000000000000142e6/23/l?subset_id=2&fvd=i4&v=3) format("woff2"),url(https://use.typekit.net/af/d736c6/0000000000000000000142e6/23/d?subset_id=2&fvd=i4&v=3) format("woff"),url(https://use.typekit.net/af/d736c6/0000000000000000000142e6/23/a?subset_id=2&fvd=i4&v=3) format("opentype");font-weight:400;font-style:italic;font-stretch:normal;font-display:auto;}@font-face{font-family:effra;src:url(https://use.typekit.net/af/cc6528/0000000000000000000142e7/23/l?subset_id=2&fvd=n5&v=3) format("woff2"),url(https://use.typekit.net/af/cc6528/0000000000000000000142e7/23/d?subset_id=2&fvd=n5&v=3) format("woff"),url(https://use.typekit.net/af/cc6528/0000000000000000000142e7/23/a?subset_id=2&fvd=n5&v=3) format("opentype");font-weight:500;font-style:normal;font-stretch:normal;font-display:auto;}@font-face{font-family:effra;src:url(https://use.typekit.net/af/1fbebe/0000000000000000000142e8/23/l?subset_id=2&fvd=i5&v=3) format("woff2"),url(https://use.typekit.net/af/1fbebe/0000000000000000000142e8/23/d?subset_id=2&fvd=i5&v=3) format("woff"),url(https://use.typekit.net/af/1fbebe/0000000000000000000142e8/23/a?subset_id=2&fvd=i5&v=3) format("opentype");font-weight:500;font-style:italic;font-stretch:normal;font-display:auto;}@font-face{font-family:source-code-pro;src:url(https://use.typekit.net/af/f29032/000000000000000000013297/23/l?subset_id=2&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/f29032/000000000000000000013297/23/d?subset_id=2&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/f29032/000000000000000000013297/23/a?subset_id=2&fvd=n4&v=3) format("opentype");font-weight:400;font-style:normal;font-stretch:normal;font-display:auto;}616 </style>617 <!-- syntax highlighting CSS -->618 <meta content="This week’s reading includes light comic sci-fi fantasy, commandments for a digital age, and Tex-Mex." name="description">619 <!-- Custom CSS -->620 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">621 </head>622 <body>623 <div class="site">624 <div class="header">625 <h1 class="title">626 <a>627 <span class="logo icon-tinaja">628 </span>629 La Tinaja630 </a>631 </h1>632 <div class="links">633 <a class="extra">634 posts635 </a>636 <a class="extra">637 reading638 </a>639 </div>640 <div class="buttons">641 <a class="button" title="About Me">642 <span class="icon-head">643 </span>644 <span class="invisible-text">645 Foam Garden646 </span>647 </a>648 <a class="button" title="Foam Garden">649 <span class="icon-fg">650 </span>651 <span class="invisible-text">652 About Me653 </span>654 </a>655 </div>656 </div>657 <h2>658 <span class="indicator icon-book">659 </span>660 Weekly Reading: March 22, 2015661 </h2>662 <p class="meta">663 22 Mar 2015664 </p>665 <div class="post reading_list">666 <h3 id="links">667 Links668 </h3>669 <ul>670 <li>671 <a>672 <strong>673 True Tex-Mex Cuisine’s Long Adios—Texas Monthly674 </strong>675 </a>676 : This piece tracing the ins and outs of the Tex-Mex restaurant scene (mostly in Houston) over the past few decades is essentially my life’s story in restaurants.677 <a>678 Tex-Mex Cookbook679 </a>680 is the best example I know of letting them share the spotlight.681 </li>682 <li>683 <a>684 <strong>685 Just five bucks a month686 </strong>687 </a>688 : Gina Trapani’s writeup of the exhausting process of having to write and rewrite the billing platform for ThinkUp seven times in the first year and a half or so of the product’s life was reminiscent of my own experience (on a smaller scale) with The Appendix and our billing and subscription needs.689 </li>690 </ul>691 <div class="clear-block">692 </div>693 <h3>694 Books695 </h3>696 <ul class="reading-list">697 <li>698 <span class="citation">699 <a>700 Scott Meyer.701 <i>702 Off to Be the Wizard703 </i>704 . Seattle, WA: 47North, 2014.705 </a>706 </span>707 <span class="note">708 <p>709 I picked this up as an easy read having seen710 <a>711 Glenn Fleishman712 </a>713 recommend it on Twitter a few weeks ago.714 </p>715 </span>716 <span class="links">717 <a>718 WorldCat »719 </a>720 <a>721 Amazon »722 </a>723 </span>724 </li>725 <li>726 <span class="citation">727 <a>728 Douglas Rushkoff.729 <i>730 Program or Be Programmed: Ten Commands for a Digital Age731 </i>732 . Berkeley, CA: Soft Skull Press, 2011.733 </a>734 </span>735 <span class="note">736 <p>737 These ten short provocations about living online and in a digital age cover ethics and etiquette in roughly equal parts all to set up the core ‘command’ that to participate in this world with purpose one must understand the perspective gained from understanding programming. I find this conclusion—that everyone could benefit from the perspective gained from relatively short exposure to programming—a great corrective to the “Everyone must code!” evangelism.738 </p>739 </span>740 <span class="links">741 <a>742 WorldCat »743 </a>744 <a>745 Amazon »746 </a>747 </span>748 </li>749 </ul>750 </div>751 <div class="adjacent-posts">752 <div class="link previous">753 <a>754 « Weekly Reading: March 15, 2015755 </a>756 <br>757 <span class="small">758 15 Mar 2015759 </span>760 </div>761 <div class="link next">762 <a>763 The Browser as Command Line »764 </a>765 <br>766 <span class="small">767 23 Mar 2015768 </span>769 </div>770 <div class="clear-block">771 </div>772 </div>773 <div class="other-posts">774 <h3>775 Other Reading Lists776 </h3>777 <ul>778 <li>779 <a>780 Recent Reading: Spies, Gum Disease, Dunks781 </a>782 <br>783 <span class="small">784 25 Dec 2019785 </span>786 </li>787 <li>788 <a>789 Recent Reading: Climate Change, Ultrarunning, and Videogames790 </a>791 <br>792 <span class="small">793 13 Sep 2019794 </span>795 </li>796 <li>797 <a>798 Recent Reading: Jews with Swords and Miners Learning JavaScript799 </a>800 <br>801 <span class="small">802 06 Jul 2019803 </span>804 </li>805 </ul>806 </div>807 <div class="footer">808 <div class="contact">809 <p>810 <b>811 Brian Jones812 </b>813 <br>814 <a>815 brianjon.es816 </a>817 <br>818 <a>819 twitter.com/jonesbp820 </a>821 <br>822 <a>823 github.com/jonesbp824 </a>825 </p>826 </div>827 <div class="contact">828 </div>829 <div class="contact">830 <p>831 <b>832 Projects833 </b>834 <br>835 <a>836 Backlist837 </a>838 <br>839 <a>840 Foam Garden841 </a>842 <br>843 <a>844 The Appendix845 </a>846 </p>847 </div>848 <div>849 <p class="credits">850 <a>851 Creative Commons Attribution 4.0 International (CC BY 4.0)852 </a>853 <a>854 Colophon855 </a>856 </p>857 </div>858 </div>859 </div>860 <noscript>861 <img alt src="rick.jpg">862 </noscript>863 </body>864</html>865