<h1 id="plan-9">Plan 9</h1>
<p>Absolute beginner notes on plan9.</p>
<p><img src="https://cdn.zappy.app/6f4a3efa613197a4f8af5fd392ccc036.jpg" alt="It’s working :)"></p>
<p>I got a USB Hub so now I can mess with SD cards for my raspberry pi.</p>
<p>First went here: <a href="https://9p.io/wiki/plan9/download/">https://9p.io/wiki/plan9/download/</a> and downloaded Miller’s RPI image for plan9. I followed a guide to get set up, but my mouse wasn’t working and ipconfig wasn’t setting me up on the internet.</p>
<p>Peers say “Hey, try 9front. That should work.” Let’s do it. Downloaded this image for my Pi: <a href="http://9front.org/iso/9front-7781.38dcaeaa222c.pi.img.gz">http://9front.org/iso/9front-7781.38dcaeaa222c.pi.img.gz</a></p>
<p>We’re ready to boot, but plan9 isn’t a desktop by default and needs some configuration I’ll do from the laptop.</p>
<h2 id="writing-to-the-sd-card">Writing to the SD card</h2>
<p>I’m using the <code>dd</code> command in my terminal to write an unzipped <code>iso</code> file to the micro SD card plugged into my Macbook. First, I’ve got to find the disk.</p>
<p><code>diskUtil list</code></p>
<p>It’s <code>/dev/disk2</code></p>
<p><code>diskUtil unmountDisk /dev/disk2</code></p>
<p>With disk unmounted, wrote onto it:</p>
<p><code>dd bs=1m if=plan.iso of=/dev/rdisk2</code></p>
<h2 id="booting-plan-9">Booting plan 9</h2>
<p>Plug in to boot. Unplug to shut down. Nice!</p>
<p>But I just get a console. What next? I think I need to edit this <code>cmdline.txt</code> thing.</p>
<p>I cycle the sd card back and forth between the pi and my laptop. I edit by opening a terminal and dragging the file from the SD card onto the terminal to get the disk path, and edit the file from vim.</p>
<p>Attempt 1 (What worked on miller’s 9plan image)</p>
<p><code>readparts=1 nobootprompt=local user=glenda</code></p>
<p>Boot… That doesn’t work on 9front. Unplug.</p>
<p><code>readparts=1 nobootprompt=local!#S/sdM0/fs bootargs=local!#S/sdM0/fs user=glenda</code></p>
<p>Boot… Works. Mouse works too! I don’t know what this command means yet. I’ll have to come back to that later.</p>
<h2 id="connecting-to-the-internet-on-plan-9">Connecting to the internet on plan 9</h2>
<p>In <a href="https://wiki.xxiivv.com/site/rio.html">Rio</a> I right click, new terminal</p>
<pre><code>&gt; ip/ipconfig
No success with DHCP</code></pre>
<p>Plug in ethernet cable (oops!)</p>
<pre><code>&gt; ip/ipconfig
(No output)
&gt; hget https://amorris.ca/api/notes/plan-9
(My notes are printed out)</code></pre>
<p>It works. We’re connected to the internet!</p>
<h2 id="whats-special">What’s special?</h2>
<p>Plan 9 uses the p9 protocol to communicate with local and remote objects, distributing computation across devices. A single paradigm, “writing to named places” unifies all kinds of control and interprocess signalling.</p>
<p>Writing a drawing app in Plan 9 C <a href="https://merveilles.town/web/statuses/104655575725208191">fits into a single image</a></p>
<p>Each process has its own view of the filesystem, just like each function can have its own defition of variables different from other files or functions in the global namespace.</p>
<p>Acme, a user interface for programmers, is a uniformly editable text based interface. Acme exposes its own features as source and documentation, ready to be copied and edited, fit to purpose. </p>
<p>The plumber handles emitting and handling events across processes, especially for handling multimedia.</p>
<p>Upas, a mail system has many utilities for handling readable plain text mail.</p>
<p>A suite of tools for processing, typesetting, and diagramming content or exporting to html are available.</p>
<p>PQ is a plaintext implicit relational database system</p>
<p>…</p>
<p>By embracing this unified paradigm of creating named places and writing to them, what can we do?</p>


Absolute beginner notes on plan9.

It’s working :)

I got a USB Hub so now I can mess with SD cards for my raspberry pi.

First went here...

Plan 9

