PageSourceSearch

https://www.code-like-a-journalist.com/en/first-steps/setup

html code-like-a-journalist.com collected 2026-09-25 20:18:20 UTC 95,402 bytes, 87 lines download raw bytes

1<!DOCTYPE html><html><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" data-next-head=""/><meta name="theme-color" content="#111" media="(prefers-color-scheme: dark)" data-next-head=""/><title data-next-head="">Setup with VSCode, Deno and TypeScript</title><meta property="og:url" content="https://www.code-like-a-journalist.com//en/first-steps/setup" data-next-head=""/><meta property="og:site_name" content="Code Like a Journalist" data-next-head=""/><meta property="title" content="Setup with VSCode, Deno and TypeScript" data-next-head=""/><meta property="og:title" content="Setup with VSCode, Deno and TypeScript" data-next-head=""/><meta property="og:description" content="Let&#x27;s install everything we need." data-next-head=""/><meta property="description" content="Let&#x27;s install everything we need." data-next-head=""/><meta property="og:image" content="https://www.code-like-a-journalist.com/assets/sharing-v1.jpg" data-next-head=""/><meta property="twitter:image" content="https://www.code-like-a-journalist.com/assets/sharing-v1.jpg" data-next-head=""/><meta property="twitter:card" content="summary_large_image" data-next-head=""/><meta property="twitter:title" content="Setup with VSCode, Deno and TypeScript" data-next-head=""/><meta property="twitter:description" content="Let&#x27;s install everything we need." data-next-head=""/><link rel="apple-touch-icon" sizes="180x180" href="https://www.code-like-a-journalist.com/assets/apple-touch-icon.png" data-next-head=""/><link rel="icon" type="image/png" sizes="32x32" href="https://www.code-like-a-journalist.com/assets/favicon-32x32.png" data-next-head=""/><link rel="icon" type="image/png" sizes="16x16" href="https://www.code-like-a-journalist.com/assets/favicon-16x16.png" data-next-head=""/><link rel="preload" href="/_next/static/css/b46be2fda15f60fe.css" as="style"/><style data-next-head="">:root{--nextra-primary-hue:212deg;--nextra-primary-saturation:100%;--nextra-primary-lightness:45%;--nextra-navbar-height:64px;--nextra-menu-height:3.75rem;--nextra-banner-height:2.5rem;--nextra-bg:250,250,250;}.dark{--nextra-primary-hue:204deg;--nextra-primary-saturation:100%;--nextra-primary-lightness:55%;--nextra-bg:17,17,17;}</style><link rel="stylesheet" href="/_next/static/css/b46be2fda15f60fe.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" noModule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script>
1<script src="/_next/static/chunks/webpack-8f510490488c372d.js" defer=""></script>
1<script src="/_next/static/chunks/framework-4374eae96780d8a1.js" defer=""></script>
1<script src="/_next/static/chunks/main-bb9658c519c9fb7e.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-7373dbe7b5056ae9.js" defer=""></script>
1<script src="/_next/static/chunks/1807-c3573f6b3cd60b6f.js" defer=""></script>
1<script src="/_next/static/chunks/pages/en/first-steps/setup-299df2c95901adfb.js" defer=""></script>
1<script src="/_next/static/c2m9_Ft7o8hWQQbJGNByV/_buildManifest.js" defer=""></script>
1<script src="/_next/static/c2m9_Ft7o8hWQQbJGNByV/_ssgManifest.js" defer=""></script>
1</head><body><div id="__next">
1<script>((e,i,s,u,m,a,l,h)=>{let d=document.documentElement,w=["light","dark"];function p(n){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&a?m.map(f=>a[f]||f):m;k?(d.classList.remove(...S),d.classList.add(a&&a[n]?a[n]:n)):d.setAttribute(y,n)}),R(n)}function R(n){h&&w.includes(n)&&(d.style.colorScheme=n)}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let n=localStorage.getItem(i)||s,y=l&&n==="system"?c():n;p(y)}catch(n){}})("class","theme","system",null,["light","dark"],null,true,true)</script>
1<div dir="ltr">
1<script>document.documentElement.setAttribute('dir','ltr')</script>
1<script>try{if(localStorage.getItem("v1")==='0'){document.body.classList.add('nextra-banner-hidden')}}catch(e){}</script>
1<div class="nextra-banner-container max-md:_sticky _top-0 _z-20 _flex _items-center _h-[var(--nextra-banner-height)] [body.nextra-banner-hidden_&amp;]:_hidden _text-slate-50 dark:_text-white _bg-neutral-900 dark:_bg-[linear-gradient(1deg,#383838,#212121)] _px-2 _ps-10 print:_hidden"><div class="_w-full _truncate _text-center _font-medium _text-sm"><span><a href="/en/contact">Enjoying this course? Tag me in a post and I’ll feature it! 🥳 →</a></span></div></div><div class="nextra-nav-container _sticky _top-0 _z-20 _w-full _bg-transparent print:_hidden"><div class="nextra-nav-container-blur"></div><nav class="_mx-auto _flex _h-[var(--nextra-navbar-height)] _max-w-[90rem] _items-center _justify-end _gap-4 _pl-[max(env(safe-area-inset-left),1.5rem)] _pr-[max(env(safe-area-inset-right),1.5rem)]"><a class="nextra-focus _flex _items-center hover:_opacity-75 ltr:_mr-auto rtl:_ml-auto" href="/"><span>Code Like a Journalist</span></a><div class="_flex _gap-4 _overflow-x-auto nextra-scrollbar _py-1.5"></div><div class="_not-prose _relative _flex _items-center _text-gray-900 dark:_text-gray-300 contrast-more:_text-gray-800 contrast-more:dark:_text-gray-300 max-md:_hidden"><input spellCheck="false" class="_rounded-lg _px-3 _py-2 _transition-colors _w-full md:_w-64 _text-base _leading-tight md:_text-sm _bg-black/[.05] dark:_bg-gray-50/10 placeholder:_text-gray-500 dark:placeholder:_text-gray-400 contrast-more:_border contrast-more:_border-current [&amp;::-webkit-search-cancel-button]:_appearance-none" autoComplete="off" placeholder="Search..." id="headlessui-combobox-input-_R_1dn96_" role="combobox" type="search" aria-expanded="false" aria-autocomplete="list" data-headlessui-state="" value=""/></div><a class="nextra-focus" href="https://github.com/nshiab/code-like-a-journalist" target="_blank" rel="noreferrer"><svg width="24" height="24" fill="currentColor" viewBox="3 3 18 18"><title>GitHub</title><path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path></svg><span class="_sr-only">GitHub</span></a><button title="Change language" class="_h-7 _rounded-md _px-2 _text-xs _font-medium _transition-colors _text-gray-600 dark:_text-gray-400" id="headlessui-listbox-button-_R_dt96_" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><span class="_flex _items-center _gap-2"><svg viewBox="2 2 16 16" width="12" height="12" fill="currentColor"><path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd"></path></svg><span class="">English</span></span></button>
1<button class="_transition nextra-hamburger _rounded md:_hidden" aria-label="Menu" type="button" data-headlessui-state=""><svg fill="none" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" class=""><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16"></path></g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16"></path><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 18h16"></path></g></svg></button></nav></div><div class="_mx-auto _flex _max-w-[90rem]"><div class="[transition:background-color_1.5s_ease] _bg-transparent"></div><aside class="nextra-sidebar-container _flex _flex-col md:_top-16 md:_shrink-0 motion-reduce:_transform-none motion-reduce:_transition-none [.resizing_&amp;]:_transition-none _transform-gpu _transition-all _ease-in-out print:_hidden md:_w-64 md:_sticky md:_self-start max-md:[transform:translate3d(0,-100%,0)]"><div class="_px-4 _pt-4 md:_hidden"><div class="_not-prose _relative _flex _items-center _text-gray-900 dark:_text-gray-300 contrast-more:_text-gray-800 contrast-more:dark:_text-gray-300"><input spellCheck="false" class="_rounded-lg _px-3 _py-2 _transition-colors _w-full md:_w-64 _text-base _leading-tight md:_text-sm _bg-black/[.05] dark:_bg-gray-50/10 placeholder:_text-gray-500 dark:placeholder:_text-gray-400 contrast-more:_border contrast-more:_border-current [&amp;::-webkit-search-cancel-button]:_appearance-none" autoComplete="off" placeholder="Search..." id="headlessui-combobox-input-_R_5msr6_" role="combobox" type="search" aria-expanded="false" aria-autocomplete="list" data-headlessui-state="" value=""/></div></div><div class="_overflow-y-auto _p-4 _grow md:_h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))] nextra-scrollbar"><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-100" style="transition-duration:500ms"><div><ul class="_flex _flex-col _gap-1 nextra-menu-desktop max-md:_hidden"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en">Welcome!</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/preamble">Why this course?</a></li><li class="open"><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/en/first-steps" type="button" data-headlessui-state="">1. First steps 🧑‍🎓<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180 *:ltr:_rotate-90 *:rtl:_rotate-[-270deg]"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-100" style="transition-duration:500ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[&quot;&quot;] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1 active"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _bg-primary-100 _font-semibold _text-primary-800 dark:_bg-primary-400/10 dark:_text-primary-600 contrast-more:_border-primary-500 contrast-more:dark:_border-primary-500" href="/en/first-steps/setup">Setup</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/first-steps/variables">Variables</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/first-steps/data-types">Data types</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/first-steps/data-structures">Data structures</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/first-steps/conditions">Conditions</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/first-steps/loops">Loops</a></li></ul></div></div></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/saving-account-calculator">
1Savings account calculator 💸</a></li><li class="open"><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/en/pushing-further" type="button" data-headlessui-state="">2. Pushing further 🚀<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180 *:ltr:_rotate-90 *:rtl:_rotate-[-270deg]"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-100" style="transition-duration:500ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[&quot;&quot;] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/pushing-further/functions">Functions</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/pushing-further/classes">Classes</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/pushing-further/files">Writing and reading files</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/pushing-further/fetch">Fetching data</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/pushing-further/libraries">Using libraries</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/pushing-further/tasks">Running tasks</a></li></ul></div></div></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/stock-market-simulator">Stock market simulator 📈</a></li><li class="open"><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/en/simple-data-analysis" type="button" data-headlessui-state="">3. The SDA library 🤓<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180 *:ltr:_rotate-90 *:rtl:_rotate-[-270deg]"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-100" style="transition-duration:500ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[&quot;&quot;] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/simple-data-analysis/tabular-data">Tabular data</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/simple-data-analysis/geospatial-data">Geospatial data</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/simple-data-analysis/dataviz">Visualizing data</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/simple-data-analysis/sda-and-ai">SDA and AI</a></li></ul></div></div></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/stats-can-census">Wrangling Census data 🇨🇦</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/one-billion-row-challenge">One billion row challenge 😱</a></li><li class="open"><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/en/web-basics" type="button" data-headlessui-state="">4. Web basics 🌐<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180 *:ltr:_rotate-90 *:rtl:_rotate-[-270deg]"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-100" style="transition-duration:500ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[&quot;&quot;] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/web-basics/html">HTML</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/web-basics/css">CSS</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/web-basics/javascript">JavaScript</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/web-basics/svelte">Svelte</a></li></ul></div></div></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/d3-chart">Animated charts with D3 🧑‍🎨</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/d3-map">Animated maps with D3 🗺️</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/web-scraping">Web scraping 🔍</a></li><li class="open"><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/en/git-and-github" type="button" data-headlessui-state="">5. Git &amp; GitHub 🐙<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180 *:ltr:_rotate-90 *:rtl:_rotate-[-270deg]"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-100" style="transition-duration:500ms"><div><ul class="_flex _flex-col _ga
1p-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[&quot;&quot;] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/git-and-github/git-basics">How to use Git?</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/git-and-github/github-basics">How to use GitHub?</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/git-and-github/github-actions">Web scraping with GitHub actions</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/git-and-github/github-pages">GitHub Pages with Svelte</a></li></ul></div></div></li><li class="open"><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/en/ninja-moves" type="button" data-headlessui-state="">Ninja moves 🥷<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180 *:ltr:_rotate-90 *:rtl:_rotate-[-270deg]"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-100" style="transition-duration:500ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[&quot;&quot;] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/ninja-moves/refactoring">Refactoring</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/ninja-moves/math-for-journalists">Math for Journalists</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/ninja-moves/semver">Understanding library versions</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/ninja-moves/tests">Using tests in your projects</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/ninja-moves/publishing-library">Publishing a library</a></li></ul></div></div></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/inspirations">Inspiring people &amp; content 📚</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/more">More to come...</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/en/contact">Contact</a></li></ul></div></div></div><div class="nextra-sidebar-footer _sticky _bottom-0 _flex _items-center _gap-2 _py-4 _mx-3 _px-1 _justify-end" data-toggle-animation="off"><button title="Change language" class="_h-7 _rounded-md _px-2 _text-xs _font-medium _transition-colors _text-gray-600 dark:_text-gray-400 _grow" id="headlessui-listbox-button-_R_6rsr6_" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><span class="_flex _items-center _gap-2"><svg viewBox="2 2 16 16" width="12" height="12" fill="currentColor"><path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.
1089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd"></path></svg><span class="">English</span></span></button><div class=""><button title="Change theme" class="_h-7 _rounded-md _px-2 _text-xs _font-medium _transition-colors _text-gray-600 dark:_text-gray-400" id="headlessui-listbox-button-_R_6tsr6_" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><div class="_flex _items-center _gap-2 _capitalize"><svg fill="none" viewBox="3 3 18 18" width="12" height="12" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg><span class="md:_hidden">Light</span></div></button></div><button class="_transition max-md:_hidden _rounded-md _p-2 _text-gray-600 dark:_text-gray-400" title="Hide sidebar" type="button" data-headlessui-state=""><svg viewBox="0 0 16 16" fill="currentColor" height="12" class=""><path d="M4.177 7.823l2.396-2.396A.25.25 0 017 5.604v4.792a.25.25 0 01-.427.177L4.177 8.177a.25.25 0 010-.354z"></path><path fill-rule="evenodd" d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25V1.75zm1.75-.25a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25H9.5v-13H1.75zm12.5 13H11v-13h3.25a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25z"></path></svg></button></div></aside><nav class="nextra-toc _order-last max-xl:_hidden _w-64 _shrink-0 print:_hidden" aria-label="table of contents"><div class="_grid _grid-rows-[min-content_1fr_min-content] _sticky _top-[--nextra-navbar-height] _pt-6 _text-sm _max-h-[calc(100vh-var(--nextra-navbar-height))]"><p class="_mx-4 _font-semibold _tracking-tight _pb-2 _shadow-[0_12px_16px_rgb(var(--nextra-bg))] contrast-more:_shadow-none _z-[1]">On this page</p><ul class="_px-4 nextra-scrollbar _overscroll-y-contain _overflow-y-auto _hyphens-auto _py-1.5"><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#code-editor" class="nextra-focus _font-semibold _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Code editor</a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#runtime" class="nextra-focus _font-semibold _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Runtime</a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#extensions" class="nextra-focus _font-semibold _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Extensions</a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#lets-run-a-script" class="nextra-focus _font-semibold _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Let’s run a script</a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#about-ai" class="nextra-focus _font-semibold _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">About AI</a></li></ul><div class="nextra-toc-footer _pt-4 _flex _flex-col _items-start _gap-2 _pb-4 _mx-4"><a class="nextra-focus _text-xs _font-medium _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100" href="https://github.com/nshiab/code-like-a-journalist/discussions" target="_blank" rel="noreferrer"><span>Questions? Comments? Start a new discussion →</span></a><a class="nextra-focus _text-xs _font-medium _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100" href="https://github.com/nshiab/code-like-a-journalist/blob/main/pages/en/first-steps/setup.mdx"><span>Suggest changes to this page on GitHub →</span></a><button class="_transition _flex _items-center _gap-1.5 _whitespace-nowrap _opacity-0 _text-xs _font-medium _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100" aria-hidden="true" type="button" disabled="" data-headlessui-state="disabled" data-disabled="">Back to top<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="16" class="_-rotate-90 _border _rounded-full _border-current"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div></div></nav><div id="reach-skip-nav"></div><article class="_w-full _break-words nextra-content _flex _min-h-[calc(100vh-var(--nextra-navbar-height))] _min-w-0 _justify-center _pb-8 _pr-[calc(env(safe-area-inset-right)-1.5rem)]"><main class="_w-full _min-w-0 _max-w-6xl _px-6 _pt-4 md:_px-12">
1<div class="nextra-breadcrumb _mt-1.5 _flex _items-center _gap-1 _overflow-hidden _text-sm _text-gray-500 dark:_text-gray-400 contrast-more:_text-current"><span class="_whitespace-nowrap _transition-colors _min-w-6 _overflow-hidden _text-ellipsis" title="1. First steps 🧑‍🎓">1. First steps 🧑‍🎓</span><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="14" class="_shrink-0 rtl:_rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="_whitespace-nowrap _transition-colors _font-medium _text-gray-700 contrast-more:_font-bold contrast-more:_text-current dark:_text-gray-100 contrast-more:dark:_text-current" title="Setup">Setup</span></div><h1 class="_mt-2 _text-4xl _font-bold _tracking-tight _text-slate-900 dark:_text-slate-100">Setup</h1>
2<div style="position:relative;width:100%;margin:1rem auto 2.5rem auto;overflow:hidden;border-radius:5px;box-shadow:0 4px 8px rgba(0, 0, 0, 0.025)"><iframe width="100%" height="475" style="width:100%;height:475px;border:none;display:block;border-radius:5px" src="https://www.youtube.com/embed/w82Nq41CkXo" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen=""></iframe></div>
3<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">First, let’s install everything we need.</p>
4<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">You might need administrator rights. If you are on your work computer and don’t have them, ask your IT department.</p>
5<div style="max-width:550px;margin:2.5rem auto"><div class="nextra-callout _overflow-x-auto _mt-6 _flex _rounded-lg _border _py-2 ltr:_pr-4 rtl:_pl-4 contrast-more:_border-current contrast-more:dark:_border-current _border-orange-100 _bg-orange-50 _text-orange-800 dark:_border-orange-400/30 dark:_bg-orange-400/20 dark:_text-orange-300"><div class="_select-none _text-xl ltr:_pl-3 ltr:_pr-2 rtl:_pr-3 rtl:_pl-2" style="font-family:&quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;"></div><div class="_w-full _min-w-0 _leading-7">Want to know when new lessons are available? Subscribe to the<!-- --> <a style="text-decoration:underline;font-weight:bold" href="https://mailchi.mp/0db676437a2f/code-like-a-journalist">newsletter ✉️</a> <!-- -->and give a ⭐ to the<!-- --> <a style="text-decoration:underline;font-weight:bold" href="https://github.com/nshiab/code-like-a-journalist">GitHub repository</a> <!-- -->to keep me motivated!<!-- --> <a style="text-decoration:underline;font-weight:bold" href="/contact">
5Click here</a> <!-- -->to get in touch.</div></div></div>
6<h2 id="code-editor" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-10 _border-b _pb-1 _text-3xl _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400">Code editor<a href="#code-editor" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2>
7<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Code is just text. You can write your code in any text editor, but it’s more convenient to use a code editor that comes with many useful features.</p>
8<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">You have many free and interesting options, but the most popular is <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://code.visualstudio.com/" target="_blank" rel="noreferrer">Visual Studio Code</a>, and it’s the one we will use. It’s an <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://github.com/microsoft/vscode" target="_blank" rel="noreferrer">open-source project</a> maintained by Microsoft.</p>
9<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Download it from the <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://code.visualstudio.com/" target="_blank" rel="noreferrer">website</a> and install it.</p>
10<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Once installed, open it. It should look like this. It’s okay if you have different tabs open.</p>
11<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot of the code editor Visual Studio Code." loading="lazy" width="2272" height="1760" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 240&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAIVBMVEUdHR0bGxsfHx8fHx8hISEeHh4gICAgHhwcKzUeHh4jIyNVrZbnAAAACnRSTlOh/vrWysd+fmRkuDHPfAAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAACtJREFUCJljYGdmZWFhZWZjYOBiYmRk5GJAYjAyMTExQUS4uEAMDgYw4AQAEpwAqE6Sx4MAAAAASUVORK5CYII=&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvscode.2d351b19.png&amp;w=3840&amp;q=75 1x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvscode.2d351b19.png&amp;w=3840&amp;q=75"/></span></span></p>
12<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Personally, I find the interface to be too small and I always adjust it to be a bit bigger when I set up a new machine. To do so, click on the <code class="nextra-code" dir="ltr">View =&gt; Appearance =&gt; Zoom In</code> menu.</p>
13<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot of the View menu in VS Code." loading="lazy" width="2034" height="1530" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 240&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;
13sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAM1BMVEUgHyAiJytUWmGGkJZycnImHBsVExMcGxs0PEGZmZqVlpR4eHtkbnRfcYFNTU2Mi4ubo6hKc6bHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAM0lEQVQImRXGyRHAIBAEsQYWZhabI/9oXdZL2K291UacmTGESuYMgdhxn/5neNUOBZDgAyDIAQ/hmJFHAAAAAElFTkSuQmCC&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvscode-zoom.7250c1ea.png&amp;w=2048&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvscode-zoom.7250c1ea.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvscode-zoom.7250c1ea.png&amp;w=3840&amp;q=75"/></span></span></p>
14<h2 id="runtime" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-10 _border-b _pb-1 _text-3xl _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400">Runtime<a href="#runtime" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2>
15<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">For your computer to understand TypeScript and execute it, you need a runtime.</p>
16<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Again, you have many great open-source options out there, but I find <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://deno.com/" target="_blank" rel="noreferrer">Deno</a> particularly easy to use. Deno is maintained by <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://deno.com/company" target="_blank" rel="noreferrer">Deno Land Inc.</a>, with Ryan Dahl as the CEO. Dahl also created <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://nodejs.org/" target="_blank" rel="noreferrer">Node.js</a>, another open-source runtime that is very popular.</p>
17<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">To install it, visit the <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://deno.com/" target="_blank" rel="noreferrer">website</a> and copy the relevant command for your operating system.</p>
18<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Don’t worry if you have a different version. As long as it’s v2.x.x, you will be fine.</p>
19<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot of Deno&#x27;s website." loading="lazy" width="1058" height="572" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 160&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAAGFBMVEX////7+/v39/fi4uKtsLCVmZnv7/DAwsJvBrbGAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAI0lEQVQImR3GwREAIAzDsNgpsP/GHOilhLbmmbX5OSMQBJULBB4AORLMoFEAAAAASUVORK5CYII=&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno.f09a7522.png&amp;w=1080&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno.f09a7522.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno.f09a7522.png&amp;w=3840&amp;q=75"/></span></span></p>
20<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Then, follow these steps:</p>
21<ol class="[:is(ol,ul)_&amp;]:_my-3 [&amp;:not(:first-child)]:_mt-6 _list-decimal ltr:_ml-6 rtl:_mr-6">
22<li class="_my-2">Open a new terminal in VS Code.</li>
23<li class="_my-2">Paste the command you copied just before and press enter to run it.</li>
24</ol>
25<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">The command will download and install Deno on your computer.</p>
26<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot showing how to install Deno from VS Code terminal." loading="lazy" width="1952" height="1590" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 280&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;
26sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAMAAAACh/xsAAAALVBMVEUXFhYeHh4bGxsgICAoGhg1PUdHRkZ+f4Chnp1EQkoxIR0uMjp0jalOWGZydow3cKPlAAAACXBIWXMAABYlAAAWJQFJUiTwAAAANElEQVQImS3FSQ4AIQzEQHcnAWaB/z8XIeFDmfrmv54qRBvjBcKtd2EkhWQToXNzyOSWsAEfvwC2I7AguAAAAABJRU5ErkJggg==&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-install.b3257baf.png&amp;w=2048&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-install.b3257baf.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-install.b3257baf.png&amp;w=3840&amp;q=75"/></span></span></p>
27<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">If you are asked to add Deno to your path, type <code class="nextra-code" dir="ltr">Y</code> and press enter. This ensures Deno is easily accessible from your terminal. If you’re not asked, it’s okay.</p>
28<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot showing an option when installing Deno." loading="lazy" width="1486" height="354" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 80&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAACCAMAAABSSm3fAAAACVBMVEUtLzAnJyccHBzLD1OHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAEUlEQVQImWNgAAFGRiYYzQQAAEoAC5tWuBoAAAAASUVORK5CYII=&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-path.de214cca.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-path.de214cca.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-path.de214cca.png&amp;w=3840&amp;q=75"/></span></span></p>
29<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">And if you are asked to set up completions, choose bash or zsh depending on your operating system by using the up and down keys and pressing the space bar. Then press enter. This provides a handy auto-completion helper in the terminal. Again, if you’re not asked, it’s okay.</p>
30<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot showing how to set up completions when installing Deno." loading="lazy" width="1416" height="522" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 120&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;
30sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAMAAACZFr56AAAACVBMVEUwMTEjJCUZGRkkKOxgAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAGElEQVQImWNgAAFGRkYwzcDIyATiMIEAAAC1ABVX5ftEAAAAAElFTkSuQmCC&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-completions.91a6fad5.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-completions.91a6fad5.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-completions.91a6fad5.png&amp;w=3840&amp;q=75"/></span></span></p>
31<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Now, everything should be properly installed.</p>
32<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Quit and restart VS Code. Then type <code class="nextra-code" dir="ltr">deno --version</code> in your terminal and press enter to display your Deno version. You should see something like this!</p>
33<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot showing how to display Deno version." loading="lazy" width="1464" height="692" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 160&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAADFBMVEUwMDAnJycbGRkvHhs6paPRAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAIElEQVQImTXIsQ0AAAyDsED+/7nKUBZLJAt8DUDrDlQ9AeYAJC3sfzkAAAAASUVORK5CYII=&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-version.1af382e2.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-version.1af382e2.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-version.1af382e2.png&amp;w=3840&amp;q=75"/></span></span></p>
34<h2 id="extensions" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-10 _border-b _pb-1 _text-3xl _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400">Extensions<a href="#extensions" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2>
35<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">VS Code has a wonderful extensions ecosystem and the Deno team created a very useful one to help you code efficiently.</p>
36<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Follow these steps to install it:</p>
37<ol class="[:is(ol,ul)_&amp;]:_my-3 [&amp;:not(:first-child)]:_mt-6 _list-decimal ltr:_ml-6 rtl:_mr-6">
38<li class="_my-2">Click on the Extensions tab on the left side of VS Code.</li>
39<li class="_my-2">Search for the Deno extension.</li>
40<li class="_my-2">Install the Deno extension. Make sure <code class="nextra-code" dir="ltr">Auto update</code> is checked.</li>
41</ol>
42<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot showing how to install Deno extension." loading="lazy" width="2508" height="1804" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 240&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;
42sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAP1BMVEUsJSUeHyAnKCkdHSEzQEQhJSgfHR0jIiIgIB8xMzYzNjEeISEoNkckQFYqNDsnMDwtLiw2SFI8NzYpJSQ2NzbCoZIkAAAAEHRSTlP7vsCL/f3IxpPD+2yMi2v8EhPEHgAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAADZJREFUCJkVxkkSwCAIAMFRUSCbkPj/t1rpU2Naai3D8JyS8Q38hQ765xBC8dUjJZTHWrtuOzcoNQGYTuUBmQAAAABJRU5ErkJggg==&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-extension.53bfa364.png&amp;w=3840&amp;q=75 1x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-extension.53bfa364.png&amp;w=3840&amp;q=75"/></span></span></p>
43<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">One of the great features of the Deno extension is its formatter. Let’s update the VS Code settings so it will automatically format our code when we save a file. This will help keep everything clean and tidy.</p>
44<ul class="[:is(ol,ul)_&amp;]:_my-3 [&amp;:not(:first-child)]:_mt-6 _list-disc ltr:_ml-6 rtl:_mr-6">
45<li class="_my-2">On Mac, go to <code class="nextra-code" dir="ltr">Code =&gt; Preferences =&gt; Settings</code>.</li>
46<li class="_my-2">On Windows, go to <code class="nextra-code" dir="ltr">File =&gt; Preferences =&gt; Settings</code>.</li>
47</ul>
48<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot showing VS Code settings." loading="lazy" width="2028" height="1364" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 200&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAIVBMVEUgHx8vMDAnJyg2OTtrbnaQkJGmpKF5gYlHTVFMTEyBgHzKGVD3AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAKklEQVQImSXIyQ0AIAwEsdlsDqD/ghHiZcmcnly2yareAHZIAUjEE+vPBQyqAGbApFU1AAAAAElFTkSuQmCC&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvscode-settings.1193619d.png&amp;w=2048&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvscode-settings.1193619d.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvscode-settings.1193619d.png&amp;w=3840&amp;q=75"/></span></span></p>
49<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Search for <code class="nextra-code" dir="ltr">Default Formatter</code> in the search bar and select <code class="nextra-code" dir="ltr">Deno</code> from the dropdown menu.</p>
50<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot showing VS Code formatter settings." loading="lazy" width="2272" height="1760" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 240&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;
50sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAJFBMVEUjJSYwLy8jISE1NzgkIiIhISAiIB8bJS8hJSgoJycoKis6P0W2zTCOAAAAC3RSTlOf/Pz+ydZ+ZKn4/nQpMF0AAAAJcEhZcwAAFiUAABYlAUlSJPAAAAAuSURBVAiZFcjJDQAgDASx2c2FQv/9Ivw0XZmZ1XC1UgDXjhAQtrR/1ivDHIAzDxLiAK2/5cADAAAAAElFTkSuQmCC&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvscode-formatter.3a0ffe31.png&amp;w=3840&amp;q=75 1x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvscode-formatter.3a0ffe31.png&amp;w=3840&amp;q=75"/></span></span></p>
51<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Search for <code class="nextra-code" dir="ltr">Format On Save</code> and check the box to enable it.</p>
52<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot showing VS Code format on save settings." loading="lazy" width="2272" height="1760" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 240&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAJ1BMVEUnKy4pKiswMTIiIyMiICAhIiIxLCogHhwkJCYhISEZLT89QUY2OT1swmikAAAAC3RSTlOi/vzN/J79fn5kZA06UVEAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAAuSURBVAiZJcbBDcAgEAPBtXM+SKD/eiPBvIbxHBOW1W1gqdoK2XXDVsmGjyTw/hQ3ALt5Bq7dAAAAAElFTkSuQmCC&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvscode-format-on-save.77376382.png&amp;w=3840&amp;q=75 1x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvscode-format-on-save.77376382.png&amp;w=3840&amp;q=75"/></span></span></p>
53<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">The settings are saved automatically, so you can now close the <code class="nextra-code" dir="ltr">Settings</code> tab. You’re all set!</p>
54<h2 id="lets-run-a-script" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-10 _border-b _pb-1 _text-3xl _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400">Let’s run a script<a href="#lets-run-a-script" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2>
55<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">To double-check that everything is working as expected, we are going to write a little script and run it.</p>
56<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">To start a new project in VS Code, follow these steps:</p>
57<ol class="[:is(ol,ul)_&amp;]:_my-3 [&amp;:not(:first-child)]:_mt-6 _list-decimal ltr:_ml-6 rtl:_mr-6">
58<li class="_my-2">Create a new folder somewhere handy on your computer.</li>
59<li class="_my-2">In VS Code, click on the Explorer tab.</li>
60<li class="_my-2">Click on <code class="nextra-code" dir="ltr">Open Folder</code> and select the folder you just created. If you are asked whether you trust the authors of the files, say “Yes” to proceed.</li>
61</ol>
62<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot showing how to open a new folder in VS Code." loading="lazy" width="2272" height="1760" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 240&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;
62sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAMFBMVEUdHR4aGhoeHyAYFxYkJCQeMkMiICErHhwmPlUgICAgICAzJiMwJCAeHh4eLTgnIB7bkCs5AAAAD3RSTlP+nqT7/P3Jyf1+1tZ+ZGR5KzeXAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAMElEQVQImRXGxxHAQAwDsaXEy6n/bj3GC+zVWq1zEL2/B0KlQP7JxEYEYFvckKQ4HxoAAMeYafiTAAAAAElFTkSuQmCC&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-open-folder.488b6d6e.png&amp;w=3840&amp;q=75 1x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-open-folder.488b6d6e.png&amp;w=3840&amp;q=75"/></span></span></p>
63<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Now that VS Code has opened your folder, we can create a new file.</p>
64<ol class="[:is(ol,ul)_&amp;]:_my-3 [&amp;:not(:first-child)]:_mt-6 _list-decimal ltr:_ml-6 rtl:_mr-6">
65<li class="_my-2">Right-click on the Explorer.</li>
66<li class="_my-2">Click on <code class="nextra-code" dir="ltr">New file...</code>.</li>
67<li class="_my-2">Name your new file <code class="nextra-code" dir="ltr">main.ts</code>. If the file doesn’t open as a new tab, click on it.</li>
68<li class="_my-2">In the <code class="nextra-code" dir="ltr">main.ts</code> tab, type <code class="nextra-code" dir="ltr">console.log(&quot;This is going to be fun!&quot;);</code> and save the file by pressing <code class="nextra-code" dir="ltr">CMD</code> + <code class="nextra-code" dir="ltr">S</code> on Mac or <code class="nextra-code" dir="ltr">CTRL</code> + <code class="nextra-code" dir="ltr">S</code> on PC.</li>
69</ol>
70<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">This code tells your computer to log <em>This is going to be fun!</em> in your terminal.</p>
71<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot showing how to create a new TypeScript file in VS Code." loading="lazy" width="1700" height="1264" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 240&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAJ1BMVEUfHyAdGxskJSY2JCItHhsXFheGhYWWmZs5Q1O2u7xsbGylqKdINjrRfOukAAAACXBIWXMAABYlAAAWJQFJUiTwAAAALklEQVQImRXGyQ0AMAgEsVkgQI7+6434WMbADDQG7iB1vwhYXjuDyd2piWUdwQcOQACguWCdXwAAAABJRU5ErkJggg==&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-new-file.b52a582d.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-new-file.b52a582d.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-new-file.b52a582d.png&amp;w=3840&amp;q=75"/></span></span></p>
72<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">If you see a white dot instead of a cross on the tab label (as shown in the screenshot below), it means you modified the file but haven’t saved it. Make sure to save the file by clicking in it and then pressing <code class="nextra-code" dir="ltr">CMD</code> + <code class="nextra-code" dir="ltr">S</code> on Mac or <code class="nextra-code" dir="ltr">CTRL</code> + <code class="nextra-code" dir="ltr">S</code> on PC.</p>
73<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot showing an unsaved file in VS Code." loading="lazy" width="2272" height="1760" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 240&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;
73sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAG1BMVEUeHh8eHh4aGhomIR8mIyIlHx0fJywhHh0iIiJL56sHAAAACHRSTlOh/P7JftZkkqQ31TsAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAAqSURBVAiZLcnBCQAwDMNAOU6K95+4NPReAtFj29MQJQlQJWlDD6C/DutcEMUAjBV4bdoAAAAASUVORK5CYII=&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsave.7890dcbf.png&amp;w=3840&amp;q=75 1x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsave.7890dcbf.png&amp;w=3840&amp;q=75"/></span></span></p>
74<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Once the file is saved, we can run the script.</p>
75<ol class="[:is(ol,ul)_&amp;]:_my-3 [&amp;:not(:first-child)]:_mt-6 _list-decimal ltr:_ml-6 rtl:_mr-6">
76<li class="_my-2">Toggle the terminal.</li>
77<li class="_my-2">Type <code class="nextra-code" dir="ltr">deno run main.ts</code> in the terminal and press enter.</li>
78</ol>
79<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">This asks your computer to use Deno to run the script <code class="nextra-code" dir="ltr">main.ts</code>. As a result, you should see <em>This is going to be fun!</em> in your terminal.</p>
80<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">Congratulations! You are now ready to write amazing code. 🤩</p>
81<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7"><span data-rmiz=""><span data-rmiz-content="not-found" style="visibility:visible"><img alt="A screenshot showing how to run a TypeScript file in VS Code." loading="lazy" width="2042" height="1262" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 320 200&#x27;%3E%3Cfilter id=&#x27;b&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3CfeColorMatrix values=&#x27;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1&#x27; result=&#x27;s&#x27;/%3E%3CfeFlood x=&#x27;0&#x27; y=&#x27;0&#x27; width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;/%3E%3CfeComposite operator=&#x27;out&#x27; in=&#x27;s&#x27;/%3E%3CfeComposite in2=&#x27;SourceGraphic&#x27;/%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27;/%3E%3C/filter%3E%3Cimage width=&#x27;100%25&#x27; height=&#x27;100%25&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; preserveAspectRatio=&#x27;none&#x27; style=&#x27;filter: url(%23b);&#x27; href=&#x27;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAHlBMVEUYFxcgICA2QEYlGheZn6RGS1NqamsnJydyfoVXaHi36GrYAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAKElEQVQImSXGyQ0AIBADsUn2pP+GkcAv48q1bZhsnskOSaBTPyBFcAEKBgBhAfbuZgAAAABJRU5ErkJggg==&#x27;/%3E%3C/svg%3E&quot;)" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-run.ba013742.png&amp;w=2048&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-run.ba013742.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdeno-run.ba013742.png&amp;w=3840&amp;q=75"/></span></span></p>
82<h2 id="about-ai" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-10 _border-b _pb-1 _text-3xl _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400">About AI<a href="#about-ai" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2>
83<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">You may have noticed that we haven’t installed any AI-powered tools, such as <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://github.com/features/copilot" target="_blank" rel="noreferrer">GitHub Copilot</a>.</p>
84<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">These tools are increasingly popular for coding tasks and can significantly boost productivity. However, they are not without flaws. They can introduce errors and bugs.</p>
85<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">For experienced coders, this isn’t a big issue. When you know 
85what you’re doing, you can easily review and refine the AI’s output.</p>
86<p class="[&amp;:not(:first-child)]:_mt-6 _leading-7">For beginners, though, it’s better to hold off. Master the basics first, and once you have a solid foundation, you’ll be in a much better position to benefit from these tools.</p>
87<div style="max-width:550px;margin:2.5rem auto"><div class="nextra-callout _overflow-x-auto _mt-6 _flex _rounded-lg _border _py-2 ltr:_pr-4 rtl:_pl-4 contrast-more:_border-current contrast-more:dark:_border-current _border-orange-100 _bg-orange-50 _text-orange-800 dark:_border-orange-400/30 dark:_bg-orange-400/20 dark:_text-orange-300"><div class="_select-none _text-xl ltr:_pl-3 ltr:_pr-2 rtl:_pr-3 rtl:_pl-2" style="font-family:&quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;"></div><div class="_w-full _min-w-0 _leading-7">Enjoyed this? Want to know when new lessons are available? Subscribe to the<!-- --> <a style="text-decoration:underline;font-weight:bold" href="https://mailchi.mp/0db676437a2f/code-like-a-journalist">newsletter ✉️</a> <!-- -->and give a ⭐ to the<!-- --> <a style="text-decoration:underline;font-weight:bold" href="https://github.com/nshiab/code-like-a-journalist">GitHub repository</a> <!-- -->to keep me motivated!<!-- --> <a style="text-decoration:underline;font-weight:bold" href="/contact">Get in touch</a> <!-- -->if you have any questions.</div></div></div><div class="_mt-16"></div><div class="_mb-8 _flex _items-center _border-t _pt-8 dark:_border-neutral-800 contrast-more:_border-neutral-400 dark:contrast-more:_border-neutral-400 print:_hidden"><a title="Why this course?" class="nextra-focus _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100 _flex _max-w-[50%] _items-center _gap-1 _py-4 _text-base _font-medium _transition-colors [word-break:break-word] md:_text-lg ltr:_pr-4 rtl:_pl-4" href="/en/preamble"><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="_inline _h-5 _shrink-0 ltr:_rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg>Why this course?</a><a title="Variables" class="nextra-focus _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100 _flex _max-w-[50%] _items-center _gap-1 _py-4 _text-base _font-medium _transition-colors [word-break:break-word] md:_text-lg ltr:_ml-auto ltr:_pl-4 ltr:_text-right rtl:_mr-auto rtl:_pr-4 rtl:_text-left" href="/en/first-steps/variables">Variables<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="_inline _h-5 _shrink-0 rtl:_rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></div><!--$--><!--/$--></main></article></div><footer class="_bg-gray-100 _pb-[env(safe-area-inset-bottom)] dark:_bg-neutral-900 print:_bg-transparent"><div class="_mx-auto _flex _max-w-[90rem] _gap-2 _py-2 _px-4 _hidden"><button title="Change language" class="_h-7 _rounded-md _px-2 _text-xs _font-medium _transition-colors _text-gray-600 dark:_text-gray-400" id="headlessui-listbox-button-_R_6qt6_" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><span class="_flex _items-center _gap-2"><svg viewBox="2 2 16 16" width="12" height="12" fill="currentColor"><path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd"></path></svg><span class="">English</span></span></button><button title="Change theme" class="_h-7 _rounded-md _px-2 _text-xs _font-medium _transition-colors _text-gray-600 dark:_text-gray-400" id="headlessui-listbox-button-_R_6st6_" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><div class="_flex _items-center _gap-2 _capitalize"><svg fill="none" viewBox="3 3 18 18" width="12" height="12" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg><span class="">Light</span></div></button></div><hr class="dark:_border-neutral-800"/><div class="_mx-auto _flex _max-w-[90rem] _justify-center _py-12 _text-gray-600 dark:_text-gray-400 md:_justify-start _pl-[max(env(safe-area-inset-left),1.5rem)] _pr-[max(env(safe-area-inset-right),1.5rem)]"><div style="display:flex;flex-direction:column;justify-content:center;width:100%;max-width:600px;gap:1rem;margin:0 auto;text-align:center"><div>Code Like a Journalist © <!-- -->2026<!-- --> <!-- -->is licensed under<!-- --> <a href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v1" style="text-decoration:underline">CC BY 4.0</a>. You have to give credit to<!-- --> <a href="https://www.naelshiab.com/" style="text-decoration:underline">Nael Shiab</a>  <!-- -->with a link to the<!-- --> <a href="https://www.code-like-a-journalist.com/" style="text-decoration:underline">website</a>. This project was funded by the<!-- --> <a href="https://www.michenerawards.ca/media-release/michener-awards-foundation-announces-its-2024-fellowships-winners/" style="text-decoration:underline">Michener-L. Richard O’Hagan Fellowship</a> <!-- -->from the Michener Awards Foundation.</div><div>To reach out,<!-- -->  <a href="/contact" style="text-decoration:underline">head over here</a>.</div><div>Built with<!-- --> <a href="https://nextra.site/" style="text-decoration:underline">Nextra ❤️</a>.</div></div></div></footer></div></div>
87<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/en/first-steps/setup","query":{},"buildId":"c2m9_Ft7o8hWQQbJGNByV","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>
87</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.