CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="google-site-verification" content="kex8f9OaacZS2GAJ_M5UupW0x-h4X3zYj8qaPJNV2JM"><link rel="icon" href="/favicon.png"><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"><style>body { font-family: 'Roboto', sans-serif; }</style><link href="/css/build~contribute~course~error~events~home~host~lessons~news~resources~tutorial~tutorials.9f55d702.css" rel="prefetch"><link href="/css/course.31c08d4e.css" rel="prefetch"><link href="/css/course~tutorials.27374047.css" rel="prefetch"><link href="/css/events.4c481b3e.css" rel="prefetch"><link href="/css/home.c0f58b45.css" rel="prefetch"><link href="/css/host.31c08d4e.css" rel="prefetch"><link href="/css/lessons~news~resources.20a35763.css" rel="prefetch"><link href="/css/lessons~resources.3652ded5.css" rel="prefetch"><link href="/css/news.e977f534.css" rel="prefetch"><link href="/css/tutorial.03be5c30.css" rel="prefetch"><link href="/css/tutorials.add412f2.css" rel="prefetch"><link href="/js/build.943932f9.js" rel="prefetch"><link href="/js/build~contribute~course~error~events~home~host~lessons~news~resources~tutorial~tutorials.b8a0a0f7.js" rel="prefetch"><link href="/js/chunk-2d2308b7.6545c029.js" rel="prefetch"><link href="/js/chunk-57f93a34.17161cb9.js" rel="prefetch"><link href="/js/contribute.e80e18ae.js" rel="prefetch"><link href="/js/course.bbd1c058.js" rel="prefetch"><link href="/js/course~home~lessons~resources~tutorial~tutorials.079464d3.js" rel="prefetch"><link href="/js/course~tutorials.e74c9221.js" rel="prefetch"><link href="/js/error.40b634fd.js" rel="prefetch"><link href="/js/events.e291911a.js" rel="prefetch"><link href="/js/home.c4f67a23.js" rel="prefetch"><link href="/js/host.8f5c6970.js" rel="prefetch"><link href="/js/lessons.bc344ab5.js" rel="prefetch"><link href="/js/lessons~news~resources.22b8280e.js" rel="prefetch"><link href="/js/lessons~resources.b1f7d577.js" rel="prefetch"><link href="/js/news.8f7b61c4.js" rel="prefetch"><link href="/js/resources.4d6694a0.js" rel="prefetch"><link href="/js/tutorial.844a23e6.js" rel="prefetch"><link href="/js/tutorials.afeff307.js" rel="prefetch"><link href="/css/app.1237bf28.css" rel="preload" as="style"><link href="/css/chunk-vendors.a4530562.css" rel="preload" as="style"><link href="/js/app.2bf6cc0e.js" rel="preload" as="script"><link href="/js/chunk-vendors.15f6ce0a.js" rel="preload" as="script"><link href="/css/chunk-vendors.a4530562.css" rel="stylesheet"><link href="/css/app.1237bf28.css" rel="stylesheet"><style type="text/css">.resize-observer[data-v-8859cc6c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-8859cc6c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}</style><link rel="stylesheet" type="text/css" href="/css/build~contribute~course~error~events~home~host~lessons~news~resources~tutorial~tutorials.9f55d702.css"><script charset="utf-8" src="/js/build~contribute~course~error~events~home~host~lessons~news~resources~tutorial~tutorials.b8a0a0f7.js"></script><script charset="utf-8" src="/js/course~home~lessons~resources~tutorial~tutorials.079464d3.js"></script><link rel="stylesheet" type="text/css" href="/css/lessons~news~resources.20a35763.css"><script charset="utf-8" src="/js/lessons~news~resources.22b8280e.js"></script><link rel="stylesheet" type="text/css" href="/css/lessons~resources.3652ded5.css"><script charset="utf-8" src="/js/lessons~resources.b1f7d577.js"></script><script charset="utf-8" src="/js/lessons.bc344ab5.js"></script><title>IPFS Tutorial | Blogging on the Decentralized Web (Lesson 6) | ProtoSchool</title><link data-vue-meta="1" rel="canonical" href="https://proto.school/blog/06/"><meta data-vue-meta="1" property="og:url" content="https://proto.school/blog/06/" data-vmid="og:url"><meta data-vue-meta="1" property="og:type" content="website" data-vmid="og:type"><meta data-vue-meta="1" property="og:site_name" content="ProtoSchool" data-vmid="og:site_name"><meta data-vue-meta="1" name="twitter:card" content="summary_large_image" data-vmid="twitter:card"><meta data-vue-meta="1" name="twitter:site" content="@ProtoSchool" data-vmid="twitter:site"><script charset="utf-8" src="/js/chunk-57f93a34.17161cb9.js"></script><style type="text/css" media="screen" class="monaco-colors">.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input { background-color: #fffffe; } .monaco-editor, .monaco-editor .inputarea.ime-input { color: #000000; } .monaco-editor .margin { background-color: #fffffe; } .monaco-editor .rangeHighlight { background-color: rgba(253, 255, 0, 0.2); } .monaco-editor .symbolHighlight { background-color: rgba(234, 92, 0, 0.33); } .vs-whitespace { color: rgba(51, 51, 51, 0.2) !important; } .monaco-editor .line-numbers { color: #237893; } .monaco-editor .current-line ~ .line-numbers { color: #0b216f; } .monaco-editor .view-overlays .current-line { border: 2px solid #eeeeee; } .monaco-editor .margin-view-overlays .current-line-margin { border: 2px solid #eeeeee; } .monaco-editor .lines-content .cigr { box-shadow: 1px 0 0 0 #d3d3d3 inset; } .monaco-editor .lines-content .cigra { box-shadow: 1px 0 0 0 #939393 inset; } .monaco-editor .minimap-slider, .monaco-editor .minimap-slider .minimap-slider-horizontal { background: rgba(100, 100, 100, 0.2); } .monaco-editor .minimap-slider:hover, .monaco-editor .minimap-slider:hover .minimap-slider-horizontal { background: rgba(100, 100, 100, 0.35); } .monaco-editor .minimap-slider.active, .monaco-editor .minimap-slider.active .minimap-slider-horizontal { background: rgba(0, 0, 0, 0.3); } .monaco-editor .minimap-shadow-visible { box-shadow: #dddddd -6px 0 6px -6px inset; } .monaco-editor .view-ruler { box-shadow: 1px 0 0 0 #d3d3d3 inset; } .monaco-editor .scroll-decoration { box-shadow: #dddddd 0 6px 6px -6px inset; } .monaco-editor .focused .selected-text { background-color: #add6ff; } .monaco-editor .selected-text { background-color: #e5ebf1; } .monaco-editor .cursor { background-color: #000000; border-color: #000000; color: #ffffff; } .monaco-editor .squiggly-error { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23e51400'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left; } .monaco-editor .squiggly-warning { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23e9a700'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left; } .monaco-editor .squiggly-info { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%2375beff'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left; } .monaco-editor .squiggly-hint { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%223%22%20width%3D%2212%22%3E%3Cg%20fill%3D%22%236c6c6c%22%3E%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat bottom left; } .monaco-editor.showUnused .squiggly-inline-unnecessary { opacity: 0.467; } .monaco-editor .squiggly-inline-deprecated { text-decoration: line-through; text-decoration-color: #000000} .monaco-diff-editor .diff-review-line-number { color: #237893; } .monaco-diff-editor .diff-review-shadow { box-shadow: #dddddd 0 -6px 6px -6px inset; } .monaco-editor .line-insert, .monaco-editor .char-insert { background-color: rgba(155, 185, 85, 0.2); } .monaco-diff-editor .line-insert, .monaco-diff-editor .char-insert { background-color: rgba(155, 185, 85, 0.2); } .monaco-editor .inline-added-margin-view-zone { background-color: rgba(155, 185, 85, 0.2); } .monaco-editor .line-delete, .monaco-editor .char-delete { background-color: rgba(255, 0, 0, 0.2); } .monaco-diff-editor .line-delete, .monaco-diff-editor .char-delete { background-color: rgba(255, 0, 0, 0.2); } .monaco-editor .inline-deleted-margin-view-zone { background-color: rgba(255, 0, 0, 0.2); } .monaco-diff-editor.side-by-side .editor.modified { box-shadow: -6px 0 5px -5px #dddddd; } .mtk1 { color: #000000; } .mtk2 { color: #fffffe; } .mtk3 { color: #808080; } .mtk4 { color: #ff0000; } .mtk5 { color: #0451a5; } .mtk6 { color: #0000ff; } .mtk7 { color: #09885a; } .mtk8 { color: #008000; } .mtk9 { color: #dd0000; } .mtk10 { color: #383838; } .mtk11 { color: #cd3131; } .mtk12 { color: #863b00; } .mtk13 { color: #af00db; } .mtk14 { color: #800000; } .mtk15 { color: #e00000; } .mtk16 { color: #3030c0; } .mtk17 { color: #666666; } .mtk18 { color: #778899; } .mtk19 { color: #ff00ff; } .mtk20 { color: #a31515; } .mtk21 { color: #4f76ac; } .mtk22 { color: #008080; } .mtk23 { color: #001188; } .mtk24 { color: #4864aa; } .mtki { font-style: italic; } .mtkb { font-weight: bold; } .mtku { text-decoration: underline; text-underline-position: under; }</style><style type="text/css" media="screen"></style><style type="text/css" media="screen">.monaco-list:focus .monaco-list-row.focused { background-color: #d6ebff; } .monaco-list:focus .monaco-list-row.focused:hover { background-color: #d6ebff; } .monaco-list:focus .monaco-list-row.selected { background-color: #0069d1; } .monaco-list:focus .monaco-list-row.selected:hover { background-color: #0069d1; } .monaco-list:focus .monaco-list-row.selected { color: #ffffff; } .monaco-drag-image, .monaco-list:focus .monaco-list-row.selected.focused { background-color: #0074e8; } .monaco-drag-image, .monaco-list:focus .monaco-list-row.selected.focused { color: #ffffff; } .monaco-list .monaco-list-row.selected { background-color: #e4e6f1; } .monaco-list .monaco-list-row.selected:hover { background-color: #e4e6f1; } .monaco-list:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) { background-color: #f0f0f0; } .monaco-list.drop-target, .monaco-list .monaco-list-rows.drop-target, .monaco-list .monaco-list-row.drop-target { background-color: #d6ebff !important; color: inherit !important; } .monaco-list-type-filter { background-color: #efc1ad } .monaco-list-type-filter { border: 1px solid rgba(0, 0, 0, 0); } .monaco-list-type-filter.no-matches { border: 1px solid #be1100; } .monaco-list-type-filter { box-shadow: 1px 1px 1px #a8a8a8; }</style><script charset="utf-8" src="/js/chunk-2d2308b7.6545c029.js"></script><style type="text/css" media="screen">.monaco-list:focus .monaco-list-row.focused { background-color: #d6ebff; } .monaco-list:focus .monaco-list-row.focused:hover { background-color: #d6ebff; } .monaco-list:focus .monaco-list-row.selected { background-color: #0069d1; } .monaco-list:focus .monaco-list-row.selected:hover { background-color: #0069d1; } .monaco-list:focus .monaco-list-row.selected { color: #ffffff; } .monaco-drag-image, .monaco-list:focus .monaco-list-row.selected.focused { background-color: #0074e8; } .monaco-drag-image, .monaco-list:focus .monaco-list-row.selected.focused { color: #ffffff; } .monaco-list .monaco-list-row.selected { background-color: #e4e6f1; } .monaco-list .monaco-list-row.selected:hover { background-color: #e4e6f1; } .monaco-list:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) { background-color: #f0f0f0; } .monaco-list.drop-target, .monaco-list .monaco-list-rows.drop-target, .monaco-list .monaco-list-row.drop-target { background-color: #d6ebff !important; color: inherit !important; } .monaco-list-type-filter { background-color: #efc1ad } .monaco-list-type-filter { border: 1px solid rgba(0, 0, 0, 0); } .monaco-list-type-filter.no-matches { border: 1px solid #be1100; } .monaco-list-type-filter { box-shadow: 1px 1px 1px #a8a8a8; }</style><meta data-vue-meta="1" property="og:title" content="IPFS Tutorial | Blogging on the Decentralized Web (Lesson 6)" data-vmid="og:title"><meta data-vue-meta="1" property="og:description" content="Cool content addresses don't change. Create a chain of links from one CID to another with the IPFS DAG API." data-vmid="og:description"><meta data-vue-meta="1" name="description" content="Cool content addresses don't change. Create a chain of links from one CID to another with the IPFS DAG API." data-vmid="description"><meta data-vue-meta="1" property="og:image" content="https://proto.school/social-tiles/twitter/tutorials/blog.jpg" data-vmid="og:image"><meta data-vue-meta="1" name="twitter:image" content="https://proto.school/social-tiles/twitter/tutorials/blog.jpg" data-vmid="twitter:image"><meta data-vue-meta="1" name="twitter:image:alt" content="IPFS Tutorial | Blogging on the Decentralized Web (Lesson 6)" data-vmid="twitter:image:alt"></head><body><noscript><strong>We're sorry but ProtoSchool doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"><div data-v-77486b8c="" class=""><div data-v-4cf932a9="" data-v-77486b8c="" class="home"><header data-v-4cf932a9=""><section data-v-4cf932a9="" class="bg-navy white pv3"><div data-v-4cf932a9="" class="flex-auto flex items-center center mw7 ph3"><a data-v-4cf932a9="" href="/" class="router-link-active"><svg data-v-4cf932a9="" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116 135" alt="ProtoSchool" class="w3"><path data-v-4cf932a9="" d="M58.291 0L0 33.518v67.035l58 33.517 58-33.517V33.518L58.291 0zm53.92 44.593l-33.226-27.98 33.518 19.236v8.744h-.292zM13.407 63.246L25.94 28.563l8.16-1.457-20.693 36.14zm23.025-34.1h43.719l21.859 37.89-21.86 37.889H36.433l-21.86-37.89 21.86-37.89zM11.658 67.909l20.694 36.141L8.744 75.779l2.914-7.87zm65.578 39.93l-36.14 6.412-5.247-6.412h41.387zm25.94-37.015l-12.533 34.684-8.16 1.457 20.693-36.14zm1.749-4.663L83.94 30.02l23.608 28.27-2.623 7.87zm-65.87-39.93l36.141-6.412 5.246 6.412H39.055zm35.85-9.035l-44.01 7.87 37.014-13.408 6.995 5.538zM23.316 27.688L8.16 69.658l6.995-39.055 8.16-2.915zM6.704 77.528l28.562 34.392L4.955 86.271l1.749-8.743zm34.974 39.638l44.01-7.87-37.306 13.408-6.704-5.538zm51.588-10.784l15.156-41.97-6.995 39.055-8.16 2.915zm16.613-49.84l-28.854-34.1L111.337 47.8l-1.458 8.744zM65.869 9.036L24.774 23.9 58.29 4.663l7.578 4.372zM11.95 31.477L4.08 74.613V35.85l7.87-4.372zm-7.869 58l33.518 27.98L4.08 98.221v-8.744zm46.634 35.558l41.095-14.864-33.517 19.236-7.578-4.372zm53.919-22.442l7.578-43.136v38.764l-7.578 4.372z" fill="url(#paint0_linear)"></path><defs data-v-4cf932a9=""><linearGradient data-v-4cf932a9="" id="paint0_linear" x1=".136" y1="67.052" x2="116.42" y2="67.052" gradientUnits="userSpaceOnUse"><stop data-v-4cf932a9="" stop-color="#22F2AD"></stop><stop data-v-4cf932a9="" offset="1" stop-color="#AB21F4"></stop></linearGradient></defs></svg></a><div data-v-4cf932a9="" class="header-text ml3"><a data-v-4cf932a9="" href="/" class=" header-title ma0 fw4 white router-link-active"><span data-v-4cf932a9="" class="montserrat fw4">Proto</span><span data-v-4cf932a9="" class="montserrat fw2">School</span></a><div data-v-4cf932a9="" class="header-slogan ma0 montserrat fw3"> Interactive tutorials on decentralized web protocols </div></div></div></section><nav data-v-133bbc60="" data-v-4cf932a9="" class="bg-aqua"><div data-v-133bbc60="" class="dn db-ns center mw7 pv3 ph3"><div data-v-133bbc60="" class="link-list flex overflow-auto items-center bg-aqua navy f5 fw6 center tc mw7"><a data-v-133bbc60="" href="/tutorials" class="nav-link navy">Tutorials</a><span data-v-133bbc60="" class="fw4">></span><a data-v-133bbc60="" href="/blog" class="nav-link navy router-link-active" data-cy="tutorial-landing-link">Blog</a></div></div><div data-v-133bbc60="" class="db dn-ns"><div data-v-133bbc60="" class="flex items-center bg-aqua ph3 pv3 w-100"><div data-v-133bbc60="" class="flex-auto link fw5 f5 db bb border-aqua navy"><a data-v-133bbc60="" href="/tutorials" class="nav-link navy">Tutorials</a><span data-v-133bbc60="" class="fw4"> > </span><a data-v-133bbc60="" href="/blog" class="nav-link navy router-link-active">Blog</a></div><button data-v-133bbc60="" class="menu-toggle button-reset bg-transparent b--transparent"><svg data-v-133bbc60="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="#2c3e50" stroke-width="3" style="display:inline-block;vertical-align:middle;overflow:visible;" alt="open navigation menu" class=""><path data-v-133bbc60="" d="M0 2.5 L16 2.5"></path><path data-v-133bbc60="" d="M0 8 L16 8"></path><path data-v-133bbc60="" d="M0 13.5 L16 13.5"></path></svg></button></div><div data-v-133bbc60="" class="dn"><div data-v-133bbc60="" class="tc bg-aqua-muted white"><div data-v-133bbc60=""><a data-v-133bbc60="" href="/" class="router-link-active navy link pa3 fw5 f4 db bb border-aqua">Home</a></div><div data-v-133bbc60=""><a data-v-133bbc60="" href="/tutorials" class="navy link pa3 fw5 f4 db bb border-aqua">Tutorials</a></div><div data-v-133bbc60=""><a data-v-133bbc60="" href="/events" class="navy link pa3 fw5 f4 db bb border-aqua">Events</a></div><div data-v-133bbc60=""><a data-v-133bbc60="" href="/contribute" class="navy link pa3 fw5 f4 db bb border-aqua">Contribute</a></div><div data-v-133bbc60=""><a data-v-133bbc60="" href="/host" class="navy link pa3 fw5 f4 db bb border-aqua">Host</a></div><div data-v-133bbc60=""><a data-v-133bbc60="" href="/build" class="navy link pa3 fw5 f4 db bb border-aqua">Build</a></div><div data-v-133bbc60=""><a data-v-133bbc60="" href="/news" class="navy link pa3 fw5 f4 db bb border-aqua">News</a></div></div></div></div></nav></header></div><div data-v-77486b8c="" class="container center-l mw7-l ph3"><section data-v-77486b8c="" class="mw7 center mt3 pt2"><div data-v-77486b8c="" class="flex flex-row justify-between green"><div data-v-1887532e="" data-v-77486b8c="" class="lh-title v-mid f4"><span data-v-1887532e="" class="b">Blog</span> | <span data-v-1887532e="">Lesson 6 of 7</span></div><svg data-v-77486b8c="" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 50 50" xml:space="preserve" alt="JavaScript code challenge" class="h2 ml3 has-tooltip" data-original-title="null"><path fill="currentColor" d="M15.1 36c-.4 0-.8-.1-1.1-.4l-9.5-9.5c-.3-.3-.4-.7-.4-1.1 0-.4.2-.8.4-1.1l9.6-9.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1L7.6 25l8.4 8.4c.6.6.6 1.5 0 2.1-.2.4-.5.5-.9.5zM34.6 36c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l8.6-8.6-8.4-8.4c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l9.4 9.4c.6.6.6 1.5 0 2.1l-9.6 9.6c-.2.4-.6.5-1 .5zM22.9 38.3h-.2c-.8-.1-1.4-.9-1.2-1.7L25.3 13c.1-.8.9-1.4 1.7-1.2.8.1 1.4.9 1.2 1.7L24.4 37c-.2.8-.8 1.3-1.5 1.3z"></path></svg></div><h1 data-v-77486b8c="">List posts chronologically with a chain of links</h1><div data-v-77486b8c="" data-cy-text="<p>You want to create an overview page that lists your blog posts chronologically.</p> <p>You <em>could</em> do it the same way as we did with tags. However, you would need to update that page (create a new node) every time you added a new blog post. It sounds wasteful to create a new node with every small change.</p> <p>There鈥檚 a better way! Whenever you create a new blog post, you can link to the previous one directly. This enables you to walk those links to create the chronological overview page dynamically, as we&#39;ll see in the next lesson.</p> <p>We know the CID of a blog post as soon as it is stored in IPFS. We can use that CID to link from newer blog posts to older ones.</p> " class="lesson-text lh-copy"><p>You want to create an overview page that lists your blog posts chronologically.</p> <p>You <em>could</em> do it the same way as we did with tags. However, you would need to update that page (create a new node) every time you added a new blog post. It sounds wasteful to create a new node with every small change.</p> <p>There鈥檚 a better way! Whenever you create a new blog post, you can link to the previous one directly. This enables you to walk those links to create the chronological overview page dynamically, as we'll see in the next lesson.</p> <p>We know the CID of a blog post as soon as it is stored in IPFS. We can use that CID to link from newer blog posts to older ones.</p> </div></section><section data-v-77486b8c="" class="challenge center pa3 ph4-l flex flex-column"><div data-v-77486b8c="" class="flex-none"><h2 data-v-3a9bc8fa="" data-v-77486b8c="" class="mt0 mb2 green fw4 fill-current"><span data-v-3a9bc8fa="" style="vertical-align: -1px;"><svg data-v-3a9bc8fa="" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" alt="not yet started" data-cy="progress-icon-not-yet-started" class="h1"><circle data-v-3a9bc8fa="" cx="8" cy="8" r="8" fill="#B4C3C4"></circle><path data-v-3a9bc8fa="" d="M10 8l.707.707a1 1 0 000-1.414L10 8zm-3.707 2.293a1 1 0 101.414 1.414l-1.414-1.414zm1.414-6a1 1 0 00-1.414 1.414l1.414-1.414zm1.586 3l-3 3 1.414 1.414 3-3-1.414-1.414zm-3-1.586l3 3 1.414-1.414-3-3-1.414 1.414z" fill="#fff"></path></svg></span><span data-v-3a9bc8fa="" class="green ttu f6 pl2 pr1 fw7 v-mid"><span data-v-3a9bc8fa="" data-cy="progress-not-yet-started">Try it!</span></span><span data-v-3a9bc8fa="" class="green f6 fw5 v-mid"></span><div data-v-3a9bc8fa="" class="fr"><button data-v-3a9bc8fa="" title="Expand challenge box" class="b--transparent bg-transparent charcoal-muted hover-green pointer focus-outline"><svg data-v-3a9bc8fa="" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 32 32"><path data-v-3a9bc8fa="" d="M16 4 L28 4 L28 16 L24 12 L20 16 L16 12 L20 8z M4 16 L8 20 L12 16 L16 20 L12 24 L16 28 L4 28z"></path></svg></button></div></h2><div data-v-77486b8c="" class="lh-copy"><p>In the code below, introduce a new field named <code>prev</code> in our blog posts. This field links to the previous blog post.</p> <p>Link the blog posts in chronological order. The oldest one is the one about trees, then there鈥檚 the one about computers. The one about <code>dogs</code> is the latest one. Once you鈥檝e updated them, return the CID of the blog post about <code>dogs</code>.</p> </div><div data-v-cba791cc="" data-v-77486b8c=""><div data-v-cba791cc="" class="h-100 flex-auto" data-cy="code-editor-ready"><div data-v-cba791cc="" class="editor mt2 monaco_editor_container" style="width: 100%; height: 450px;" data-keybinding-context="1" data-mode-id="javascript"><div class="monaco-editor no-user-select showUnused vs" data-uri="inmemory://model/1" style="width: 736px; height: 450px;"><div data-mprt="3" class="overflow-guard" style="width: 736px; height: 450px;"><div class="margin" role="presentation" aria-hidden="true" style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; height: 798px; width: 51px;"><div class="glyph-margin" style="left: 0px; width: 0px; height: 798px;"></div><div class="margin-view-zones" role="presentation" aria-hidden="true" style="position: absolute;"></div><div class="margin-view-overlays" role="presentation" aria-hidden="true" style="position: absolute; width: 51px; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; line-height: 19px; letter-spacing: 0px; height: 798px;"><div style="position:absolute;top:0px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">1</div></div><div style="position:absolute;top:19px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">2</div></div><div style="position:absolute;top:38px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">3</div></div><div style="position:absolute;top:57px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">4</div></div><div style="position:absolute;top:76px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">5</div></div><div style="position:absolute;top:95px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">6</div></div><div style="position:absolute;top:114px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">7</div></div><div style="position:absolute;top:133px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">8</div></div><div style="position:absolute;top:152px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">9</div></div><div style="position:absolute;top:171px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">10</div></div><div style="position:absolute;top:190px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">11</div></div><div style="position:absolute;top:209px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">12</div></div><div style="position:absolute;top:228px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">13</div></div><div style="position:absolute;top:247px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">14</div></div><div style="position:absolute;top:266px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">15</div></div><div style="position:absolute;top:285px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">16</div></div><div style="position:absolute;top:304px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">17</div></div><div style="position:absolute;top:323px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">18</div></div><div style="position:absolute;top:342px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">19</div></div><div style="position:absolute;top:361px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">20</div></div><div style="position:absolute;top:380px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">21</div></div><div style="position:absolute;top:399px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">22</div></div><div style="position:absolute;top:418px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">23</div></div><div style="position:absolute;top:437px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">24</div></div></div></div><div class="monaco-scrollable-element editor-scrollable vs" role="presentation" data-mprt="5" style="position: absolute; overflow: hidden; left: 51px; width: 685px; height: 450px;"><div class="lines-content monaco-editor-background" style="position: absolute; overflow: hidden; width: 1e+06px; height: 1e+06px; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; left: 0px;"><div class="view-overlays" role="presentation" aria-hidden="true" style="position: absolute; height: 0px; width: 685px;"><div style="position:absolute;top:0px;width:100%;height:19px;"></div><div style="position:absolute;top:19px;width:100%;height:19px;"></div><div style="position:absolute;top:38px;width:100%;height:19px;"></div><div style="position:absolute;top:57px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:76px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:95px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:114px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:133px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:152px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:171px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div><div class="cigr" style="left:16.859375px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:190px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div><div class="cigr" style="left:16.859375px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:209px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div><div class="cigr" style="left:16.859375px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:228px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:247px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:266px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div><div class="cigr" style="left:16.859375px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:285px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div><div class="cigr" style="left:16.859375px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:304px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div><div class="cigr" style="left:16.859375px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:323px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:342px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:361px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div><div class="cigr" style="left:16.859375px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:380px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div><div class="cigr" style="left:16.859375px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:399px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div><div class="cigr" style="left:16.859375px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:418px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div></div><div style="position:absolute;top:437px;width:100%;height:19px;"><div class="cigr" style="left:0px;height:19px;width:16.859375px"></div></div></div><div role="presentation" aria-hidden="true" class="view-rulers"></div><div class="view-zones" role="presentation" aria-hidden="true" style="position: absolute;"></div><div class="view-lines" role="presentation" aria-hidden="true" data-mprt="7" style="position: absolute; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; line-height: 19px; letter-spacing: 0px; width: 685px; height: 798px;"><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk8">/* globals ipfs */</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span> </span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk6">const</span><span class="mtk1"> run = </span><span class="mtk6">async</span><span class="mtk1"> () => {</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1">  </span><span class="mtk6">const</span><span class="mtk1"> natCid = </span><span class="mtk6">await</span><span class="mtk1"> ipfs.dag.put({ author: </span><span class="mtk20">"Nat"</span><span class="mtk1"> })</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1">  </span><span class="mtk6">const</span><span class="mtk1"> samCid = </span><span class="mtk6">await</span><span class="mtk1"> ipfs.dag.put({ author: </span><span class="mtk20">"Sam"</span><span class="mtk1"> })</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span> </span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk1">  </span><span class="mtk8">// Modify the blog posts below</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span> </span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk1">  </span><span class="mtk6">const</span><span class="mtk1"> treePostCid = </span><span class="mtk6">await</span><span class="mtk1"> ipfs.dag.put({</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk1">    content: </span><span class="mtk20">"trees"</span><span class="mtk1">,</span></span></div><div style="top:190px;height:19px;" class="view-line"><span><span class="mtk1">    author: samCid,</span></span></div><div style="top:209px;height:19px;" class="view-line"><span><span class="mtk1">    tags: [</span><span class="mtk20">"outdoor"</span><span class="mtk1">, </span><span class="mtk20">"hobby"</span><span class="mtk1">]</span></span></div><div style="top:228px;height:19px;" class="view-line"><span><span class="mtk1">  })</span></span></div><div style="top:247px;height:19px;" class="view-line"><span><span class="mtk1">  </span><span class="mtk6">const</span><span class="mtk1"> computerPostCid = </span><span class="mtk6">await</span><span class="mtk1"> ipfs.dag.put({</span></span></div><div style="top:266px;height:19px;" class="view-line"><span><span class="mtk1">    content: </span><span class="mtk20">"computers"</span><span class="mtk1">,</span></span></div><div style="top:285px;height:19px;" class="view-line"><span><span class="mtk1">    author: natCid,</span></span></div><div style="top:304px;height:19px;" class="view-line"><span><span class="mtk1">    tags: [</span><span class="mtk20">"hobby"</span><span class="mtk1">]</span></span></div><div style="top:323px;height:19px;" class="view-line"><span><span class="mtk1">  })</span></span></div><div style="top:342px;height:19px;" class="view-line"><span><span class="mtk1">  </span><span class="mtk6">const</span><span class="mtk1"> dogPostCid = </span><span class="mtk6">await</span><span class="mtk1"> ipfs.dag.put({</span></span></div><div style="top:361px;height:19px;" class="view-line"><span><span class="mtk1">    content: </span><span class="mtk20">"dogs"</span><span class="mtk1">,</span></span></div><div style="top:380px;height:19px;" class="view-line"><span><span class="mtk1">    author: samCid,</span></span></div><div style="top:399px;height:19px;" class="view-line"><span><span class="mtk1">    tags: [</span><span class="mtk20">"funny"</span><span class="mtk1">, </span><span class="mtk20">"hobby"</span><span class="mtk1">]</span></span></div><div style="top:418px;height:19px;" class="view-line"><span><span class="mtk1">  })</span></span></div><div style="top:437px;height:19px;" class="view-line"><span><span> </span></span></div></div><div data-mprt="1" class="contentWidgets" style="position: absolute; top: 0px;"></div><div role="presentation" aria-hidden="true" class="cursors-layer cursor-line-style cursor-solid"><div class="cursor " style="height: 19px; top: 0px; left: 0px; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; line-height: 19px; letter-spacing: 0px; display: block; visibility: hidden; width: 2px;"></div></div></div><div role="presentation" aria-hidden="true" class="invisible scrollbar horizontal" style="position: absolute; width: 671px; height: 10px; left: 0px; bottom: 0px;"><div class="slider" style="position: absolute; top: 0px; left: 0px; height: 10px; transform: translate3d(0px, 0px, 0px); contain: strict; width: 671px;"></div></div><canvas class="decorationsOverviewRuler" aria-hidden="true" width="14" height="450" style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 450px;"></canvas><div role="presentation" aria-hidden="true" class="visible scrollbar vertical" style="position: absolute; width: 14px; height: 450px; right: 0px; top: 0px;"><div class="slider" style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 253px;"></div></div></div><div role="presentation" aria-hidden="true" style="width: 736px;"></div><textarea data-mprt="6" class="inputarea" wrap="off" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" aria-label="Editor content;Press Alt+F1 for Accessibility Options." role="textbox" aria-multiline="true" aria-haspopup="false" aria-autocomplete="both" style="font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; line-height: 19px; letter-spacing: 0px; top: 0px; left: 51px; width: 1px; height: 1px;"></textarea><div style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"></div><div data-mprt="4" class="overlayWidgets" style="width: 736px;"></div><div data-mprt="8" class="minimap slider-mouseover" role="presentation" aria-hidden="true" style="position: absolute; left: 0px; width: 0px; height: 450px;"><div class="minimap-shadow-hidden" style="height: 450px;"></div><canvas width="1" height="450" style="position: absolute; left: 0px; width: 1px; height: 450px;"></canvas><canvas class="minimap-decorations-layer" width="1" height="450" style="position: absolute; left: 0px; width: 1px; height: 450px;"></canvas><div class="minimap-slider" style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; width: 0px;"><div class="minimap-slider-horizontal" style="position: absolute; width: 0px; height: 0px;"></div></div></div></div><div data-mprt="2" class="overflowingContentWidgets"></div><div class="context-view" aria-hidden="true" style="display: none;"></div></div></div></div><div data-v-cba791cc="" class="mt2 h-100 flex-auto" data-cy="solution-editor-ready"><div data-v-cba791cc="" class="mb2 ml3"><span data-v-cba791cc="" data-cy="view-solution" class="textLink chevron right">View Solution</span><span data-v-cba791cc="" data-cy="replace-with-solution" class="dn o-0 textLink fr">Replace with Solution</span><span data-v-cba791cc="" data-cy="clear-default-code" class="dn o-0 textLink fr">Clear Default Code</span></div><div data-v-cba791cc="" class="editor solution-editor monaco_editor_container" data-cy="solution" style="width: 100%; height: 450px; display: none;" data-keybinding-context="1" data-mode-id="javascript"><div class="monaco-editor no-user-select showUnused vs" data-uri="inmemory://model/2" style="width: 5px; height: 5px;"><div data-mprt="3" class="overflow-guard" style="width: 5px; height: 5px;"><div class="margin" role="presentation" aria-hidden="true" style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; height: 808px; width: 51px;"><div class="glyph-margin" style="left: 0px; width: 0px; height: 808px;"></div><div class="margin-view-zones" role="presentation" aria-hidden="true" style="position: absolute;"></div><div class="margin-view-overlays" role="presentation" aria-hidden="true" style="position: absolute; width: 51px; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; line-height: 19px; letter-spacing: 0px; height: 808px;"><div style="position:absolute;top:0px;width:100%;height:19px;"><div class="line-numbers lh-odd" style="left:0px;width:25px;">1</div></div></div></div><div class="monaco-scrollable-element editor-scrollable vs" role="presentation" data-mprt="5" style="position: absolute; overflow: hidden; left: 51px; height: 5px;"><div class="lines-content monaco-editor-background" style="position: absolute; overflow: hidden; width: 1e+06px; height: 1e+06px; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; left: 0px;"><div class="view-overlays" role="presentation" aria-hidden="true" style="position: absolute; height: 0px; width: 43px;"><div style="position:absolute;top:0px;width:100%;height:19px;"></div></div><div role="presentation" aria-hidden="true" class="view-rulers"></div><div class="view-zones" role="presentation" aria-hidden="true" style="position: absolute;"></div><div class="view-lines" role="presentation" aria-hidden="true" data-mprt="7" style="position: absolute; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; line-height: 19px; letter-spacing: 0px; width: 43px; height: 808px;"><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk8">/* globals ipfs */</span></span></div></div><div data-mprt="1" class="contentWidgets" style="position: absolute; top: 0px;"></div><div role="presentation" aria-hidden="true" class="cursors-layer cursor-line-style cursor-solid"><div class="cursor" style="height: 19px; top: 0px; left: 0px; font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; line-height: 19px; letter-spacing: 0px; display: none; visibility: hidden;"></div></div></div><div role="presentation" aria-hidden="true" class="visible scrollbar horizontal" style="position: absolute; width: 0px; height: 10px; left: 0px; bottom: 0px;"><div class="slider" style="position: absolute; top: 0px; left: 0px; height: 10px; transform: translate3d(0px, 0px, 0px); contain: strict; width: 20px;"></div></div><canvas class="decorationsOverviewRuler" aria-hidden="true" width="14" height="5" style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px;"></canvas><div role="presentation" aria-hidden="true" class="visible scrollbar vertical" style="position: absolute; width: 14px; height: 5px; right: 0px; top: 0px;"><div class="slider" style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 20px;"></div></div></div><div role="presentation" aria-hidden="true" style="width: 5px;"></div><textarea data-mprt="6" class="inputarea" wrap="off" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" aria-label="Editor content;Press Alt+F1 for Accessibility Options." role="textbox" aria-multiline="true" aria-haspopup="false" aria-autocomplete="both" readonly="true" style="font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; font-feature-settings: "liga" 0, "calt" 0; line-height: 19px; letter-spacing: 0px; top: 0px; left: 0px; width: 1px; height: 1px;"></textarea><div class="monaco-editor-background textAreaCover line-numbers" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px;"></div><div data-mprt="4" class="overlayWidgets" style="width: 5px;"></div><div data-mprt="8" class="minimap slider-mouseover" role="presentation" aria-hidden="true" style="position: absolute; left: 0px; width: 0px; height: 5px;"><div class="minimap-shadow-hidden" style="height: 5px;"></div><canvas width="1" height="5" style="position: absolute; left: 0px; width: 1px; height: 5px;"></canvas><canvas class="minimap-decorations-layer" width="1" height="5" style="position: absolute; left: 0px; width: 1px; height: 5px;"></canvas><div class="minimap-slider" style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; width: 0px;"><div class="minimap-slider-horizontal" style="position: absolute; width: 0px; height: 0px;"></div></div></div></div><div data-mprt="2" class="overflowingContentWidgets"></div><div class="context-view" aria-hidden="true" style="display: none;"></div></div></div></div></div></div><div data-v-77486b8c="" class="flex-none"><div data-v-77486b8c="" class="pt2 lh-copy"><span> Update the code to complete the challenge. Click <strong>Submit</strong> to check your answer. </span></div></div></section><div data-v-723eff7c="" data-v-77486b8c="" class="mw7 center"><div data-v-723eff7c="" class="coding-challenge-container pr4 pb4 tr"><div data-v-723eff7c=""><button data-v-009ce952="" data-v-723eff7c="" data-type="primary" type="primary" data-cy="submit-answer" class="inline-flex justify-center avenir dib v-mid fw7 nowrap lh-copy bn br1 pointer bg-navy white outline-focus pv2 ph3 bg-navy white"><span data-v-009ce952="" class="loader"></span><span data-v-009ce952="" class="text">Submit</span></button></div></div></div></div><div data-v-77486b8c="" class="mt4 ph3-ns bg-aqua navy"><div data-v-77486b8c="" class="mw7 center ph3"><p data-v-77486b8c=""><strong data-v-77486b8c="">Feeling stuck?</strong> We'd love to hear what's confusing so we can improve this lesson. Please <a data-v-77486b8c="" href="https://github.com/ProtoSchool/protoschool.github.io/issues/new?assignees=&labels=lesson-feedback&template=lesson-feedback.md&title=Lesson+Feedback%253A+Blog+-+Lesson+6+(List%20posts%20chronologically%20with%20a%20chain%20of%20links)" target="_blank">share your questions and feedback</a>.</p></div></div><footer data-v-a0fc7dd0="" data-v-77486b8c="" data-cy="footer-component" class="bg-navy white pt5-m pt5-l pt4 pb2 "><div data-v-a0fc7dd0="" class="flex mw7 ph3 center flex-wrap"><div data-v-a0fc7dd0="" class="w-33-l w-100 mb0-l mb3"><a data-v-a0fc7dd0="" href="/" class="flex items-center link router-link-active"><svg data-v-a0fc7dd0="" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116 135" alt="ProtoSchool" class="w2 mr2 "><path data-v-a0fc7dd0="" d="M58.291 0L0 33.518v67.035l58 33.517 58-33.517V33.518L58.291 0zm53.92 44.593l-33.226-27.98 33.518 19.236v8.744h-.292zM13.407 63.246L25.94 28.563l8.16-1.457-20.693 36.14zm23.025-34.1h43.719l21.859 37.89-21.86 37.889H36.433l-21.86-37.89 21.86-37.89zM11.658 67.909l20.694 36.141L8.744 75.779l2.914-7.87zm65.578 39.93l-36.14 6.412-5.247-6.412h41.387zm25.94-37.015l-12.533 34.684-8.16 1.457 20.693-36.14zm1.749-4.663L83.94 30.02l23.608 28.27-2.623 7.87zm-65.87-39.93l36.141-6.412 5.246 6.412H39.055zm35.85-9.035l-44.01 7.87 37.014-13.408 6.995 5.538zM23.316 27.688L8.16 69.658l6.995-39.055 8.16-2.915zM6.704 77.528l28.562 34.392L4.955 86.271l1.749-8.743zm34.974 39.638l44.01-7.87-37.306 13.408-6.704-5.538zm51.588-10.784l15.156-41.97-6.995 39.055-8.16 2.915zm16.613-49.84l-28.854-34.1L111.337 47.8l-1.458 8.744zM65.869 9.036L24.774 23.9 58.29 4.663l7.578 4.372zM11.95 31.477L4.08 74.613V35.85l7.87-4.372zm-7.869 58l33.518 27.98L4.08 98.221v-8.744zm46.634 35.558l41.095-14.864-33.517 19.236-7.578-4.372zm53.919-22.442l7.578-43.136v38.764l-7.578 4.372z" fill="url(#paint0_linear)"></path><defs data-v-a0fc7dd0=""><linearGradient data-v-a0fc7dd0="" id="paint0_linear" x1=".136" y1="67.052" x2="116.42" y2="67.052" gradientUnits="userSpaceOnUse"><stop data-v-a0fc7dd0="" stop-color="#22F2AD"></stop><stop data-v-a0fc7dd0="" offset="1" stop-color="#AB21F4"></stop></linearGradient></defs></svg><div data-v-a0fc7dd0="" class="ma0 fw4 white f3"><span data-v-a0fc7dd0="" class="montserrat fw4">Proto</span><span data-v-a0fc7dd0="" class="montserrat fw2">School</span></div></a></div><div data-v-a0fc7dd0="" class="w-20-l w-25-m w-33 column "><span data-v-a0fc7dd0="" class="fw7">Courses</span><ul data-v-a0fc7dd0="" class="list pl0"><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/course/ipfs" class="link underline-hover white o-80 glow">IPFS </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/course/ipld" class="link underline-hover white o-80 glow">IPLD </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/course/filecoin" class="link underline-hover white o-80 glow">Filecoin </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/course/multiformats" class="link underline-hover white o-80 glow">Multiformats </a></li></ul></div><div data-v-a0fc7dd0="" class="w-20-l w-25-m w-33 column "><span data-v-a0fc7dd0="" class="fw7">Community</span><ul data-v-a0fc7dd0="" class="list pl0"><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://github.com/protoschool" class="link underline-hover white o-80 glow">GitHub </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://twitter.com/protoschool" class="link underline-hover white o-80 glow">Twitter </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/news" class="link underline-hover white o-80 glow">Newsletter </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/contribute" class="link underline-hover white o-80 glow">Contribute </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/contribute#contact" class="link underline-hover white o-80 glow">Contact </a></li></ul></div><div data-v-a0fc7dd0="" class="w-20-l w-25-m w-33 column "><span data-v-a0fc7dd0="" class="fw7">Related Projects</span><ul data-v-a0fc7dd0="" class="list pl0"><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://ipfs.io" class="link underline-hover white o-80 glow">IPFS </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://filecoin.io" class="link underline-hover white o-80 glow">Filecoin </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://ipld.io" class="link underline-hover white o-80 glow">IPLD </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://libp2p.io" class="link underline-hover white o-80 glow">libp2p </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://multiformats.io" class="link underline-hover white o-80 glow">Multiformats </a></li></ul></div></div><div data-v-a0fc7dd0="" class="flex justify-start mt4 mw7 center ph3 f7 o-70"><div data-v-a0fc7dd0="" class="w-33-l"></div><p data-v-a0fc7dd0="">漏 <a data-v-a0fc7dd0="" target="_blank" href="https://protocol.ai" class="link underline white o-80 glow">Protocol Labs</a> | Except as <a data-v-a0fc7dd0="" target="_blank" href="https://protocol.ai/legal/" class="link underline white o-80 glow">noted</a>, content licensed <a data-v-a0fc7dd0="" target="_blank" href="https://creativecommons.org/licenses/by/3.0/deed.en" class="link underline white o-80 glow">CC-BY 3.0</a>.</p></div></footer></div><div class="vue-portal-target"></div></div><script type="text/javascript" async="" src="https://countly.proto.school/sdk/web/countly.min.js"></script><script>// https://github.com/schalkneethling/dnt-helper/blob/master/js/dnt-helper.js function _dntEnabled (dnt, userAgent) { 'use strict' var dntStatus = dnt || navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack var ua = userAgent || navigator.userAgent var anomalousWinVersions = ['Windows NT 6.1', 'Windows NT 6.2', 'Windows NT 6.3'] var fxMatch = ua.match(/Firefox\/(\d+)/) var ieRegEx = /MSIE|Trident/i var isIE = ieRegEx.test(ua) var platform = ua.match(/Windows.+?(?=;)/g) if (isIE && typeof Array.prototype.indexOf !== 'function') { return false } else if (fxMatch && parseInt(fxMatch[1], 10) < 32) { dntStatus = 'Unspecified' } else if (isIE && platform && anomalousWinVersions.indexOf(platform.toString()) !== -1) { dntStatus = 'Unspecified' } else { dntStatus = { '0': 'Disabled', '1': 'Enabled' }[dntStatus] || 'Unspecified' } return dntStatus === 'Enabled' } // Some default pre init var Countly = Countly || {}; Countly.q = Countly.q || []; const COUNTLY_KEY_PROTOSCHOOL = 'c785b6eaa9c61617e1a7db83cb437e5f3dfe4280'; const COUNTLY_KEY_PROTOSCHOOL_TEST = '50f696b92cba4fe18cf60f37349f7c757625a871'; const COUNTLY_URL = 'https://countly.proto.school'; (function(){ if (!window.Cypress && !_dntEnabled()) { // Provide countly initialization parameters Countly.app_key = location.hostname === 'proto.school' ? COUNTLY_KEY_PROTOSCHOOL : COUNTLY_KEY_PROTOSCHOOL_TEST; Countly.url = COUNTLY_URL; // Choose what to track Countly.q.push(['track_sessions']); Countly.q.push(['track_pageview']); Countly.q.push(['track_clicks']); Countly.q.push(['track_scrolls']); Countly.q.push(['track_links']); // Load countly script asynchronously var cly = document.createElement('script'); cly.type = 'text/javascript'; cly.async = true; cly.src = 'https://countly.proto.school/sdk/web/countly.min.js'; cly.onload = function(){ Countly.init() Countly.getViewUrl = function () { return location.pathname + location.search + location.hash; } }; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cly, s); } })();</script><script src="/js/chunk-vendors.15f6ce0a.js"></script><script src="/js/app.2bf6cc0e.js"></script><div class="monaco-aria-container"><div class="monaco-alert" role="alert" aria-atomic="true"></div><div class="monaco-status" role="status" aria-atomic="true"></div></div></body></html>