<h1 id="software-imagination">Software Imagination</h1>
<h2 id="a-system-for-thought">A system for thought</h2>
<blockquote>
<p>A well-designed system is not simply a bag of features. A good system is designed to encourage particular ways of thinking, with all features carefully and cohesively designed around that purpose.</p>
</blockquote>
<p><a href="http://worrydream.com/LearnableProgramming/">Essay by Bret Victor</a></p>
<p>Bret highly recommend a book called Mindstorms. It describes the possibility for software systems to teach children powerful mental models of the world that aren’t available in other materials.</p>
<blockquote>
<p>Anything is easy if you can assimilate it to your collection of models. If you can&#39;t, anything can be painfully difficult.</p>
</blockquote>
<p>Dan Abramov recently released a course on his personal mental models of Javascript. It’s visual, and it helps you think of Javascript in terms of real, physical things, creating a robust mental model that provides you with intuition.</p>
<p>In my mind, we should take this a step farther and build programming languages that facilitate more powerful mental models. The language changes to change the way we think. Learning the language teaches us about the world.</p>
<h2 id="a-system-for-play">A system for play</h2>
<p>On Netflix&#39;s Abstract, Cas Holman talks about designing for play. Creating tools that don&#39;t come with instructions, or a single right answer and maximize unexpected solutions.</p>
<p>Software tools should be this way. Software work should become play.</p>
<p>When software and design tools feel like games, and kids 8-16 are better and faster than me at architecting and implementing solutions while having fun, we&#39;ve done it right.</p>
<p>Even today, project managers and tech leads play a big role in making software work more playful. Create stories that leave space for an imaginative solution that you never expected.</p>
<h2 id="a-system-for-performance">A system for performance</h2>
<p><a href="https://twitter.com/helenhousandi/status/1288311582221651973">Helen Sandi</a> is a classical pianist turned software developer. She writes about masterclasses, where upcoming students present their work in front of an audience and address passionate constructive feedback from an expert in real time.</p>
<p>Can you imagine emotional presentation, interpretation, and improvisation in software? Can you imagine being a “software artist”?</p>
<p>If the process of programming and presenting a computer system engaged the senses - If it was visual, tactile, made sound - we might find that programming becomes emotional.</p>
<h2 id="a-system-you-can-describe-to-help-others-learn">A system you can describe to help others learn</h2>
<blockquote>
<p>An important part of becoming a good learner is learning how to push out the frontier of what we can express with words. From the point of view of teaching someone to ride a bicycle, it’s not whether or not we can &quot;tell&quot; someone &quot;in full&quot; how to ride but rather what can be done to improve our ability to communicate with others (and with ourselves in internal dialogues) just enough to make a difference to learning to ride. The central theme of this chapter is the development of descriptive languages for talking about learning. - Papert, Mindstorms</p>
</blockquote>
<h2 id="a-syntonic-epistemological-system">A syntonic epistemological system</h2>
<p>Software can make repetitive tasks convenient, but even more powerfully it can help us learn about how we think. A system that, when learned, teaches us about ourselves is an important system to build.</p>
<blockquote>
<p>The need for drill and practice in arithmetic is a symptom of the absence of conditions for the syntonic learning of mathematics. The proper use of computers is to supply such conditions.</p>
</blockquote>
<h2 id="a-system-that-disrupts-education">A system that disrupts education</h2>
<blockquote>
<p>What do we say to a child who has made such a beautiful theory? &quot;That&#39;s great thinking, Johnny, but the theory is wrong&quot;</p>
</blockquote>


A system for thought



A well-designed system is not simply a bag of features. A good system is designed to encourage ...

Software Imagination

