|
|
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.1.1">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2021-05-05T23:21:43-06:00</updated><id>http://localhost:4000/feed.xml</id><entry><title type="html">UEFI Development On x86 With EDK2</title><link href="http://localhost:4000/2021/04/18/uefi-development-environment/" rel="alternate" type="text/html" title="UEFI Development On x86 With EDK2" /><published>2021-04-18T00:00:00-06:00</published><updated>2021-04-18T00:00:00-06:00</updated><id>http://localhost:4000/2021/04/18/uefi-development-environment</id><content type="html" xml:base="http://localhost:4000/2021/04/18/uefi-development-environment/"><p>I made this blog so I could remember how to do stuff that had instructions spread around the internet.
|
|
|
So here is how I setup my environment for developing EFI applications.</p>
|
|
|
|
|
|
<h2 id="requirements">Requirements</h2>
|
|
|
|
|
|
<p>On Artix or other Arch-based distros like Manjaro I installed the following packages: <code class="language-plaintext highlighter-rouge">gcc nasm iasl</code></p>
|
|
|
|
|
|
<p>Here is what the packages do:</p>
|
|
|
|
|
|
<ul>
|
|
|
<li>GCC is obviously the GNU Compiler Collection and it allows us to compile C code to machine code.</li>
|
|
|
<li>NASM stands for Netwide Assembler. It is an assembler and disassembler for 32 and 64 bit Intel x86 platforms.</li>
|
|
|
<li>IASL stands for the ACPI Source Language Compiler/Decompiler. This will compile any ACPI calls to our local machine’s code.</li>
|
|
|
</ul>
|
|
|
|
|
|
<p>We need all these packages to start our (U)EFI journey.
|
|
|
Now that these are installed, let’s setup our environment.</p>
|
|
|
|
|
|
<h2 id="building-edk2">Building EDK2</h2>
|
|
|
|
|
|
<p>I used the stable/202011 branch as that is latest stable version of the EDK2 project.</p>
|
|
|
|
|
|
<p>So first let’s pull the project:</p>
|
|
|
|
|
|
<p><code class="language-plaintext highlighter-rouge">git clone https://github.com/tianocore/edk2.git</code></p>
|
|
|
|
|
|
<p>Now, let’s fetch the tags and switch to the latest stable version:</p>
|
|
|
|
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cd edk2
|
|
|
git fetch
|
|
|
git checkout stable/202011
|
|
|
</code></pre></div></div>
|
|
|
|
|
|
<p>Perfect! We’re on stable now! Let’s grab all our submodules: <code class="language-plaintext highlighter-rouge">git submodule update --init</code></p>
|
|
|
|
|
|
<p>This will take a bit the first time you do it. But no fear, once that’s done, we can finally build the base tools.</p>
|
|
|
|
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>make -C BaseTools
|
|
|
export EDK_TOOLS_PATH=$HOME/Documents/edk2/BaseTools
|
|
|
. edksetup.sh BaseTools
|
|
|
</code></pre></div></div>
|
|
|
|
|
|
<p>Notice we source a file with <code class="language-plaintext highlighter-rouge">.</code> before continuing. This is needed to load some tools and options into our shell for later. The environment variable <code class="language-plaintext highlighter-rouge">EDK_TOOLS_PATH</code> is set so that EDK knows where to find itself later. Now that everything is loaded up, we can modify a config file located at <code class="language-plaintext highlighter-rouge">Conf/target.txt</code>.</p>
|
|
|
|
|
|
<p>The most important options are these, feel free to append them to the end of the file; there is no default value for them.</p>
|
|
|
|
|
|
<pre class="file">
|
|
|
ACTIVE_PLATFORM = MdeModulePkg/MdeModulePkg.dsc
|
|
|
TOOL_CHAIN_TAG = GCC5
|
|
|
# for 64-bit development
|
|
|
TARGET_ARCH = X64
|
|
|
# for 32-bit development
|
|
|
TARGET_ARCH = IA32
|
|
|
# for 32 and 64-bit development
|
|
|
TARGET_ARCH = IA32 X64
|
|
|
|
|
|
# set multithreading to 1 + (2 x # of cores)
|
|
|
MAX_CONCURRENT_THREAD_NUMBER = 9
|
|
|
</pre>
|
|
|
|
|
|
<p>There are other options, but I don’t know about them much, so I’m just sticking with this for now.</p>
|
|
|
|
|
|
<p>Finally, after all this work, we can build some .efi files. Let’s compile the <code class="language-plaintext highlighter-rouge">Helloworld.efi</code> file!
|
|
|
Simply run the <code class="language-plaintext highlighter-rouge">build</code> command in the terminal.
|
|
|
You can find your compiled EFI files by running this <code class="language-plaintext highlighter-rouge">ls</code> command:</p>
|
|
|
|
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ls Build/MdeModule/DEBUG_*/*/HelloWorld.efi
|
|
|
</code></pre></div></div>
|
|
|
|
|
|
<p>This will show all HelloWorld.efi files for all architectures and toolchains (if you decide to change them).</p>
|
|
|
|
|
|
<h2 id="running-in-uefi-shell">Running In UEFI Shell</h2>
|
|
|
|
|
|
<p>Once all this is complete, you will want to run your EFI files.
|
|
|
To do so, let’s first add an EFI shell to use at boot.
|
|
|
This will appear as an option in your bootloader, like GRUB, which is what I will show documentation for in this article.</p>
|
|
|
|
|
|
<p>So, first thing is first,
|
|
|
<a href="https://github.com/tianocore/edk2/blob/UDK2018/ShellBinPkg/UefiShell/X64/Shell.efi?raw=true">download and EFI shell file</a>.
|
|
|
Second, move it to a partition (FAT formatted) which can be used for the UEFI.
|
|
|
On my Linux system, this is /boot. On others there may be no FAT filesystem so attach a USB and format it as FAT.
|
|
|
Third, add the <code class="language-plaintext highlighter-rouge">EFI Shell</code> option to your grub boot file.
|
|
|
Substitute hdX with the right hard drive (I did it with trial and error) as when it doesn’t work I would hit ‘e’ on grub and add the <code class="language-plaintext highlighter-rouge">ls</code> GRUB command.
|
|
|
Substitute the gptX with the correct partition, or msdosX if it is a DOS formatted partition table.
|
|
|
My <code class="language-plaintext highlighter-rouge">Shell.efi</code> was placed in /boot/EFI/.</p>
|
|
|
|
|
|
<p><label>/etc/grub.d/40_custom</label></p>
|
|
|
<pre class="file">
|
|
|
menuentry "EFI Shell" {
|
|
|
insmod part_gpt
|
|
|
insmod chain
|
|
|
insmod fat
|
|
|
set root='(hd4,gpt2)'
|
|
|
chainloader /EFI/Shell.efi
|
|
|
}
|
|
|
</pre>
|
|
|
|
|
|
<p>Now regenerate your grub configuration file with <code class="language-plaintext highlighter-rouge">grub-update</code> (Debian-based) or <code class="language-plaintext highlighter-rouge">grub-mkconfig -o /boot/grub/grub.cfg</code> (Other).</p>
|
|
|
|
|
|
<p>You’ll know if your shell is working if you see the following text on boot into the EFI shell:</p>
|
|
|
|
|
|
<pre class="terminal">
|
|
|
UEFI Interactive Shell v2.1
|
|
|
EDK II
|
|
|
UEFI v2.4 (EDI II, 0x000100000)
|
|
|
Mapping table:
|
|
|
...
|
|
|
Shell&gt;
|
|
|
</pre>
|
|
|
|
|
|
<h2 id="running-hello-world">Running Hello World</h2>
|
|
|
|
|
|
<p>When we run our <code class="language-plaintext highlighter-rouge">ls</code> command from earlier, remember we saw our <code class="language-plaintext highlighter-rouge">HelloWorld.efi</code> file.
|
|
|
Let’s move this file somewhere useful, like for me, <code class="language-plaintext highlighter-rouge">/boot</code>.
|
|
|
Then, once we’re in our UEFI shell we can run commands:</p>
|
|
|
|
|
|
<pre class="terminal">
|
|
|
Shell&gt; .\HelloWorld.efi
|
|
|
UEFI Hello World!
|
|
|
Shell&gt;
|
|
|
</pre>
|
|
|
|
|
|
<p>And that… All that is how you set up a UEFI development environment.</p>
|
|
|
|
|
|
<h2 id="conclusion">Conclusion</h2>
|
|
|
|
|
|
<p>This took me a long time to figure out.
|
|
|
I needed to scrounge resources from around the internet,
|
|
|
and I had to look at my config files for hours to make sure that I hadn’t missed a step that I did without thinking.
|
|
|
I hope this will be useful to you and my future self.</p>
|
|
|
|
|
|
<p>Happy UEFI hacking :)</p></content><author><name></name></author><summary type="html">I made this blog so I could remember how to do stuff that had instructions spread around the internet. So here is how I setup my environment for developing EFI applications.</summary></entry><entry><title type="html">The “Quiz Your Friends” XSS Exploit</title><link href="http://localhost:4000/2021/04/04/quiz-your-friends-xss/" rel="alternate" type="text/html" title="The “Quiz Your Friends” XSS Exploit" /><published>2021-04-04T00:00:00-06:00</published><updated>2021-04-04T00:00:00-06:00</updated><id>http://localhost:4000/2021/04/04/quiz-your-friends-xss</id><content type="html" xml:base="http://localhost:4000/2021/04/04/quiz-your-friends-xss/"><p>Note: I have alerted the administrators of this site multiple times about this vulnerability.
|
|
|
One email was sent many years ago, which is more than enough time for <a href="https://en.wikipedia.org/wiki/Responsible_disclosure">responsible disclosure</a>.</p>
|
|
|
|
|
|
<p>Update: They have fixed the vulnerability as of the day of release for this article.</p>
|
|
|
|
|
|
<h2 id="background">Background</h2>
|
|
|
|
|
|
<p>In early 2014, when my “programming” skills consisted of editing web pages with inspect element, I was sent a link from an old friend in a town about 3 hours away.
|
|
|
This was a link to a quiz about them.
|
|
|
I had to answer as many questions right as I could about them and I got a score at the end based on my answers.
|
|
|
It seemed fun enough, so I went for it.
|
|
|
In the following weeks this quiz website became quite a trend amongst my friend group as we all started making quizes to see how well we all knew eachother.</p>
|
|
|
|
|
|
<p>A few weeks into this trend, I was staying at a friends’ place and told him about this site,
|
|
|
so he goes and creates his own quiz and sends it to all his friends, group chats, Google Plus groups, et cetera.</p>
|
|
|
|
|
|
<h2 id="hackerman">Hackerman</h2>
|
|
|
|
|
|
<p>While filling in my friend’s survey I thought it would be
|
|
|
funny for them to know it is me without anyone else knowing.
|
|
|
We were young and had <code class="language-plaintext highlighter-rouge">Inspect Element</code>ed a few things together,
|
|
|
so it was a safe bet that an HTML joke would let them know.</p>
|
|
|
|
|
|
<p>I decided to write my name like so: <code class="language-plaintext highlighter-rouge">&lt;b&gt;Steve&lt;/b&gt;</code>.
|
|
|
Steve is in reference to the <a href="https://minecraft.gamepedia.com/Player">main character</a> in the video game Minecraft.</p>
|
|
|
|
|
|
<figure>
|
|
|
<img src="/assets/img/qyf-xss/2-bold.png" />
|
|
|
<figcaption>
|
|
|
<p>Me typing in my name as <span class="mono">&lt;b&gt;Steve&lt;/b&gt;</span>.</p>
|
|
|
</figcaption>
|
|
|
</figure>
|
|
|
|
|
|
<p>Now in theory this should have shown in in the leaderboard as: “&lt;b&gt;Steve&lt;/b&gt;”
|
|
|
However, to my horror and excitement, I saw this in the leaderboard:</p>
|
|
|
|
|
|
<figure>
|
|
|
<img src="/assets/img/qyf-xss/3-steve-board.png" />
|
|
|
<figcaption>
|
|
|
<p><span class="mono">&lt;b&gt;Steve&lt;/b&gt;</span> displaying in the leaderboard as bold text: <b>Steve</b></p>
|
|
|
</figcaption>
|
|
|
</figure>
|
|
|
|
|
|
<p>The text “Steve” showed up <strong>in bold</strong> on the leaderboard.
|
|
|
This told me all I needed to know.
|
|
|
How did this happen? You might wonder.</p>
|
|
|
|
|
|
<h3 id="server-side-validation">Server-Side Validation</h3>
|
|
|
|
|
|
<p>Here is a great demonstration why you should do most of your validation on the server side.
|
|
|
As a user, I can edit any of the HTML, CSS, or Javascript your server serves to me.</p>
|
|
|
|
|
|
<p>Quiz your friends uses the <code class="language-plaintext highlighter-rouge">maxlength=20</code> HTML attribute on the name input field.
|
|
|
Imagine trying to fit in a script tag doing anything useful with 20 characters! Don’t forget that includes the <code class="language-plaintext highlighter-rouge">&lt;script&gt;</code> tag.
|
|
|
That would leave 13 characters for Javascript.
|
|
|
Although I’m sure a genius would be able to <a href="https://code.golf/">code golf</a> that, I know I couldn’t.</p>
|
|
|
|
|
|
<p>Now obviously I can edit any HTML that a server has sent to me.
|
|
|
If I open up my inspect element window, I can go ahead and change that <code class="language-plaintext highlighter-rouge">maxlength</code> attribute to anything I want.
|
|
|
Let’s change it to 100!</p>
|
|
|
|
|
|
<figure>
|
|
|
<img src="/assets/img/qyf-xss/5-maxlength.png" alt="An image of the Quiz Your Friends name input field with inspect element. THe code reads: &lt;font class=&quot;style6&quot;&gt;&lt;input class=&quot;inputbutton&quot; name=&quot;takername&quot; type=&quot;text&quot; id=&quot;takername&quot; maxlength=&quot;20&quot; width=&quot;425&quot; placeholder=&quot;Your First Name&quot; style=&quot;text-align: center; text-decoration:inherit; font-size:38px;&quot; tabindex=&quot;-1&quot;&gt;&lt;/font&gt;" />
|
|
|
<figcaption>
|
|
|
Manually changing the maxlength attribute.
|
|
|
</figcaption>
|
|
|
</figure>
|
|
|
|
|
|
<p>In theory, there is a way that a site can stop people from just putting in their name of any length: server-side validation.
|
|
|
The server <em>could</em> check to see if the input is too long and reject it if it is.
|
|
|
The Quiz My Friends server has <em>no such checks in place</em>.
|
|
|
Therefore, I can send an almost arbitrary load to them.
|
|
|
Being able to send something potentially very large (more than a few megabytes) is a vulnerability of its own.
|
|
|
Imagine being able to send entire executable programs as your “name” in one of these quizzes?</p>
|
|
|
|
|
|
<h2 id="javascript">Javascript</h2>
|
|
|
|
|
|
<p>So I went on my merry way thinking about ways to use malicious javascript.
|
|
|
Then, I thought that might be mean, so I decided to warn users instead.
|
|
|
I filled in the name with a script tag and a call to <code class="language-plaintext highlighter-rouge">alert()</code> to warn the user about this site.
|
|
|
I edited the max-length attribute to allow me to type a long string like this:</p>
|
|
|
|
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;script&gt;alert("Don't use this site. It is not secure!");&lt;/script&gt;
|
|
|
</code></pre></div></div>
|
|
|
|
|
|
<p>Sure enough, I got a text from my friend saying: “Tait! I know this is you, why would you do that!”
|
|
|
A bit salty, but who wouldn’t be.</p>
|
|
|
|
|
|
<h2 id="cross-site-scripting-xss">Cross-Site Scripting (XSS)</h2>
|
|
|
|
|
|
<p>As my final act, I decided to use a cross-site script that I could edit and have it load with new changes at any time.</p>
|
|
|
|
|
|
<p>I set this as my name:</p>
|
|
|
|
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;script src="https://tait.tech/assets/js/hacked.js"&gt;&lt;/script&gt;
|
|
|
</code></pre></div></div>
|
|
|
|
|
|
<p>This script pops up a warning, telling the user that the site is insecure and it is now redirecting to an article about the attack.
|
|
|
This script redirects to an <a href="https://tait.tech/2020/04/25/xss/">older post I made</a> about how XSS works.</p>
|
|
|
|
|
|
<h2 id="conclusion">Conclusion</h2>
|
|
|
|
|
|
<p>Watch out for sketchy websites that may be vulnerable to malicious or insecure sites which are ripe for abuse.
|
|
|
Always check that you are using an encrypted connection, HTTPS.
|
|
|
And if you see any messages warning you that a site is not secure and redirecting you to some random site…
|
|
|
Take their info with a grain of salt.</p>
|
|
|
|
|
|
<p>Happy Hacking, literally :)</p></content><author><name></name></author><summary type="html">Note: I have alerted the administrators of this site multiple times about this vulnerability. One email was sent many years ago, which is more than enough time for responsible disclosure.</summary></entry><entry><title type="html">Lichess Accessibility</title><link href="http://localhost:4000/2021/01/31/lichess/" rel="alternate" type="text/html" title="Lichess Accessibility" /><published>2021-01-31T00:00:00-07:00</published><updated>2021-01-31T00:00:00-07:00</updated><id>http://localhost:4000/2021/01/31/lichess</id><content type="html" xml:base="http://localhost:4000/2021/01/31/lichess/"><p>I wanted to play chess with somebody who used a screen reader, without requiring a screen reader myself;
|
|
|
some sites, like QuintenC’s Playroom have a rather poor visual interface for anyone who would like the play the game visually.
|
|
|
<a href="https://lichess.org">Lichess</a> is an free and open-source website for chess players;
|
|
|
it bridges this gap by having two “modes” on the site:
|
|
|
standard mode and accessibility mode.</p>
|
|
|
|
|
|
<h2 id="accessibility-mode">Accessibility Mode</h2>
|
|
|
|
|
|
<p>Accessibility mode is far from perfect on lichess.org.
|
|
|
That said, the idea to separate the sites into different modes was a good call.
|
|
|
It stops the inevitable “this would work well for screen readers but cause visual issues” shenanigans,
|
|
|
or, vice-verse “this looks great but it might be weird with a screen reader”.
|
|
|
This way all the things which affect the visual interface are in one place,
|
|
|
and all things which affect the non-visual user interface (NVUI) are written in another.</p>
|
|
|
|
|
|
<p>In my quest to play chess with visual and non-visual players with both having optimal experiences, I tried Lichess with my friend from <a href="https://melly.tech/">melly.tech</a>.
|
|
|
She pointed out that the method to interface with the board previously was rather poor.
|
|
|
This is because it required an “enter” at the end of each command and the commands tended to read out a row or column of a chessboard not just an individual square.</p>
|
|
|
|
|
|
<p>For example, to list all pieces (or lack thereof) on the e file, I would type the command:</p>
|
|
|
|
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>s e
|
|
|
</code></pre></div></div>
|
|
|
|
|
|
<p>Although this seems good in theory, and it’s great when you need an entire file, there was no way to get only one square.
|
|
|
In addition, imagine typing to navigate around the board:</p>
|
|
|
|
|
|
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>s e1
|
|
|
s f1
|
|
|
s e2
|
|
|
</code></pre></div></div>
|
|
|
|
|
|
<p>For the inexperienced player, it seems to be more convenient to bind some keys and have the user bounce to various buttons, which they can push to say “I want to move this piece”.
|
|
|
This is what I was told anyway.
|
|
|
So I want to work making a system so you could use the following basic keys:</p>
|
|
|
|
|
|
<ul>
|
|
|
<li>left/right/up/down arrow: move on the board.</li>
|
|
|
<li>k/q/r/b/n/p: move to next piece represented by its character in chess notation.</li>
|
|
|
<li>shift + k/q/r/b/n/p: move back to the last piece represented by its character in chess notation.</li>
|
|
|
<li>click/enter/space: select piece to move.</li>
|
|
|
<li>click/enter/space again: move piece here.</li>
|
|
|
<li>m: show where I can move with this piece.</li>
|
|
|
<li>shift+m: show where I can capture with this piece.</li>
|
|
|
<li>1-8: move to rank 1-8; stay on same file.</li>
|
|
|
<li>shift + 1-8: move to file a-h; stay on same rank.</li>
|
|
|
</ul>
|
|
|
|
|
|
<p>This gives a pretty solid basis for playing the game.
|
|
|
One caveat is after you have moved a pawn all the way to the farthest rank, only the destination tile will accept your promotion choice.
|
|
|
Therefore, all the other keys still work on other square, but if you are on the destination square of a promotion q/r/b/n will promote your piece, not jump you to the next/previous one.</p>
|
|
|
|
|
|
<p>This pull request was merged earlier this month:</p>
|
|
|
|
|
|
<h2 id="more-to-come">More To Come</h2>
|
|
|
|
|
|
<p>Next thing I want to do is implement the analysis board.
|
|
|
Right now it is not accessible whatsoever.</p>
|
|
|
|
|
|
<h2 id="help-me">Help Me</h2>
|
|
|
|
|
|
<p>If you are a screen reader user or know about accessibility and want to help make Lichess an awesome chess site for sighted and unsighted players alike,
|
|
|
then send me an email at <a href="mailto:tait@tait.tech">tait@tait.tech</a> and I’ll BCC you once I start testing the analysis board.</p>
|
|
|
|
|
|
<p>Happy hacking, y’all!</p></content><author><name></name></author><summary type="html">I wanted to play chess with somebody who used a screen reader, without requiring a screen reader myself; some sites, like QuintenC’s Playroom have a rather poor visual interface for anyone who would like the play the game visually. Lichess is an free and open-source website for chess players; it bridges this gap by having two “modes” on the site: standard mode and accessibility mode.</summary></entry><entry><title type="html">How to Deploy Lichess’s Lila With Nginx</title><link href="http://localhost:4000/2020/12/20/deploy-lichess/" rel="alternate" type="text/html" title="How to Deploy Lichess’s Lila With Nginx" /><published>2020-12-20T00:00:00-07:00</published><updated>2020-12-20T00:00:00-07:00</updated><id>http://localhost:4000/2020/12/20/deploy-lichess</id><content type="html" xml:base="http://localhost:4000/2020/12/20/deploy-lichess/"><p>I was getting ready to have a public test of some changes I made to <a href="https://lichess.org">lichess.org</a>’s <a href="https://lichess.org/source">open source chess platform</a>.
|
|
|
In preperation, I got my Let’s Encrypt certificates and nginx configurations setup…
|
|
|
and it wouldn’t work.
|
|
|
Here are some tips for myself and future Lichess developers.</p>
|
|
|
|
|
|
<h2 id="reasoning">Reasoning</h2>
|
|
|
|
|
|
<p>My pull request involves accessibility.
|
|
|
It will extend Lichess’s NVUI (Non-Visual User Interface) to be more accessible to beginner level chess players.
|
|
|
At the time of writing this, Lichess’s NVUI only supports searching pieces by type, rank and file.
|
|
|
It does not support any kind of interactive board.</p>
|
|
|
|
|
|
<p>I wanted to play chess with a friend of mine who uses a screen reader.
|
|
|
Even though Lichess does indeed have a separate rendering of the page for visually impaired users,
|
|
|
I have heard from a few people that it is not the best.</p>
|
|
|
|
|
|
<p>I don’t use a screen reader myself, so I thought having a public latest changes deployed server would work better for testing.
|
|
|
It would certainly work better than getting some of my less computer literate friends to connect to me via VSCode/VPN and view my local repository.</p>
|
|
|
|
|
|
<p>So here is how to deploy it:</p>
|
|
|
|
|
|
<h2 id="setup-a-development-environment">Setup a development environment</h2>
|
|
|
|
|
|
<p>This is described <a href="https://github.com/ornicar/lila/wiki/Lichess-Development-Onboarding">in Lichess’s documentation itself</a>.
|
|
|
I will not elaborate further as it is not necessary.</p>
|
|
|
|
|
|
<h2 id="setup-nginx">Setup nginx</h2>
|
|
|
|
|
|
<p>This is the part that stumps most people.
|
|
|
Getting a local development server usually works alright, but once you want to reverse proxy it for security and professionalism purposes, it get more interesting.</p>
|
|
|
|
|
|
<p>Here is the relevant portion of my nginx configuration for lila:</p>
|
|
|
|
|
|
<pre class="file">
|
|
|
server_name chess.tait.tech;
|
|
|
|
|
|
location / {
|
|
|
proxy_pass http://127.0.0.1:9663;
|
|
|
proxy_set_header Host $host;
|
|
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
|
proxy_set_header X-NginX-Proxy true;
|
|
|
proxy_set_header X-Real-IP $remote_addr;
|
|
|
}
|
|
|
</pre>
|
|
|
|
|
|
<p>This is the config for the lila-ws websocket subdomain:</p>
|
|
|
|
|
|
<pre class="file">
|
|
|
server_name ws.chess.tait.tech;
|
|
|
|
|
|
location / {
|
|
|
proxy_pass http://127.0.0.1:9664;
|
|
|
proxy_http_version 1.1;
|
|
|
proxy_set_header Upgrade $http_upgrade;
|
|
|
proxy_set_header Connection "upgrade";
|
|
|
}
|
|
|
</pre>
|
|
|
|
|
|
<p>You will need to deploy these on two virtual hosts.</p>
|
|
|
|
|
|
<h2 id="lila">Lila</h2>
|
|
|
|
|
|
<p><a href="https://github.com/ornicar/lila/">Lila</a> is the name for the main chess server, we need to change a few settings. Here is my git diff for the <code class="language-plaintext highlighter-rouge">conf/base.conf</code> file:</p>
|
|
|
|
|
|
<pre class="file">
|
|
|
- domain = "localhost:9663"
|
|
|
- socket.domains = [ "localhost:9664" ]
|
|
|
+ domain = "chess.tait.tech"
|
|
|
+ socket.domains = [ "ws.chess.tait.tech" ]
|
|
|
asset.domain = ${net.domain}
|
|
|
- asset.base_url = "http://"${net.asset.domain}
|
|
|
+ asset.base_url = "https://"${net.asset.domain}
|
|
|
asset.minified = false
|
|
|
- base_url = "http://"${net.domain}
|
|
|
+ base_url = "https://"${net.domain}
|
|
|
</pre>
|
|
|
|
|
|
<h3 id="lila-ws">Lila-ws</h3>
|
|
|
|
|
|
<p><a href="https://github.com/ornicar/lila-ws/">Lila-ws</a> is the websocket component of Lila.</p>
|
|
|
|
|
|
<p>The most common complaint amongst aspiring Lichess developers is websockets not working.
|
|
|
They constantly get these ‘101’ responses from the websocket,
|
|
|
and it also seems that the websocket returns instead of staying in the ‘pending’ state as it should be.</p>
|
|
|
|
|
|
<p>Here is how to fix that (in diff format):</p>
|
|
|
|
|
|
<pre class="file">
|
|
|
-csrf.origin = "http://127.0.0.1:9000"
|
|
|
+csrf.origin = "https://chess.tait.tech"
|
|
|
</pre>
|
|
|
|
|
|
<p>You need to tell lila-ws where the websocket requests will be coming from. This is how to do that.</p>
|
|
|
|
|
|
<h2 id="conclusion">Conclusion</h2>
|
|
|
|
|
|
<p>This is not a long article, but just some notes for future me and Lila developers.</p></content><author><name></name></author><summary type="html">I was getting ready to have a public test of some changes I made to lichess.org’s open source chess platform. In preperation, I got my Let’s Encrypt certificates and nginx configurations setup… and it wouldn’t work. Here are some tips for myself and future Lichess developers.</summary></entry><entry><title type="html">Getting Pacaur Working on a Raspberry Pi 4 with Manjaro ARM or Arch Linux</title><link href="http://localhost:4000/2020/12/01/pacaur-rpi/" rel="alternate" type="text/html" title="Getting Pacaur Working on a Raspberry Pi 4 with Manjaro ARM or Arch Linux" /><published>2020-12-01T00:00:00-07:00</published><updated>2020-12-01T00:00:00-07:00</updated><id>http://localhost:4000/2020/12/01/pacaur-rpi</id><content type="html" xml:base="http://localhost:4000/2020/12/01/pacaur-rpi/"><p>I recently installed Manjaro ARM (based on Arch Linux ARM) on a Raspberry Pi 4.
|
|
|
I used some standard commands to start to add the <code class="language-plaintext highlighter-rouge">pacaur</code> package so I can easily retrieve <a href="https://wiki.archlinux.org/index.php/Arch_User_Repository">AUR packages</a> without needing to do it manually.
|
|
|
Unfortunately, there is a small problem with compiling this on ARM.</p>
|
|
|
|
|
|
<h2 id="always_inline">always_inline</h2>
|
|
|
|
|
|
<p>To setup the install for <code class="language-plaintext highlighter-rouge">pacaur</code>, I first needed to download <a href="https://aur.archlinux.org/packages/auracle-git">auracle-git</a> AUR package manually.
|
|
|
I ran into an error when compiling this package.</p>
|
|
|
|
|
|
<p>But first, my setup:</p>
|
|
|
<pre class="terminal">
|
|
|
$ git clone https://aur.archlinux.org/auracle-git
|
|
|
$ cd auracle-git
|
|
|
$ makepkg -sri
|
|
|
</pre>
|
|
|
|
|
|
<p>Around half way through compiling this project, I got this cryptic message telling me there was a “target specific option mismatch”…Whatever that means.
|
|
|
The full error is below, hopefully that helps my chances on the search engines.</p>
|
|
|
|
|
|
<pre class="terminal">
|
|
|
In file included from ../subprojects/abseil-cpp-20200225.2/absl/random/internal/randen_hwaes.cc:225:
|
|
|
/usr/lib/gcc/aarch64-unknown-linux-gnu/9.3.0/include/arm_neon.h: In function 'Vector128 {anonymous}::AesRound(const Vector128&amp;, const Vector128&amp;)':
|
|
|
/usr/lib/gcc/aarch64-unknown-linux-gnu/9.3.0/include/arm_neon.h:12452:1: error: inlining failed in call to always_inline 'uint8x16_t vaesmcq_u8(uint8x16_t)': target specific option mismatch
|
|
|
12452 | vaesmcq_u8 (uint8x16_t data)
|
|
|
</pre>
|
|
|
|
|
|
<p>Luckily, there is a very easy fix for this.
|
|
|
The user redfish <a href="https://aur.archlinux.org/packages/auracle-git#comment-762117">helpfully pointed out</a>
|
|
|
on the <code class="language-plaintext highlighter-rouge">auracle-git</code> package page that you need to add a special make option to your <code class="language-plaintext highlighter-rouge">/etc/make.conf</code> file to make this work.</p>
|
|
|
|
|
|
<p>His solution, as commented is like so:</p>
|
|
|
|
|
|
<blockquote>
|
|
|
<p>If you get this error when building for ARM aarch64:</p>
|
|
|
|
|
|
<p>(insert error message from before)</p>
|
|
|
|
|
|
<p>Then check that in /etc/makepkg.conf CFLAGS and CXXFLAGS have the +crypto suffix in -march flag, like -march=armv8-a+crypto (the base identifier may very depending on your hardware)</p>
|
|
|
</blockquote>
|
|
|
|
|
|
<p>Basically, there is a file on Linux: <code class="language-plaintext highlighter-rouge">/etc/makepkg.conf</code> which tells your computer how to compile <em>all</em> programs on the system.
|
|
|
By default the Manjaro ARM (RPi4) edition has the following relevant lines in <code class="language-plaintext highlighter-rouge">makepkg.conf</code>.</p>
|
|
|
|
|
|
<pre class="file">
|
|
|
CFLAGS="-march=armv8-a -O2 -pipe -fstack-protector-strong -fno-plt"
|
|
|
CXXFLAGS="-march=armv8-a -O2 -pipe -fstack-protector-strong -fno-plt"
|
|
|
</pre>
|
|
|
|
|
|
<p>What Mr. redfish is telling us is that we must add ‘+crypto’ to the end of the -march compiler flag so that our compiler will know how to inline that pesky vaesmcq_u8 function.</p>
|
|
|
|
|
|
<p>So in the end, your <code class="language-plaintext highlighter-rouge">makepkg.conf</code>’s relevant lines will look like so:</p>
|
|
|
<pre class="file">
|
|
|
CFLAGS="-march=armv8-a+crypto -O2 -pipe -fstack-protector-strong -fno-plt"
|
|
|
CXXFLAGS="-march=armv8-a+crypto -O2 -pipe -fstack-protector-strong -fno-plt"
|
|
|
</pre>
|
|
|
|
|
|
<h2 id="why">Why?</h2>
|
|
|
|
|
|
<p>Redfish continues:</p>
|
|
|
|
|
|
<blockquote>
|
|
|
<p>Build of abseil-cpp package works because it uses CMake which adds the correct -march flag regardless of makepkg.conf, whereas when abseil-cpp is build as a subproject within this package, it uses meson, which does not add the flag and thus fails with the above error.</p>
|
|
|
</blockquote>
|
|
|
|
|
|
<p>In other words, one of the dependencies pulled in with auracle is not compiling without this special compiler flag enabled.</p>
|
|
|
|
|
|
<h2 id="conclusion">Conclusion</h2>
|
|
|
|
|
|
<p>Thanks to redfish for posting this solution to the forums!
|
|
|
Would’ve been quite the rabbit hole for me to figure out how to do that.
|
|
|
In fact, it is very likely I would have never figured that one out.</p>
|
|
|
|
|
|
<p>After this issue is resolved, the installation of <code class="language-plaintext highlighter-rouge">pacaur</code> goes as expected. Nice and easy!
|
|
|
Pacuar will compile on any architecture so it’s smooth sailing from here.</p>
|
|
|
|
|
|
<p>Happy hacking!</p></content><author><name></name></author><summary type="html">I recently installed Manjaro ARM (based on Arch Linux ARM) on a Raspberry Pi 4. I used some standard commands to start to add the pacaur package so I can easily retrieve AUR packages without needing to do it manually. Unfortunately, there is a small problem with compiling this on ARM.</summary></entry><entry><title type="html">ZFS NAS Box, Part 2</title><link href="http://localhost:4000/2020/11/15/nas2/" rel="alternate" type="text/html" title="ZFS NAS Box, Part 2" /><published>2020-11-15T00:00:00-07:00</published><updated>2020-11-15T00:00:00-07:00</updated><id>http://localhost:4000/2020/11/15/nas2</id><content type="html" xml:base="http://localhost:4000/2020/11/15/nas2/"><p>Back in <a href="/2020/04/12/nas1/">part one of my NAS project</a> I discussed how I wanted to set up my hardware.
|
|
|
Today, I set up the NAS (almost).</p>
|
|
|
|
|
|
<p>There were some hiccup along the way, like learning that M.2 slots can disable some of your SATA ports or waiting a month for a host bus adapter to come in from China.</p>
|
|
|
|
|
|
<h2 id="why-did-it-take-so-long">Why Did It Take So Long</h2>
|
|
|
|
|
|
<p>So it turns out I was going to spend a lot more on this project than I originally anticipated.
|
|
|
I ended up getting a server machine instead of a sleek NAS box.
|
|
|
Here are some of the quick specs:</p>
|
|
|
|
|
|
<ul>
|
|
|
<li>Standard ATX case by Thermaltake.</li>
|
|
|
<li>LSI 9211-8i.</li>
|
|
|
<li>The cheapest HDMI graphics card I could find on Kijiji.</li>
|
|
|
<li>6x 3TB Segate HDDs.</li>
|
|
|
<li>1x 250G Kingston SSD.</li>
|
|
|
<li>AMD Ryzen 5 3600.</li>
|
|
|
<li>MSI B450 Gaming Plus Max.</li>
|
|
|
<li>2x 8GB FlareX 3200Mhz RAM.</li>
|
|
|
<li>1x 16GB Kingston 3200Mhz RAM.</li>
|
|
|
</ul>
|
|
|
|
|
|
<h2 id="zfs">ZFS</h2>
|
|
|
|
|
|
<p>This is how I decided to configure my storage pools.
|
|
|
In hindsight, this was not the best choice for upgrading.
|
|
|
I may change it in the future to a 0+1 setup, but it works for now.</p>
|
|
|
|
|
|
<p>I have 5x 3TB in a RAIDZ2 with one drive not attached for redundancy’s sake.
|
|
|
How does one setup a ZFS pool. Check this out:</p>
|
|
|
|
|
|
<pre class="terminal">
|
|
|
# zpool create poolname raidz2 \
|
|
|
/dev/by-id/blahblahblah1 \
|
|
|
/dev/by-id/blahblahblah2 \
|
|
|
/dev/by-id/blahblahblah3 \
|
|
|
/dev/by-id/blahblahblah4 \
|
|
|
/dev/by-id/blahblahblah5
|
|
|
</pre>
|
|
|
|
|
|
<p>And zippidy-doo! We’ve got a ZFS pool!
|
|
|
We can check its status with <code class="language-plaintext highlighter-rouge">zpool status</code>.</p>
|
|
|
|
|
|
<pre class="terminal">
|
|
|
$ zfs status
|
|
|
pool: raid
|
|
|
state: ONLINE
|
|
|
scan: scrub in progress since Wed Nov 18 18:41:41 2020
|
|
|
1.84T scanned at 8.51G/s, 121G issued at 562M/s, 1.84T total
|
|
|
0B repaired, 6.45% done, 0 days 00:53:25 to go
|
|
|
config:
|
|
|
|
|
|
NAME STATE READ WRITE CKSUM
|
|
|
raid ONLINE 0 0 0
|
|
|
raidz2-0 ONLINE 0 0 0
|
|
|
ata-HGST_HUS724030ALA640_PN2234P8JTNMYY ONLINE 0 0 0
|
|
|
ata-HGST_HUS724030ALA640_PN2234P8JVSXTY ONLINE 0 0 0
|
|
|
ata-HGST_HUS724030ALA640_PN2234P8JXAS8Y ONLINE 0 0 0
|
|
|
ata-HGST_HUS724030ALA640_PN2234P8JXBARY ONLINE 0 0 0
|
|
|
ata-HGST_HUS724030ALA640_PN2234P8JXP77Y ONLINE 0 0 0
|
|
|
|
|
|
errors: No known data errors
|
|
|
</pre>
|
|
|
|
|
|
<p>I had run a scrub right before this, so there’s some extra detail in that.
|
|
|
This is really fun! I will be doing more home storage projects soon.
|
|
|
Perhaps Raspberry Pi NAS using all 4 USB ports to load SATA drives on it.
|
|
|
Now that would be fun!</p>
|
|
|
|
|
|
<h2 id="so-i-kinda-have-a-nas-now">So I Kinda Have A NAS Now…?</h2>
|
|
|
|
|
|
<p>So right now I can only copy files with <code class="language-plaintext highlighter-rouge">rsync</code>, <code class="language-plaintext highlighter-rouge">scp</code> and moving data via a physical drive.
|
|
|
The one major disadvantage this has is speed.</p>
|
|
|
|
|
|
<p>Due to this machine being connected directly outside my network and pulling DHCP like a normal router would, I need to send my data through the WAN connection to get my files to it.
|
|
|
This is rather unfortunate as my upload speed is capped at 20 megabits per second, despite my upload being in the 300+ range.</p>
|
|
|
|
|
|
<p>Part 3 will involve a LAN card so I can connect both to the DHCP server of my ISP and my local router.
|
|
|
This way my transfer speeds should be in the range of 1 gigabit per second.
|
|
|
This will make my life much easier, at least on the local network.</p>
|
|
|
|
|
|
<h2 id="fun-fact">Fun Fact!</h2>
|
|
|
|
|
|
<p>Do not try to use the M.2 slot on a consumer motherboard where you are also using all the SATA ports.
|
|
|
On my consumer gaming motherboard, the SATA ports next to the M.2 slot became <em>disabled</em> when I attached the M.2 SSD.
|
|
|
I found this out form my motherboard documentation, which I read only after a week of thinking my motherboard itself was defective, and sending it in for repairs that did absolutely nothing.</p>
|
|
|
|
|
|
<h2 id="thoughts">Thoughts</h2>
|
|
|
|
|
|
<p>I like having all this space. I plan on using it up pretty fast, so I’m already looking at how to expand.
|
|
|
Hopefully that gives a decent overview of how I set up my drives.</p>
|
|
|
|
|
|
<p>Happy hacking!</p></content><author><name></name></author><summary type="html">Back in part one of my NAS project I discussed how I wanted to set up my hardware. Today, I set up the NAS (almost).</summary></entry><entry><title type="html">Curiosity</title><link href="http://localhost:4000/2020/10/26/curiosity/" rel="alternate" type="text/html" title="Curiosity" /><published>2020-10-26T00:00:00-06:00</published><updated>2020-10-26T00:00:00-06:00</updated><id>http://localhost:4000/2020/10/26/curiosity</id><content type="html" xml:base="http://localhost:4000/2020/10/26/curiosity/"><p>Curiosity is fundamental to a deep understanding of any subject.
|
|
|
Masters, Ph.Ds, and other fancy name suffixes will never help you
|
|
|
if you don’t have the spirit of curiosity burning inside of you.</p>
|
|
|
|
|
|
<p>I was speaking to someone from a journalism major at my school when the subject of hacking arose.
|
|
|
I expected her to know nothing about it, being a journalism student and all, but surprisingly she had something to say about it:</p>
|
|
|
|
|
|
<blockquote>
|
|
|
<p>“The best hackers are the ones who are curious.”</p>
|
|
|
</blockquote>
|
|
|
|
|
|
<p>That struck a cord with me.
|
|
|
It seems to me she has nailed down the difference between the students who care about grades,
|
|
|
and those who want to learn.
|
|
|
These are not necessarily mutually exclusive, but in my experience they often are due to the way education is structured.</p>
|
|
|
|
|
|
<h2 id="my-anecdote">My Anecdote</h2>
|
|
|
|
|
|
<p>In my second semester at SAIT Polytechnic, I took a class entitled <em>Emerging Trends In Technology</em>.
|
|
|
This class was probably the best class I have ever taken.
|
|
|
We had to combine two things:</p>
|
|
|
|
|
|
<ul>
|
|
|
<li><strong>Hard skills</strong>: learning a new hard skill like Angular, Django, or GPG encryption.</li>
|
|
|
<li><strong>Soft skills</strong>: public speaking and presentation of our ideas.</li>
|
|
|
</ul>
|
|
|
|
|
|
<p>Soft skills are not usually my area, but I can do public speaking.
|
|
|
I grew up quite religious, so public speaking was drilled into me young.
|
|
|
I liked to go off script and talk about interesting things I found along the way to the actual point.
|
|
|
My creativity was not usually encouraged.
|
|
|
That said, going off script is useful when teaching and presenting ideas;
|
|
|
it gives a natural air to your breath and an unquestionable confidence in your speech.</p>
|
|
|
|
|
|
<p>This is how we learn: in relationships.
|
|
|
Try explaining ancient Japanese history to a computer science major, or UNIX sockets to an English major and you’ll see what I mean.
|
|
|
If there is nothing for us to connect the knowledge to, it dissipates.</p>
|
|
|
|
|
|
<p>So why did I do so well in this class?</p>
|
|
|
|
|
|
<p>Our task for the semester was as follows:</p>
|
|
|
|
|
|
<ol>
|
|
|
<li>Learn a new subject (any <em>emerging trend in technology</em>) which you find fascinating.</li>
|
|
|
<li>Give a one minute introduction by week three.</li>
|
|
|
<li>Give a 10 minute non-technical overview by week 8.</li>
|
|
|
<li>Give a 20 minute technical explaination and demo by week 13.</li>
|
|
|
</ol>
|
|
|
|
|
|
<p>This is the only course I have ever taken which lets students’ imagination run wild.
|
|
|
Their presentation, their rules.
|
|
|
They treated the students like adults who know what they are doing.
|
|
|
What happened? Everyone stopped coming because “Oh no! Presentations!”?</p>
|
|
|
|
|
|
<p>No, exactly the opposite.
|
|
|
There was never more than one student missing.
|
|
|
Every single presentation was at least moderately interesting,
|
|
|
and most students were excited to come to that class.
|
|
|
You could see it in their faces, the way they carried themselves.
|
|
|
Every student picked something unique to their tastes, leaving every student more educated than before.</p>
|
|
|
|
|
|
<p>This class, unlike many others, encouraged the curiosity of the students.
|
|
|
It rewarded those who had unique interests and an ability to sell others on their ideas.</p>
|
|
|
|
|
|
<p>The curiosity and the grades were one.</p>
|
|
|
|
|
|
<h2 id="conclusion">Conclusion</h2>
|
|
|
|
|
|
<p>Although it’s nice to have a course where these goals align here and there, anyone who has been to collage or university can tell you that is far from the norm.</p>
|
|
|
|
|
|
<p>On the other hand, I never would have started this site if it wasn’t for that class alone.
|
|
|
So I thank you, Kitty Wong, for getting me started running my own “research blog” (?)</p></content><author><name></name></author><summary type="html">Curiosity is fundamental to a deep understanding of any subject. Masters, Ph.Ds, and other fancy name suffixes will never help you if you don’t have the spirit of curiosity burning inside of you.</summary></entry><entry><title type="html">Minesweeper Bomb Generation And Tile Revealing</title><link href="http://localhost:4000/2020/09/12/minesweeper/" rel="alternate" type="text/html" title="Minesweeper Bomb Generation And Tile Revealing" /><published>2020-09-12T00:00:00-06:00</published><updated>2020-09-12T00:00:00-06:00</updated><id>http://localhost:4000/2020/09/12/minesweeper</id><content type="html" xml:base="http://localhost:4000/2020/09/12/minesweeper/"><p>When I was creating a little Minesweeper game, I got confused at some points.
|
|
|
My bomb generation didn’t look quite right, and I for sure didn’t quite get the whole cascading tile reveal thing.
|
|
|
With a bit of internet research, I found what I was looking for.
|
|
|
I’ll explain it all in one place for my own research purposes.</p>
|
|
|
|
|
|
<h2 id="bomb-generation">Bomb Generation</h2>
|
|
|
|
|
|
<p>When I started this project I attempted to use a random bomb generator.
|
|
|
By this I mean on each square, before it gets generated, give it a one in 15 change of being a bomb.
|
|
|
Personally, I’m not sure why this never looked right.
|
|
|
Something about the layout of the bombs did not mimic the classic Minesweeper game.</p>
|
|
|
|
|
|
<p>After looking at some open source Minesweeper examples, I started to get the idea.
|
|
|
I wrote some mathematical statements describing the generation of bombs and how to get their x,y position from an appropriate number.
|
|
|
For those non-mathy people, don’t leave just yet;
|
|
|
there will be code equivalents to the math.</p>
|
|
|
|
|
|
<p>W and H are the width and height of the board respectively.</p>
|
|
|
|
|
|
<p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mn mathvariant="italic">0</mn><mo>≤</mo><mi>r</mi><mo>≤</mo><mtext>W</mtext><mo>×</mo><mtext>H</mtext></mrow><annotation encoding="application/x-tex">
|
|
|
\it 0 \leq r \leq \text W \times \text H
|
|
|
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8193em;vertical-align:-0.13597em;"></span><span class="mord"><span class="mord mathit">0</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">≤</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mord mathit">r</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">≤</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mord text"><span class="mord">W</span></span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">×</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mord text"><span class="mord">H</span></span></span></span></span></span></span>
|
|
|
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>x</mi><mo>=</mo><mi>r</mi><mtext> </mtext><mo lspace="0.22em" rspace="0.22em"><mrow><mi mathvariant="normal">m</mi><mi mathvariant="normal">o</mi><mi mathvariant="normal">d</mi></mrow></mo><mtext> </mtext><mtext>W</mtext></mrow><annotation encoding="application/x-tex">
|
|
|
\it x = r \bmod \text W
|
|
|
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.69444em;vertical-align:0em;"></span><span class="mord"><span class="mord mathit">x</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mord mathit">r</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mspace" style="margin-right:0.05555555555555555em;"></span><span class="mbin"><span class="mord"><span class="mord mathrm">m</span><span class="mord mathrm">o</span><span class="mord mathrm">d</span></span></span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mspace" style="margin-right:0.05555555555555555em;"></span><span class="mord text"><span class="mord">W</span></span></span></span></span></span></span>
|
|
|
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>y</mi><mo>=</mo><mrow><mo fence="true">⌊</mo><mfrac><mi>r</mi><mtext>H</mtext></mfrac><mo fence="true">⌋</mo></mrow></mrow><annotation encoding="application/x-tex">
|
|
|
\it y = \left\lfloor\frac{r}{\text H}\right\rfloor
|
|
|
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.8359999999999999em;vertical-align:-0.686em;"></span><span class="mord"><span class="mord mathit">y</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size2">⌊</span></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.10756em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord text"><span class="mord">H</span></span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathit">r</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.686em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span><span class="mclose delimcenter" style="top:0em;"><span class="delimsizing size2">⌋</span></span></span></span></span></span></span></span></p>
|
|
|
|
|
|
<p>The code equivalent to this in Python is below:</p>
|
|
|
|
|
|
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kn">import</span> <span class="nn">random</span>
|
|
|
<span class="c1"># r &lt;= 0 &lt;= W*H
|
|
|
</span><span class="n">r</span> <span class="o">=</span> <span class="n">random</span><span class="p">.</span><span class="n">randint</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="n">W</span><span class="o">*</span><span class="n">H</span><span class="p">)</span><span class="o">-</span><span class="mi">1</span>
|
|
|
|
|
|
<span class="c1"># x = r mod W
|
|
|
</span><span class="n">x</span> <span class="o">=</span> <span class="n">r</span> <span class="o">%</span> <span class="n">W</span>
|
|
|
|
|
|
<span class="c1"># y = floor(r/H); note the special syntax python has for this operation
|
|
|
</span><span class="n">y</span> <span class="o">=</span> <span class="n">r</span> <span class="o">//</span> <span class="n">H</span>
|
|
|
</code></pre></div></div>
|
|
|
|
|
|
<p>So that’s that, we can put this in a big ‘ol for loop and generate an arbitrary <em>n</em> number of bombs given a width and height of a Minesweeper board.</p>
|
|
|
|
|
|
<h2 id="cascading-tile-revealing">Cascading Tile Revealing</h2>
|
|
|
|
|
|
<p>This one is hard to describe;
|
|
|
I am adapting this from <a href="https://leetcode.com/problems/minesweeper/">leetcode.com</a>.
|
|
|
Whenever a player clicks a tile, the following logic should be used:</p>
|
|
|
|
|
|
<ol>
|
|
|
<li>If a mine is revealed, the game is over. (obviously)</li>
|
|
|
<li>If a tile with <em>no</em> adjacent mines is revealed, recursively reveal all eight adjacent tiles.</li>
|
|
|
<li>If a tile with one or more adjacent mines is revealed, display the number of mines next to it.</li>
|
|
|
</ol>
|
|
|
|
|
|
<p>Here is the code in Python for this algorithm.</p>
|
|
|
|
|
|
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">def</span> <span class="nf">reveal_square</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">,</span> <span class="n">board</span><span class="p">,</span> <span class="n">alread_revealed</span><span class="p">):</span>
|
|
|
<span class="c1"># if already checked
|
|
|
</span> <span class="k">if</span> <span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">)</span> <span class="ow">in</span> <span class="n">already_revealed</span><span class="p">:</span>
|
|
|
<span class="k">return</span>
|
|
|
<span class="c1"># if it's a bomb
|
|
|
</span> <span class="k">if</span> <span class="n">board</span><span class="p">[</span><span class="n">x</span><span class="p">][</span><span class="n">y</span><span class="p">]</span> <span class="o">==</span> <span class="s">'B'</span><span class="p">:</span>
|
|
|
<span class="n">you_lose</span><span class="p">()</span>
|
|
|
<span class="k">return</span>
|
|
|
<span class="c1"># if the bomb number is more than 0
|
|
|
</span> <span class="n">already_revealed</span><span class="p">.</span><span class="n">append</span><span class="p">((</span><span class="n">nx</span><span class="p">,</span> <span class="n">ny</span><span class="p">))</span>
|
|
|
|
|
|
<span class="c1"># from -1 to 1
|
|
|
</span> <span class="k">for</span> <span class="n">xd</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">):</span>
|
|
|
<span class="k">for</span> <span class="n">yd</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">):</span>
|
|
|
<span class="c1"># skip if it is this the center tile
|
|
|
</span> <span class="k">if</span> <span class="n">x</span><span class="o">+</span><span class="n">xd</span> <span class="o">==</span> <span class="n">x</span> <span class="ow">and</span> <span class="n">y</span><span class="o">+</span><span class="n">yd</span> <span class="o">==</span> <span class="n">y</span><span class="p">:</span>
|
|
|
<span class="k">continue</span>
|
|
|
<span class="c1"># recursively check the adjacent square
|
|
|
</span> <span class="n">reveal</span><span class="p">(</span><span class="n">x</span><span class="o">+</span><span class="n">xd</span><span class="p">,</span> <span class="n">y</span><span class="o">+</span><span class="n">yd</span><span class="p">,</span> <span class="n">board</span><span class="p">,</span> <span class="n">already_revealed</span><span class="p">)</span>
|
|
|
<span class="k">return</span> <span class="n">already_revealed</span>
|
|
|
</code></pre></div></div>
|
|
|
|
|
|
<p>This has no checks for valid squares, but it’s the general idea.
|
|
|
This function returns an array of tile coordinates which should be revealed.</p>
|
|
|
|
|
|
<h2 id="conclusion">Conclusion</h2>
|
|
|
|
|
|
<p>I wrote this because in the first place because I was writing my own Minesweeper game.
|
|
|
I hope that this helps you with getting the general idea of a Minesweeper game.
|
|
|
The completed version of this game is available on my <a href="https://lamegames.tait.tech/">lamegames</a> site.
|
|
|
Let me know what you think!</p>
|
|
|
|
|
|
<p>Happy hacking!</p></content><author><name></name></author><summary type="html">When I was creating a little Minesweeper game, I got confused at some points. My bomb generation didn’t look quite right, and I for sure didn’t quite get the whole cascading tile reveal thing. With a bit of internet research, I found what I was looking for. I’ll explain it all in one place for my own research purposes.</summary></entry><entry><title type="html">lamegames.tait.tech</title><link href="http://localhost:4000/2020/09/09/lamegames/" rel="alternate" type="text/html" title="lamegames.tait.tech" /><published>2020-09-09T00:00:00-06:00</published><updated>2020-09-09T00:00:00-06:00</updated><id>http://localhost:4000/2020/09/09/lamegames</id><content type="html" xml:base="http://localhost:4000/2020/09/09/lamegames/"><p>This is an announcement for a new project of mine:
|
|
|
<a href="https://lamegames.tait.tech">lamegames.tait.tech</a>.</p>
|
|
|
|
|
|
<p>This is something I’m really excited to work on!</p>
|
|
|
|
|
|
<p>Right now, I’ve just got a rock-paper-scissors game.
|
|
|
A chat function, and a few simple card games to come.</p>
|
|
|
|
|
|
<p>Check out the repository on my <a href="https://github.com/TTWNO/lamegames.io">Github</a>.</p></content><author><name></name></author><summary type="html">This is an announcement for a new project of mine: lamegames.tait.tech.</summary></entry><entry><title type="html">How to Solve The Django Deployment Puzzle</title><link href="http://localhost:4000/2020/08/18/django-deployment/" rel="alternate" type="text/html" title="How to Solve The Django Deployment Puzzle" /><published>2020-08-18T00:00:00-06:00</published><updated>2020-08-18T00:00:00-06:00</updated><id>http://localhost:4000/2020/08/18/django-deployment</id><content type="html" xml:base="http://localhost:4000/2020/08/18/django-deployment/"><p>A few days ago I had a Django project I wanted to put on a real server.
|
|
|
This project is still in its infancy, but I thought it would be nice to put it on my resume and show my friends.
|
|
|
Little did I know the headache coming my way.
|
|
|
Here are some tips to help you not make the same mistakes as me.</p>
|
|
|
|
|
|
<h3 id="asgi-servers">ASGI Servers</h3>
|
|
|
|
|
|
<p>Because my project used the ASGI (Asynchronous webServer Gateway Interface),
|
|
|
I needed to find a good production ASGI server to handle all the incoming requests.
|
|
|
The best thing I found was <a href="http://www.uvicorn.org/">uvicorn</a>.
|
|
|
It focuses on speed, which is a priority, especially when using the ASGI protocol.</p>
|
|
|
|
|
|
<p>To run uvicorn on the command line for testing purposes, use something like the following:</p>
|
|
|
|
|
|
<pre class="terminal">
|
|
|
$ uvicorn --reload myapp.asgi:application
|
|
|
</pre>
|
|
|
|
|
|
<p>The <code class="language-plaintext highlighter-rouge">--reload</code> option says to reload the server if any of the files get updated.
|
|
|
This is not recommended in production.
|
|
|
Sadly, I thought this meant I would need to do a hard shutdown of the server process every time I wanted to update.
|
|
|
This turned out to not be the case.</p>
|
|
|
|
|
|
<h3 id="workload-managers">Workload Managers</h3>
|
|
|
|
|
|
<p>There is another equine-named program called <a href="https://gunicorn.org/">gunicorn</a>
|
|
|
which can hold a number of processes under its control.
|
|
|
An interesting feature of <code class="language-plaintext highlighter-rouge">gunicorn</code> is that it will gracefully switch from an old to a new deployment,
|
|
|
replacing the subprocesses one-by-one and eventually having only the new deployment active on all subprocesses.
|
|
|
The greatest part? Zero down time.
|
|
|
The server keeps any old processes open if there is communication with them,
|
|
|
then shift and new connections to the new deployment.
|
|
|
This was a very cool feature I wanted to take advantage of.</p>
|
|
|
|
|
|
<p>“Now hold on!” you might protest.
|
|
|
“gunicorn is a WSGI server!” … oh you got me there!
|
|
|
Yes, that’s right, <code class="language-plaintext highlighter-rouge">gunicorn</code> is paired with <code class="language-plaintext highlighter-rouge">uvicorn</code> to serve my files.</p>
|
|
|
|
|
|
<h3 id="systemd">systemd</h3>
|
|
|
|
|
|
<p>Love it or hate it, the majority of Linux distributions use the <code class="language-plaintext highlighter-rouge">systemd</code> init system.
|
|
|
I decided it would be very convenient to have a .service file for my Django application to run automatically at boot.
|
|
|
<code class="language-plaintext highlighter-rouge">Systemd</code> allows me to do this with a file like the following one I stored in <code class="language-plaintext highlighter-rouge">/lib/systemd/system/lamegames.service</code>.</p>
|
|
|
|
|
|
<pre class="file">
|
|
|
[Unit]
|
|
|
Description=Gunicorn/Uvicorn (lamegames.io)
|
|
|
|
|
|
[Service]
|
|
|
WorkingDirectory=/home/lame/lamegames.io
|
|
|
Type=simple
|
|
|
RemainAfterExit=yes
|
|
|
ExecStart=/home/lame/lamegames.io/env/bin/gunicorn lamegames.asgi:application -w 2 -k uvicorn.workers.UvicornWorker
|
|
|
ExecStop=/bin/kill -HUP $MAINPID
|
|
|
Restart=always
|
|
|
|
|
|
[Install]
|
|
|
WantedBy=multi-user.target
|
|
|
</pre>
|
|
|
|
|
|
<h3 id="nginx">nginx</h3>
|
|
|
|
|
|
<p>NGINX (pronounced engine-X) is a performance web server designed for speed and simplicity.
|
|
|
For the front facing side of the site, I do need a production web server like nginx.
|
|
|
Gunicorn simply doesn’t need all the features that nginx provides, but I do.
|
|
|
To configure my nginx installation, I used the following few directives to:</p>
|
|
|
|
|
|
<ol>
|
|
|
<li>Redirect most traffic towards the gunicorn server.</li>
|
|
|
<li>Redirect statically served files (CSS, JS, images) to the directory specified in the STATIC_ROOT variable of my <code class="language-plaintext highlighter-rouge">settings.py</code> file.</li>
|
|
|
<li>Use TLS to enable https://</li>
|
|
|
</ol>
|
|
|
|
|
|
<p>Serving the static files from nginx as opposed to the <code class="language-plaintext highlighter-rouge">gunicorn</code> server is necessary.
|
|
|
Gunicorn and other production A/WSGI web server will not set the proper MIME type over TLS.
|
|
|
This will cause your browser to not load the Javascript/CSS.</p>
|
|
|
|
|
|
<p>This is the important part of my nginx config.</p>
|
|
|
|
|
|
<pre class="file">
|
|
|
server {
|
|
|
location / {
|
|
|
proxy_set_header Host $http_host;
|
|
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
|
proxy_set_header X-Forwarded-Proto $scheme;
|
|
|
# these two lines ensure that WebSocket, and HTTP2 connection are forwarded correctly
|
|
|
proxy_set_header Upgrade $http_upgrade;
|
|
|
proxy_set_header Connection "Upgrade";
|
|
|
proxy_redirect off;
|
|
|
proxy_buffering off;
|
|
|
# this forwards all traffic to the local server on port 8000
|
|
|
proxy_pass http://localhost:8000;
|
|
|
}
|
|
|
|
|
|
# This forwards all static requests to Django's STATIC_ROOT set in settings.py; it is generated using the collectstatic command.
|
|
|
location /static {
|
|
|
autoindex on;
|
|
|
alias /home/lame/lamegames.io/static_generated;
|
|
|
}
|
|
|
}
|
|
|
</pre>
|
|
|
|
|
|
<h3 id="setup">Setup</h3>
|
|
|
|
|
|
<p>After all that, I was able to do the following:</p>
|
|
|
|
|
|
<pre class="terminal">
|
|
|
# systemctl enable lamegames
|
|
|
</pre>
|
|
|
|
|
|
<p>This enabled my <code class="language-plaintext highlighter-rouge">gunicorn</code> server to run once the server started.
|
|
|
NGINX is that way be default.</p>
|
|
|
|
|
|
<p>And tada! You now have a working Django project on a production server!</p>
|
|
|
|
|
|
<h4 id="notes">Notes</h4>
|
|
|
|
|
|
<ul>
|
|
|
<li>If using ws:// websockets, change them to wss:// for secure web sockets.</li>
|
|
|
<li>Make sure to use channels.routing.get_default_application() instead of django.get_asgi_application() if your’re wanting to use channels/redis WebSockets.</li>
|
|
|
</ul></content><author><name></name></author><summary type="html">A few days ago I had a Django project I wanted to put on a real server. This project is still in its infancy, but I thought it would be nice to put it on my resume and show my friends. Little did I know the headache coming my way. Here are some tips to help you not make the same mistakes as me.</summary></entry></feed> |
