Browse Source

Stop using images and use HTML/CSS to render stacks

margin-rework
Danila Fedorin 2 years ago
parent
commit
a7a6d7ff13
  1. 18
      assets/scss/stack.scss
  2. 115
      content/blog/stack_recursion.md
  3. BIN
      content/blog/stack_recursion/if_999_1_part1.png
  4. BIN
      content/blog/stack_recursion/if_999_1_part2.png
  5. BIN
      content/blog/stack_recursion/if_999_1_part3.png
  6. BIN
      content/blog/stack_recursion/recursion_all_part1.png
  7. BIN
      content/blog/stack_recursion/recursion_all_part2.png
  8. BIN
      content/blog/stack_recursion/recursion_all_part3.png
  9. BIN
      content/blog/stack_recursion/recursion_all_part4.png
  10. BIN
      content/blog/stack_recursion/recursion_base_part1.png
  11. BIN
      content/blog/stack_recursion/recursion_base_part2.png
  12. BIN
      content/blog/stack_recursion/recursion_base_part3.png
  13. BIN
      content/blog/stack_recursion/recursion_rec_part1.png
  14. BIN
      content/blog/stack_recursion/recursion_rec_part2.png
  15. BIN
      content/blog/stack_recursion/recursion_rec_part3.png
  16. BIN
      content/blog/stack_recursion/recursion_rec_part4.png
  17. BIN
      content/blog/stack_recursion/recursion_rec_part5.png
  18. BIN
      content/blog/stack_recursion/recursion_rec_part6.png
  19. BIN
      content/blog/stack_recursion/recursion_rec_part7.png
  20. BIN
      content/blog/stack_recursion/slide_example_part3.png
  21. 3
      layouts/shortcodes/stack.html
  22. 2
      layouts/shortcodes/stack_css.html
  23. 3
      layouts/shortcodes/stack_element.html

18
assets/scss/stack.scss

@ -0,0 +1,18 @@
@import "style.scss";
.stack {
display: flex;
flex-direction: column;
max-width: 10rem;
margin: auto;
@include bordered-block;
}
.stack-element {
text-align: center;
height: 1.5rem;
&:not(:last-child) {
border-bottom: $standard-border;
}
}

115
content/blog/stack_recursion/index.md → content/blog/stack_recursion.md