<h1 id="how-to-get-started-with-web-development">how to get started with web development</h1>
<p><img src="https://cdn.zappy.app/344cab34be84c545d2912572e4438bc8.png" alt=""></p>
<p>I’m collecting the best resources to help you build your first website and learn HTML, CSS, and Javascript.</p>
<p><a href="https://twitter.com/intent/tweet?text=Great%20resources%20on%20how%20to%20get%20started%20on%20web%20development%20at%20https://amorris.ca/notes/how-to-get-started-with-web-development">♥️ Share me on Twitter</a></p>
<h2 id="how-to-learn-html-and-css">How to learn HTML and CSS</h2>
<h3 id="hack-club">Hack Club</h3>
<p><em>Fast way to get your first web page online!</em></p>
<p><img src="https://cdn.zappy.app/e543a27be11d0163eb1c6487dfd74dbf.png" alt=""></p>
<p><a href="https://workshops.hackclub.com/personal_website">workshops.hackclub.com/personal_website</a></p>
<p>This tutorial gets you started using an online editor called <a href="https://repl.it/">repl.it</a> so you can go straight to exploring HTML and easily get a web page online to share with others. It’s cute, too.</p>
<h3 id="progate">Progate</h3>
<p><img src="https://cdn.zappy.app/fb74b2223e98b8e05a7218896880abda.png" alt=""></p>
<p>Learn html: <a href="https://progate.com/languages/html">progate.com/languages/html</a><br>Learn Javascript: <a href="https://progate.com/languages/es6">progate.com/languages/es6</a></p>
<p>Progate has some detailed tutorials on HTML and Javascript. It can help you go beyond the basics with deeper lessons.</p>
<h3 id="freecodecamp">freeCodeCamp</h3>
<p><img src="https://cdn.zappy.app/c866744dd6fd17313f96d5084cb33fb6.png" alt=""></p>
<p><a href="https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/">freecodecamp.org/learn/responsive-web-design</a></p>
<p>freeCodeCamp has many HTML resources: </p>
<ul>
<li>Add headlines with the h2 element</li>
<li>Add paragraphs with the p element</li>
<li>Add images with the img element</li>
<li>Link to other pages with the anchor element</li>
<li>Creating lists with the ul and ol elements</li>
<li>Creating forms with the form element</li>
<li>Creating form inputs with the input element</li>
</ul>
<p>☝️ See their resources above!</p>
<h3 id="jatin-rao">Jatin Rao</h3>
<p><em>Beginners guide and dev blog</em></p>
<p><img src="https://cdn.zappy.app/405e4ea03140841185144c916e459d44.png" alt=""></p>
<p><a href="https://jatinrao.dev/beginners-guide-to-html-ckcnhzs9b00cjfqs134ck8cfa">jatinrao.dev/beginners-guide-to-html</a></p>
<p>Jatin Rao has a beginners guide to HTML. It goes into detail about some HTML elements you can use. They also share resources like:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn">Learn Web Development</a></li>
<li><a href="https://www.codecademy.com/learn/learn-html">CodeCademy Learn HTML</a></li>
<li><a href="https://www.khanacademy.org/computing/computer-programming/html-css">KhanAcademy Intro to HTML/CSS</a></li>
</ul>
<p>Jatin is building a community of devs. Check them out on <a href="https://twitter.com/iamjatinrao">Twitter</a>!</p>
<p>Jatin uses <a href="https://hashnode.com/">HashNode</a> to maintain a dev blog for free online. It looks great for anyone starting their own development blog!</p>
<h3 id="frontend-challenges">Frontend Challenges</h3>
<p><em>Build a portfolio and get a job!</em></p>
<p><img src="https://cdn.zappy.app/731a793ee14790da2a239c711ab88a4d.png" alt=""></p>
<p><a href="https://www.frontendmentor.io/challenges">frontendmentor.io/challenges</a></p>
<p>If you’re learning HTML to land a job, this resource will challenge you to build real web pages and learn professional front end skills.</p>
<h2 id="how-to-learn-frontend-development">How to learn frontend development</h2>
<p>If you are looking to be a professional front-end developer, you should know a frontend framework, how to buy a domain, and how to publish your work online. I use <a href="https://vercel.com">Vercel</a> and highly recommend it.</p>
<h3 id="pick-a-framework">Pick a framework:</h3>
<p><img src="https://cdn.zappy.app/c26da2afee030ef8452e0f69b30b10b7.png" alt=""></p>
<ul>
<li><a href="https://vuejs.org/">Vue</a></li>
<li><a href="https://svelte.dev/">Svelte</a></li>
<li><a href="https://reactjs.org/">React</a></li>
</ul>
<h3 id="follow-their-quickstart-guide">Follow their Quickstart guide</h3>
<p>Look for REPL to experiment on their websites, or look for a Quickstart to get started easily!</p>
<p>More resources:</p>
<ul>
<li><a href="https://vueschool.io/">vueschool.io</a></li>
</ul>
<h3 id="publish-using-vercel">Publish using Vercel</h3>
<p><img src="https://cdn.zappy.app/538f9efc632f22a8481b3ad6de9fdcbd.png" alt=""></p>
<p>Vercel has solutions and examples that can deploy using your framework with just a few clicks.</p>
<ul>
<li><a href="https://vercel.com/solutions/vue">vercel.com/solutions/vue</a></li>
<li><a href="https://vercel.com/solutions/react">vercel.com/solutions/react</a></li>
<li><a href="https://vercel.com/guides/deploying-svelte-with-vercel">vercel.com/guides/deploying-svelte-with-vercel</a></li>
</ul>
<h3 id="buy-a-domain">Buy a domain</h3>
<p><img src="https://cdn.zappy.app/b8d156195cc3432398dec4483f0a36d2.png" alt=""></p>
<p>Vercel makes it easy to find and buy domains, and then use them in your deployments.</p>
<p><a href="https://vercel.com/domains">vercel.com/domains</a> | <a href="https://vercel.com/docs/v2/custom-domains#adding-a-domain">How to add a domain</a></p>
<h2 id="conclusion">Conclusion</h2>
<p>If you came here looking for resources, I hope you found what you’re looking for! If you want more updates and resources on becoming a successful frontend or full-stack developer, follow me on <a href="https://twitter.com/aaorris">Twitter</a> and share this with others!</p>


