[{"content":"Course description A key goal of this course is to demystify the inner workings of a computer. Students will learn\nHow to program computer hardware at a lower level (assembly language) How computer hardware is designed using transistors and logic gates The relationship between hardware and software. This course will be beneficial both to students who want to pursue further studies in the field of computer architecture and design and to students who simply want a basic understanding of computer hardware so they can write better software.\nMy contributions I was a head UTA for COMP311 in 23S and 22F. When I graduated in 23S, I won the Diane Pozefsky Learning Assistant Award for my work in this course. I was mentioned in a UNC CS news article (scroll to \u0026ldquo;Faculty and students recognized for their contributions\u0026rdquo;).\nI anticipate being a graduate TA for the course in 23F.\nSAPsim and SAP programming assignment I developed a SAP (Simple As Possible computer) program simulator, which enabled me to autograde and create COMP311\u0026rsquo;s SAP programming assignment. For more information, see my SAPsim page.\nOther assignments I added and wrote the autograder for a new part of Lab 3, in which students build a functional ALU using Digital, a digital circuit simulator.\nI edited the write-ups for all labs and tweaked the autograders when necessary.\nAssessments I have written 20+ in-use quiz and exam questions. In 23S, I wrote all 5 questions of a brand-new Quiz 7 on the MIPS processor and control signals.\nI have reviewed every assessment in the course. I have caught and fixed major mistakes in 10+ questions (mostly before release) and improved 60+ questions.\nReview I have written and released explanations for 150+ practice PollEverywhere (PEW) questions.\nIn 23S, I held three 1.5-hour exam review sessions for the entire course. There was an average of 40 students at each review session.\nI held office hours and answered student questions on Piazza.\nCircuits I created the COMP311 circuits resource, which implements and explains 12 circuits from the course. The implementation is done in Digital.\nFuture I want to create a final project utilizing MIPS Emulator.\nI want to add a bit shifter component to Lab 3: ALU. Essentially, I want the ALU to implement the entire 5-bit ALUFN table.\n5-bit MIPS ALUFN table\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/comp311/","summary":"Head UTA in 23S and 22F. I anticipate being a graduate TA for the course in 23F.","title":"COMP 311 (Computer Organization)"},{"content":"Course description This course will teach you how to organize the data used in computer programs so that manipulation of that data can be done efficiently on large problems and large data instances. Rather than learning to use the data structures found in the libraries of programming languages, you will be learning how those libraries are constructed, and why the items that are included in them are there (and why some are excluded).\nMy contributions I was a UTA for the course in Summer 2022.\nReview I held 5 quiz review sessions throughout the short summer semester.\nCompilation of my review slides. Links to recordings are included.\nAssessments I created ~10 in-use quiz questions.\nNormal duties I held office hours, answered student questions on Piazza, and graded assessments.\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/comp210/","summary":"UTA in Summer 2022.","title":"COMP 210 (Data Structures and Analysis)"},{"content":"The course was later renamed to \u0026ldquo;Introduction to Programming and Data Science\u0026rdquo;.\nCourse description Introduces students to programming and data science from a computational perspective. With an emphasis on modern applications in society, students gain experience with problem decomposition, algorithms for data analysis, abstraction design, and ethics in computing. No prior programming experience expected. Foundational concepts include data types, sequences, boolean logic, control flow, functions/methods, classes/objects, input/output, data organization, transformations, and visualizations.\nMy contributions I was a UTA for the course in 22S, 21F, and 21S.\nGit workshop I created a Git workshop for the COMP110 hackathon Hack110.\nSlides GitHub Disclaimer: I did not have much experience with Git and GitHub back then. If I were to remake the slides, I would focus on practical usage (such as making a branch, submitting a PR, resolving merge conflicts, if any, and merging). I would also abstract away details by using GitHub Desktop instead of the terminal.\nNormal duties I held office hours and graded assessments.\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/comp110/","summary":"UTA in 22S, 21F, and 21S.","title":"COMP 110 (Introduction to Programming)"},{"content":"Introduction To make this website, I used the static site generator Hugo with the PaperMod theme. I use Netlify to host.\nIn this post, I provide an overview of Hugo/PaperMod and describe the modifications I made to the original theme in setting up this website. All modifications are shown via diff output as HTML pages in PaperMod diff 1.\nChanges that I don\u0026rsquo;t describe here will definitely show up in PaperMod diff, likely with comments about what they do and where I got them from if I got them from somewhere. I\u0026rsquo;ll try to keep this post updated, but please feel free to comment if I should describe something here!\nAudience This post was written with two audiences in mind: people who are new to Hugo and people with Hugo experience. If you\u0026rsquo;re new to Hugo, then I recommend reading this post from start to finish. If you have experience with Hugo, then I recommend skimming. Specifically, I would read Clone/fork for setup instructions. Then skip over the Hugo/PaperMod overview to get to My website, which describes specific features of my website. Please see the Table of Contents above if you haven\u0026rsquo;t already.\nCredit This post is inspired by Konstantin\u0026rsquo;s similarly-titled blog post.\nResources Before proceeding, I\u0026rsquo;d like to share five excellent resources that I used and reference throughout this post. The top three are crucial because they cover Hugo and PaperMod. The bottom two describe very specific features that I reference in My website, so don\u0026rsquo;t worry about those yet.\nMy goal is to make the rest of this post self-contained (and link to brief external resources). If something doesn\u0026rsquo;t make sense, please use the first three resources.\n2 Hugo Quick Start Super quick to read and follow along, \u0026lt; 5 min. 3 Getting Started With Hugo (47:41) 4 PaperMod demo site/documentation and its source 5 Konstantin\u0026rsquo;s How to Set Up This Blog 6 Check links in Hugo with htmltest As mentioned earlier, I also created PaperMod diff 1 to show modifications I made to the theme in a readable way. In short, to modify a file from the theme, you create a copy of the file and make edits in the copy, but this makes it hard to see what was modified. So, PaperMod diff shows diffs between the files.\nSetup First, follow the steps here to install Hugo. You should also have Git installed. 7\nClone/fork Run these commands.\ngit clone --recurse-submodules --no-single-branch https://github.com/jesse-wei/jessewei.dev-PaperMod.git cd jessewei.dev-PaperMod hugo server --recurse-submodule clones the PaperMod submodule.\nAdditionally, you may clone with --depth=1 to save some disk space.\nhugo server starts up a server for you to view the site.\nWhy clone/fork? At this point, you could start from scratch instead of cloning/forking my website. However, resources 2 and 3 already describe how to start from scratch.\nSo, I\u0026rsquo;ll cut to the chase and have you clone my website and describe changes I made.\nIf something doesn\u0026rsquo;t make sense, then I recommend first reading/watching the resources.\nIn addition, if you notice some specific feature of my website that I don\u0026rsquo;t explain, then use inspect element to inspect the code for that feature. Then run grep -ir in this repo to find the relevant code. -r makes the search recursive, and -i makes the search case-insensitive.\nOverview of Hugo and PaperMod Skim this section or skip to My website if you\u0026rsquo;re already familiar with Hugo and PaperMod (e.g., if you read/watched the resources).\nRepo structure Please read Hugo\u0026rsquo;s directory structure (3 min) and the top part of Hugo\u0026rsquo;s content organization (1 min) for a general overview of Hugo\u0026rsquo;s directory structure. I\u0026rsquo;ll describe more in-depth below.\nHere\u0026rsquo;s the structure of my repository. I omit unimportant stuff and stuff I don\u0026rsquo;t use, and certainly changes will be made, but this is all the important stuff:\njessewei.dev-PaperMod ├── assets Overrides PaperMod/assets. Contains mostly CSS, some JS │ └── css ├── config.yml Site-wide configuration file ├── content │ ├── about.md │ ├── archives.md │ ├── classes │ ├── posts List layout │ ├── privacy.md │ ├── projects List layout │ ├── search.md │ └── teaching List layout │ └── act List layout within list layout ├── layouts Overrides PaperMod/layouts │ ├── _default Layout of entire pages (specifically, the \u0026lt;main\u0026gt; element) │ │ └── single.html │ └── partials Layout of components of a page │ ├── comments.html │ ├── extend_head.html │ ├── footer.html │ ├── header.html │ ├── index_profile.html │ └── social_icons.html ├── scripts My scripts ├── static Images, etc. │ ├── SAPsim_still_cropped.jpg │ ├── SAPsim_still_full.jpg │ └── ... └── themes └── PaperMod There are 4 crucial parts of the repo: config, content, layouts and assets, and static.\nconfig.yml This is the configuration file for the website containing all site-wide parameters.\ncontent/ This is the directory where site content (posts) goes.\nSite content should be Markdown files.\nThe front matter of a Markdown file contains metadata about the post. For example, the front matter of this post is\n--- title: \u0026#34;Overview of Hugo/PaperMod and Setting Up This Site\u0026#34; date: 2023-05-14T20:13:59-04:00 draft: false cover: image: img/hugo_logo_wide.svg alt: \u0026#34;Hugo logo\u0026#34; caption: \u0026#34;Hugo logo\u0026#34; hidden: false summary: \u0026#34;This post provides an overview of Hugo (PaperMod theme) and details the steps I took in setting up this website.\u0026#34; tags: [\u0026#34;Hugo\u0026#34;, \u0026#34;PaperMod\u0026#34;, \u0026#34;Markdown\u0026#34;, \u0026#34;HTML\u0026#34;, \u0026#34;CSS\u0026#34;, \u0026#34;Blog\u0026#34;, \u0026#34;Website\u0026#34;, \u0026#34;Portfolio\u0026#34;] --- This information is used to generate the post\u0026rsquo;s page. It\u0026rsquo;s quite intuitive what these fields do (check by seeing how something in front matter renders on the page), so I won\u0026rsquo;t go into detail.\nFor a list of variables you can use, see Variables | Front Matter from PaperMod documentation.\nlayouts/ and assets/ The files in these directories override the files in themes/PaperMod/layouts/ and themes/PaperMod/assets/, respectively. If the path of a file in layouts/ exactly matches that of a file in themes/PaperMod/layouts/, then your site will use the file in layouts/ instead of the one in themes/PaperMod/layouts/. Same for assets/.\nEssentially, themes/PaperMod/layouts/ and themes/PaperMod/assets/ specify defaults. If you want to make a change, override the default in your own repo.\nlayouts/ contains HTML files that specify the structure of pages.\nLet\u0026rsquo;s look at PaperMod/layouts/_default/.\nthemes/PaperMod/layouts/_default ├── _markup ├── archives.html ├── baseof.html ├── index.json ├── list.html ├── rss.xml ├── search.html ├── single.html └── terms.html baseof In particular, here\u0026rsquo;s baseof.html.\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;{{ site.Language }}\u0026#34; dir=\u0026#34;{{ .Language.LanguageDirection | default \u0026#34;auto\u0026#34; }}\u0026#34;\u0026gt; \u0026lt;head\u0026gt; {{- partial \u0026#34;head.html\u0026#34; . }} \u0026lt;/head\u0026gt; \u0026lt;body class=\u0026#34; {{- if (or (ne .Kind `page` ) (eq .Layout `archives`) (eq .Layout `search`)) -}} {{- print \u0026#34;list\u0026#34; -}} {{- end -}} {{- if eq site.Params.defaultTheme `dark` -}} {{- print \u0026#34; dark\u0026#34; }} {{- end -}} \u0026#34; id=\u0026#34;top\u0026#34;\u0026gt; {{- partialCached \u0026#34;header.html\u0026#34; . .Page -}} \u0026lt;main class=\u0026#34;main\u0026#34;\u0026gt; {{- block \u0026#34;main\u0026#34; . }}{{ end }} \u0026lt;/main\u0026gt; {{ partialCached \u0026#34;footer.html\u0026#34; . .Layout .Kind (.Param \u0026#34;hideFooter\u0026#34;) (.Param \u0026#34;ShowCodeCopyButtons\u0026#34;) -}} \u0026lt;/body\u0026gt; This is the base template for all pages. Notice it has all parts of an HTML document: \u0026lt;!DOCTYPE html\u0026gt;, \u0026lt;html\u0026gt;, \u0026lt;head\u0026gt;, and \u0026lt;body\u0026gt;.\nIt\u0026rsquo;s mostly HTML. However, note the code in braces {{ ... }} or {{- ... -}}. This is Go template code. It\u0026rsquo;s a templating language that Hugo uses to generate HTML.\nNote on line 2 that a site variable site.Language is directly inserted into an HTML attribute. Some site variables are in config.yml, and others are built-in to Hugo.\nNote on line 5 that a partial head.html is inserted. A partial is an HTML snippet that can be inserted into a page. As we can see here, the partial head.html (which can be found under layouts/partials/head.html) is the \u0026lt;head\u0026gt; code of all pages.\nDoes this mean all pages have the same \u0026lt;head\u0026gt; code?\nNope, notice one last thing on line 9: conditionals! By checking the values of some variables, we can conditionally insert HTML code. Lines 9-14 just insert some classes, but it\u0026rsquo;s also possible to insert entire HTML snippets or partials. So although all pages have the same template for \u0026lt;head\u0026gt;, the actual \u0026lt;head\u0026gt; code depends on parameters.\nOn lines 16 and 20, we see partials defining the header and footer of a page. In the middle is \u0026lt;main\u0026gt; for the content of a page. All files in _default except baseof.html define \u0026lt;main\u0026gt;.\nsingle This page (and most pages) is a single (layouts/_default/single.html).\nA portion of single.html is below.\n{{- define \u0026#34;main\u0026#34; }} \u0026lt;article class=\u0026#34;post-single\u0026#34;\u0026gt; \u0026lt;header class=\u0026#34;post-header\u0026#34;\u0026gt; {{ partial \u0026#34;breadcrumbs.html\u0026#34; . }} \u0026lt;h1 class=\u0026#34;post-title\u0026#34;\u0026gt; {{ .Title }} {{- if .Draft }}\u0026lt;sup\u0026gt;\u0026lt;span class=\u0026#34;entry-isdraft\u0026#34;\u0026gt;\u0026amp;nbsp;\u0026amp;nbsp;[draft]\u0026lt;/span\u0026gt;\u0026lt;/sup\u0026gt;{{- end }} \u0026lt;/h1\u0026gt; {{- if .Description }} \u0026lt;div class=\u0026#34;post-description\u0026#34;\u0026gt; {{ .Description }} \u0026lt;/div\u0026gt; {{- end }} {{- if not (.Param \u0026#34;hideMeta\u0026#34;) }} \u0026lt;div class=\u0026#34;post-meta\u0026#34;\u0026gt; {{- partial \u0026#34;post_meta.html\u0026#34; . -}} {{- partial \u0026#34;translation_list.html\u0026#34; . -}} {{- partial \u0026#34;edit_post.html\u0026#34; . -}} {{- partial \u0026#34;post_canonical.html\u0026#34; . -}} \u0026lt;!-- Rest of code omitted --\u0026gt; Notice this code goes in the \u0026quot;main\u0026quot; block from line 17 of baseof.html. You could inspect element this page to confirm. The code is quite intuitive, so you should be able to see how this code (in addition to front matter and site variables) causes certain elements to appear at the top of this page.\nSpecifying layout of a page You should rarely have to manually specify the layout of a page in front matter. Hugo determines whether a page is a single or list by directory structure. Most pages should be singles, of course.\nYou can see an example of a list layout at my projects page. However, I did not specify this layout manually: It\u0026rsquo;s automatically a list layout because projects/ has directories but no index.md file.\ncontent/projects ├── 566 ├── leds ├── mips_emulator ├── neuroruler ├── rubiks_541 └── sapsim I have two pages where I manually set the layout in front matter. One is Search, and the other is Archives.\nHere\u0026rsquo;s the front matter of search.md, and it\u0026rsquo;s similar for archives.md.\n--- title: \u0026#34;Search\u0026#34; layout: \u0026#34;search\u0026#34; summary: \u0026#34;search\u0026#34; --- This topic is further described in Content.\nstatic/ The fourth and final important part is static/. This is where static files, such as images, go.\nI don\u0026rsquo;t have very many images here because I prefer to group images with the post itself in content/.\nNote that after compilation, files in static/ are copied to the root directory /. So, when accessing a file in static/, you should prepend a / to the file path. For example, the image static/1.jpg should be accessed as /1.jpg. In practice, I\u0026rsquo;ve found that the leading / can often be omitted. Just know that something like /static/1.jpg won\u0026rsquo;t work.\nLogo Site logos are configured in two places in the config.\nparams: # Image displayed when posting site link on socials # For example, if you post the link to the site in Discord, this image will be displayed images: [\u0026#34;logo_outlined_6.png\u0026#34;] # ... # Logo and name shown on top left of site label: text: \u0026#34;Jesse Wei\u0026#34; icon: /logo_filled_outlined_6.png iconHeight: 35 It\u0026rsquo;s pretty self-explanatory. I do want to show an example of where the images: logo is displayed.\nparams.images displayed when posting website link in Discord\nFavicons See the PaperMod documentation. favicon.io is very convenient for generating favicons!\nShortcodes I want to mention shortcodes. Quite a few of them are built in to Hugo and PaperMod, and they\u0026rsquo;re very convenient.\nI\u0026rsquo;ll show a few examples. Note that when I show the code, I put a space between { and \u0026lt; so that the shortcode is parsed as text and not executed. To use it, remove that space.\nRaw HTML {{ \u0026lt; rawhtml \u0026gt;}} \u0026lt;p align=\u0026#34;center\u0026#34; style=\u0026#34;color: red;\u0026#34;\u0026gt;\u0026lt;strong\u0026gt;This is raw HTML\u0026lt;/strong\u0026gt;\u0026lt;/p\u0026gt; {{ \u0026lt; /rawhtml \u0026gt;}} This is raw HTML\nFigure See above for an example of a figure. Here\u0026rsquo;s the code that generates it:\n{{ \u0026lt; figure src=\u0026#34;img/social_logo.jpg\u0026#34; caption=\u0026#34;params.images displayed when posting website link in Discord\u0026#34; alt=\u0026#34;params.images displayed when posting website link in Discord\u0026#34; align=\u0026#34;center\u0026#34;\u0026gt;}} Hugo documentation\nYouTube embed {{ \u0026lt; youtube hjD9jTi_DQ4 \u0026gt;}} Hugo documentation\nGitHub gist See Hugo documentation.\nDeploy Resource 2 describes how to deploy to Netlify. Here\u0026rsquo;s a timestamp for that portion of the video.\nThe build process is incredibly simple. In the video, the only command you input for the build process is hugo.\nMy build process involves slightly more than just hugo since I also have to build PaperMod_diff 1. So, I use scripts/netlify. My build command in Site settings \u0026gt; Build \u0026amp; deploy \u0026gt; Build command is chmod +x scripts/netlify;./scripts/netlify.\nYou can probably ignore that unless you also want to set up a PaperMod_diff page.\nMy website Now I\u0026rsquo;ll describe specific features of my website.\nconfig.yml The latest version of my config.yml is here.\nI think I use reasonable values, and I use comments to explain decisions I consider non-obvious. I\u0026rsquo;ll explain some specific decisions I made in this file in the below sections as they come up.\nPaperMod diff I created PaperMod diff 1 using the scripts in scripts/. diff.py runs diff between corresponding files, helpers/generate_directory_index_caddystyle.py creates index.html files recursively, and build wraps diff.py to deploy its output to Netlify (see Deploy). helpers/cd.py is also used.\nDo note that content/posts/papermod_diff is gitignored. This is because if it weren\u0026rsquo;t, then the content there would change and be shown on GitHub every time I modify assets/ and/or layouts/, which is redundant and would make the commit history harder to read. My solution (gitignore the folder and generate it during the build process in Netlify) is a bit roundabout, but it\u0026rsquo;s already implemented and works well.\nContent This section is a continuation of Specifying layout of a page.\nLet\u0026rsquo;s look more closely at the structure of content/teaching, which is a list layout.\ncontent/teaching ├── act List layout within list layout │ ├── _index.md Note, _index.md, not index.md! │ ├── binary │ ├── desmos │ ├── eulers_formula │ ├── ... ├── comp110 │ ├── img │ └── index.md ├── comp210 │ ├── img │ └── index.md └── comp311 ├── img ├── index.md └── review My Teaching page has a list layout because teaching/ doesn\u0026rsquo;t have an index.md. The comp110/ directory is a single because it has an index.md. It\u0026rsquo;s accessible by /teaching/comp110. It also contains an img/ directory that\u0026rsquo;s accessible from index.md. The images could go in /static/, but I prefer bundling them with the page.\nIt\u0026rsquo;s possible to have a list layout within a list layout, and /teaching/act is an example. However, notice act/ must have an _index.md file (note the underscore) since it\u0026rsquo;s a non-leaf.\nSee Page Bundles for more details.\n$\\LaTeX{}$ I enabled $\\LaTeX{}$ via KaTeX in layouts/partials/extend_head.html.\nI followed Math Typesetting from PaperMod documentation. Specifically, the code in extend_head.html is mostly from Issue #236.\nI modified the condition for loading the KaTeX script. The site param math must be true. Then KaTeX will be loaded by default in all pages. Setting the local param math to false in front matter will cause that page to not load KaTeX.\nI think having to opt-in is super annoying, so I\u0026rsquo;d rather enable it globally and be able to opt-out.\nComments I enabled comments using giscus.\nI followed the directions on the giscus site to install giscus in my repo and pasted code from the giscus website into layouts/partials/comments.html. I also added comments: true to config.\nAs you can see, there are comments at the bottom of almost every page. PaperMod automatically disables comments in the index profile, search, and archives layouts. I manually disabled comments in my Privacy policy page in the front matter with comments: false.\nComments show up in GitHub Discussions. Make sure to enable Discussions in your GitHub repo.\nSocial icons in footer I added social icons to the footer, as in resource 5. I sort of follow what it describes but make some of my own adjustments.\nAs described there, adding social icons to footer messes with CSS spacing values. For example, a scrollbar appeared on the homepage and Search page (haven\u0026rsquo;t solved this and don\u0026rsquo;t plan to) even though there\u0026rsquo;s enough room for both header and footer to be visible without scrolling. This issue is described more in-depth in resource 5, under problem 2.\nIn short, I modified CSS in 4 files. layouts/partials/footer.html, layouts/partials/social_icons.html, assets/css/core/theme-vars.css, and assets/css/common/profile-mode.css. The comments in each file describe the changes I made. Most comments in social_icons.html are for htmltest, described below, so ignore those for now.\nI disabled footer social icons on the homepage because the homepage already has social icons.\nOther footer changes Beyond that, I made some other minor changes to the footer.\nI added the separator character • between phrases in the footer.\nThe links were originally like this:\nPowered by \u0026lt;a href=\u0026#34;https://gohugo.io/\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; target=\u0026#34;_blank\u0026#34;\u0026gt;Hugo\u0026lt;/a\u0026gt; \u0026amp; \u0026lt;a href=\u0026#34;https://github.com/adityatelange/hugo-PaperMod/\u0026#34; rel=\u0026#34;noopener\u0026#34; target=\u0026#34;_blank\u0026#34;\u0026gt;PaperMod\u0026lt;/a\u0026gt; I removed target=_blank and rel=\u0026quot;noopener noreferrer\u0026quot; because links should not usually open new tabs.\nI added a privacy policy page and a link to it in the footer.\nLastly, I removed \u0026ldquo;Powered by Hugo and PaperMod\u0026rdquo; in the homepage specifically to keep it minimal.\nSingle I slightly modified layouts/_default/single.html. I moved the ToC above the cover. Notice on this page that the ToC is above the cover image.\nLinks are Carolina blue on hover I modified CSS in the following CSS files in assets/css/common/: archive, footer, header, main, post-entry, and post-single.\nFor example, main.css has these important lines:\n/* Change color on hover */ a:hover { color: var(--carolina_blue); } a.anchor:hover { color: var(--carolina_blue) !important; } svg:hover { color: var(--carolina_blue); } For modifications, look for comments and the variable carolina_blue.\nSince I made links blue on hover, I removed underline on hover (the link is still underlined if it had an underline before hovering though).\nSyntax highlighting via Chroma I disabled highlight.js (default) and enabled Hugo Chroma following the steps in PaperMod documentation. This required a few changes in config.yml and assets/css/extended/*.css.\nI disabled line numbers by default for readability. Most code blocks you\u0026rsquo;ve seen so far have not had line numbers.\nHowever, you can enable line numbers for a specific code block, as shown in the baseof code block, by adding {lineNos=true} to the code block. 8\n1 2 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;!-- Omitted --\u0026gt; Google Analytics For Google Analytics, just add your Google Analytics tag to googleAnalytics in the config. For example, mine has googleAnalytics: G-Q603T56FWT.\nPaperMod automatically uses the Google Analytics script if env is production (default). See the bottom of layouts/partials/head.html:\n{{- /* Misc */}} {{- if hugo.IsProduction | or (eq site.Params.env \u0026#34;production\u0026#34;) }} {{- template \u0026#34;_internal/google_analytics.html\u0026#34; . }} {{- template \u0026#34;partials/templates/opengraph.html\u0026#34; . }} {{- template \u0026#34;partials/templates/twitter_cards.html\u0026#34; . }} {{- template \u0026#34;partials/templates/schema_json.html\u0026#34; . }} {{- end -}} CI I added a GH workflow for checking links in my site and spellcheck.\nhtmltest GH action output\nSee .github/workflows/ci.yml and its configuration file .github/.htmltest.yml. This follows resource 6, with some modifications. In particular, I want to note that I run my scripts/build in ci.yml instead of just hugo, as in the original file.\nBehavior Here is the intended behavior of the htmltest job after making the modifications below.\nIf an internal link (e.g., a page or image) doesn\u0026rsquo;t work, the workflow will fail, causing a red X to appear on GH Actions.\nIf an external link doesn\u0026rsquo;t work, htmltest will warn, but the workflow will not fail. That is, an external link could be \u0026ldquo;broken,\u0026rdquo; and a green checkmark will be shown on GH Actions. This is fine because when using a lot of external links, it\u0026rsquo;s unlikely that all will work in any single run. There could be a timeout or non-200 HTML response code, etc.. Getting a red X when just a single external link breaks is annoying. htmltest does still warn, so I manually check GH actions every now and then.\nGetting rid of garbage output There was originally \u0026gt;100 lines of garbage output. htmltest complained that the site logo\u0026rsquo;s link at the top left had no alt text, and my LinkedIn link in social icons in the footer returned non-OK exit status 999. Since the header and footer are in all pages, this caused a lot of errors, which made the output unreadable.\nI fixed this in layouts/partials/header.html by adding non-empty alt text to the logo and in layouts/partials/social_icons.html by excluding the LinkedIn link from htmltest using the data-proofer-ignore attribute, as specified in htmltest\u0026rsquo;s README.\nThe top 3 links are ones I want to keep even though they don\u0026rsquo;t actually work. So I manually ignored them in the post (not layouts/) using the data-proofer-ignore attribute in rawhtml. 9\nAnd the #center thing is how you can center an image in Markdown syntax in PaperMod. #center also gets appended to an image URL if you use align=\u0026quot;center\u0026quot; in figure shortcode. But since this causes htmltest to freak out, I added this to .htmltest.yml:\nIgnoreURLs: # Ignore \u0026lt;img src=\u0026#34;*#center\u0026#34;\u0026gt; for centered images in PaperMod, which would cause \u0026#34;hash not found\u0026#34; # This is suboptimal because we ideally want to check the image URL without the #center suffix # Match internal image path ending in #center - .*\\.(apng|gif|ico|cur|jpg|jpeg|jfif|pjpeg|pjp|png|svg)#center$ # Match external image URL ending in #center - (https://|http://|www\\.).*\\.[A-Za-z]+#center$ As you can tell by the comments, this is suboptimal and can lead to false negatives. I can think of two solutions.\nModify htmltest to ignore specific hashes but check the rest of the URL 10 Modify PaperMod to center the image without appending #center Make GH Actions display red X on failure Instead of continue-on-error: true from resource 6, I use if: always().\n- name: Test HTML # https://github.com/wjdp/htmltest-action/ uses: wjdp/htmltest-action@master with: config: ./.github/.htmltest.yml - name: Archive htmltest results # Archive result even if Test HTML fails # Use if: always() instead of continue-on-error, as in the original file # Source: https://stackoverflow.com/questions/62045967/github-actions-is-there-a-way-to-continue-on-error-while-still-getting-correct if: always() if: always() will cause logging to occur even if Test HTML fails. continue-on-error: true does the same. However, continue-on-error: true would cause GH Actions to display a green checkmark when Test HTML fails, which is misleading.\nIgnoreExternalBrokenLinks I added this to .htmltest.yml:\n# This does not \u0026#34;ignore\u0026#34; the broken links, but it does not fail the action # From the htmltest README: # When true produces a warning, rather than an error, for broken external links. IgnoreExternalBrokenLinks: true With a lot of external links, it\u0026rsquo;s unlikely that all external links will work during any one run. Maybe there\u0026rsquo;ll be a timeout or bad HTML response code, etc.\nPaperMod_diff\u0026#160;\u0026#x21a9;\u0026#xfe0e;\u0026#160;\u0026#x21a9;\u0026#xfe0e;\u0026#160;\u0026#x21a9;\u0026#xfe0e;\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nHugo Quick Start\u0026#160;\u0026#x21a9;\u0026#xfe0e;\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nGetting Started With Hugo\u0026#160;\u0026#x21a9;\u0026#xfe0e;\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nPaperMod demo site/documentation and its source\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nKonstantin\u0026rsquo;s How to Set Up This Blog\u0026#160;\u0026#x21a9;\u0026#xfe0e;\u0026#160;\u0026#x21a9;\u0026#xfe0e;\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nCheck links in Hugo with htmltest\u0026#160;\u0026#x21a9;\u0026#xfe0e;\u0026#160;\u0026#x21a9;\u0026#xfe0e;\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nI assume you already do, surely.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nYou might also be able to enable it by default in a specific post by adding it to front matter, but this didn\u0026rsquo;t work for me.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nTODO: Create shortcode for a link with data-proofer-ignore attribute.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nThis would ignore any URL with #center suffix, not just image URLs.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/posts/setup_site/","summary":"This post provides an overview of Hugo (PaperMod theme) and details the steps I took in setting up this website.","title":"Overview of Hugo/PaperMod and Setting Up This Site"},{"content":"This website was created with the static site generator Hugo using the PaperMod theme and is hosted on Netlify.\nThis website uses Google Analytics, which uses cookies. Please see Google\u0026rsquo;s Privacy Policy, Technologies, and How Google Uses Cookies for more information.\nAdditionally, this website uses giscus for comments. giscus uses cookies: Please see giscus\u0026rsquo; Privacy Policy for more information.\nLastly, this site remembers your theme preference (light or dark) in a cookie.\nIt is possible that Hugo, PaperMod, and Netlify collect information in ways that I am not aware of. Apart from the information described here and data collection I am not aware of, no other information is collected, stored, or evaluated.\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/privacy/","summary":"Privacy policy.","title":"Privacy Policy"},{"content":" Links GitHub Team website Documentation Full demo Description Cross-platform program that calculates head circumference from MRI data (.nii, .nii.gz, .nrrd). Supports 3D rotations and image smoothing and threshold options. Batch processes data via CLI. Imports and exports circumference and settings data in JSON format.\nInstallable via pip install NeuroRuler. Further instructions available on GitHub.\nMade in COMP 523 (Software Engineering Lab) in collaboration with Madison Lester, Peifeng \u0026ldquo;Hank\u0026rdquo; He, and Eric Schneider for our client, Professor Martin Styner.\nFigures { \u0026#34;input_image_path\u0026#34;: \u0026#34;/Users/jesse/Documents/GitHub/COMP523/NeuroRuler/data/MicroBiome_1month_T1w.nii.gz\u0026#34;, \u0026#34;output_contoured_slice_path\u0026#34;: \u0026#34;/Users/jesse/Documents/GitHub/COMP523/NeuroRuler/output/MicroBiome_1month_T1w/MicroBiome_1month_T1w_contoured.png\u0026#34;, \u0026#34;circumference\u0026#34;: 285.04478394448125, \u0026#34;x_rotation\u0026#34;: -17, \u0026#34;y_rotation\u0026#34;: -18, \u0026#34;z_rotation\u0026#34;: 24, \u0026#34;slice\u0026#34;: 131, \u0026#34;smoothing_conductance\u0026#34;: 4.0, \u0026#34;smoothing_iterations\u0026#34;: 10, \u0026#34;smoothing_time_step\u0026#34;: 0.08, \u0026#34;threshold_filter\u0026#34;: \u0026#34;Otsu\u0026#34; } Example JSON input/output\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/projects/neuroruler/","summary":"Program that calculates head circumference from MRI data. 3D rotation, smoothing, and threshold options. Batch processes data via CLI. Imports and exports circumference and settings data.","title":"NeuroRuler"},{"content":" Hi! I'm Jesse Wei.\nI\u0026rsquo;m a first-year Master\u0026rsquo;s student in the Department of Computer Science at UNC.\nIn 2023, I graduated with highest distinction from UNC with a B.S. in Mathematics and a B.S. in Computer Science.\nI was a head UTA for COMP311 (23S, 22F). I was a UTA for COMP210 (22Su) and COMP110 (22S, 21F, 21S). I won the Diane Pozefsky Learning Assistant Award in 23S.\nI live in Apex, North Carolina. I lived in Lumberton, North Carolina, for 10 years.\nA fun fact about me: I used to speedcube.\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/about/","summary":"Information about me.","title":"About Me"},{"content":" Links GitHub Documentation Description Simulation of SAP (Simple-As-Possible computer) programs from COMP311 (Computer Organization) @ UNC.\nEnabled me to autograde and create COMP311\u0026rsquo;s SAP programming assignment.\nInstallable via pip install SAPsim.\nSupports all instructions in the SAP instruction set.\nFigures SAP instruction set lecture slides\nSAP instruction set\nSAP computer\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/projects/sapsim/","summary":"Simulation of SAP (Simple-As-Possible computer) programs from COMP311 @ UNC. Enabled me to autograde and create COMP311\u0026rsquo;s SAP programming assignment.","title":"SAPsim"},{"content":" Link GitHub Description Cross-platform MIPS assembly emulator for simulating COMP 541 (Digital Logic and Computer Design) final projects.\nRuns any MIPS program using the 32 supported MIPS assembly instructions. Simulates memory-mapped I/O devices, including VGA display, accelerometer, and keyboard.\nMade in collaboration with Madison Lester over Winter break 2022. Ported from the original MIPS emulator (C#, Windows-only) made by Jordan Elliot et al.\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/projects/mips_emulator/","summary":"MIPS assembly emulator for simulating COMP 541 (Digital Logic) final projects at UNC. Simulates memory-mapped I/O devices, including VGA display, accelerometer, and keyboard.","title":"MIPS Emulator"},{"content":" Description 1900 MIPS assembly instructions running on a SystemVerilog processor built from spit and toothpicks in COMP 541 (Digital Logic and Computer Design).\nGrade: 100%\nExtra credit: $\\frac{4}{5}$\nFeedback Rubik’s cube simulator:\nWow!\nPerforms all moves: rotations, slices etc. Undo as well.\nScrambles using PRNG. Generates 8 scrambles. User can modify them but only that last 8 are saved.\nTwo hardwire modifications: Random number using hardware LFSR. Timer in Verilog on board — LEDs display information.\nNice features: Status bar shows scrambling pattern. Easter egg — sprites change after you solve it. Accelerometer tilt makes rotations. Sound/Jingle on solve win!\nAll in all, what a truly wonderful project. Initially I thought it would be a pretty tough one to complete, but you successfully did it. In fact, hit it out of the park! Worthy of extra credit (reported separately).\n— Professor Montek Singh\nFigures Code line count - imem.mem is instruction memory\nMIPS processor implemented in SystemVerilog and deployed on Nexys A7 FPGA board\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/projects/rubiks_541/","summary":"1900 MIPS assembly instructions running on a SystemVerilog processor built from spit and toothpicks in COMP 541 (Digital Logic). Grade: 100%; extra credit: 4/5.","title":"Rubik's Cube (MIPS Assembly)"},{"content":"Quote from post summary is from Eric.\nCode // Pin 3: Input for reading button // Pin 2: Output for controlling LED int button_value = 0; int BUTTON = 3; int LED1 = 2; int LED2 = 4; void setup() { // put your setup code here, to run once: pinMode(BUTTON, INPUT); pinMode(LED1, OUTPUT); pinMode(LED2, OUTPUT); } void loop() { // put your main code here, to run repeatedly: button_value = digitalRead(BUTTON); // button not pressed, based on my hardware implementation if (button_value == 0){ digitalWrite(LED1, HIGH); digitalWrite(LED2, HIGH); } else { digitalWrite(LED1, HIGH); digitalWrite(LED2, LOW); delay(100); digitalWrite(LED1, LOW); digitalWrite(LED2, HIGH); delay(100); } } toggle.ino\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/projects/leds/","summary":"\u0026ldquo;Touching wires and breadboards is good for the CS major.\u0026rdquo;","title":"Blinking Christmas LED's"},{"content":"See Advanced ACT Math Concepts (Overleaf).\nClick Recompile and the download button at the top right to download the PDF.\nACT® is a registered trademark belonging to ACT, Inc. ACT, Inc. is not involved with or affiliated with me, nor does ACT, Inc. endorse or sponsor any of the products or services offered by me.\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/act/math/","summary":"18-pg $\\LaTeX{}$ document. I went through 5 ACT Math forms and wrote about all concepts I considered advanced.","title":"Advanced Math Concepts for the ACT"},{"content":"Guide to ACT\nACT® is a registered trademark belonging to ACT, Inc. ACT, Inc. is not involved with or affiliated with me, nor does ACT, Inc. endorse or sponsor any of the products or services offered by me.\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/act/guide/","summary":"I wrote this 20-pg guide while in high school and update it every now and then.","title":"Jesse's Guide to the ACT"},{"content":"Geometry We must start with the most basic definition.\nLemma 1: In a right triangle, given angle $\\theta$, $\\sin \\theta = \\frac{\\text{opposite}}{\\text{hypotenuse}}$ and $\\cos \\theta = \\frac{\\text{adjacent}}{\\text{hypotenuse}}$ But it\u0026rsquo;s definitely best to visualize:\nBasic geometric definition of sine and cosine\nFrom the definitions, we get that the green side is $h\\cos \\theta$ because $\\cos \\theta = \\frac{\\text{adjacent}}{\\text{hypotenuse}} \\implies \\text{adjacent} = h\\cos \\theta$. Similarly, the blue side is $h\\sin \\theta$. Letting $h=1$, the adjacent side is just $\\cos \\theta$, and the opposite side is $\\sin \\theta$. With this setup, we can show Lemma 2.\nLemma 2: $\\cos \\theta = \\sin(\\frac{\\pi}{2} - \\theta)$ and $\\sin \\theta = \\cos(\\frac{\\pi}{2} - \\theta)$ for arbitrary $\\theta$ Proof. Consider $\\alpha=\\frac{\\pi}{2}-\\theta$. In the triangle with hypotenuse 1, the green side is $\\cos \\theta = \\frac{\\text{adjacent}}{1}$. It is also $\\sin \\alpha = \\frac{\\text{opposite}}{1}$. Hence, $\\cos \\theta = \\sin(\\frac{\\pi}{2} - \\theta)$. Similar reasoning holds for the latter identity and for arbitrary $h$.\nGeometric proof of separation by 90 degrees\nHere\u0026rsquo;s a Desmos graph where you can see the identity for yourself: 1\nBack to Lemma 1, why should the basic definition be limited to a static right triangle? What about a dynamic right triangle, perhaps one like this: 2\nIn this graph, the x coordinates always involve $\\cos \\theta$, and the y coordinates always involve $\\sin \\theta$. Thinking of the black line as a vector 3, we see that to get the horizontal component of the vector, we multiply its length by $\\cos \\theta$. To get its vertical component, we multiply its length by $\\sin \\theta$. In other words, $\\cos \\theta$ projects to $x$, and $\\sin \\theta$ projects to $y$.\nThis applies to the graph of a circle as well. Note that, again, $x$ always goes with $\\cos \\theta$, and $y$ always goes with $\\sin \\theta$.\nTo make this idea even more clear, you should take a look at this circle animation on Khan Academy. 4\nAlgebra There is an algebraic symmetry that is, in my opinion, as beautiful as the symmetries above. This symmetry also allows us to prove $e^{ix} = \\cos x + i\\sin x$ for any $x$.\nLemma 3: $\\cos x = 1 - \\frac{x^2}{2} + \\frac{x^4}{4!} - \\frac{x^6}{6!} + \\cdots$, and $\\sin x = x - \\frac{x^3}{3!} + \\frac{x^5}{5!} - \\frac{x^7}{7!} + \\cdots$ 5 Proof. Consider that the Taylor series 6 expansion of $f(x)$ about the point $a$ is $$f(a)+f\u0026rsquo;(a)(x-a) + \\frac{f\u0026rsquo;\u0026rsquo;(a)}{2!}(x-a)^2 + \\frac{f\u0026rsquo;\u0026rsquo;\u0026rsquo;(a)}{3!}(x-a)^3 + \\cdots + \\frac{f^{(n)}(a)}{n!}(x-a)^n + \\cdots$$\nThe Maclaurin expansion is the Taylor series centered at $a=0$, so the Maclaurin expansion of $f(x)$ is $$f(0) + f\u0026rsquo;(0)x + \\frac{f\u0026rsquo;\u0026rsquo;(0)}{2!}x^2 + \\frac{f\u0026rsquo;\u0026rsquo;\u0026rsquo;(0)}{3!}x^3 + \\cdots + \\frac{f^{(n)}(0)}{n!}x^n + \\cdots$$\nLet $f(x) = \\cos x$. We know that 7\nDerivatives of cosine\nUsing that $\\cos(0) = 1$ and $\\sin(0) = 0$, we have that the first few terms of the Maclaurin series are $1 + 0x -\\frac{x^2}{2} + 0x^3 + \\frac{x^4}{4!}$. Now, we write the pattern: $$\\cos x = \\sum_{n=0}^{\\infty} \\frac{(-1)^n}{2n!} x^{2n} $$\nAny odd power will have $\\sin(0)=0$ and so can be ignored. Hence, we use only the even numbers $2n$ in our summation. Using that $f(x)=\\cos x$ and $f\u0026rsquo;\u0026rsquo;(x) = -\\cos x$, we note that the signs alternate each (even) term, so we also have $(-1)^n$ in the summation.\nSimilar reasoning holds for $\\sin x = \\sum_{n=0}^{\\infty} \\frac{(-1)^n}{(2n+1)!}x^{2n+1}$.\nLastly, there are also two trigonometric identities that I have always found interesting, in terms of symmetry.\nLemma 4: Angle sum and difference identities $$\\sin(\\alpha + \\beta) = \\sin(\\alpha) \\cos(\\beta) + \\cos(\\alpha) \\sin(\\beta)$$\n$$\\sin(\\alpha - \\beta) = \\sin(\\alpha) \\cos(\\beta) - \\cos(\\alpha) \\sin(\\beta)$$\n$$\\cos(\\alpha + \\beta) = \\cos(\\alpha) \\cos(\\beta) - \\sin(\\alpha) \\sin(\\beta)$$\n$$\\cos(\\alpha - \\beta) = \\cos(\\alpha) \\cos(\\beta) + \\sin(\\alpha) \\sin(\\beta)$$\nI won\u0026rsquo;t prove these identities here, but I will write about the symmetries. Note that the $\\sin$ identities have matching signs; that is, if there is a $+$ on the left side, there\u0026rsquo;s a $+$ on the right side. However, the multiplications are mismatched in that $\\sin$ is multiplied by $\\cos$ and vice versa.\nOn the other hand, the $\\cos$ identities have matching multiplication in that $\\cos$ multiplies $\\cos$, and $\\sin$ multiplies $\\sin$. The signs, however, are mismatched.\nYou can press the ▶️ on the left to view the animation.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nNote that there is no magic going on here. There\u0026rsquo;s nothing in Desmos that specifically generates an arbitrary right triangle - this graph uses only the sine and cosine knowledge shown above!\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nSince we can vary its length $r$ and its angle $t$\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nA still screenshot of unit circle animation on Khan Academy\nLink to animation\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nNote that the cosine expansion contains only even powers of $x$ (including $x^0 = 1$) divided by even factorials, and the sine expansion contains only odd powers of $x$ divided by odd factorials.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nI might write an article about the Taylor series! For now, the tl;dr is that the Taylor expansion of a complicated function is a highly accurate approximation that is made up of less complicated polynomial terms, which are much easier to work with.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nNote here that the cycle length is 4, which is the same as that of the powers of $i$.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/act/sin_cos/","summary":"Cool geometric and algebraic symmetries. Several embedded Desmos graphs.","title":"Symmetries Between $\\sin$ and $\\cos$"},{"content":"ACT® is a registered trademark belonging to ACT, Inc. ACT, Inc. is not involved with or affiliated with me, nor does ACT, Inc. endorse or sponsor any of the products or services offered by me.\n2022-06-04 (G\u0026amp;L)\nMath E25 Sine and cosine symmetries Conditional probability trick question 2022-05-28 (G\u0026amp;L)\nMath Z08 Pascal\u0026rsquo;s triangle 2022-05-22 (A\u0026amp;A)\nReview 2022-05-07 (G\u0026amp;L)\nMath 74H Circle graph Amplitude (trig) Expected value/variance Expectation/variance helper functions 2022-04-17 (G\u0026amp;L)\nMath C02 Ellipse graph Law of sines practice Law of cosines practice Ellipse practice 2022-04-07 (A\u0026amp;A)\nMath Z15 2022-04-03 (G\u0026amp;L)\nMath 74F 2022-03-27 (A\u0026amp;A)\nMath 65E 2022-03-26 (G\u0026amp;L)\nMath 65E Also includes recurrence and inclusion-exclusion principle. Verifying that $0! = 1$ using $\\cos(x)$ Maclaurin expansion StackExchange visually stunning math concepts Unit circle animation 2022-03-20 (A\u0026amp;A)\nMath D03 \u0026amp; $\\pi$ (Archimedean method) Archimedean method of calculating $\\pi$ 2022-03-19 (G\u0026amp;L)\nMath D03 2022-03-13 (A\u0026amp;A)\nMath 73C 2022-03-12 (G\u0026amp;L)\nMath 67F Participles and examples 2022-03-06 (A\u0026amp;A)\nMath 69A 2022-03-05 (G\u0026amp;L)\nMath 74C Multiplicity of roots $\\sin$, $\\cos$, and $e$ 2022-03-05 (L)\nMath 73G 2022-02-27 (A\u0026amp;A)\nMath 71E Perfect tense conjugations Adjective Hyphen 2022-02-26 (G\u0026amp;L)\nMath 73C Video: Fibonacci Comma Adjective 2022-02-26 (L)\nMath 73C 2022-02-20 (A\u0026amp;A)\nMath A10 2022-02-20 (C)\nMath 74F 2022-02-19 (G\u0026amp;L)\nMath A10 Graphical inverse Video: Graphing imaginary solutions 2022-02-13 (A\u0026amp;A)\nMath 70C 2022-02-13 (C)\nMath A10 2022-02-12 (G\u0026amp;L)\nMath A11 Order of adjectives 2022-02-12 (L)\nMath Preparing for the ACT 2015-2016 2022-02-06 (A\u0026amp;A)\nMath B05 2022-02-06 (C)\nMath 74H \u0026amp; B05 2022-02-05 (G\u0026amp;L)\nMath B05 Linear Algebra Toolkit (RREF) Identity matrices 2022-02-05 (L)\nMath C01 2022-01-29 (G\u0026amp;L)\nMath Preparing for the ACT 2015-2016 General $\\sin$/$\\cos$ equation 2022-01-23 (A\u0026amp;A)\nMath B02 2022-01-22 (G\u0026amp;L)\nMath E23 ","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/act/tutoring_notes/","summary":"Notes from tutoring sessions for the ACT.","title":"Tutoring Notes"},{"content":"Consider the following question: In the polynomial expansion of $(x+y)^5$, what is the coefficient of the $x^2y^3$ term? You could expand this out as$$(x+y)(x+y)(x+y)(x+y)(x+y)$$\nOf course, this would take forever. Is there a better way? 1\nConsider the following situation: you have 5 boxes, each with one $x$ and $y$, and you have to choose one element from each box. How many different ways are there to pick out 2 $x$\u0026rsquo;s and 3 $y$\u0026rsquo;s? In actuality, this is precisely the same question.\nNow consider a simpler case, as we should usually do when something appears difficult. What is the coefficient of the $x^5$ term? Clearly, it is 1. We know that because there\u0026rsquo;s only one way to get $x^5$: pick out an $x$ from each one of the 5 binomials.\nApplying this to the $x^2y^3$ example, we know that its coefficient should be the number of ways to pick out 2 $x$\u0026rsquo;s and 3 $y$\u0026rsquo;s. How many ways is that? We can pick 2 $x$\u0026rsquo;s from the first two, and that would automatically fix 3 $y$\u0026rsquo;s from the last 3 binomials. We could also pick out 2 $x$\u0026rsquo;s from the last two, and that would also automatically give us 3 of $y$. Does this seem like a familiar concept?\nThere are $\\binom{5}{2} = \\frac{5!}{2!3!} = \\frac{5(4)}{2}=10$ ways to pick out 2 $x$\u0026rsquo;s (fixing 3 $y$\u0026rsquo;s also) from 5 of $(x+y)$. By intuition and the identity $\\binom{n}{k} = \\binom{n}{n-k}$, we know $\\binom{5}{3}$, which can be interpreted as the number of ways to pick out 3 $y$\u0026rsquo;s and fixing 2 $x$\u0026rsquo;s, is also 10. 2\nThe binomial coefficient naturally has the symmetry $\\binom{n}{k}=\\binom{n}{n-k}$, which tells us that if the coefficient of $x^2y^3$ is $\\binom{5}{2}$ (from 5 boxes pick 2 $x$), and the coefficient of $x^3y^2$ is $\\binom{5}{3}$ (from 5 boxes pick 3 $x$), then those two numbers are the same. After all, by inspection, why wouldn\u0026rsquo;t they be? The number of ways to pick out 2 $x$\u0026rsquo;s from 5 of $(x+y)$ is the same as the number of ways to pick out 2 $y$\u0026rsquo;s.\nThis would also imply the coefficient of $xy^4$, $\\binom{5}{1}$, should be the same as the coefficient of $x^4y$, $\\binom{5}{4}$. And, back to where we started, the coefficient of $x^5$, $\\binom{5}{5}$, is the same as the coefficient of $y^5$, $\\binom{5}{0}$.\nKnowing now that binomial coefficients $\\binom{n}{0}, \\binom{n}{1}, \\ldots ,\\binom{n}{n}$ are the coefficients of $(x+y)^n$, what if we arrange these binomial coefficients in a triangle like so:\nPascal\u0026rsquo;s triangle with binomial coefficients\nWell, that doesn\u0026rsquo;t look like much. But when we compute the numbers, we get\nPascal\u0026rsquo;s triangle\nAnd hopefully you\u0026rsquo;ve seen this before, so you know that each number in the triangle is the sum of the two numbers above it! 3 To reiterate, note that row $n$ matches the coefficients of $(x+y)^n$. See the following Mathematica code. 4\nWell, there\u0026rsquo;s just one more thing\u0026hellip; if we know that the combinatorial and numerical representations of the triangles are the same, then doesn\u0026rsquo;t that necessarily mean that the addition property that holds for the numerical triangle holds for the binomial coefficient triangle as well? 5 In other words, looking at the middle of the triangle, since $3+3=6$, $\\binom{3}{1}+\\binom{3}{2}=\\binom{4}{2}$? Why?\nFirst, let\u0026rsquo;s set up the theorem. Let $\\binom{n}{k}$ represent the $k^{\\text{th}}$ entry of the $n^{\\text{th}}$ row of the binomial coefficient form of Pascal\u0026rsquo;s triangle. Since each number in the numerical Pascal\u0026rsquo;s triangle is the sum of the two numbers above, we claim that $\\binom{n}{k}=\\binom{n-1}{k-1}+\\binom{n-1}{k}$. 6\nLemma 1: $\\binom{n}{k}=\\binom{n-1}{k-1}+\\binom{n-1}{k}$ Proof. $$ \\begin{aligned} \\binom{n-1}{k-1} + \\binom{n-1}{k} \u0026amp;= \\frac{(n-1)!}{(k-1)!(n-k)!} + \\frac{(n-1)!}{k!(n-k-1)!}\\\\ \u0026amp;= (n-1)!\\left[\\frac{1}{(k-1)!(n-k)!} + \\frac{1}{k!(n-k-1)!}\\right]\\\\ \u0026amp;= (n-1)!\\left[\\frac{k}{k!(n-k)!} + \\frac{n-k}{k!(n-k)!}\\right]\\\\ \u0026amp;= (n-1)!\\left(\\frac{n}{k!(n-k)!}\\right)\\\\ \u0026amp;= \\frac{n!}{k!(n-k)!}\\\\ \u0026amp;= \\binom{n}{k} \\end{aligned} $$\nYou can also head to Wikipedia for a very good combinatorial reasoning (no algebra) proof. I\u0026rsquo;ll prove another cool identity using combinatorial reasoning:\nLemma 2: $k\\binom{n}{k}=n\\binom{n-1}{k-1}$ Proof. Let $n$ be the total number of people, and suppose we want to pick out a group of $k$ people with one special person in the group, perhaps a president. There are two ways for us to accomplish this: (1) select the group first and then within the group, select a president or (2) select a president among all people, then form the rest of the group.\nThe first way involves first picking out $k$ people from $n$ people. There are then $k$ ways to pick the president from the group of $k$. By the multiplication rule, there are $k\\binom{n}{k}$ ways to do this.\nThe second way is to first pick out a president to be in the group from all $n$ people, and there are $n$ such possible presidents. Then, from the remaining $n-1$ people, we pick out $k-1$ people (because the president is already included in the group). There are $n\\binom{n-1}{k-1}$ ways to do this.\nHence, by combinatorial reasoning, $k\\binom{n}{k}=n\\binom{n-1}{k-1} \\quad \\blacksquare$\nThe answer\u0026rsquo;s yes, of course.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n$\\binom{n}{k} = \\frac{n!}{k!(n-k)!} = \\frac{n!}{(n-k)!(n-(n-k))!} = \\binom{n}{n-k}$\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nIf there\u0026rsquo;s no number, pretend it\u0026rsquo;s a 0. And for the top-most 1, that\u0026rsquo;s our base case, have to start somewhere.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nHere, we can change to $(1+x)^n$ to make it look nicer, but the concept remains the same, as you can see.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nIt also means that the base, or first, value(s) have to be the same. Even if you grow in exactly the same way, you need to start at the same point to be exactly the same. This is an example of mathematical induction! For a similar example of induction, see another post of mine.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nYou should check that this statement does, indeed, refer to an arbitrary entry and the two entries above it. You could confirm using the $\\binom{4}{2}$ example.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/act/pascals_triangle/","summary":"Pascal\u0026rsquo;s triangle and binomial coefficients.","title":"Pascal's Triangle"},{"content":"Some math-related GitHub gists.\nExpected value/variance Expectation/variance helper functions Verifying that $0!=1$ using $\\cos (x)$ Maclaurin expansion Archimedean method of calculating $\\pi$ Unit circle animation on Khan Academy (not a GitHub gist) ","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/act/gh_gists/","summary":"Some math-related GitHub gists.","title":"GitHub Gists"},{"content":"Some Desmos links for learning geometric concepts.\nCircle graph Amplitude of trig functions Ellipse graph Multiplicity of polynomial roots $\\sin$, $\\cos$, and $e$ Graphical inverse of a function General $\\sin$/$\\cos$ equation ","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/act/desmos/","summary":"Some Desmos links for learning geometric concepts.","title":"Desmos"},{"content":"Proof 1: By Taylor series Here are the Maclaurin expansions 1 for $\\cos(x), \\sin(x),$ and $e^y$.\n$$\\begin{aligned} \\cos(x) \u0026amp;= \\sum_{n=0}^{\\infty} \\frac{(-1)^n}{(2n)!} x^{2n} = 1 - \\frac{x^2}{2!} + \\frac{x^4}{4!} - \\frac{x^6}{6!} + \\cdots\\\\ \\sin(x) \u0026amp;= \\sum_{n=0}^{\\infty} \\frac{(-1)^n}{(2n+1)!} x^{2n+1} = x - \\frac{x^3}{3!} + \\frac{x^5}{5!} - \\frac{x^7}{7!} + \\cdots\\\\ e^y \u0026amp;= \\sum_{n=0}^{\\infty} \\frac{y^n}{n!} = 1 + y + \\frac{y^2}{2!} + \\frac{y^3}{3!} + \\frac{y^4}{4!} + \\cdots\\\\ \\end{aligned}$$\nLetting $y = ix$, we get 2\n$$\\begin{aligned} e^{ix} = \\sum_{n=0}^{\\infty} \\frac{(ix)^n}{n!} = \\sum_{n=0}^{\\infty}i^n\\frac{x^n}{n!} \u0026amp;= 1 + ix - \\frac{x^2}{2!} - i \\frac{x^3}{3!} + \\frac{x^4}{4!} + i \\frac{x^5}{5!} - \\frac{x^6}{6!} + \\cdots\\\\ \u0026amp;= \\left(1 - \\frac{x^2}{2!} + \\frac{x^4}{4!} + \\cdots\\right) + i\\left(x - \\frac{x^3}{3!} + \\frac{x^5}{5!} + \\cdots\\right)\\\\ \u0026amp;= \\cos(x) + i\\sin(x) \\quad \\blacksquare \\end{aligned}$$\nLemma 1: The magnitude of $e^{ix}$ is $1 \\quad \\forall x \\in \\mathbb{R}$ Proof. We have shown that $e^{ix}$ is a complex number $a+bi$, where $a=\\cos x$ and $b=\\sin x$. The magnitude of a complex number is its distance, on the complex plane, from $(0, 0)$. We find this distance using the distance formula. $$|e^{ix}| = |\\cos(x) + i\\sin(x)\\:| = \\sqrt{\\cos^2(x) + \\sin^2(x)} = \\sqrt{1} = 1 \\quad \\blacksquare$$\nThe significance of this result is that on the complex plane 3, $e^{i\\theta}$ represents a point that is a distance of one unit away from the origin $(0, 0)$. Varying $\\theta$ from $0$ to $2 \\pi$ results in the unit circle.\nThe $\\theta$ parameter measures the counterclockwise angle the point makes with the positive x axis. At this point, since we\u0026rsquo;re determining a point\u0026rsquo;s position by its angle, we should wonder how this could be connected with polar coordinates.\nA polar coordinate requires an extra parameter, $r$. Otherwise, we are stuck with only the unit circle and can\u0026rsquo;t represent points a distance of, for example, 2 units from the origin. We simply add that parameter $r$ by multiplying by $r$.\nLemma 2 (polar coordinates): For all points $x+iy$ on the complex plane, there exist $r \\in \\mathbb{R}^{\\geq 0}$ and $\\theta \\in [0, 2\\pi)$ such that $re^{i\\theta} = r(\\cos \\theta + i \\sin \\theta) = r\\cos \\theta + i(r\\sin \\theta) = x+iy$ Proof 2: By differential equation Consider the following differential equation: $$\\frac{df(x)}{dx} = if(x)$$\nOne solution is $f(x) = e^{ix}$ because $$\\frac{d}{dx}e^{ix} = ie^{ix}$$\nAnother solution is $f(x) = \\cos(x)+i\\sin(x)$ because$$\\frac{d}{dx}\\left(\\cos(x)+i\\sin(x)\\right) = -\\sin(x)+i\\cos(x) = i\\left(\\cos(x)+i\\sin(x)\\right)$$\nand both functions satisfy $f(0) = 1$: $$f(0) = e^{i(0)} = \\cos(0) + i\\sin(0) = 1$$\nHence, the functions are identical; that is, $e^{ix} = \\cos(x)+i\\sin(x) \\quad \\blacksquare$\nLemma 3 (Euler\u0026rsquo;s identity): $e^{\\pi i} = -1$ Proof.\n$$ \\begin{aligned} e^{\\pi i} \u0026amp;= \\cos(\\pi) + i\\sin(\\pi) \\\\ \u0026amp;= -1 + i(0)\\\\ \u0026amp;= -1\\\\ \u0026amp; \\blacksquare \\end{aligned} $$\nLemma 4: $\\ln(-1)=i \\pi$ Proof. Take the natural log of both sides of Euler\u0026rsquo;s identity: $$ e^{\\pi i} = -1 \\implies \\pi i = \\ln(-1) \\quad \\blacksquare$$\nSo then $\\ln(-23) = \\ln(-1) + \\ln(23) = \\pi i + \\ln(23)$.\nA Maclaurin series is a Taylor series about the point 0.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nIt\u0026rsquo;s just the $e^x$ expansion but with the powers of $i$ $(1, i, -1, -i, 1, \\ldots)$ as coefficients. We note that the only terms with $ \\pm i$ will have $n$ odd since $i^1=-i^3=i$, and vice versa for the terms without $i$. Also, we note that any two terms that are 2 apart will have opposite signs since they differ by $i^2=-1$.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nOn the complex plane, the $x$ axis represents all real numbers $\\mathbb{R}$, and the $y$ axis represents all imaginary numbers $bi$ for $b \\in \\mathbb{R}$.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/act/eulers_formula/","summary":"$e^{ix} = \\cos x + i \\sin x$. $e^{i\\pi} + 1 = 0$.","title":"Euler's Formula"},{"content":"My current 3x3 PB is 9.04s. Here\u0026rsquo;s a video of my reconstruction of it.\nReconstruction Date: 11/26/2021 1:23 PM Location: Sitterson Hall 1 Cube: MoYu WeiLong WR M 2021 3x3 Magnetic (MagLev) Scramble: F R2 B\u0026rsquo; L2 B U2 R2 D2 U2 F\u0026rsquo; R2 U L F D2 L U R\u0026rsquo; F Moves Step x y2 Inspection U\u0026rsquo; L\u0026rsquo; U2 L U\u0026rsquo; L\u0026rsquo; U L 1st pair U R U2\u0026rsquo; R\u0026rsquo; U2\u0026rsquo; f R f' 2nd pair U2\u0026rsquo; y\u0026rsquo; R\u0026rsquo; U R 3rd pair y\u0026rsquo; U2\u0026rsquo; R U2\u0026rsquo; R\u0026rsquo; U R U R' 4th pair R U R\u0026rsquo; U\u0026rsquo; R\u0026rsquo; F R F' OLL PLL skip U' AUF Couch facing the printer outside COMP 110 OH room\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/posts/cubing_pb/","summary":"Details about my current 3x3 speedcubing PB (personal best).","title":"3x3 PB: 9.04s"},{"content":"Before we talk about binary, let\u0026rsquo;s first go over the base-10 decimal system.\nDecimal (base-10) You might know that we count in base-10, the decimal counting system. What does that mean?\nBase-10 means there are 10 symbols that we use to count. These symbols are ${0, 1, 2, 3, 4, 5, 6, 7, 8, 9}$.\nHow does our number system work? For decimal numbers, we have a ones place, a tens place, a hundreds place, and a thousands place. 1, 10, 100, and 1000 are all powers of 10: $10^0,\\; 10^1,\\; 10^2,\\; 10^3$, respectively. In this system, 1337 is represented as $(1\\times 10^3) + (3\\times 10^2) + (3\\times 10^1) + (7\\times 10^0)$. That is, there is a 1 in the thousands place, a 3 in the hundreds place and in the tens place, and a 7 in the ones place. Decimals are represented in the same way. 2.1337 is $(2 \\times 10 ^ 0) + (1\\times10^{-1})+(3\\times10^{-2})+(3\\times 10^{-3})+(7\\times 10^{-4})$.\nThis is why we carry numbers when adding. If we do $1337 + 1337$, $(7\\times 10^0)+(7\\times 10^0)=14=(1\\times 10^1)+(4\\times 10^0)$, so we can put a 4 in the ones place and carry the $1$ over to the tens place.\nWhy is this useful? Consider this question: What is the largest 3-digit integer? Clearly, it\u0026rsquo;s 999, which comes from putting the greatest symbol into the 3 slots we have. But what if I ask what the largest 8-digit integer is? You would have to write eight 9\u0026rsquo;s. Surely, there\u0026rsquo;s a simpler, more general way to write the answer?\nConsider the number that is 1 greater, which is a 1 followed by 8 zeroes, $1\\underbrace{00\u0026hellip;0}_{8}$. What is the value of that number?\n☣ A very common mistake would be to say the highest place value in $1\\underbrace{000\u0026hellip;0}_{8}$ is $10^9$ because there are 9 digits. Here, we zero-index (start counting from 0).\nExercise: Write out the place values of each digit to make sure you understand how the $1$ has value $1 \\times 10^8$.\nThen the largest 8-digit integer is $10^8-1=99999999$. Now, you also know that the largest 32-digit integer is $10^{32}-1$ and so on. Let\u0026rsquo;s see an example of how this is useful.\nBinary (base-2) You\u0026rsquo;re reading this on a computer right now. Behind the scenes of any computer is code. And code consists of variables and variable types, such as int, float, and double.\nLet\u0026rsquo;s focus on int. In the C programming language, an unsigned int is a 32-bit data type that stores positive integers and 0. What\u0026rsquo;s the greatest number that can be stored in an unsigned int?\nLet\u0026rsquo;s now talk about binary, though you should have a pretty good understanding of it by now. \u0026ldquo;bi-\u0026rdquo; means two, so there are only two symbols in binary: 0 and 1. Here\u0026rsquo;s how we count from $0_{10}$ to $7_{10}$ in binary: 0, 1, 10, 11, 100, 101, 110, 111.\nThis follows the same pattern as base-10. In base-10, if we see a 9 and add 1 to it, we reset it to 0 and carry over a 1. In binary, we do the same but whenever we see a 1 and add 1 to it since we have only 2 symbols.\nAlso note that $111_2$ is $(1\\times 2^2) + (1\\times 2^1) + (1\\times 2^0) = 7_{10}$.\n$111_2$ is the greatest 3-bit number: does this match up with what we learned before? The greatest 3-bit number should be $2^3-1=7_{10}$, so it works! Addition and subtraction work the same way as in base-10. There\u0026rsquo;s a special trick for binary subtraction called 2\u0026rsquo;s complement. If you\u0026rsquo;re interested in that, read more about it here.\nThen the greatest number that can be stored in an unsigned int is $2^{32}-1 = 4294967295_{10}$.\nProof. The greatest 32-digit base-2 value is $\\underbrace{111\u0026hellip;1}_{32}$.\nConsider $\\underbrace{100\u0026hellip;0}_{33}$, the number that is 1 greater.\nIts value is $1 \\times 2^{32}$, hence $\\underbrace{111\u0026hellip;1}_{32} = 2^{32} - 1$. $\\blacksquare$\nHexadecimal (base-16) An alternative representation of $\\underbrace{111\u0026hellip;1}_{32}$ is 0xFFFFFFFF. The 0x prefix indicates hexadecimal, which is a base-16 counting system with symbols [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F]. Each hex digit represents 4 binary digits because $2^4=16$.\nApplication Why is this important?\nBoeing bug\nNow you understand why Boeing 787 airplanes have this issue! It\u0026rsquo;s a simple case of integer overflow. Computer memory is aligned in chunks, and in C and other programming languages, an unsigned int is specified to take up 32 bits or $\\frac{32}{8}=4$ bytes, no matter how large or small.\n$4294967295_{10} = \\underbrace{111\u0026hellip;1}_{32}$\ntakes up the same amount of space as does $1_{10} = \\underbrace{000\u0026hellip;1}_{32}$.\nWhy? If memory weren\u0026rsquo;t aligned, such that each number does not have leading zeroes to fill up the allocated 32 bits, how could you know where one number ends and another begins?\nOverflow Lastly, what would happen if we were to add 1 to the unsigned int $\\underbrace{111\u0026hellip;1}_{32}$, having just learned that\nan unsigned int cannot have a 33rd bit? The ALU of the computer adds 1, but the 33rd 1 is discarded since it doesn\u0026rsquo;t fit, leaving just $\\underbrace{000\u0026hellip;0}_{32} = 0$, an overflow error. Yikes.\n#include \u0026lt;stdio.h\u0026gt; int main() { unsigned int int_max = 0xFFFFFFFF; // F == 1111 == 15 in base-10 // hence 0xFFFFFFFF is 32 binary bits, all 1\u0026#39;s printf(\u0026#34;%u\\n\u0026#34;, int_max); printf(\u0026#34;%u\\n\u0026#34;, int_max + 1); } 4294967295 0 ","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/act/binary/","summary":"Binary counting system. Unrelated to ACT but nowhere else to put this post.","title":"Binary"},{"content":"logarithms.pdf\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/act/logarithms/","summary":"2-pg $\\LaTeX{}$ document.","title":"Logarithms"},{"content":"matrix_basics.pdf\n","permalink":"https://main--cheerful-mousse-b9d87b.netlify.app/teaching/act/matrix/","summary":"4-pg $\\LaTeX{}$ document.","title":"Basic Matrix Concepts"}]