@ -4,6 +4,8 @@ date: 2020-03-06T17:56:55-08:00
tags: ["Programming Languages"]
---
{{< stack_css >}}
In CS 381, Programming Language Fundamentals, many students chose to
implement a stack based language. Such languages are very neat,
but two of the requirements for such languages may, at first,
@ -132,16 +134,31 @@ However, to stick by convention 4, we pretend that the stack is empty, and that
trying to manipulate it will result in an error. So, we can start by imagining
an empty stack, with an integer \\(x\\) on top:
{{< stack_image "if_999_1_part1.png" >}}
{{< stack >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}\(x\){{< /stack_element >}}
{{< /stack >}}
Then, \\(\\text{PushI} \\; 0\\) will push 0 onto the stack:
{{< stack_image "if_999_1_part2.png" >}}
{{< stack >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}0{{< /stack_element >}}
{{< stack_element >}}\(x\){{< /stack_element >}}
{{< /stack >}}
\\(\\text{Slide} \\; 1\\) will then remove the 1 element after the top element: \\(x\\).
We end up with the following stack:
{{< stack_image "slide_example_part3.png" >}}
{{< stack >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}0{{< /stack_element >}}
{{< /stack >}}
The function has finished running, and we maintain convention 3: the function's
return value is in place of its argument on the stack.
@ -194,20 +211,40 @@ Eq
Let's walk through this. We start with only the arguments
on the stack:
{{< stack_image "recursion_all_part1.png" >}}
{{< stack >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< /stack >}}
Then, \\(\\text{Offset} \\; 0\\) duplicates the first argument
(the number):
{{< stack_image "recursion_all_part2.png" >}}
{{< stack >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< /stack >}}
Next, 0 is pushed onto the stack:
{{< stack_image "recursion_all_part3.png" >}}
{{< stack >}}
{{< stack_element >}}0{{< /stack_element >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< /stack >}}
Finally, \\(\\text{Eq}\\) performs the equality check:
{{< stack_image "recursion_all_part4.png" >}}
{{< stack >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}true/false{{< /stack_element >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< /stack >}}
Great! Now, it's time to branch. What happens if "true" is on top of
the stack? In that case, we no longer need any more information.
@ -221,11 +258,21 @@ Slide 2
As before, we push the desired answer onto the stack:
{{< stack_image "recursion_base_part2.png" >}}
{{< stack >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}1{{< /stack_element >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< /stack >}}
Then, to follow convention 3, we must get rid of the arguments. We do this by using \\(\\text{Slide}\\):
{{< stack_image "recursion_base_part3.png" >}}
{{< stack >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}1{{< /stack_element >}}
{{< /stack >}}
Great! The \\(\\textbf{if}\\) branch is now done, and we're left with the correct answer on the stack.
Excellent!
@ -240,7 +287,12 @@ Offset 1
The result is as follows:
{{< stack_image "recursion_rec_part1.png" >}}
{{< stack >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< /stack >}}
Next, we must compute \\(n-1\\). This is pretty standard stuff:
@ -253,11 +305,21 @@ Add
Why these three instructions? Well, with the function now on the top of the stack, the number argument is somewhat
buried, and thus, we need to use \\(\\text{Offset} \\; 1\\) to get to it:
{{< stack_image "recursion_rec_part2.png" >}}
{{< stack >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< /stack >}}
Then, we push a negative number, and add it to to the number on top. We end up with:
{{< stack_image "recursion_rec_part3.png" >}}
{{< stack >}}
{{< stack_element >}}\(n-1\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< /stack >}}
Finally, we have our arguments in order as per convention 2. To follow convention 1, we must
now push the function onto the top of the stack:
@ -268,7 +330,13 @@ Offset 1
The stack is now as follows:
{{< stack_image "recursion_rec_part4.png" >}}
{{< stack >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< stack_element >}}\(n-1\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< /stack >}}
Good! With the preparations for the function call now complete, we take
the leap:
@ -284,7 +352,12 @@ will be removed from the stack and replaced with the result of the function
as per convention 2. The rest of the stack will remain untouched as
per convention 4. We thus expect the stack to look as follows:
{{< stack_image "recursion_rec_part5.png" >}}
{{< stack >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}\((n-1)!\){{< /stack_element >}}
{{< stack_element >}}\(n\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< /stack >}}
We're almost there! What's left is to perform the multiplication (we're
safe to destroy the argument now, since we will not be needing it after
@ -298,12 +371,22 @@ Slide 1
The multiplication leaves us with \\(n(n-1)! = n!\\) on top of the stack,
and the function argument below it:
{{< stack_image "recursion_rec_part6.png" >}}
{{< stack >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}\(n!\){{< /stack_element >}}
{{< stack_element >}}factorial{{< /stack_element >}}
{{< /stack >}}
We then use \\(\\text{Slide}\\) so that only the factorial is on the
stack, satisfying convention 3:
{{< stack_image "recursion_rec_part7.png" >}}
{{< stack >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}{{< /stack_element >}}
{{< stack_element >}}\(n!\){{< /stack_element >}}
{{< /stack >}}
That's it! We have successfully executed the recursive case. The whole
function is now as follows:

BIN
content/blog/stack_recursion/if_999_1_part1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
content/blog/stack_recursion/if_999_1_part2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

BIN
content/blog/stack_recursion/if_999_1_part3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
content/blog/stack_recursion/recursion_all_part1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
content/blog/stack_recursion/recursion_all_part2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

BIN
content/blog/stack_recursion/recursion_all_part3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
content/blog/stack_recursion/recursion_all_part4.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

BIN
content/blog/stack_recursion/recursion_base_part1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
content/blog/stack_recursion/recursion_base_part2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

BIN
content/blog/stack_recursion/recursion_base_part3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
content/blog/stack_recursion/recursion_rec_part1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

BIN
content/blog/stack_recursion/recursion_rec_part2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/stack_recursion/recursion_rec_part3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/stack_recursion/recursion_rec_part4.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
content/blog/stack_recursion/recursion_rec_part5.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
content/blog/stack_recursion/recursion_rec_part6.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
content/blog/stack_recursion/recursion_rec_part7.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
content/blog/stack_recursion/slide_example_part3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

3
layouts/shortcodes/stack.html

@ -0,0 +1,3 @@
<div class="stack">
{{ .Inner }}
</div>

2
layouts/shortcodes/stack_css.html

@ -0,0 +1,2 @@
{{ $style := resources.Get "scss/stack.scss" | resources.ToCSS | resources.Minify }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

3
layouts/shortcodes/stack_element.html

@ -0,0 +1,3 @@
<div class="stack-element">
{{ .Inner }}
</div>
Loading…
Cancel
Save