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 slick-uniqueid="3">3 <head>4 <style>5 @font-face {6 font-family: 'Roboto';7 font-style: italic;8 font-weight: 300;9 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc6CsE.ttf) format('truetype');10}11@font-face {12 font-family: 'Roboto';13 font-style: italic;14 font-weight: 400;15 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xIIzc.ttf) format('truetype');16}17@font-face {18 font-family: 'Roboto';19 font-style: italic;20 font-weight: 700;21 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic6CsE.ttf) format('truetype');22}23@font-face {24 font-family: 'Roboto';25 font-style: normal;26 font-weight: 300;27 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc9.ttf) format('truetype');28}29@font-face {30 font-family: 'Roboto';31 font-style: normal;32 font-weight: 400;33 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');34}35@font-face {36 font-family: 'Roboto';37 font-style: normal;38 font-weight: 700;39 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');40}41 42 43 44@font-face {45 font-family: 'Source Code Pro';46 font-style: normal;47 font-weight: 200;48 src: url(https://fonts.gstatic.com/s/sourcecodepro/v23/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DEyQtMlrSQ.ttf) format('truetype');49}50@font-face {51 font-family: 'Source Code Pro';52 font-style: normal;53 font-weight: 300;54 src: url(https://fonts.gstatic.com/s/sourcecodepro/v23/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DJKQtMlrSQ.ttf) format('truetype');55}56@font-face {57 font-family: 'Source Code Pro';58 font-style: normal;59 font-weight: 400;60 src: url(https://fonts.gstatic.com/s/sourcecodepro/v23/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DMyQtMlrSQ.ttf) format('truetype');61}62@font-face {63 font-family: 'Source Code Pro';64 font-style: normal;65 font-weight: 500;66 src: url(https://fonts.gstatic.com/s/sourcecodepro/v23/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DP6QtMlrSQ.ttf) format('truetype');67}68@font-face {69 font-family: 'Source Code Pro';70 font-style: normal;71 font-weight: 600;72 src: url(https://fonts.gstatic.com/s/sourcecodepro/v23/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DBKXtMlrSQ.ttf) format('truetype');73}74@font-face {75 font-family: 'Source Code Pro';76 font-style: normal;77 font-weight: 700;78 src: url(https://fonts.gstatic.com/s/sourcecodepro/v23/HI_diYsKILxRpg3hIP6sJ7fM7PqPMcMnZFqUwX28DCuXtMlrSQ.ttf) format('truetype');79}80 81 82 83blockquote,body,dd,div,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,legend,li,menu,ol,p,pre,ul{border:0;margin:0;padding:0}84article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{border:0;display:block;margin:0;padding:0}85ol,ul{list-style:none}86button,input,select,textarea{appearance:none;border:0;box-sizing:border-box;font-size:100%;line-height:normal;margin:0;padding:0;text-transform:none;vertical-align:baseline}87button,html input[type="button"],input[type="reset"],input[type="submit"]{appearance:button;cursor:pointer;padding:.2em .3em;}88button:hover,html input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover{background:#777571;color:#f4f1ed}89button :-moz-focus-inner,input :-moz-focus-inner{border:0;padding:0}90button[disabled],html input[disabled]{cursor:default}91input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}92input[type="checkbox"]{width:.7em;height:.7em;margin:.15em;border-radius:3px;}93input[type="checkbox"]:checked{background:#777571}94input[type="search"]{appearance:textfield;box-sizing:border-box;cursor:default}95input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{appearance:none}96legend{white-space:normal}97textarea{overflow:auto;resize:vertical;vertical-align:top}98html{font-size:100%;text-size-adjust:100%;vertical-align:baseline}99sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}100sub{bottom:-.25em}101sup{top:-.5em}102pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}103q,blockquote{quotes:none;}104q:before,blockquote:before,q:after,blockquote:after{content:"";content:none}105table{border-collapse:collapse;border-spacing:0}106img{border:0;max-width:100%;height:auto;vertical-align:middle}107hr{border:0;border-top:solid 1px #dedfdf;display:block;height:0;margin:0;padding:0}108@font-face{font-family:"Entypo";src:url("/fonts/entypo.eot");src:url("/fonts/entypo.eot?#iefix") format("embedded-opentype"),url("/fonts/entypo.woff") format("woff"),url("/fonts/entypo.ttf") format("truetype"),url("/fonts/entypo.svg#entypo") format("svg");font-weight:normal;font-style:normal}109@font-face{font-family:"Entypo Social";src:url("/fonts/entypo-social.eot");src:url("/fonts/entypo-social.eot?#iefix") format("embedded-opentype"),url("/fonts/entypo-social.woff") format("woff"),url("/fonts/entypo-social.ttf") format("truetype"),url("/fonts/entypo-social.svg#entypo-social") format("svg");font-weight:normal;font-style:normal}110body{background:#fff;font-size:1em}111.clearfix{zoom:1}112.clearfix:before,.clearfix:after{content:"";display:table}113.clearfix:after{clear:both}114.hidden{display:none !important;visibility:hidden}115.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}116::-moz-selection{background:#777571;color:#fff;text-shadow:none}117::selection{background:#777571;color:#fff;text-shadow:none}118a,.grey-link.grey-link-override a{color:#777571;display:inline-block;text-decoration:none;}119a:hover,.grey-link.grey-link-override a:hover{color:#777571}120a:active,.grey-link.grey-link-override a:active,a:focus,.grey-link.grey-link-override a:focus{background:rgba(119,117,113,0.5);-webkit-border-radius:3px;border-radius:3px;color:#fff !important;outline:none}121body,button,html,input,select,textarea{color:#575551;font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:300}122h1,h2,h3,h4,h5,h6{font-weight:200}123b,strong{font-weight:400}124pre{background:#f1f1f1;-webkit-border-radius:5px;border-radius:5px;display:block;font-family:"Source Code Pro","Lucida Console","Monaco","Courier New",monospace;font-size:.85em;font-weight:400;padding:1em}125code{background:#dedfdf;-webkit-border-radius:3px;border-radius:3px;display:inline;font-family:"Source Code Pro","Lucida Console","Monaco","Courier New",monospace;font-size:.75em;font-weight:600;padding:.25em .5em;vertical-align:baseline}126pre code{background:transparent;-webkit-border-radius:0;border-radius:0;font-size:1em;font-weight:400;padding:0}127p,code,pre{color:#373531}128input,textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:solid #e5e3df 1px;-webkit-border-radius:3px;border-radius:3px;color:#777571;cursor:pointer;font-weight:400;padding:.3em .5em;}129input:focus,textarea:focus,select:focus{outline:none;border:solid #e5e3df 1px}130label{cursor:pointer}131select:after{content:"stocazzo"}132input[type="checkbox"]{height:1em;position:relative;width:1em}133#builderOptions table input[type="checkbox"]:checked,#builderOptions table input[type="checkbox"].dependency{background:#f4f1ed}134#builderOptions table input[type="checkbox"].activeChoice:checked{background:#7d8aa5}135input[type="submit"]{background:#f4f1ed;-webkit-border-radius:5px;border-radius:5px;color:#777571 !important;display:block;font-size:1.1em;font-weight:300}136input[type="submit"]:hover{color:#fff !important}137.button{background:#e5e8ed;-webkit-border-radius:5px;border-radius:5px;color:#7d8aa5;display:block;font-size:1.1em;position:relative;}138.button span{display:block;padding:.5em .6em;line-height:1;}139.button span span{padding:0;}140.button span span.icon{font-size:200%;position:absolute;top:.8em;right:.2em;line-height:0;color:#7d8aa5}141.button span.version{display:block;font-size:.8em;margin-top:.2em}142.button.highlighted{background:#7d8aa5;color:#fff;}143.button.highlighted .icon,.button.highlighted pre{color:#fff}144.lighter{color:#acaaa7}145a:active .lighter,a:focus .lighter{color:#fff}146.darker{color:#777571}147a:active .darker,a:focus .darker{color:#fff}148.summary{font-size:1.3em;width:70%}149.description{font-size:1.2em}150.npm{background:#777571;color:#fff;margin:1em 0}151.command{border:none;background:#b1b9c9;color:#fff;-webkit-border-radius:5px;border-radius:5px;display:block;font-weight:400;margin:.5em 0;padding:.15em .5em .25em}152.wrapper{margin:0 auto;max-width:64em;padding:0 4%}153.arrow:after{content:'\e804';font-family:"Entypo"}154.icon{color:#9c9ea0;font-size:220%;line-height:0;position:relative;vertical-align:baseline}155a:active .icon,a:focus .icon{color:#fff}156.previous:after{content:'\e803';font-family:"Entypo"}157.next:after{content:'\e804';font-family:"Entypo"}158.download:after{content:'\e802';font-family:"Entypo"}159.github:after{content:'\e803';font-family:"Entypo Social"}160.twitter:after{content:'\e802';font-family:"Entypo Social"}161.facebook:after{content:'\e800';font-family:"Entypo Social"}162.googleplus:after{content:'\e801';font-family:"Entypo Social"}163.about{background:#e5e8ed;padding-top:0;padding-bottom:1em;}164.about .introduction p{font-size:1.3em;margin:1em 0}165.about .license{background:#fff;border:solid #e5e3df 1px;-webkit-border-radius:5px;border-radius:5px;color:#b1b9c9;margin:1.5em 0 0;padding:1em;}166.about .license h2{margin-bottom:.5em}167.about .license a{color:#6d798f;text-decoration:none}168.updates{padding-top:1em;padding-bottom:1em;}169.updates div.box{background:#e5e8ed;-webkit-border-radius:5px;border-radius:5px;padding:1em}170.updates h3{font-weight:400;margin-bottom:1em;}171.updates h3 span{margin-right:.5em}172.updates p{padding-bottom:.5em}173.updates a{font-weight:400;color:#7d8aa5}174.updates a:hover{text-decoration:underline}175.main .color{color:#7d8aa5}176.main h2{color:#7d8aa5}177.main a{color:#7d8aa5}178.main .selected{background-color:#7d8aa5;border-color:#7d8aa5}179.main .blog{margin-bottom:2em;}180.main .blog a{position:relative;padding:0 .2em}181.main .blog a:focus,.main .blog a:active{background-color:#777571 !important}182.main .blog hr{margin-top:2em;margin-bottom:2em}183.main .blog h2{font-size:2em;padding-bottom:.5em}184.main .blog h3{font-size:2em;padding:.5em .3em 0 .3em;margin-left:-.2em}185.main .blog h4{font-weight:400}186.main .blog ul{padding-left:2em;}187.main .blog ul li{list-style-type:disc;padding:.1em 0}188.main .blog small{border:1px solid #acaaa7;-webkit-border-radius:5px;border-radius:5px;display:block;font-size:.8em;font-weight:400;margin:.5em 0 2em;padding:.5em 1em;}189.main .blog small a{background:#f4f1ed;color:#777571;-webkit-border-radius:3px;border-radius:3px;display:inline;padding:0 .5em}190.main .blog small .comments{float:right}191.main .blog .post p{font-size:1.1em;line-height:1.3em;margin:1em 0}192.main .blog .post p a,.main .blog ul a{font-weight:400;text-decoration:none;color:#7d8aa5}193.main .blog .pagination a{background:#f4f1ed;-webkit-border-radius:5px;border-radius:5px;padding:1em;width:46%;color:#7d8aa5;font-weight:400}194.main .blog .pagination a .icon{font-size:200%;top:.3em;color:#7d8aa5}195.main .blog .pagination .older{float:left;text-align:right}196.main .blog .pagination .newer{float:right;text-align:left}197.main .blog .pagination .icon.previous{float:left;margin-right:.5em}198.main .blog .pagination .icon.next{float:right;margin-left:.5em}199.overview .summary,.overview .description{margin-bottom:1.5em}200.overview .license{font-size:.8em;margin:1em 0 3em}201.overview .use li{float:left;}202.overview .use li a{margin:0 0 0 .35em}203.overview .use li:first-child a{margin:0 .35em 0 0}204.overview .use .button{height:3em}205.features a{display:block;position:relative}206.books img{width:10em}207.books .about{background-color:#fff;padding-top:0;}208.books .about a{font-weight:400}209.books .cover{float:right;width:25%;}210.books .cover a{margin:.3em 0;font-weight:600;padding:.3em;color:#7d8aa5}211.books h2{font-size:2em}212.books .introduction p{font-size:1.1em}213.examples section h1{color:#7d8aa5;font-size:2em;font-weight:200}214.examples section h3{color:#575551}215.examples section p{padding-top:.5em}216.docs{padding-bottom:2em;}217.docs .versions{background:#e5e8ed;-webkit-border-radius:5px;border-radius:5px;color:#3c3a37;margin:0 0 2em;padding:.5em 1em;}218.docs .versions h3{float:left}219.docs .versions ul{float:right;}220.docs .versions ul li{font-weight:400;float:left;margin:0 0 0 .5em;position:relative}221.docs .versions a{background:#fff;-webkit-border-radius:3px;border-radius:3px;color:#dedfdf !important;font-size:.85em;padding:.25em .5em;}222.docs .versions a.selected{background:#fff;color:#777571 !important;}223.docs .versions a.selected:after{background:#fff;bottom:-4px;content:"";display:block;height:6px;left:50%;margin-left:-3px;position:absolute;-webkit-transform-origin:center;-moz-transform-origin:center;-o-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);width:6px}224.docs .toc{-webkit-border-radius:5px;border-radius:5px;border:solid #dedfdf 1px;font-size:.9em;line-height:1em;}225.docs .toc .small{height:1em;}226.docs .toc .small ul{display:none}227.docs .toc ul{border-top:solid #dedfdf 1px;padding:.5em 1em 1em;overflow:none;}228.docs .toc ul:first-child{border-top:none}229.docs .toc ul li ul{border-top:solid #dedfdf 1px;padding:0}230.docs .toc ul h3{padding:.7em 0 .3em 0;color:#575551 !important;font-weight:400}231.docs .toc ul a{color:#575551;display:block;padding:.3em .5em;margin-left:-.2em;}232.docs .toc ul a.top{color:#7d8aa5;font-size:1.2em;margin:0 0 .5em}233.docs .toc a.top:after{color:#dedfdf;content:'\e809';float:right;font-family:"Entypo";font-size:140%}234.docs .toc a.top:active,.docs .toc a.top:focus{background-color:#777571;}235.docs .toc a.top:active:after,.docs .toc a.top:focus:after{color:#fff}236.docs .content{margin:0 0 2em;}237.docs .content .heading:first-child h1{border:0;margin:0;padding:0}238.docs .content .heading:first-child .back-to-top{display:none}239.docs .content h1{border-top:solid 1px #dedfdf;margin:2em 0 0;padding:1.5em 0 0;}240.docs .content h1 a{padding:0 .2em;margin-left:-.2em}241.docs .content h2{background:#5a5d60;-webkit-border-radius:5px;border-radius:5px;margin:2em 0 .5em;padding:.15em .5em .25em;}242.docs .content h2 a{color:#fff !important;padding:0 .2em;margin-left:-.2em;}243.docs .content h2 a:focus,.docs .content h2 a:active{background-color:#fff;color:#5a5d60 !important}244.docs .content h3{-webkit-border-radius:5px;border-radius:5px;border:solid #dedfdf 1px;font-weight:400;margin:1.5em 0 0;padding:.15em .5em .25em}245.docs .content h4{-webkit-border-radius:5px;border-radius:5px;border:solid #f4f1ed 1px;color:#acaaa7;font-size:1.125em;font-weight:400;margin:1.5em 0 .5em;padding:.15em .5em .25em}246.docs .content h5{color:#acaaa7;font-size:1em;font-weight:400;margin:1.5em 0 0}247.docs .content p{margin:.5em 0}248.docs .content ol{counter-reset:li;list-style:none;*list-style:decimal;position:relative;}249.docs .content ol > li{margin-top:.5em;padding-left:1.5em;}250.docs .content ol > li:before{background:#b1b9c9;-webkit-border-radius:3px;border-radius:3px;content:counter(li);counter-increment:li;font-size:.75em;font-weight:600;left:0;padding:.15em .5em;position:absolute;color:#fff;margin-top:.15em}251.docs .content ul li{margin:.5em 0 0 1em;position:relative;}252.docs .content ul li:after{content:'\e80c';font-family:"Entypo";color:#7d8aa5;position:absolute;left:-1em;font-size:100%;margin:.2em .5em 0 0;top:0}253.docs .content pre{margin:.5em 0 0}254.docs .content a.back-to-top:before{color:#fff;content:'\e80a';margin-right:.5em;font-family:"Entypo";font-size:110%}255.docs .content a.back-to-top{color:#fff !important;font-size:.8em;margin-top:-3.4em;padding:.3em .5em;position:absolute !important;right:.5em}256.docs .content a.back-to-top:active,.docs .content a.back-to-top:focus{background-color:#fff;color:#5a5d60 !important;}257.docs .content a.back-to-top:active:before,.docs .content a.back-to-top:focus:before{color:#5a5d60 !important}258.heading{position:relative}259.guides{padding-bottom:2em;}260.guides .content:first-child h1{border:0;margin:0;padding:0}261.guides .content{margin:0 0 2em;}262.guides .content h1{border-top:solid 1px #e5e3df;margin:2em 0 0;padding:1.5em 0 0}263.guides .content h2{background:#777571;-webkit-border-radius:5px;border-radius:5px;margin:2em 0 .5em;padding:.15em .5em .25em;}264.guides .content h2 a{color:#fff !important}265.guides .content h3{-webkit-border-radius:5px;border-radius:5px;border:solid #e5e3df 1px;font-weight:400;margin:1.5em 0 0;padding:.5em}266.guides .content h4{-webkit-border-radius:5px;border-radius:5px;border:solid #f4f1ed 1px;color:#acaaa7;font-size:1.125em;font-weight:400;margin:1.5em 0 .5em;padding:.15em .5em .25em}267.guides .content h5{color:#acaaa7;font-size:1em;font-weight:400;margin:1.5em 0 0}268.guides .content p{margin:.5em 0;padding:.4em}269.guides .content ol{counter-reset:li;list-style:none;*list-style:decimal;position:relative;}270.guides .content ol li{margin-top:.5em;padding-left:1.5em;}271.guides .content ol li:before{background:#f4f1ed;-webkit-border-radius:3px;border-radius:3px;content:counter(li);counter-increment:li;font-size:.75em;font-weight:600;left:0;padding:.15em .5em;position:absolute}272.guides .content ul li{margin:.5em 0 0;}273.guides .content ul li:after{content:'\e80c';float:left;font-family:"Entypo";font-size:100%;margin:.2em .5em 0 0}274.guides .content pre{margin:.5em 0 0;}275.guides .content pre code{padding:.25em .5em}276#global-bar{-webkit-box-shadow:rgba(0,0,0,0.1) 0 0 30px;box-shadow:rgba(0,0,0,0.1) 0 0 30px;padding-bottom:1em;padding-top:1em;position:fixed;width:100%;background-color:#fff;z-index:100;}277#global-bar div.wrapper{position:relative;}278#global-bar div.wrapper div.right{bottom:4px;position:absolute;right:4%}279#global-bar ul > li > a:active,#global-bar ul > li > a:focus{background:#9c9ea0;border-color:#9c9ea0;color:#fff}280#global-bar ul{float:left;}281#global-bar ul li{float:left;margin-right:.5em;position:relative;}282#global-bar ul li a{-webkit-border-radius:3px;border-radius:3px;color:#414347;font-size:1em;padding:.3em .5em .3em .5em;cursor:pointer}283#global-bar ul li.selected > a{background:#414347;border-color:#414347;color:#fff;}284#global-bar ul li.selected > a:active,#global-bar ul li.selected > a:focus{background:#9c9ea0;border-color:#9c9ea0;color:#fff}285body.mootools #global-bar{padding-bottom:2em;padding-top:2em;position:relative;}286body.mootools #global-bar h1{padding:0}287#logo{float:left;}288#logo h1 img{height:70px !important}289#logo p img{width:150px;padding:.5em}290#logo img:focus,#logo img:active{background-color:#fff}291#search{float:left;margin-left:.5em;}292#search label{display:block;position:relative}293#search input{background:transparent;border-color:transparent;color:#fff;border-color:#dedfdf;display:block;font-size:.85em;font-weight:400;padding:.4em .5em;width:12em;}294#search input:focus{border-color:#acaaa7}295#search #search-field{color:#777571}296#header{border-color:#7d8aa5;}297#header nav ul li.selected a{color:#7d8aa5;}298#header nav ul li.selected a:after{border-color:#7d8aa5 #7d8aa5 transparent transparent}299#header div.wrapper div.right{bottom:0}300#header h1 img{height:60px;width:auto;margin-top:1em}301#header a{color:#b1b9c8;font-size:1.125em;}302#header a:active,#header a:focus{background:transparent;border-color:transparent;color:#fff;}303#header a:active span,#header a:focus span{background:#777571;border-color:#777571;color:#fff;-webkit-border-radius:3px;border-radius:3px}304.core > #header,.more > #header{border-bottom:solid #7d8aa5 1px;margin-top:3em}305#menu{-webkit-box-shadow:#9c9ea0 0 0 30px;box-shadow:#9c9ea0 0 0 30px;padding:0 0 1em;}306#menu a{-webkit-border-radius:5px;border-radius:5px;border:solid #e5e3df 1px;display:block;padding:.6em 0 .4em;text-align:center;}307#menu a:active,#menu a:focus{border-color:#e5e3df}308#menu img{height:1.6em}309#sitemap{font-size:.8em;}310#sitemap h3{color:#cbd0db;font-weight:400}311#sitemap ul li a{padding:0 .5em;margin-left:-.5em;display:block;}312#sitemap ul li a span.icon{margin-right:.5em;font-size:100%}313#credits{font-size:.8em;}314#credits p{margin:0 0 1em}315#credits img.mootools{width:150px;padding:.5em;margin-left:-.5em}316#credits p.mediatemple a{background:url("/images/credits/mediatemple.png") no-repeat left top;border-color:url("/images/credits/mediatemple.png") no-repeat left top;color:#fff;-webkit-background-size:auto 16px;-moz-background-size:auto 16px;background-size:auto 16px;color:#dedfdf;font-size:.85em;font-weight:300;padding-left:46px;}317#credits p.mediatemple a:active,#credits p.mediatemple a:focus{color:#dedfdf !important}318@media only screen and (max-width: 47.999em) /* Less than 600 pixels */{.arrow:after{font-size:80%;margin-left:.3em;position:relative;top:0;vertical-align:baseline}319.home-page .arrow:after{top:.08em}320.slider:after{content:'\e808';float:right;font-family:"Entypo";font-size:80%}321.overview{padding-top:2em;padding-bottom:180px;position:relative;}322.overview .big-icon{width:100%;bottom:0;left:0;height:180px;overflow:hidden;position:absolute;z-index:-1;text-align:center;}323.overview .big-icon img{height:auto;opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20);max-width:320px}324.overview .summary{font-size:120%;width:100%}325.overview .description{font-size:100%}326.overview .use li{width:50%}327.overview .previous-version label :after{display:block}328.overview .previous-version select{width:100%}329.modules{padding-top:1em;padding-bottom:1em;}330.modules .docs{margin-top:1em;}331.modules .docs a{display:block}332.features{padding-top:1em;padding-bottom:1em;}333.features section{float:left;margin-top:0;}334.features section:first-child{margin-top:0}335.features section p{padding:.5em 1.5em}336.features section a p{margin-top:.5em}337.guides{padding-top:1em;padding-bottom:1em}338.docs .content{margin-top:2em}339.docs .toc ul a.top{margin-bottom:0}340.docs .toc ul ul{display:none;}341.updates section{margin-top:1em;}342.updates section:nth-of-type(1){margin-top:0}343#logo{float:none;}344#logo h1,#logo p{text-align:center}345.home-page{padding-top:1em;padding-bottom:1em;}346.home-page .big-icon{display:none}347#global-bar .wrapper{padding:0}348#global-bar div.wrapper div.right{position:static;margin-top:1.5em;}349#global-bar div.wrapper div.right ul{float:none;margin:0}350#global-bar div.wrapper div.right ul{margin-bottom:.5em}351#global-bar div.wrapper div.right li{float:none;margin:0;}352#global-bar div.wrapper div.right li a{-webkit-border-radius:0;border-radius:0}353#global-bar div.wrapper div.right ul.opened li,#global-bar div.wrapper div.right li.selected{height:2em}354#global-bar div.wrapper div.right input{width:100%}355#search{float:none;margin:0 4%;position:static;}356#search input{width:100%}357#header .wrapper{padding:0}358#header h1{padding:.5em 4%;}359#header h1 img{margin-top:0}360#main-header{display:none}361#header ul li{overflow:hidden;height:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:height .4s ease;-moz-transition:height .4s ease;-o-transition:height .4s ease;-ms-transition:height .4s ease;transition:height .4s ease;}362#header ul li a{border-top:solid #e5e3df 1px;cursor:pointer;display:block;padding:.5em 4%}363#header ul.opened li,#header ul li.selected{height:2.6em;opacity:1;-ms-filter:none;filter:none}364#menu li{float:left;width:50%;margin:1em 0 0;}365#menu li:nth-of-type(1n) a{margin:0 .5em 0 0}366#menu li:nth-of-type(2n) a{margin:0 0 0 .5em}367#footer.wrapper{padding:0}368#sitemap{width:100%;}369#sitemap div{border-bottom:solid 1px #e5e3df;margin-bottom:1px;overflow:hidden;float:left;min-width:100%;height:4em;-webkit-transition:height .5s ease;-moz-transition:height .5s ease;-o-transition:height .5s ease;-ms-transition:height .5s ease;transition:height .5s ease;}370#sitemap div h3{font-size:2em;background:#fff;border-color:#fff;color:#fff;color:#acaaa7;cursor:pointer;padding:.5em 4%}371#sitemap div ul{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);padding:0 2em 1em 2em}372#sitemap .opened{height:11em}373#sitemap .opened ul{opacity:1;-ms-filter:none;filter:none}374#credits{padding:1em 4% 2em;clear:both}375}@media only screen and (min-width: 48em) /* More or equal to 768 pixels */{.arrow:after{font-size:80%;margin-left:.3em;position:relative;top:0;vertical-align:baseline}376.overview{padding-top:3em;position:relative;}377.overview .big-icon{bottom:0;height:230px;overflow:hidden;position:absolute;right:4%;width:400px;z-index:-1;padding:50px 50px 0 50px;}378.overview .big-icon img{height:auto;opacity:.4;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);width:100%;-webkit-transition:-webkit-transform .5s ease;-moz-transition:-moz-transform .5s ease;-o-transition:-o-transform .5s ease;-ms-transition:-ms-transform .5s ease;transition:transform .5s ease}379.overview .use li{width:9.6em}380.overview .previous-version select{width:19.2em}381.modules{padding-top:2em;padding-bottom:2em;}382.modules section{position:relative;clear:both}383.modules div{margin-top:1.5em;width:48%;}384.modules div:nth-of-type(odd){float:left}385.modules div:nth-of-type(even){float:right}386.modules div pre{margin-top:1em}387.modules .docs{position:absolute;right:0;top:0}388.features{padding-top:1em;padding-bottom:1em;}389.features section{float:left;width:33.333%;}390.features section:nth-of-type(1) a{margin:0 1.75em 0 -.6em}391.features section:nth-of-type(2) a{margin:0 1.25em 0}392.features section:nth-of-type(3) a{margin:0 0 0 1.75em}393.features section a{padding:.8em}394.features section p{margin-top:1em}395.guides{padding-top:2em;padding-bottom:2em}396.docs .toc{float:left;width:26%}397.docs .content{float:right;width:70%}398.about{padding-top:1em;padding-bottom:2em;}399.about .introduction{float:left;width:70%}400.about .license{float:right;width:25%}401.home-page{padding-top:2em;padding-bottom:2em}402.updates{padding-top:2em;padding-bottom:2em;}403.updates section{float:left;width:33.333%;}404.updates section:nth-of-type(1) div.box{margin:0 .8em 0 0}405.updates section:nth-of-type(2) div.box{margin:0 .8em 0}406.updates section:nth-of-type(3) div.box{margin:0 0 0 .8em}407#header .wrapper div{position:relative}408#header h1{padding:1em 0}409#header nav{bottom:0;position:absolute;right:0;}410#header nav ul li{float:left;margin-left:1em;}411#header nav ul li:first-child{margin-left:0}412#header nav ul li a{position:relative;}413#header nav ul li a span{position:relative;top:-1em;padding:.1em .5em}414#header nav ul li.selected a{color:#777571;}415#header nav ul li.selected a:after{background:#fff;border-color:#fff;color:#fff;border:solid 1px;border-color:#7d8aa5 #7d8aa5 transparent transparent;bottom:-6px;content:"";display:block;height:10px;left:50%;margin-left:-5px;position:absolute;-webkit-transform-origin:center;-moz-transform-origin:center;-o-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);width:10px}416.main + hr{display:none}417#menu{display:none;padding-top:1em;}418#menu li{float:left;width:20%;}419#menu li:nth-of-type(1) a{margin:0 .6em 0 0}420#menu li:nth-of-type(2) a{margin:0 .45em 0 .3em}421#menu li:nth-of-type(3) a{margin:0 .3em 0 .45em}422#menu li:nth-of-type(4) a{margin:0 .3em 0 .45em}423#menu li:nth-of-type(5) a{margin:0 0 0 .45em}424#footer.wrapper{padding-top:2em;padding-bottom:4em}425#sitemap{float:right;}426#sitemap div{float:left;margin-left:2em;width:8.8em}427#sitemap div first-of-type{margin-left:.5em}428#sitemap h3{margin-bottom:.3em}429#credits{float:left}430.core .big-icon{height:230px;width:340px}431.more .big-icon{height:230px;width:340px}432}pre span.keyword{color:#b05098}433pre span.number{color:#429bc1}434pre span.string{color:#83a440}435pre span.comment{color:#9c9ea0}436.mootools #header{border-bottom:1px solid #fff}437.previous-version{margin-top:1em;}438.previous-version label.select{position:relative}439@media screen and (-webkit-min-device-pixel-ratio: 0) /* Chrome and Safari only */{label.select:after{content:'<>';font:11px "Consolas",monospace;padding:3px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);right:8px;top:3px;position:absolute;pointer-events:none}440}#googleLink{margin-left:2em;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:opacity .4s;-moz-transition:opacity .4s;-o-transition:opacity .4s;-ms-transition:opacity .4s;transition:opacity .4s}441#googleLink.visible{opacity:1;-ms-filter:none;filter:none}442.builder{margin-top:2em;margin-bottom:2em;}443.builder .header h1{float:left;margin:1.5em 0 .5em;width:100%}444.builder .header .save{float:left;clear:none;margin-right:1em}445.builder .save{clear:both;}446.builder .save label{display:block;margin-top:1em;position:relative}447.builder .save label.select:after{top:7px}448.builder .save select{width:100%}449.builder .save input[type="checkbox"]{margin-right:.5em;vertical-align:bottom}450.builder .save input[type="submit"]{margin-top:.5em;padding:.5em;width:100%;text-align:left}451.builder .save .icon.download{position:absolute;right:.25em;top:0;line-height:1em}452.builder form{margin-top:1em}453.builder .step{clear:both;font-weight:400;margin-top:1em}454@media only screen and (min-width: 48em) /* More or equal to 768 pixels */{.builder .save{width:35%}455.builder table{width:100%;}456.builder table tr{border-bottom:1px solid #acaaa7;}457.builder table tr td{padding:.3em;}458.builder table tr td:first-child{width:5%}459.builder table tr td + td{width:15%}460.builder table tr td + td + td{width:20%}461.builder table tr td + td + td +td{width:60%}462}div.developers{width:100%;}463div.developers h1{font-size:2em;color:#7d8aa5}464div.developers section{padding:0 0 1em;color:#777571;float:left;width:100%;clear:both}465div.developers img{float:left;height:65px;margin:.4em 1em}466div.developers h3,div.developers p.inline{display:inline}467div.developers p.small{font-size:.9em;}468div.developers p.small a{color:#7d8aa5}469.features{text-align:left;}470.features section{width:50%}471 </style>472 <title>473 MooTools Blog: Get friendly with the Natives474 </title>475 <meta content="width=device-width, user-scalable=no" name="viewport">476 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">477 </head>478 <body class="mootools">479 <header id="header" role="banner">480 <div class="clearfix" id="global-bar">481 <div class="clearfix wrapper">482 <div id="logo">483 <h1>484 <a>485 <img alt="MooTools" src="rick.jpg">486 </a>487 </h1>488 <p class="visually-hidden">489 Your resources for every-day JavaScripting490 </p>491 </div>492 <div class="right clearfix" id="main-header">493 <ul>494 <li>495 <a>496 Core497 </a>498 </li>499 <li>500 <a>501 More502 </a>503 </li>504 <li>505 <a>506 Blog507 </a>508 </li>509 <li>510 <a>511 Forge512 </a>513 </li>514 </ul>515 <form action="/search" id="search" method="get" role="search">516 <label for="search-field">517 <span aria-hidden="true" class="icon search">518 </span>519 <input id="search-field" name="q" placeholder="Search in the site" type="search">520 </label>521 </form>522 </div>523 </div>524 </div>525 </header>526 <div class="main clearfix" role="main">527 <div class="clearfix wrapper blog">528 <h2>529 Get friendly with the Natives530 </h2>531 <small>532 Written by Ryan Florence on 24 March 2010 – Posted under533 <a>534 all535 </a>536 ,537 <a>538 tips539 </a>540 </small>541 <div class="post">542 <p>543 Have you extended a Native lately? It's an incredibly helpful thing.544 </p>545 <div class="heading clearfix">546 <h3>547 The Difference:548 </h3>549 </div>550 <p>551 I've seen stuff like this:552 </p>553 <pre><code class="javascript">fn1(fn2(<span class="number">10</span>, fn3(<span class="string">'house'</span>)));</code></pre>554 <p>555 Hard to figure out what's happening. Instead you can write code like:556 </p>557 <pre><code class="javascript">fn3(<span class="string">'house'</span>).fn2(<span class="number">10</span>).fn1();</code></pre>558 <div class="heading clearfix">559 <h3>560 A Useful, Real Example, zeroPad561 </h3>562 </div>563 <p>564 I've used this in a couple scripts, it takes a number and returns a string with zeros padded in front: 123 becomes '000123'. Really handy for filenames and the like.565 </p>566 <div class="heading clearfix">567 <h3>568 Functionally Based Example569 </h3>570 </div>571 <pre><code class="javascript"><span class="function"><span class="keyword">function</span> <span class="title">zeroPad</span><span class="params">(num, zeros)</span>{</span>572 zeros = zeros || <span class="number">3</span>;573 <span class="keyword">var</span> str = <span class="string">''</span> + num;574 zeros.times(<span class="keyword">function</span>(){ str = <span class="string">'0'</span>+str; });575 <span class="keyword">return</span> str;576};577 578<span class="comment">// usage</span>579doSomething(zeroPad(document.getElementById(<span class="string">'myInput'</span>).value, <span class="number">3</span>));</code></pre>580 <div class="heading clearfix">581 <h3>582 Native Extentions Based Example583 </h3>584 </div>585 <pre><code class="javascript">Number.implement({586 zeroPad: <span class="keyword">function</span>(zeros){587 <span class="keyword">var</span> str = <span class="string">''</span> + <span class="keyword">this</span>;588 zeros.times(<span class="keyword">function</span>(){ str = <span class="string">'0'</span>+str; });589 <span class="keyword">return</span> str;590 }591});592 593<span class="comment">// so that it works on both numbers and strings</span>594String.implement({595 zeroPad: <span class="keyword">function</span>(zeros){596 <span class="keyword">return</span> <span class="keyword">this</span>.toInt().zeroPad(zeros);597 }598});599 600<span class="comment">// usage</span>601$(<span class="string">'myInput'</span>).get(<span class="string">'value'</span>).zeroPad(<span class="number">3</span>).doSomething();</code></pre>602 <div class="heading clearfix">603 <h3>604 Side by Side:605 </h3>606 </div>607 <pre><code class="javascript">doSomething(zeroPad(document.getElementById(<span class="string">'myInput'</span>).value, <span class="number">3</span>));608<span class="comment">// vs</span>609$(<span class="string">'myInput'</span>).get(<span class="string">'value'</span>).zeroPad(<span class="number">3</span>).doSomething();</code></pre>610 <p>611 Awesome? Yes.612 </p>613 <ul>614 <li>615 <a alt="Array">616 Array617 </a>618 </li>619 <li>620 <a alt="Function">621 Function622 </a>623 </li>624 <li>625 <a alt="Number">626 Number627 </a>628 </li>629 <li>630 <a alt="String">631 String632 </a>633 </li>634 </ul>635 <p>636 Some say extending natives is a bad idea. Personally, I think it's awesome--but this topic is a sore spot for some.637 </p>638 <div class="heading clearfix">639 <h3>640 Flippin' Sweet Array methods641 </h3>642 </div>643 <p>644 Arian Stolwijk created this amazing gem:645 <a alt="Array.Math">646 Array.Math647 </a>648 . Code samples often tell the story faster:649 </p>650 <pre><code class="javascript">[<span class="number">2</span>,<span class="number">5</span>,<span class="number">1</span>,<span class="number">6</span>].sum(); <span class="comment">// 14</span>651[<span class="number">2</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">2</span>].product(<span class="number">3</span>); <span class="comment">// [6,15,18,6]</span>652[<span class="number">9</span>,<span class="number">12</span>,<span class="number">15</span>].quotient(<span class="number">3</span>) <span class="comment">// [3,4,5]</span></code></pre>653 <p>654 This is all made possible by extending the655 <code>656 Array657 </code>658 native, see?659 </p>660 <pre><code class="javascript">Array.implement({661 662 sum: <span class="keyword">function</span>(start,length){663 <span class="keyword">var</span> sum = <span class="number">0</span>, 664 start = start ? start : <span class="number">0</span>,665 length = length ? length : <span class="keyword">this</span>.count()-start;666 length = start ? length + <span class="number">2</span> : length;667 <span class="keyword">for</span>(<span class="keyword">var</span> i=start;i&lt;length;i++) sum += <span class="keyword">this</span>[i];668 <span class="keyword">return</span> sum;669 },670 671 product: <span class="keyword">function</span>(p){672 <span class="keyword">var</span> arr = $type(p) == <span class="string">'array'</span>;673 <span class="keyword">return</span> <span class="keyword">this</span>.map(<span class="keyword">function</span>(entity,i){674 <span class="keyword">return</span> arr ? (entity * p[i]) : (entity * p);675 });676 },677 678 quotient: <span class="keyword">function</span>(q){679 <span class="keyword">var</span> arr = $type(q) == <span class="string">'array'</span>;680 <span class="keyword">return</span> <span class="keyword">this</span>.map(<span class="keyword">function</span>(entity,i){681 <span class="keyword">return</span> arr ? (entity / q[i]) : (entity / q);682 });683 },684 685 <span class="comment">// and a whole lot more awesome ...</span>686 687 });</code></pre>688 <div class="heading clearfix">689 <h3>690 Quick Tips691 </h3>692 </div>693 <ul>694 <li>695 <code>696 this697 </code>698 is the number or string, or whatever, when inside the method.699 </li>700 <li>701 Return something that makes sense (usually702 <code>703 this704 </code>705 ).706 </li>707 <li>708 You can implement several methods all in the same code block.709 </li>710 </ul>711 <p>712 This is just one more great tool to help keep your code organized and readable.713 </p>714 <div id="disqus_thread">715 </div>716 <noscript>717 Please enable JavaScript to view the718 <a>719 comments powered by Disqus.720 </a>721 </noscript>722 </div>723 </div>724 <hr>725 <nav id="menu" role="navigation">726 <div class="clearfix wrapper">727 <h2 class="visually-hidden">728 Projects729 </h2>730 <ul>731 <li class="core">732 <a>733 <img alt="Core" src="rick.jpg">734 </a>735 </li>736 <li class="more">737 <a>738 <img alt="More" src="rick.jpg">739 </a>740 </li>741 </ul>742 </div>743 </nav>744 </div>745 <hr>746 <footer class="clearfix wrapper" id="footer">747 <nav id="sitemap" role="navigation">748 <div>749 <h3>750 About751 <span aria-hidden="true" class="slider">752 </span>753 </h3>754 <ul>755 <li>756 <a>757 Blog758 </a>759 </li>760 <li>761 <a>762 Books763 </a>764 </li>765 <li>766 <a>767 Developers768 </a>769 </li>770 <li>771 <a target="_blank">772 Merchandising773 </a>774 </li>775 </ul>776 </div>777 <div>778 <h3>779 Support780 <span aria-hidden="true" class="slider">781 </span>782 </h3>783 <ul>784 <li>785 <a target="_blank">786 User Group787 </a>788 </li>789 <li>790 <a target="_blank">791 The MooTorial792 </a>793 </li>794 <li>795 <a target="_blank">796 Stack Overflow797 </a>798 </li>799 </ul>800 </div>801 <div>802 <h3>803 Connect with us804 <span aria-hidden="true" class="slider">805 </span>806 </h3>807 <ul>808 <li>809 <a target="_blank">810 <span aria-hidden="true" class="icon github">811 </span>812 GitHub813 </a>814 </li>815 <li>816 <a target="_blank">817 <span aria-hidden="true" class="icon twitter">818 </span>819 Twitter820 </a>821 </li>822 <li>823 <a target="_blank">824 <span aria-hidden="true" class="icon facebook">825 </span>826 Facebook827 </a>828 </li>829 <li>830 <a target="_blank">831 <span aria-hidden="true" class="icon googleplus">832 </span>833 Google+834 </a>835 </li>836 </ul>837 </div>838 <div>839 <h3>840 Documentation841 <span aria-hidden="true" class="slider">842 </span>843 </h3>844 <ul>845 <li>846 <a>847 MooTools Core848 </a>849 </li>850 <li>851 <a>852 MooTools More853 </a>854 </li>855 </ul>856 </div>857 </nav>858 <div id="credits" role="contentinfo">859 <p>860 <a>861 <img alt="MooTools" class="mootools" src="rick.jpg">862 </a>863 </p>864 <p>865 Copyright © 2006-2023866 <br>867 Valerio Proietti & MooTools Developers868 </p>869 </div>870 </footer>871 </body>872</html>873