I’m collecting the best resources to help you build your first website and learn HTML, CSS, and Javasc...

how to get started with web development

<h1 id="js-sort">Js Sort</h1>
<p>How to sort a list of objects in Javascript. I often do it wrong!</p>
<p><img src="https://cdn.zappy.app/5d4e4f992ab3883ce389c4b62e50f38c.png" alt=""></p>
<p>When you have a list in Javascript, you can call list.sort(…) with a function, but if your function is a boolean expression (I was used to this from Python) it won’t work!</p>
<p>Your function takes two items, I’ll call them left and right. A proper function should return a negative number if <code>left &lt; right</code>, <code>0</code> if equal, and a positive number if <code>left &gt; right</code>.</p>
<p>If you’re having issues sorting an array, it’s probably because your function doesn’t follow this pattern!</p>
<p>Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax">MDN - Array.sort</a></p>


How to sort a list of objects in Javascript. I often do it wrong!

When you have a list in Javascript, you can call list.sort(…) with ...

Js Sort

<h1 id="what-is-swr">What is SWR?</h1>
<p><img src="https://photos.collectednotes.com/photos/680/7e66f671-3d2c-46b8-9bc6-fbabd79caefd" alt=""></p>
<p>🚀 SWR stands for <code>stale-while-revalidate</code> — A pattern you can use that keeps data fresh while also keeping the experience fast. </p>
<h2 id="when-to-use-it">When to use it</h2>
<p>🔍 An http API that is slow and changes frequently should respond with <code>Cache-Control: max-age=1, stale-while-revalidate</code> and the servers that serve the API should cache the responses, revalidating in the background rather than causing users to wait.</p>
<h2 id="server-side-api-caching">Server-side API caching</h2>
<p>If you use Vercel, you can get started by setting <code>Cache-Control</code> headers in your <code>pages/api</code> functions.</p>
<pre><code class="language-javascript">import NotesService from &#39;services/notes&#39;

export default async (req, res) =&gt; {
  const service = new NotesService()
  const notes = await service.getLatestNotes()
  res.setHeader(&#39;Cache-Control&#39;, &#39;s-maxage=1, stale-while-revalidate, public&#39;)
  res.status(200).json({ notes })
}</code></pre>
<h2 id="client-side-api-caching">Client side API caching</h2>
<p>Web browsers have an HTTP cache for each user as well. Headers can be returned that browsers will respect, providing the same behavior. The difference is that the HTTP cache is personal. Client-side caching for one person doesn&#39;t make it faster for others.</p>
<p>To implement client side caching, see <a href="https://web.dev/stale-while-revalidate/">web.dev/stale-while-revalidate</a></p>
<p><code>Cache-Control: max-age=1, stale-while-revalidate=59</code></p>
<h2 id="in-service-workers">In service workers</h2>
<p>Service workers can offer stale-while-revalidate patterns for progressive web apps. See <a href="https://developers.google.com/web/tools/workbox/modules/workbox-strategies#stale-while-revalidate">A Workbox Example</a></p>
<h2 id="in-nextjs-using-static-regeneration">In NextJS using static regeneration</h2>
<p>NextJS offers incremental static regeneration. Pages will be served stale and then revalidated. Updates to the static page will happen in the background. To use it, set <code>unstable_revalidate</code> to the minimum time before revalidating a static page in seconds.</p>
<pre><code class="language-javascript">export async function getStaticProps({ params }) {
  const note = await new NoteService().getNote(params.slug);
  const props = { note };
  return { props, unstable_revalidate: 1 };
}
</code></pre>
<h2 id="conclusion">Conclusion</h2>
<p>Caching makes things fast, and the greatest challenge is keeping data up to date. By implementing stale-while-revalidate behaviour, the cache stays fresh and the users rarely have to wait.</p>
